/*
* Self-hosted webfonts. The comp loaded these from fonts.googleapis.com via a
* render-blocking stylesheet on every page -- the one performance item Josh
* left for the WP build. Same faces, same unicode ranges, same font-display,
* served from this origin so there is no third-party connection in the
* critical path.
*
* Nunito Sans and Caveat are variable fonts: several weights legitimately
* point at one file. Latin + latin-ext only (cyrillic/vietnamese dropped).
* All three families are OFL-licensed, so self-hosting is permitted.
*/
@font-face {
font-family: 'Alfa Slab One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/alfa-slab-one-normal-latin-ext-7e5141.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: 'Alfa Slab One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/alfa-slab-one-normal-latin-0d51ac.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;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/caveat-normal-latin-ext-6b2267.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: 'Caveat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/caveat-normal-latin-4230ff.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;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/caveat-normal-latin-ext-6b2267.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: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/caveat-normal-latin-4230ff.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;
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-italic-latin-ext-323518.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: 'Nunito Sans';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-italic-latin-85b4b3.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;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-ext-619281.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: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-9ad6ba.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;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-ext-619281.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: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-9ad6ba.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;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-ext-619281.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: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-9ad6ba.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;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-ext-619281.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: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/nunito-sans-normal-latin-9ad6ba.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;
}
/* ==========================================================================
RESET & BASE
========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--text); background: var(--warm-white); line-height: 1.65; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: all 0.25s ease; }
ul, ol { list-style: none; }
button { border: none; cursor: pointer; font-family: inherit; background: none; }
input, select, textarea { font-family: inherit; }
/* ==========================================================================
TOKENS (sampled from the real Lone Star logo, PIL pixel-average)
========================================================================== */
:root {
--navy: #03215E;
--navy-dark: #021640;
--navy-light: #0B3480;
--red: #AF1215;
--red-dark: #8A0D10;
--red-light: #D33338;
--cream: #FBF6EC;
--warm-white: #FFFDF9;
--sand: #EEE2C8;
--charcoal: #1A1811;
--text: #26241f;
--text-light: #6b6255;
--white: #FFFFFF;
--star-white: #F4F1EA;
--font-display: 'Alfa Slab One', 'Georgia', serif;
--font-script: 'Caveat', cursive;
--font-body: 'Nunito Sans', -apple-system, sans-serif;
--container: 1366px;
--container-narrow: 800px;
--nav-height: 88px;
--topbar-h: 41px;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 4px 24px rgba(3, 33, 94, 0.10), 0 1px 4px rgba(3, 33, 94, 0.06);
--shadow-lg: 0 16px 48px rgba(3, 33, 94, 0.16), 0 4px 16px rgba(3, 33, 94, 0.08);
--shadow-red: 0 10px 28px rgba(175, 18, 21, 0.30);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.eyebrow {
font-family: var(--font-script);
font-size: 26px;
font-weight: 600;
color: var(--red);
display: inline-block;
margin-bottom: 6px;
}
.label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--navy);
display: inline-flex;
align-items: center;
gap: 10px;
}
.label::before { content: ''; width: 32px; height: 3px; background: var(--red); flex-shrink: 0; }
.label--center { justify-content: center; }
.label--center::before, .label--center::after {
content: ''; width: 32px; height: 3px; background: var(--red);
color: inherit; font-size: 0; line-height: 0; flex-shrink: 0; transform: none;
}
.label--white { color: var(--star-white); }
.label--white::before, .label--white::after { background: var(--red-light); }
/* Ghosted Texas-star watermark for navy bands */
.star-wm::after {
content: ''; position: absolute; width: 360px; height: 360px; right: -80px; top: -60px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 1.5l2.6 6.9 7.4.3-5.8 4.6 2 7.1-6.2-4.1-6.2 4.1 2-7.1L1.9 8.7l7.4-.3z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.05; pointer-events: none;
}
.section-heading {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--navy);
text-transform: uppercase;
}
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 34px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 10px;
transition: all 0.25s var(--ease);
white-space: nowrap;
}
.btn-primary { background: var(--red); color: var(--white); box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(175,18,21,0.38); }
.btn-white { background: var(--white); color: var(--navy); border: 2px solid var(--white); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.btn-white:hover { background: var(--cream); transform: translateY(-3px); }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 10px 28px rgba(3,33,94,0.28); }
.btn-navy:hover { background: var(--navy-dark); transform: translateY(-3px); }
.btn-outline-navy { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
/* Call button: icon chip + stacked label, reads as a phone control not a generic pill */
.btn-call {
display: inline-flex; align-items: center; gap: 14px;
background: var(--white); color: var(--navy);
padding: 11px 24px 11px 12px; border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.22);
transition: all 0.25s var(--ease);
}
.btn-call:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,0.28); }
.btn-call__icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
background: var(--red); color: var(--white);
display: flex; align-items: center; justify-content: center;
}
.btn-call__icon svg { width: 19px; height: 19px; }
.btn-call__text { font-size: 21px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.15; }
.btn-call__text small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
/* ==========================================================================
HEADER: red accent line + navy trust topbar + main nav
========================================================================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.topbar {
background: var(--navy); border-top: 3px solid var(--red);
color: var(--star-white); font-size: 12.5px; font-weight: 600;
overflow: hidden; max-height: var(--topbar-h);
transition: max-height 0.35s var(--ease), border-top-width 0.35s var(--ease);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 38px; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.85); white-space: nowrap; }
.topbar__item b { color: var(--white); }
.topbar__item svg { width: 13px; height: 13px; color: var(--red-light); flex-shrink: 0; }
.topbar__stars { color: #F5B301; font-size: 11px; letter-spacing: 1.5px; }
.topbar__socials { display: flex; gap: 6px; }
.topbar__socials a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--white); }
.topbar__socials a:hover { background: var(--red); }
.header.scrolled .topbar { max-height: 0; border-top-width: 0; }
.nav {
height: var(--nav-height);
background: rgba(255, 253, 249, 0.96);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border-bottom: 1px solid rgba(238, 226, 200, 0);
transition: all 0.35s var(--ease);
}
.header.scrolled .nav { height: 68px; background: rgba(255, 253, 249, 0.98); border-bottom-color: rgba(238, 226, 200, 0.7); box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.nav__logo img { height: 48px; width: auto; transition: height 0.3s ease; }
.header.scrolled .nav__logo img { height: 38px; }
.nav__links { display: flex; gap: 4px; align-items: center; }
.nav__item { position: relative; }
.nav__item > a, .nav__item > button {
position: relative;
display: flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
color: var(--navy); padding: 12px 12px;
}
.nav__item > a::after, .nav__item > button::after {
content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px;
background: var(--red); border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 0.25s var(--ease);
}
.nav__item > a:hover, .nav__item > button:hover, .nav__item:hover > button { color: var(--red); }
.nav__item > a:hover::after, .nav__item:hover > button::after { transform: scaleX(1); }
.nav__item svg.chev { width: 11px; height: 11px; transition: transform 0.2s ease; }
.nav__item:hover svg.chev { transform: rotate(180deg); }
.nav__dropdown {
position: absolute; top: calc(100% + 8px); left: 0;
background: var(--white); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
min-width: 290px; padding: 14px 12px 10px;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: all 0.22s var(--ease);
border-top: 3px solid var(--red);
}
.nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-label {
display: flex; align-items: center; gap: 7px;
padding: 0 14px 10px; font-size: 10.5px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase; color: var(--text-light);
}
.nav__dropdown-label::before { content: '\2605'; color: var(--red); font-size: 10px; line-height: 1; }
.nav__dropdown a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--text); border-radius: 7px;
}
.nav__dropdown a::after {
content: '\2192'; color: var(--red); font-weight: 600;
opacity: 0; transform: translateX(-4px); transition: all 0.18s var(--ease);
}
.nav__dropdown a:hover { background: var(--cream); color: var(--red); }
.nav__dropdown a:hover::after { opacity: 1; transform: translateX(0); }
.nav__dropdown-cta { margin: 8px 2px 2px; border-top: 1px solid var(--sand); padding: 10px 14px 6px; }
.nav__dropdown-cta a { padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--red); justify-content: flex-start; }
.nav__dropdown-cta a::after { content: '\2192'; opacity: 1; transform: none; }
.nav__dropdown-cta a:hover { background: none; color: var(--red-dark); }
.nav__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav__phone-block { text-align: right; line-height: 1.2; }
.nav__phone-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
.nav__phone { font-size: 17px; font-weight: 600; color: var(--navy); }
.nav__phone:hover { color: var(--red); }
.nav__cta { padding: 13px 22px; font-size: 13px; gap: 8px; }
.nav__cta svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav__hamburger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
}
.nav__hamburger span { display: block; height: 3px; width: 24px; background: var(--navy); border-radius: 2px; transition: all 0.3s ease; margin: 0 auto; }
.nav__hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ==========================================================================
MOBILE FLYOUT DRAWER
========================================================================== */
.drawer-overlay {
position: fixed; inset: 0; background: rgba(3,22,64,0.55); z-index: 1050;
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 88vw); z-index: 1060;
background: linear-gradient(172deg, var(--navy) 0%, var(--navy-dark) 100%);
border-top: 3px solid var(--red);
visibility: hidden;
transform: translateX(100%);
transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
display: flex; flex-direction: column;
box-shadow: -12px 0 40px rgba(0,0,0,0.3);
}
.drawer::after {
content: ''; position: absolute; width: 280px; height: 280px; right: -70px; bottom: 120px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M12 1.5l2.6 6.9 7.4.3-5.8 4.6 2 7.1-6.2-4.1-6.2 4.1 2-7.1L1.9 8.7l7.4-.3z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.04; pointer-events: none;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; }
.drawer__logo { height: 38px; width: auto; display: block; }
.drawer__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.drawer__close:hover { background: var(--red); }
.drawer__body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; position: relative; z-index: 1; }
.drawer__group { border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 8px 8px 0 0; transition: background 0.25s ease; }
.drawer__group.open { background: rgba(255,255,255,0.05); box-shadow: inset 3px 0 0 var(--red); }
.drawer__group-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 18px 16px; color: var(--white);
font-family: var(--font-display); font-weight: 400; font-size: 17px;
text-transform: uppercase; letter-spacing: 0.8px;
}
.drawer__group.open .drawer__group-toggle { color: #F3C77A; }
.drawer__group-toggle svg { width: 14px; height: 14px; transition: transform 0.3s ease; flex-shrink: 0; }
.drawer__group.open .drawer__group-toggle svg { transform: rotate(180deg); color: var(--red-light); }
.drawer__sub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.drawer__group.open .drawer__sub { max-height: 480px; }
.drawer__sub a { position: relative; display: block; padding: 12px 16px 12px 36px; color: rgba(255,255,255,0.82); font-size: 15px; font-weight: 600; }
.drawer__sub a::before { content: '\2605'; position: absolute; left: 17px; top: 50%; transform: translateY(-50%); font-size: 8px; color: var(--red-light); }
.drawer__sub a:hover { color: var(--white); }
.drawer__flat a {
display: block; padding: 18px 16px; color: var(--white);
font-family: var(--font-display); font-weight: 400; font-size: 17px;
text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.drawer__flat a:hover { color: #F3C77A; }
.drawer__rating { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 16px 6px; font-size: 13.5px; font-weight: 600; color: var(--white); }
.drawer__rating-stars { color: #F5B301; font-size: 13px; letter-spacing: 2px; }
.drawer__rating span b { color: #F3C77A; }
.drawer__footer { flex-shrink: 0; padding: 18px 24px 26px; background: rgba(2,15,45,0.65); border-top: 1px solid rgba(255,255,255,0.12); position: relative; z-index: 1; }
.drawer__footer .btn-primary { width: 100%; justify-content: center; margin-bottom: 12px; }
.drawer__call { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--white); font-size: 19px; font-weight: 600; padding: 12px 0; border: 2px solid rgba(255,255,255,0.25); border-radius: 10px; margin-bottom: 14px; }
.drawer__call:hover { border-color: var(--red-light); }
.drawer__meta { text-align: center; color: rgba(255,255,255,0.6); font-size: 12.5px; font-weight: 600; }
/* ==========================================================================
HERO
========================================================================== */
.hero {
position: relative;
min-height: min(92vh, 830px); /* capped: 92vh alone kept growing the empty sky above the bottom-anchored content on tall screens (300px+ at 1150px tall). 830px is what 92vh resolves to at a 900px-tall window, so nothing changes at or below that height. */
display: flex; flex-direction: column; justify-content: flex-end;
padding-top: calc(var(--nav-height) + var(--topbar-h));
overflow: hidden;
}
.hero__bg {
position: absolute; inset: 0; z-index: 0;
}
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero__scrim {
position: absolute; inset: 0; z-index: 1;
/* Directional: dark only where the type sits, so the uplit house stays bright */
background: linear-gradient(90deg, rgba(2,15,45,0.86) 0%, rgba(2,15,45,0.68) 26%, rgba(2,15,45,0.34) 52%, rgba(2,15,45,0) 72%),
linear-gradient(180deg, rgba(2,15,45,0.34) 0%, rgba(2,15,45,0) 22%, rgba(2,15,45,0) 72%, rgba(2,15,45,0.42) 100%);
}
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) 400px; gap: 56px; align-items: end; padding-top: 90px; padding-bottom: 64px; }
.hero__eyebrow { font-family: var(--font-script); font-size: 30px; font-weight: 600; color: #F3C77A; margin-bottom: 10px; display: block; }
.hero__kicker {
font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 3px;
text-transform: uppercase; color: var(--star-white); opacity: 0.95; display: block; margin-bottom: 18px;
text-shadow: 0 2px 10px rgba(2,15,45,0.7);
}
.hero__title {
font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(34px, 4.5vw, 58px); line-height: 1.06; color: var(--white);
/* local contrast protection so the photo can stay bright behind the type */
text-shadow: 0 2px 10px rgba(2,15,45,0.65), 0 6px 34px rgba(2,15,45,0.45);
max-width: 680px; margin-bottom: 22px;
}
.hero__sub { font-size: 16px; font-weight: 600; color: var(--star-white); max-width: 520px; margin-bottom: 28px; }
.underline-star {
white-space: nowrap;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 35 3.5, 75 2.5, 117 6.5' fill='none' stroke='%23D33338' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.14em;
padding-bottom: 0.16em;
}
.hero__proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Google review badge */
.gbadge {
background: var(--white); border-radius: 14px; box-shadow: var(--shadow-lg);
padding: 12px 20px 12px 16px; display: inline-flex; align-items: center; gap: 14px;
transition: all 0.25s var(--ease);
}
.gbadge:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(3,33,94,0.22); }
.gbadge__g { width: 30px; height: 30px; flex-shrink: 0; }
.gbadge__num { font-family: var(--font-display); font-size: 25px; line-height: 1; color: var(--navy); }
.gbadge__stars { color: #FBBC05; font-size: 14px; letter-spacing: 2px; line-height: 1; margin-bottom: 4px; }
.gbadge__label { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-light); }
.gbadge__divider { width: 1px; align-self: stretch; background: var(--sand); }
.hero-form { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 30px 28px 24px; }
.hero-form__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--navy); text-transform: uppercase; margin-bottom: 6px; }
.hero-form__sub { font-size: 16px; font-weight: 600; color: var(--text-light); margin-bottom: 18px; }
.hero-form .form-group { margin-bottom: 12px; }
.hero-form .form-group input, .hero-form .form-group select { padding: 12px 14px; font-size: 14px; }
.hero-form .form-submit { padding: 16px; font-size: 14px; }
.hero-form__call { text-align: center; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--text-light); }
.hero-form__call a { color: var(--navy); font-weight: 600; }
.hero-form__call a:hover { color: var(--red); }
/* ==========================================================================
TRUST BADGE BAR
========================================================================== */
.trustbar { background: var(--white); border-bottom: 1px solid var(--sand); padding: 34px 0; }
.trustbar__row { display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.trustbar__item { display: flex; align-items: center; flex-shrink: 0; }
.trustbar__item img { height: 78px; width: auto; object-fit: contain; }
.trustbar__licence { font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-light); white-space: nowrap; }
/* ==========================================================================
NUMBERED SERVICES (canyon-directed pattern)
========================================================================== */
.numbered { background: var(--cream); padding: 100px 0; }
.numbered__top { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.numbered__heading { font-size: clamp(30px, 4vw, 46px); margin-top: 10px; }
.numbered__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; margin-bottom: 48px; }
.numbered__item { display: flex; gap: 22px; }
.numbered__num { font-family: var(--font-display); font-size: 44px; color: rgba(175,18,21,0.28); line-height: 1; flex-shrink: 0; }
.numbered__body h3 { font-family: var(--font-display); font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.3px; }
.numbered__body p { font-size: 16px; color: var(--text-light); line-height: 1.65; }
.numbered__cta { text-align: center; }
/* ==========================================================================
PROBLEM / SOLUTION (process)
========================================================================== */
.process { background: var(--white); padding: 100px 0; }
.process__top { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.process__heading { font-size: clamp(30px, 4vw, 46px); margin-top: 10px; }
.process__text { font-size: 16px; color: var(--text-light); margin-top: 18px; }
.process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.process__step { text-align: center; padding: 40px 28px; background: var(--cream); border-radius: var(--radius); position: relative; }
.process__step-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-display); font-size: 22px; }
.process__step h3 { font-family: var(--font-display); font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 10px; }
.process__step p { font-size: 16px; color: var(--text-light); }
/* ==========================================================================
SERVICES GRID
========================================================================== */
.services { background: var(--cream); padding: 100px 0; }
.services__top { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.services__heading { font-size: clamp(30px, 4vw, 46px); margin-top: 10px; }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.service-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s var(--ease); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card__img { height: 180px; overflow: hidden; position: relative; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-card__img img { transform: scale(1.06); }
.service-card__body { padding: 22px; }
.service-card__body h3 { font-family: var(--font-display); font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.2px; }
.service-card__body p { font-size: 16px; color: var(--text-light); line-height: 1.55; margin-bottom: 12px; }
.service-card__link { font-size: 12.5px; font-weight: 600; color: var(--red); letter-spacing: 0.4px; text-transform: uppercase; }
/* ==========================================================================
WATERWISE OFFER CARD
========================================================================== */
.waterwise {
margin-top: 52px; position: relative; overflow: hidden;
background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 100%);
border-radius: var(--radius); padding: 42px 46px;
display: flex; align-items: center; justify-content: space-between; gap: 36px;
box-shadow: var(--shadow-lg);
}
.waterwise__eyebrow { font-family: var(--font-script); font-size: 27px; font-weight: 600; color: #F3C77A; display: block; margin-bottom: 4px; }
.waterwise__heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.15; color: var(--white); text-transform: uppercase; margin-bottom: 10px; }
.waterwise__text { color: var(--star-white); font-size: 16px; max-width: 600px; }
.waterwise .btn { flex-shrink: 0; }
/* ==========================================================================
COMMERCIAL / HOA BAND
========================================================================== */
.commercial { background: var(--navy); padding: 100px 0; position: relative; overflow: hidden; }
.commercial::before {
content: ''; position: absolute; inset: 0; opacity: 0.08;
background-image: radial-gradient(circle, var(--white) 1.5px, transparent 1.5px);
background-size: 26px 26px;
}
.commercial__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.commercial__heading { font-size: clamp(28px, 4vw, 42px); color: var(--white); margin-top: 10px; margin-bottom: 18px; }
.commercial__text { color: var(--star-white); font-size: 16px; margin-bottom: 30px; }
.commercial__card { background: var(--white); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-lg); }
.commercial__card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 18px; }
.commercial__list { display: grid; gap: 13px; }
.commercial__item { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; font-weight: 600; color: var(--text); }
.commercial__item svg { width: 19px; height: 19px; color: var(--red); flex-shrink: 0; margin-top: 1px; }
/* ==========================================================================
WHY CHOOSE US
========================================================================== */
.whyus { background: var(--white); padding: 100px 0; }
.whyus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.whyus__heading { font-size: clamp(30px, 4vw, 44px); margin-top: 10px; margin-bottom: 20px; }
.whyus__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 28px; }
.whyus__item { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; color: var(--text); }
.whyus__item svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; margin-top: 1px; }
.whyus__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.whyus__photo img { width: 100%; height: 480px; object-fit: cover; }
.whyus__photo-badge {
position: absolute; left: 24px; bottom: 24px; background: var(--white); border-radius: var(--radius-sm);
padding: 14px 20px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px;
}
.whyus__photo-badge img { height: 30px; width: auto; }
.whyus__photo-badge span { font-size: 12px; font-weight: 600; color: var(--navy); max-width: 130px; line-height: 1.3; }
/* ==========================================================================
SERVICE AREAS
========================================================================== */
.areas { background: var(--navy); padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.areas::before {
content: ''; position: absolute; inset: 0; opacity: 0.08;
background-image: radial-gradient(circle, var(--white) 1.5px, transparent 1.5px);
background-size: 26px 26px;
}
.areas__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.areas__heading { font-size: clamp(28px, 4vw, 42px); color: var(--white); margin-top: 10px; }
.areas__text { color: var(--star-white); font-size: 16px; margin-top: 16px; margin-bottom: 36px; }
.areas__chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.areas__chip { display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; color: var(--white); font-size: 14px; font-weight: 600; }
.areas__chip svg { width: 15px; height: 15px; color: var(--red-light); }
/* ==========================================================================
ABOUT
========================================================================== */
.about { background: var(--cream); padding: 100px 0; }
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.about__photos { position: relative; }
.about__photo-main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about__photo-main img { width: 100%; height: 460px; object-fit: cover; object-position: top; }
.about__photo-sub { position: absolute; right: -30px; bottom: -30px; width: 46%; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--white); }
.about__photo-sub img { width: 100%; height: 160px; object-fit: cover; }
.about__heading { font-size: clamp(30px, 4vw, 44px); margin-top: 10px; margin-bottom: 20px; }
.about__name { font-family: var(--font-display); font-size: 20px; color: var(--red); text-transform: uppercase; margin-bottom: 4px; }
.about__role { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 22px; }
.about__text { font-size: 16px; color: var(--text-light); margin-bottom: 16px; line-height: 1.7; }
.about__creds { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about__cred { padding: 9px 16px; background: var(--white); border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow); }
/* ==========================================================================
REVIEWS
========================================================================== */
.reviews { background: var(--white); padding: 100px 0; }
.reviews__top { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.reviews__heading { font-size: clamp(30px, 4vw, 44px); margin-top: 10px; }
.reviews__badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; background: var(--cream); padding: 12px 22px; border-radius: 100px; }
.reviews__badge-stars { color: #F0A500; font-size: 18px; letter-spacing: 2px; }
.reviews__badge-text { font-size: 14px; font-weight: 600; color: var(--navy); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: var(--cream); border-radius: var(--radius); padding: 28px; }
.review-card__stars { color: #F0A500; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.review-card__quote { font-size: 14.5px; color: var(--text); line-height: 1.6; margin-bottom: 18px; }
.review-card__name { font-family: var(--font-display); font-size: 14px; color: var(--navy); text-transform: uppercase; }
.review-card__city { font-size: 12.5px; color: var(--text-light); font-weight: 600; }
.reviews__link { text-align: center; margin-top: 40px; }
/* ==========================================================================
FAQ
========================================================================== */
.faq { background: var(--cream); padding: 100px 0; }
.faq__top { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.faq__heading { font-size: clamp(30px, 4vw, 44px); margin-top: 10px; }
.faq__list { max-width: 820px; margin: 0 auto; }
.faq__item { background: var(--white); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow); }
.faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; font-size: 16px; font-weight: 600; color: var(--navy); text-align: left; }
.faq__question:hover { color: var(--red); }
.faq__icon { font-size: 22px; color: var(--red); flex-shrink: 0; transition: transform 0.3s ease; }
.faq__item.active .faq__icon { transform: rotate(45deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq__item.active .faq__answer { max-height: 520px; }
.faq__answer-inner { padding: 0 26px 24px; font-size: 16px; color: var(--text-light); line-height: 1.65; }
/* ==========================================================================
CTA FORM
========================================================================== */
.cta-form { background: linear-gradient(168deg, var(--navy) 0%, var(--navy-dark) 100%); padding: 100px 0; position: relative; overflow: hidden; }
.cta-form::before { content: ''; position: absolute; inset: 0; opacity: 0.06; background-image: radial-gradient(circle, var(--white) 1.5px, transparent 1.5px); background-size: 26px 26px; }
.cta-form__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.cta-form__script { font-family: var(--font-script); font-size: 30px; font-weight: 600; color: #F3C77A; display: block; margin-top: 14px; }
.cta-form__heading { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.12; font-size: clamp(30px, 3.4vw, 42px); color: var(--white); margin-top: 8px; margin-bottom: 18px; }
.cta-form__text { color: var(--star-white); font-size: 16px; margin-bottom: 26px; }
.cta-form__points { display: grid; gap: 13px; margin-bottom: 34px; }
.cta-form__point { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,0.92); font-size: 15px; font-weight: 600; }
.cta-form__point svg { width: 19px; height: 19px; color: var(--red-light); flex-shrink: 0; margin-top: 1px; }
.cta-form__call-card {
display: inline-flex; align-items: center; gap: 16px;
border: 2px solid rgba(255,255,255,0.22); border-radius: 14px; padding: 16px 26px 16px 18px;
transition: all 0.25s var(--ease);
}
.cta-form__call-card:hover { border-color: var(--red-light); transform: translateY(-2px); }
.cta-form__call-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-red); }
.cta-form__call-icon svg { width: 20px; height: 20px; }
.cta-form__call-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.cta-form__call-num { display: block; font-size: 23px; font-weight: 600; color: var(--white); line-height: 1.25; }
.form-card { background: var(--white); border-radius: var(--radius); padding: 34px 36px 30px; box-shadow: var(--shadow-lg); border-top: 4px solid var(--red); }
.form-card__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--navy); text-transform: uppercase; margin-bottom: 4px; }
.form-card__sub { font-size: 16px; font-weight: 600; color: var(--text-light); margin-bottom: 20px; }
.form-card__note { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-light); margin-top: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 13px 16px; border: 2px solid var(--sand); border-radius: 9px; font-size: 14.5px; color: var(--text); background: var(--cream);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--red); background: var(--white); }
.form-submit { width: 100%; padding: 18px; font-size: 15px; margin-top: 6px; justify-content: center; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success.show { display: block; }
.form-success h3 { font-family: var(--font-display); color: var(--navy); font-size: clamp(17px, 0.35vw + 15.6px, 19px); margin-bottom: 10px; text-transform: uppercase; }
/* ==========================================================================
FOOTER
========================================================================== */
.footer { background: var(--charcoal); color: var(--star-white); }
.footer__cta-band { background: linear-gradient(120deg, var(--red-dark) 0%, var(--red) 55%); padding: 56px 0; position: relative; overflow: hidden; }
.footer__cta-band .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; position: relative; z-index: 1; }
.footer__cta-script { font-family: var(--font-script); font-size: 28px; font-weight: 600; color: #FFE0AE; display: block; margin-bottom: 4px; }
.footer__cta-heading { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); color: var(--white); text-transform: uppercase; }
.footer__cta-sub { color: var(--star-white); font-size: 15px; margin-top: 6px; }
.footer__cta-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__cta-phone { color: var(--white); font-weight: 600; font-size: 18px; }
.footer__trust { padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__trust-row { display: flex; align-items: center; justify-content: center; gap: 52px; flex-wrap: wrap; }
.footer__trust-row img { height: 70px; width: auto; }
.footer__main { padding: 64px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 0.9fr 1.1fr; gap: 36px; }
.footer__brand-logo { height: 46px; width: auto; display: block; margin-bottom: 18px; }
.footer__script { font-family: var(--font-script); font-size: 24px; font-weight: 600; color: #F3C77A; margin-bottom: 12px; }
.footer__brand-text { font-size: 14px; color: var(--star-white); line-height: 1.65; margin-bottom: 20px; }
.footer__areas { font-size: 13px; color: var(--star-white); line-height: 1.8; }
.footer__socials { display: flex; gap: 12px; margin-top: 24px; }
.footer__social { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer__social:hover { background: var(--red); }
.footer__col h4 { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.footer__col h4::before { content: '\2605'; color: var(--red-light); font-size: 10px; }
.footer__col a { display: block; font-size: 14.5px; color: rgba(255,255,255,0.65); padding: 7px 0; }
.footer__col a:hover { color: var(--red-light); }
.footer__contact-item { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.footer__contact-item svg { width: 18px; height: 18px; color: var(--red-light); flex-shrink: 0; margin-top: 3px; }
.footer__contact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.62); margin-bottom: 3px; line-height: 1.4; }
.footer__contact-item a, .footer__contact-item .footer__contact-value { font-size: 14.5px; color: var(--white); font-weight: 600; line-height: 1.5; }
.footer__license { font-size: 12px; color: rgba(255,255,255,0.62); margin-top: 20px; padding-left: 30px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 26px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer__bottom span { font-size: 13px; color: rgba(255,255,255,0.6); }
.footer__legal { display: flex; gap: 22px; }
.footer__legal a { font-size: 13px; color: rgba(255,255,255,0.6); }
.footer__legal a:hover { color: var(--white); }
.back-to-top {
position: fixed; right: 24px; bottom: 96px; z-index: 900;
width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--white);
display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--red); }
/* ==========================================================================
MOBILE STICKY CTA BAR
========================================================================== */
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--white); box-shadow: 0 -6px 24px rgba(0,0,0,0.12); padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.mobile-cta__inner { display: flex; gap: 10px; }
.mobile-cta__call { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--navy); border-radius: 10px; color: var(--navy); }
.mobile-cta__book { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--red); color: var(--white); border-radius: 10px; font-weight: 600; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; box-shadow: var(--shadow-red); }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
.hero__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
.numbered__grid { gap: 32px 40px; }
.services__grid { grid-template-columns: repeat(2, 1fr); }
.whyus__grid, .about__grid, .cta-form__grid { gap: 44px; }
.footer__grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
}
@media (max-width: 1024px) {
.topbar__socials { display: none; }
}
/*
* Nav switches to the drawer at 1155, not 1024.
*
* The desktop nav needs ~1160px to fit logo + 5 links + phone + the 250px
* "Schedule a Consultation" button. Switching it on at 1025 left a 130px window
* where it was on and did not fit: the CTA overflowed the viewport by 122px at
* 1025, tapering to 10px at 1140. No scrollbar appeared -- an ancestor clipped
* it -- so the primary CTA was silently chopped on any non-maximised desktop
* window. Measured 2026-09-02.
*/
@media (max-width: 1155px) {
.nav__links { display: none; }
.nav__actions .nav__cta { display: none; }
.nav__hamburger { display: flex; }
/*
* .nav__inner is justify-content: space-between over logo / links / actions /
* hamburger. Once .nav__links is display:none the three survivors get spread
* across the full width, which strands the phone block in open space: the gap
* between it and the hamburger measured 246px at 900 and 305px at 1024, and
* it grows with the viewport. margin-left:auto collapses the free space onto
* one side so the phone sits beside the hamburger, right-aligned, with the
* row's own 20px gap between them. Logo stays hard left. Measured 2026-09-02.
*/
.nav__actions { margin-left: auto; }
}
@media (max-width: 900px) {
.trustbar__row { justify-content: center; gap: 30px; }
.trustbar__item img { height: 58px; }
.footer__trust-row { gap: 32px; }
.footer__trust-row img { height: 54px; }
}
@media (max-width: 768px) {
.topbar { font-size: 11.5px; }
.topbar__inner { height: 32px; }
.topbar__lic { display: none; }
.topbar__left, .topbar__right { gap: 12px; }
}
@media (max-width: 860px) {
.hero__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
.hero-form { max-width: 520px; width: 100%; }
.waterwise { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
.commercial__grid { grid-template-columns: 1fr; gap: 40px; }
.commercial__grid > * { min-width: 0; }
.commercial .btn { white-space: normal; text-align: center; }
.whyus__grid, .about__grid { grid-template-columns: 1fr; }
.about__photo-sub { display: none; }
.cta-form__grid { grid-template-columns: 1fr; }
.reviews__grid { grid-template-columns: 1fr 1fr; }
.process__steps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
:root { --nav-height: 72px; --topbar-h: 35px; }
.container { padding: 0 20px; }
.nav__phone-label { font-size: 9px; letter-spacing: 1.2px; }
.nav__phone { font-size: 15px; }
.nav__logo img { height: 40px; }
body { padding-bottom: 100px; }
.mobile-cta { display: block; }
/* 44px tap targets (WCAG 2.5.8) */
.nav__phone { padding: 12px 0; }
.nav__hamburger { width: 44px; height: 44px; }
.hero-form__call a { display: inline-block; padding: 12px 6px; }
.service-card__link { display: inline-block; padding: 14px 0; }
.cta-form__phone { padding: 6px 0; }
.footer__cta-phone { display: inline-block; padding: 8px 0; }
.footer__social { width: 44px; height: 44px; }
.footer__col a { padding: 11px 0; }
.footer__contact-item a { display: inline-block; padding: 12px 0; margin: -7px 0; }
.footer__legal a { display: inline-block; padding: 12px 0; }
.back-to-top { bottom: 84px; right: 16px; }
.numbered, .process, .services, .whyus, .about, .reviews, .faq, .cta-form, .areas, .commercial { padding: 60px 0; }
.footer__cta-band { padding: 40px 0; }
.footer__trust { padding: 24px 0; }
.footer__main { padding: 48px 0 32px; }
.numbered__grid { grid-template-columns: 1fr; gap: 30px; }
.services__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.whyus__list { grid-template-columns: 1fr; }
.reviews__grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__cta-band .container { flex-direction: column; text-align: center; }
.footer__trust-row { gap: 22px; }
.footer__bottom { flex-direction: column; text-align: center; }
.hero { min-height: auto; }
.hero__grid { padding-top: 48px; padding-bottom: 44px; }
.hero__eyebrow { font-size: 17px; white-space: nowrap; }
.hero__kicker { font-size: 11px; letter-spacing: 1.2px; }
.hero__sub { font-size: 16px; margin-bottom: 20px; }
.hero__proof .btn { display: none; }
}
/*
* Small phones: the nav row did not fit and pushed the hamburger off-screen.
*
* At 360px the row needed logo 153 + phone 110 + hamburger 44 + two 20px gaps
* = 347px against a 320px content box, and .nav__actions is flex-shrink:0, so
* nothing gave and the hamburger overflowed the right edge by 22-24px. The menu
* button was partially untappable on a 360px Android, which is a very common
* width. Tightening the gap and the logo buys back 40px rather than dropping
* the header phone number, which is the primary conversion action on a
* contractor site. Measured 2026-09-02.
*/
@media (max-width: 420px) {
.nav__inner { gap: 12px; }
.nav__logo img { height: 34px; }
}
/*
* Below 360px even the tightened row is too wide, so the header phone gives
* way rather than the menu button. The hero's call CTA and the drawer both
* still carry the number, so nothing is lost that a tap cannot reach.
*/
@media (max-width: 359px) {
.nav__phone-block { display: none; }
}
@media (max-width: 480px) {
.topbar__left { display: none; }
.topbar__inner { justify-content: center; }
.services__grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.whyus__photo img { height: 320px; }
.about__photo-main img { height: 320px; }
.footer__trust-row { gap: 16px; justify-content: center; }
.footer__trust-row img { height: 24px; }
}
/* ==========================================================================
INNER PAGES
========================================================================== */
.pagehero { position: relative; overflow: hidden; padding-top: calc(var(--nav-height) + var(--topbar-h)); }
.pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(2,15,45,0.88) 0%, rgba(2,15,45,0.70) 28%, rgba(2,15,45,0.30) 56%, rgba(2,15,45,0) 76%),
linear-gradient(180deg, rgba(2,15,45,0.34) 0%, rgba(2,15,45,0) 26%, rgba(2,15,45,0) 70%, rgba(2,15,45,0.42) 100%);
}
.pagehero__inner { position: relative; z-index: 2; padding: 72px 0 78px; max-width: 780px; }
.crumbs { text-shadow: 0 1px 6px rgba(2,15,45,0.8); display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.62); margin-bottom: 18px; flex-wrap: wrap; min-height: 44px; }
.crumbs a { color: rgba(255,255,255,0.82); display: inline-block; padding: 12px 6px; margin: -12px -6px; min-width: 44px; text-align: center; }
.crumbs a:hover { color: var(--red-light); }
.crumbs span[aria-current] { color: #F3C77A; }
.pagehero__script { font-family: var(--font-script); font-size: 27px; font-weight: 600; color: #F3C77A; display: block; margin-bottom: 6px; text-shadow: 0 2px 10px rgba(2,15,45,0.75); }
.pagehero__h1 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--star-white); margin-bottom: 14px; text-shadow: 0 2px 10px rgba(2,15,45,0.7); }
.pagehero__display {
font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; color: var(--white); margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(2,15,45,0.65), 0 6px 34px rgba(2,15,45,0.45);
}
.pagehero__text { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.94); margin-bottom: 30px; max-width: 620px; text-shadow: 0 2px 12px rgba(2,15,45,0.8), 0 1px 3px rgba(2,15,45,0.6); }
.pagehero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.includes { background: var(--cream); padding: 96px 0; }
.includes__top { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.includes__heading { font-size: clamp(28px, 3.6vw, 42px); margin-top: 10px; }
.includes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.include-card { background: var(--white); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); border-top: 3px solid var(--red); }
.include-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 9px; letter-spacing: 0.2px; }
.include-card p { font-size: 16px; color: var(--text-light); line-height: 1.6; }
.detail { background: var(--white); padding: 96px 0; }
.detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; }
.detail__heading { font-size: clamp(27px, 3.4vw, 40px); margin-top: 10px; margin-bottom: 18px; }
.detail__text { font-size: 16px; color: var(--text-light); margin-bottom: 16px; line-height: 1.75; }
.detail__list { display: grid; gap: 13px; margin-top: 24px; }
.detail__item { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; color: var(--text); }
.detail__item svg { width: 19px; height: 19px; color: var(--red); flex-shrink: 0; margin-top: 1px; }
.detail__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.detail__photo img { width: 100%; height: 470px; object-fit: cover; display: block; }
.related { background: var(--cream); padding: 96px 0; }
.related__top { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.related__heading { font-size: clamp(26px, 3.2vw, 38px); margin-top: 10px; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s var(--ease); display: block; }
.related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.related-card__img { height: 170px; overflow: hidden; }
.related-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.related-card:hover .related-card__img img { transform: scale(1.06); }
.related-card__body { padding: 22px; }
.related-card__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 7px; }
.related-card__body p { font-size: 16px; color: var(--text-light); line-height: 1.55; margin-bottom: 11px; }
.related-card__link { font-size: 12.5px; font-weight: 600; color: var(--red); letter-spacing: 0.4px; text-transform: uppercase; }
@media (max-width: 1100px) {
.includes__grid, .related__grid { grid-template-columns: repeat(2, 1fr); }
.detail__grid { gap: 44px; }
}
@media (max-width: 860px) {
.detail__grid { grid-template-columns: 1fr; }
.detail__photo img { height: 340px; }
}
@media (max-width: 768px) {
.includes, .detail, .related { padding: 60px 0; }
.includes__grid, .related__grid { grid-template-columns: 1fr; }
.pagehero__inner { padding: 48px 0 54px; }
.pagehero__ctas .gbadge { display: none; }
}
/* ==========================================================================
BLOG POST
========================================================================== */
.post { background: var(--white); padding: 84px 0 96px; }
.post__body { font-size: 17.5px; line-height: 1.8; color: var(--text); }
.post__body p { margin-bottom: 22px; }
.post__h2 {
font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(23px, 2.6vw, 30px); line-height: 1.18; color: var(--navy);
margin: 46px 0 18px;
}
.post__body > .post__h2:first-child { margin-top: 0; }
.post__cta {
margin-top: 52px; background: var(--cream); border-left: 4px solid var(--red);
border-radius: var(--radius); padding: 32px 34px;
}
.post__cta h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 0.35vw + 15.6px, 19px); color: var(--navy); text-transform: uppercase; margin-bottom: 10px; }
.post__cta p { font-size: 16px; color: var(--text-light); margin-bottom: 20px; line-height: 1.7; }
.post__cta-link { display: inline-block; margin-left: 18px; font-size: 13.5px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.4px; padding: 14px 0; }
@media (max-width: 768px) {
.post { padding: 54px 0 64px; }
.post__body { font-size: 16.5px; }
.post__cta { padding: 26px 24px; }
.post__cta .btn { width: 100%; justify-content: center; }
.post__cta-link { margin-left: 0; display: block; }
}
/* ==========================================================================
ACCESSIBILITY + 404
========================================================================== */
.skip-link {
position: absolute; left: 12px; top: -100px; z-index: 2000;
background: var(--red); color: var(--white);
padding: 14px 22px; border-radius: 0 0 10px 10px;
font-size: 14px; font-weight: 600; letter-spacing: 0.4px;
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }
/* Visible keyboard focus everywhere, without adding rings for mouse users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--red);
outline-offset: 3px;
border-radius: 4px;
}
.topbar a:focus-visible, .drawer a:focus-visible, .drawer button:focus-visible,
.footer a:focus-visible, .hero a:focus-visible, .pagehero a:focus-visible {
outline-color: #F3C77A;
}
.notfound { background: var(--cream); padding: 120px 0 110px; text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: clamp(78px, 14vw, 150px); line-height: 1; color: var(--navy); opacity: 0.13; }
.notfound__script { font-family: var(--font-script); font-size: 30px; font-weight: 600; color: var(--red); display: block; margin: -14px 0 10px; }
.notfound__heading { font-size: clamp(28px, 4vw, 44px); margin-bottom: 18px; }
.notfound__text { font-size: 16px; color: var(--text-light); max-width: 560px; margin: 0 auto 34px; line-height: 1.7; }
.notfound__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 780px; margin: 0 auto; }
.notfound__links a { background: var(--white); border: 1px solid var(--sand); border-radius: 100px; padding: 12px 22px; font-size: 14px; font-weight: 600; color: var(--navy); }
.notfound__links a:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 768px) { .notfound { padding: 70px 0 66px; } }
/* 4-card grids render 2x2 so the last card is not stranded on its own row */
.includes__grid--even { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .includes__grid--even { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .includes__grid--even { grid-template-columns: 1fr; } }
/* ==========================================================================
REDUCED MOTION
Vestibular-sensitive users get the content without the movement. Reveals must
still be VISIBLE, so opacity is forced to 1 rather than just dropping the transition.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
/* Motion off must not leave content hidden: the reveal state is opacity-based,
and zeroing transition-duration alone would freeze it at opacity 0. */
.js .reveal { opacity: 1 !important; transform: none !important; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
.btn:hover, .service-card:hover, .related-card:hover,
.gbadge:hover, .btn-call:hover, .cta-form__call-card:hover { transform: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Design directives applied after the comp (Joel, 2026-08-20).
Kept in THIS file deliberately: the site ships one stylesheet.
═══════════════════════════════════════════════════════════════════════════ */
/* 7. Every button is the same height.
min-height rather than height so a long label can still wrap, and
flex-shrink:0 because a flex item is squeezed below its own height when the
container overflows -- which is how a 58px button renders at 46px. */
.btn,
.btn-call,
.gbadge {
min-height: 64px;
flex-shrink: 0;
box-sizing: border-box;
}
.btn { padding-top: 0; padding-bottom: 0; }
/* 8. The two hero proof blocks read as a pair, so they share a baseline height
and stretch together instead of each sizing to its own contents. */
.hero__proof { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.hero__proof > * { min-height: 64px; }
.btn-call { padding: 10px 24px 10px 10px; }
.gbadge { padding: 10px 22px; }
/* 9. A card whose only affordance is a text link becomes clickable across its
whole surface. Implemented as a stretched overlay on the EXISTING link --
never by wrapping the card in an , because nested is invalid HTML and
the browser hoists the inner one out, which silently wrecks the layout. */
.service-card,
.related-card,
.blog-card,
.include-card,
.commercial__card { position: relative; }
.service-card a::after,
.related-card a::after,
.blog-card a::after,
.include-card a::after,
.commercial__card a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* Anything that must stay separately clickable sits above the overlay. */
.service-card a:not(:only-of-type),
.related-card a:not(:only-of-type) { position: relative; z-index: 2; }
/* 10. Hover motion is a learned signal for "this responds to interaction", so
it belongs only on things that actually go somewhere. Non-interactive
surfaces keep their static styling. */
.service-card:not(:has(a)):hover,
.related-card:not(:has(a)):hover,
.include-card:not(:has(a)):hover,
.commercial__card:not(:has(a)):hover,
.blog-card:not(:has(a)):hover,
.process__step:hover,
.numbered__body:hover {
transform: none;
box-shadow: inherit;
}
/* 11. Buttons must read as solid.
.star-wm::after is a 360px ghosted Texas star (opacity .05) positioned
absolutely with z-index:auto, so it paints ABOVE the band's static in-flow
content. Its edge cut straight across the WaterWise CTA, which made an
entirely opaque #AF1215 button look translucent with a diagonal seam through
it. The button was never transparent -- decoration was sitting on top of it.
Note .star-wm bands are position:relative with z-index:auto, so they are not
stacking contexts and a negative z-index on the star would drop it behind the
band's own gradient and vanish. Lifting the content is the correct direction. */
.btn, .btn-call, .gbadge { position: relative; z-index: 1; }
.star-wm > * { position: relative; z-index: 1; }
/* Fluid section rhythm: these were fixed px and are the values most worth
scaling with the viewport. */
:root {
--section-y: clamp(56px, 5.2vw, 96px);
--gutter: clamp(20px, 2.4vw, 32px);
}
.container, .container--narrow { padding-left: var(--gutter); padding-right: var(--gutter); }
/* ═══════════════════════════════════════════════════════════════════════════
GRAVITY FORMS
Gravity Forms' own reset/foundation/framework stylesheets are disabled in
functions.php, because the site ships ONE stylesheet. Everything the plugin
needs is styled here, matched to the comp's original .form-group spec:
13px 16px padding, 2px var(--sand) border, 9px radius, var(--cream) ground.
═══════════════════════════════════════════════════════════════════════════ */
.gform_wrapper { margin: 0; }
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container { display: none !important; }
/* Field grid. .lsps-half fields pair up; everything else runs full width.
gap matches the comp's .form-row (14px). */
.gform_wrapper .gform_fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.gform_wrapper .gfield { grid-column: 1 / -1; min-width: 0; }
.gform_wrapper .gfield.lsps-half { grid-column: span 1; }
/* Labels */
.gform_wrapper .gfield_label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--navy);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.3;
}
.gform_wrapper .gfield_required { color: var(--red); margin-left: 2px; }
.gform_wrapper .gfield_required .gfield_required_text { display: none; }
/* Controls */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
width: 100%;
padding: 13px 16px;
border: 2px solid var(--sand);
border-radius: 9px;
font-family: inherit;
font-size: 14.5px;
color: var(--text);
background: var(--cream);
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.gform_wrapper textarea { min-height: 74px; height: 74px; resize: vertical; line-height: 1.6; }
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
outline: none;
border-color: var(--red);
background: var(--white);
}
.gform_wrapper ::placeholder { color: var(--text-light); opacity: 1; }
/* Select: appearance is stripped above, so draw the chevron ourselves.
Inset 18px from the right edge rather than sitting hard against it, and the
padding-right reserves room so a long option never runs under the icon. */
.gform_wrapper select {
padding-right: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 15px 15px;
cursor: pointer;
}
.gform_wrapper select:focus { background-color: var(--white); }
/* Phone field wrapper GF adds */
.gform_wrapper .ginput_container { margin: 0; }
/* Submit — same silhouette as .btn.btn-primary, full width like .form-submit */
.gform_wrapper .gform_footer { margin: 18px 0 0; padding: 0; }
.gform_wrapper .gform_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 64px;
padding: 0 34px;
border: none;
border-radius: 10px;
background: var(--red);
color: var(--white);
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: var(--shadow-red);
cursor: pointer;
transition: all 0.25s var(--ease);
}
.gform_wrapper .gform_button:hover {
background: var(--red-dark);
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(175, 18, 21, 0.38);
}
.gform_wrapper .gform_ajax_spinner { margin-left: 10px; }
/* Validation. GF marks the field AND prints a summary; both need to read as
errors without the plugin's stylesheet. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--red); background: #FDF3F3; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
margin-top: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--red);
}
.gform_wrapper .gform_validation_errors {
grid-column: 1 / -1;
margin-bottom: 16px;
padding: 14px 16px;
border: 2px solid var(--red);
border-radius: 9px;
background: #FDF3F3;
}
.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error {
font-size: 14px;
font-weight: 600;
color: var(--red);
text-transform: none;
margin: 0;
}
/* Confirmation. The comp's .form-success is display:none until a class lands,
so the GF confirmation markup carries one that shows it. */
.form-success.is-visible, .form-success.show { display: block; }
.gform_confirmation_message { text-align: center; padding: 24px 10px; }
/* The form always renders inside .form-card, which is WHITE, even when the
surrounding band is navy. An earlier "invert on dark ground" rule keyed to
.cta-form therefore put near-white labels on a white card -- unreadable.
Labels stay navy; only a form with no card would need inverting. */
.form-card .gform_wrapper .gfield_label { color: var(--navy); }
@media (max-width: 640px) {
.gform_wrapper .gform_fields { grid-template-columns: 1fr; }
.gform_wrapper .gfield.lsps-half { grid-column: 1 / -1; }
}
/* Inner-page hero alignment.
.pagehero__inner carries BOTH .container and its own class. Its 780px
max-width beats .container's 1366px (same specificity, later in the file), and
.container's margin:0 auto then CENTERS that narrow box -- so inner-page hero
copy sat indented while the homepage hero sits at the container's left edge.
Restore the container box and cap the CHILDREN instead, so the hero shares its
left edge with every other section and the text keeps a readable measure. */
.pagehero__inner { max-width: var(--container); }
.pagehero__inner > * { max-width: 780px; margin-left: 0; margin-right: 0; }
.pagehero__inner > .pagehero__text { max-width: 620px; }
/* ── .include-card icons ────────────────────────────────────────────────────
Six "Why Choose Lone Star" cards, each with its own icon. Drawn as a ::before
on the card so no markup changes are needed and the single-stylesheet rule
holds. Stroke icons in the site's red at 2.2 stroke weight, matching the
comp's existing inline SVG language (see .btn-call__icon, .whyus__item svg).
Order follows the cards: experience, communication, rating, local, insured,
uniformed. */
.includes__grid .include-card { position: relative; padding-top: 92px; }
/* The icon sits on a rounded tile, matching .btn-call__icon's language (a
42px rounded square carrying the mark) rather than floating bare on the card.
::after paints the tile, ::before the glyph on top of it. */
.includes__grid .include-card::after {
content: '';
position: absolute;
top: 26px;
left: 26px;
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(150deg, rgba(175,18,21,0.10) 0%, rgba(175,18,21,0.04) 100%);
border: 1.5px solid rgba(175,18,21,0.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.includes__grid .include-card::before {
content: '';
position: absolute;
top: 40px;
left: 40px;
width: 24px;
height: 24px;
z-index: 1;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* 1. Experienced professionals — award */
.includes__grid .include-card:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5L17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E");
}
/* 2. English speaking technicians — conversation */
.includes__grid .include-card:nth-child(2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E");
}
/* 3. Five star Google rated — star */
.includes__grid .include-card:nth-child(3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
/* 4. Locally owned & operated — map pin */
.includes__grid .include-card:nth-child(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* 5. Fully insured — shield */
.includes__grid .include-card:nth-child(5)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11.5 11.5 14 15 10'/%3E%3C/svg%3E");
}
/* 6. Uniformed employees — ID badge */
.includes__grid .include-card:nth-child(6)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF1215' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2.5'/%3E%3Cpath d='M9 2.5h6'/%3E%3Ccircle cx='12' cy='11' r='2.6'/%3E%3Cpath d='M7.6 17.6a4.6 4.6 0 018.8 0'/%3E%3C/svg%3E");
}
/* ── Two-column text + image: media matches the text column ────────────────
The comp sizes these photos to a FIXED height (480px / 460px), so the media
column and the text column only line up by luck -- whichever is taller drives
the row and the other gets dead space.
Making the image height:100% is not enough: the ![]()
stays in normal flow,
so its intrinsic ratio keeps feeding the row and a tall photo still wins.
The image has to leave flow, so the row has nothing to inherit but the copy:
relative wrapper + absolutely positioned image + object-fit:cover.
A min-height floor stops a short text column squashing the art into a
letterbox, and the authored ratios are restored below the desktop breakpoint,
because a stretched column pushes copy under the fold on a phone. */
.whyus__grid,
.detail__grid { align-items: stretch; }
.whyus__photo,
.detail__photo {
position: relative;
min-height: 380px;
height: 100%;
}
/* The comp wraps these in , so a direct-child `> img` never matches --
the selector has to reach through it. Scoped to the media image only, so the
.whyus__photo-badge logo in the same wrapper is left alone. */
.whyus__photo > picture > img,
.whyus__photo > img,
.detail__photo > picture > img,
.detail__photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* subjects sit in the upper half, so bias the crop up rather than centring */
object-position: center 38%;
}
/* The badge overlay stays above the stretched photo. */
.whyus__photo-badge { z-index: 2; }
/* About: the main photo stretches with the copy, but the sub photo deliberately
overhangs the corner, so it keeps its own size and offsets. */
.about__grid { align-items: stretch; }
.about__photos { min-height: 380px; }
.about__photo-main { position: relative; height: 100%; }
.about__photo-main > picture > img,
.about__photo-main > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
@media (max-width: 900px) {
/* back to the comp's authored ratios once the columns stack */
.whyus__photo, .detail__photo, .about__photos { min-height: 0; height: auto; }
.whyus__photo img, .detail__photo img, .about__photo-main img {
position: static; height: 380px;
}
.whyus__photo-badge img { height: 30px; position: static; }
.about__photo-main { height: auto; }
}
/* ── Type directives: one h3 size, nothing heavier than 600 ────────────────
Two things defeated the first pass and are worth naming:
1. Many h3 elements are sized by CLASS rules (.waterwise__heading,
.form-card__title, .section-heading), not by a selector containing "h3",
so rewriting h3 rules left three distinct sizes on the page. h3[class]
scores (0,1,1) and therefore outranks any single-class rule without
needing !important.
2. font-weight above 600 was still rendering because h1-h6, strong and b are
bold (700) in the BROWSER's default stylesheet. Capping authored
declarations never touched that -- the cap has to be stated explicitly. */
h3, h3[class] { font-size: clamp(17px, 0.35vw + 15.6px, 19px); }
h1, h2, h3, h4, h5, h6,
h1[class], h2[class], h3[class], h4[class], h5[class], h6[class],
strong, b, th, dt, legend, optgroup { font-weight: 600; }
/* A banner headline reads as a section heading even where the comp marks it up
as h3, so it takes the h2 scale rather than the unified h3 size. "All h3 one
size" governs card and body subheadings, not a full-width banner headline. */
h3.waterwise__heading { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }
/* Nav links right-aligned.
.nav__inner is a space-between flex row (logo · links · actions), which parks
the links mid-left. An auto left margin absorbs the free space ahead of them,
so the links sit against the actions group on the right with the logo still
hard left. Auto margins outrank justify-content, so space-between stays
untouched for any other child. Desktop only -- .nav__links is display:none
below 1024px, where the hamburger takes over. */
.nav__links { margin-left: auto; }
/* Tighter nav. The visual gap between labels was 28px (12px padding each side
+ 4px flex gap); this brings it to 18px. Vertical padding is left at 12px so
the links keep a ~44px tap height, and the horizontal padding stays large
enough that each item is comfortably wider than 40px. */
.nav__links { gap: 2px; }
.nav__item > a, .nav__item > button { padding-left: 8px; padding-right: 8px; }
/* Photo badge: the mark and its label were undersized against the site's own
badge convention (.trustbar__item img is 78px, .footer__trust-row img 70px),
so a 30px logo with 12px text read as an afterthought on the photo. Scaled to
sit between the footer and trustbar sizes, with the label stepped up to match
and the max-width widened so it still breaks to two tidy lines. */
.whyus__photo-badge { padding: 17px 24px; gap: 15px; border-radius: 14px; }
.whyus__photo-badge img { height: 48px; }
.whyus__photo-badge span { font-size: 15.5px; max-width: 175px; line-height: 1.35; }
@media (max-width: 900px) {
/* keep it from dominating a smaller photo once the columns stack */
.whyus__photo-badge { padding: 13px 18px; gap: 12px; }
.whyus__photo-badge img { height: 38px; }
.whyus__photo-badge span { font-size: 14px; max-width: 150px; }
}
/* Service-area chips were barely visible: an 8% white fill with a 20% white
border on a navy band gives the pill almost no edge, so only the text read and
the chip shape disappeared. The label was already solid white, so this raises
the SURFACE and border rather than touching text colour, and nudges the label
and pin up a step for legibility at a glance. */
.areas__chip {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.38);
font-size: 15.5px;
padding: 13px 24px;
gap: 10px;
box-shadow: 0 2px 10px rgba(2, 15, 45, 0.22);
}
.areas__chip:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
.areas__chip svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Hero form column widened from a fixed 400px to 35% of the hero width.
Scoped to min-width:861px deliberately: this rule sits at the end of the
file, so an unscoped .hero__grid would also outrank the max-width:860px rule
that collapses the hero to a single column and would break the mobile stack.
It intentionally supersedes the 1100px step (360px), which 35% now covers. */
@media (min-width: 861px) {
.hero__grid { grid-template-columns: minmax(0, 1fr) 35%; }
}