/* ==============================================
AMERICANSTRUCTION — Production Design System
Brand: #333393 (blue) / #CC0000 (cherry red) / Sun gradient
Mobile-first. Dual-persona. Since 1989.
============================================== */
/* --- Fonts (loaded in HTML) ---
Playfair Display: serif display (authority, warmth)
Barlow: headings (precision, structure)
Libre Franklin: body (readability, modern)
*/
:root {
--blue: #333393;
--blue-dark: #1a1a3e;
--blue-mid: #2a2a7a;
--coral: #CC0000;
--coral-dark: #a30000;
--sun-yellow: #ffca24;
--sun-orange: #ff874e;
--sun-red: #CC0000;
--gold: #d4a843;
--white: #FEFDFB;
--w50: #FAF8F5;
--w100: #F3EFE8;
--w200: #E5DED3;
--w300: #C7BBA8;
--w400: #A39680;
--w500: #7A6F60;
--w600: #575044;
--w700: #3B362F;
--font-display: 'Playfair Display', Georgia, serif;
--font-heading: 'Barlow', 'Trebuchet MS', sans-serif;
--font-body: 'Libre Franklin', 'Segoe UI', sans-serif;
--container: 92%;
--container-wide: 94%;
--container-max: 1440px;
--container-wide-max: 1600px;
--header-h: 90px;
--radius: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--shadow-sm: 0 2px 8px rgba(26,26,62,.06);
--shadow-md: 0 4px 20px rgba(26,26,62,.10);
--shadow-lg: 0 8px 40px rgba(26,26,62,.14);
--shadow-xl: 0 20px 60px rgba(26,26,62,.18);
--ease: cubic-bezier(.25,.1,.25,1);
}
/* === Reset === */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--w700); background:var(--white); line-height:1.75; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; object-fit:cover; }
a { color:inherit; text-decoration:none; transition:color .2s var(--ease); }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:var(--font-body); }
/* === Typography === */
h1,h2,h3,h4,h5 { font-family:var(--font-heading); font-weight:700; color:var(--blue); line-height:1.2; }
h1 { font-size:clamp(2rem, 5vw, 3.4rem); letter-spacing:-.02em; }
h2 { font-size:clamp(1.6rem, 3.5vw, 2.5rem); letter-spacing:-.01em; }
h3 { font-size:clamp(1.1rem, 2vw, 1.4rem); }
h4 { font-size:1rem; }
p { margin-bottom:1rem; }
p:last-child { margin-bottom:0; }
/* === Layout === */
.container { width:var(--container); max-width:var(--container-max); margin:0 auto; padding:0; }
.container--wide { width:var(--container-wide); max-width:var(--container-wide-max); }
.section { padding:clamp(40px, 5vw, 80px) 0; }
.section--sm { padding:clamp(28px, 3.5vw, 52px) 0; }
.section--blue { background:var(--blue); color:rgba(255,255,255,.8); }
.section--blue h2,.section--blue h3,.section--blue h4 { color:#fff; }
.section--navy { background:var(--blue-dark); color:rgba(255,255,255,.75); }
.section--navy h2,.section--navy h3,.section--navy h4 { color:#fff; }
.section--warm { background:var(--w50); }
.section--coral { background:var(--coral); color:rgba(255,255,255,.85); }
.section--coral h2 { color:#fff; }
.text-center { text-align:center; }
/* === Label === */
.label {
font-family:var(--font-heading);
font-size:.86rem;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--coral);
display:block;
margin-bottom:8px;
}
.label--gold { color:var(--sun-yellow); }
.label--blue { color:var(--blue); }
/* === Section Title === */
.sec-title { margin-bottom:10px; }
.sec-title--serif { font-family:var(--font-display); }
.sec-title--white { color:#fff; }
/* === Sub Text === */
.sec-sub {
font-size:1.08rem;
color:var(--w500);
max-width:620px;
line-height:1.7;
}
.sec-sub--white { color:rgba(255,255,255,.55); }
.sec-sub--center { margin-left:auto; margin-right:auto; }
/* === Buttons === */
.btn {
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-heading);
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
border-radius:var(--radius);
border:2px solid transparent;
cursor:pointer;
transition:all .3s var(--ease);
white-space:nowrap;
text-decoration:none;
}
.btn--sm { padding:10px 20px; font-size:.88rem; }
.btn--md { padding:11px 22px; font-size:.8rem; }
.btn--lg { padding:13px 26px; font-size:.85rem; }
.btn--coral { background:var(--coral); color:#fff; border-color:var(--coral); }
.btn--coral:hover { background:var(--coral-dark); border-color:var(--coral-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--blue { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn--blue:hover { background:var(--blue-mid); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--yellow { background:var(--sun-yellow); color:var(--blue-dark); border-color:var(--sun-yellow); }
.btn--yellow:hover { background:#ffe066; transform:translateY(-2px); }
.btn--outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--outline:hover { background:#fff; color:var(--blue); transform:translateY(-2px); }
.btn--outline-dark { background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--outline-dark:hover { background:var(--blue); color:#fff; transform:translateY(-2px); }
.btn--full { width:100%; justify-content:center; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; }
.btn svg { width:14px; height:14px; transition:transform .2s; }
.btn:hover svg { transform:translateX(3px); }
/* === Header === */
.header {
position:fixed; top:0; left:0; right:0; z-index:1000;
height:var(--header-h);
background:#fff;
border-bottom:1px solid rgba(0,0,0,.08);
transition:all .3s var(--ease);
}
.header.scrolled { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.1); }
.header__inner {
display:flex; align-items:center; justify-content:space-between;
height:100%; width:var(--container-wide); max-width:var(--container-wide-max); margin:0 auto; padding:0;
}
.header__logo { height:72px; display:flex; align-items:center; gap:10px; text-decoration:none; }
.header__logo-icon { height:66px; width:auto; object-fit:contain; }
.header__logo-text { font-family:var(--font-heading); font-weight:800; font-size:2.3rem; color:var(--blue); letter-spacing:.03em; white-space:nowrap; margin-left:6px; }
/* Desktop Nav */
.nav { display:flex; align-items:center; gap:4px; }
.nav__link {
font-family:var(--font-heading); font-size:1rem; font-weight:600;
color:var(--blue); padding:10px 14px;
border-bottom:2px solid transparent; transition:all .2s;
position:relative;
white-space:nowrap;
}
.nav__link:hover,.nav__link.active { color:var(--blue); border-bottom-color:var(--coral); }
/* Dropdown - Mega Menu */
.nav__item { position:relative; }
.nav__dropdown {
display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
background:var(--blue); border-radius:var(--radius-lg);
padding:22px 30px; min-width:520px; box-shadow:var(--shadow-xl);
z-index:10; margin-top:4px;
columns:auto;
}
.nav__item:hover .nav__dropdown { display:block; }
.nav__dropdown-heading {
font-family:var(--font-heading); font-size:.78rem; font-weight:800;
letter-spacing:.14em; text-transform:uppercase; color:var(--sun-yellow);
padding:6px 0 10px; break-after:avoid; margin-top:6px;
}
.nav__dropdown-heading:first-child { margin-top:0; }
.nav__dropdown a {
display:inline-block; padding:7px 0; font-family:var(--font-heading);
font-size:1.02rem; font-weight:600; color:#fff; transition:all .15s;
text-decoration:none; border-bottom:2px solid transparent;
}
.nav__dropdown a:hover {
color:var(--sun-yellow);
border-bottom-color:var(--sun-yellow);
}
/* You-are-here state inside desktop dropdowns */
.nav__dropdown a.nav__dropdown-link--active {
color:var(--sun-yellow);
border-bottom-color:var(--sun-yellow);
border-bottom-width:3px;
font-weight:800;
}
/* You-are-here state inside mobile sub-menus */
.mobile-nav__sub a.nav__dropdown-link--active {
color:var(--sun-yellow) !important;
font-weight:800;
border-left:3px solid var(--sun-yellow);
padding-left:8px;
background:rgba(255,202,36,.08);
}
/* Mobile Nav */
.header__mobile-toggle {
display:none; padding:8px; color:var(--blue); font-size:1.4rem;
}
.mobile-nav {
display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
background:var(--blue-dark); padding:20px;
box-shadow:var(--shadow-xl); border-top:1px solid rgba(255,255,255,.06);
overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-nav.open { display:block; }
.mobile-nav a {
display:block; padding:12px 0; font-family:var(--font-heading);
font-size:1.1rem; font-weight:700; color:rgba(255,255,255,.92);
border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-nav a:hover { color:#fff; }
.mobile-nav__toggle {
display:block; width:100%; text-align:left; padding:12px 0;
font-family:var(--font-heading); font-size:1.1rem; color:var(--sun-yellow);
border-bottom:1px solid rgba(255,255,255,.08); font-weight:800;
}
.mobile-nav__sub { display:none; }
.mobile-nav__sub.open { display:block; }
.mobile-nav__sub a { padding-left:22px; font-size:1rem; font-weight:700; color:rgba(255,255,255,.85); }
.mobile-nav__heading {
display:block; padding:14px 0 6px 10px;
font-family:var(--font-heading); font-size:.72rem; font-weight:800;
text-transform:uppercase; letter-spacing:.14em;
color:var(--sun-yellow); border-bottom:none;
}
.mobile-nav__heading:first-of-type { padding-top:6px; }
.mobile-nav__toggle--current {
color:#fff; border-left:3px solid var(--sun-yellow); padding-left:10px;
}
.mobile-nav__current { color:#fff !important; }
.mobile-nav__here {
margin-left:10px; font-size:.62rem; letter-spacing:.14em;
color:var(--sun-yellow); font-weight:800; vertical-align:middle;
background:rgba(255,202,36,.16); border:1px solid rgba(255,202,36,.4);
padding:3px 8px; border-radius:3px;
}
/* Intermediate breakpoint — collapse desktop nav to hamburger before nav visually collides with logo */
@media (max-width:1280px) {
.nav { display:none; }
.header__mobile-toggle { display:block; }
}
/* === Hero === */
.hero {
position:relative; min-height:92vh; display:flex; align-items:center;
padding-top:var(--header-h);
background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
overflow:hidden;
}
.hero__overlay {
position:absolute; inset:0;
background:
radial-gradient(ellipse at 15% 85%, rgba(255,85,104,.1) 0%, transparent 55%),
radial-gradient(ellipse at 85% 15%, rgba(255,202,36,.08) 0%, transparent 45%);
}
.hero__pattern {
position:absolute; inset:0; opacity:.03;
background:repeating-linear-gradient(135deg, transparent, transparent 60px, rgba(255,255,255,.4) 60px, rgba(255,255,255,.4) 61px);
}
.hero__grid {
display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px, 3vw, 40px); align-items:center;
position:relative; z-index:2;
}
.hero__badge {
display:inline-flex; align-items:center; gap:8px;
background:rgba(255,202,36,.14); border:1px solid rgba(255,202,36,.3);
color:var(--sun-yellow);
font-family:var(--font-heading); font-size:.95rem; font-weight:800;
letter-spacing:.14em; text-transform:uppercase;
padding:7px 18px; border-radius:50px; margin-bottom:22px;
}
.hero h1 { color:#fff; font-family:var(--font-display); font-weight:700; line-height:1.1; margin-bottom:16px; }
.hero h1 em { font-style:normal; color:var(--sun-yellow); }
.hero__sub { font-size:1.05rem; color:rgba(255,255,255,.78); line-height:1.7; margin-bottom:24px; max-width:480px; }
/* Hero Images */
.hero__images {
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
gap:5px; border-radius:var(--radius-xl); overflow:hidden;
}
.hero__images img:first-child { grid-row:1/3; }
.hero__images img { width:100%; height:100%; object-fit:cover; min-height:140px; }
/* Hero Stats */
.hero__stats {
position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
background:var(--white); border-radius:var(--radius-lg);
box-shadow:var(--shadow-xl);
display:flex; padding:14px 28px; gap:28px; z-index:3;
}
.hero__stat { text-align:center; }
.hero__stat-num { font-family:var(--font-display); font-size:1.75rem; color:var(--blue); line-height:1; display:block; }
.hero__stat-label { font-family:var(--font-heading); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--w400); margin-top:4px; display:block; }
/* === Trust Strip === */
.trust-strip {
background:var(--w50); border-top:1px solid var(--w100); border-bottom:1px solid var(--w100);
padding:14px 0;
}
.trust-strip__row { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }
.trust-strip__item {
display:flex; align-items:center; gap:8px;
font-family:var(--font-heading); font-size:.92rem; font-weight:600; color:var(--w700);
}
.trust-strip__item .check { color:var(--coral); font-weight:700; }
/* === Pathway Cards === */
.pathways { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pathway {
position:relative; border-radius:var(--radius-xl); overflow:hidden;
min-height:360px; display:flex; flex-direction:column; justify-content:stretch;
padding:24px; cursor:pointer; border:none; text-align:left;
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
text-decoration:none;
}
.pathway:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); }
.pathway img.pathway__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pathway__overlay {
position:absolute; inset:0;
background:linear-gradient(to top, rgba(26,26,62,.92) 0%, rgba(26,26,62,.4) 50%, rgba(26,26,62,.12) 100%);
}
.pathway__content { position:relative; z-index:2; color:#fff; display:flex; flex-direction:column; flex:1 1 auto; align-self:stretch; }
.pathway__label { font-family:var(--font-heading); font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; align-self:flex-start; margin-top:auto; margin-bottom:10px; padding:5px 12px; border-radius:50px; }
.pathway__label--gold { color:var(--sun-yellow); background:rgba(26,26,62,.7); }
.pathway__label--coral { color:#fff; background:rgba(204,0,0,.65); }
.pathway h3 { font-size:1.3rem; color:#fff; margin-bottom:6px; font-family:var(--font-display); font-weight:700; line-height:1.2; }
.pathway p { font-size:.95rem; color:rgba(255,255,255,.78); margin-bottom:10px; max-width:none; line-height:1.6; }
.pathway__badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.pathway__badge {
font-family:var(--font-heading); font-size:.58rem; font-weight:600;
text-transform:uppercase; background:rgba(255,202,36,.15); color:var(--sun-yellow);
padding:3px 8px; border-radius:50px; letter-spacing:.06em;
}
.pathway__badge--coral { background:rgba(204,0,0,.65); color:#fff; }
/* Property type photo cards — full-bleed image with overlay label */
.propicon-grid {
display:grid;
grid-template-columns:repeat(8, 1fr);
gap:16px;
max-width:1100px;
margin:0 auto;
}
.propicon {
position:relative;
display:block;
aspect-ratio:4/3;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.18);
transition:transform .3s, box-shadow .3s;
cursor:pointer;
text-decoration:none;
color:inherit;
}
.propicon:focus-visible { outline:3px solid var(--sun-yellow); outline-offset:3px; }
.propicon__tile {
position:absolute; inset:0;
overflow:hidden;
}
.propicon__tile img {
width:100%; height:100%;
object-fit:cover; display:block;
transition:transform .5s;
}
.propicon::after {
content:''; position:absolute; inset:0;
background:linear-gradient(to top, rgba(10,14,48,.92) 0%, rgba(10,14,48,.55) 40%, rgba(10,14,48,.15) 75%, transparent 100%);
pointer-events:none;
}
.propicon:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.propicon:hover .propicon__tile img { transform:scale(1.1); }
.propicon__name {
position:absolute; left:16px; right:16px; bottom:60px;
z-index:2;
font-family:var(--font-heading); font-weight:800;
font-size:1.2rem; color:#fff;
text-transform:uppercase; letter-spacing:.04em;
text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.propicon__desc {
position:absolute; left:16px; right:16px; bottom:14px;
z-index:2;
font-size:.85rem; color:rgba(255,255,255,.95);
line-height:1.35; font-weight:500;
text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.propicon--t1 { grid-column:1 / span 2; }
.propicon--t2 { grid-column:3 / span 2; }
.propicon--t3 { grid-column:5 / span 2; }
.propicon--t4 { grid-column:7 / span 2; }
.propicon--b1 { grid-column:2 / span 2; }
.propicon--b2 { grid-column:4 / span 2; }
.propicon--b3 { grid-column:6 / span 2; }
@media (max-width:900px) {
.propicon-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
.propicon--t1, .propicon--t2, .propicon--t3, .propicon--t4,
.propicon--b1, .propicon--b2, .propicon--b3 { grid-column:auto; }
}
@media (max-width:560px) {
.propicon-grid { grid-template-columns:1fr; }
}
.pathway__arrow { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-heading); font-size:.7rem; font-weight:600; text-transform:uppercase; }
/* === Service Cards (Commercial) === */
.comm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.comm-card {
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
border-radius:var(--radius-lg); padding:20px; transition:all .3s var(--ease);
backdrop-filter:blur(4px);
}
.comm-card:hover { background:rgba(255,255,255,.2); border-color:var(--coral); transform:translateY(-2px); box-shadow:0 0 0 2px var(--coral), 0 6px 22px rgba(0,0,0,.2); }
.comm-card h3,.comm-card h4 { color:#fff; margin-bottom:6px; font-size:1.05rem; letter-spacing:.01em; }
.comm-card p { color:rgba(255,255,255,.88); font-size:1.02rem; line-height:1.6; }
/* "Light variant" name retained for compatibility, but per the contrast rule these cards
only ever sit on LIGHT sections, so they must be a CONTRASTING solid color, not white.
Self-sufficient (works with or without the base .comm-card class). */
.comm-card--light {
background:var(--blue); border:1px solid var(--blue); border-top:3px solid var(--coral);
border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-md);
transition:all .3s var(--ease);
}
.comm-card--light h3, .comm-card--light h4 { color:#fff; }
.comm-card--light p, .comm-card--light li, .comm-card--light span { color:rgba(255,255,255,.85); }
.comm-card--light strong { color:#fff; }
.comm-card--light a { color:var(--sun-yellow); }
.comm-card--light:hover { background:var(--blue-mid); border-color:var(--coral); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.comm-card--light:hover h3, .comm-card--light:hover h4, .comm-card--light:hover p { color:#fff; }
/* Residential variant: SOLID colored card for clear separation on a warm/gray section.
Rule: a warm/gray section must never carry a white or warm/gray card. Use a contrasting fill. */
.comm-card--res { background:var(--blue); border:1px solid var(--blue); border-top:3px solid var(--coral); box-shadow:var(--shadow-md); }
.comm-card--res h3,.comm-card--res h4 { color:#fff; }
.comm-card--res p { color:rgba(255,255,255,.85); }
.comm-card--res:hover { background:var(--blue-mid); border-color:var(--coral); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.comm-card--res:hover h3, .comm-card--res:hover h4, .comm-card--res:hover p { color:#fff; }
/* Keep both division pathway cards' label + title aligned regardless of paragraph length */
.pathway p { min-height:4.8em; }
/* "Know the Signs" checklist — icon-led rows on a light section (no card fill needed) */
.signs-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; max-width:900px; margin:0 auto; }
.sign-item { display:flex; align-items:flex-start; gap:16px; }
.sign-item__icon { flex-shrink:0; width:44px; height:44px; border-radius:50%; background:rgba(204,0,0,.1); color:var(--coral); display:flex; align-items:center; justify-content:center; }
.sign-item__icon svg { width:22px; height:22px; }
.sign-item h4 { color:var(--blue-dark); font-size:1.05rem; margin:0 0 5px; line-height:1.25; }
.sign-item p { color:var(--w600); font-size:.9rem; line-height:1.6; margin:0; }
@media (max-width:640px) { .signs-grid { grid-template-columns:1fr; gap:22px; } }
/* === Persona Cards (Red/White/Blue accent — Proof-of-Value "For Every Seat at the Table") === */
.persona-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.persona-card { position:relative; background:var(--blue); border:1px solid var(--blue); border-radius:var(--radius-lg); padding:30px 28px 28px 86px; transition:all .35s var(--ease); display:flex; flex-direction:column; gap:8px; overflow:hidden; min-height:150px; box-shadow:var(--shadow-md); }
.persona-card__band { position:absolute; left:0; top:0; bottom:0; width:62px; background:var(--coral); display:flex; align-items:center; justify-content:center; }
.persona-card--red .persona-card__band { background:var(--coral); }
.persona-card__num { color:#fff; line-height:0; display:inline-flex; align-items:center; justify-content:center; }
.persona-card__num svg { width:34px; height:34px; fill:currentColor; }
.persona-card h4 { color:#fff; font-size:1.08rem; line-height:1.3; margin:0 0 4px; letter-spacing:.005em; }
.persona-card p { color:rgba(255,255,255,.85); font-size:.85rem; line-height:1.65; margin:0; }
.persona-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.persona-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(59,54,47,.14); border-color:var(--w300); }
@media (max-width:1024px) { .persona-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .persona-grid { grid-template-columns:1fr; } }
/* === Advanced Diagnostic Add-on Cards === */
.addon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.addon-card { background:#fff; border-radius:var(--radius-lg); padding:28px 24px; transition:all .3s var(--ease); }
.addon-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.2); }
.addon-card__icon { width:46px; height:46px; background:var(--blue); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.addon-card__icon svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.addon-card h4 { font-family:var(--font-heading); font-size:1.05rem; color:var(--blue-dark); margin:0 0 8px; }
.addon-card p { font-size:.88rem; color:var(--w500); line-height:1.7; margin:0; }
.addon-featured { background:var(--blue-dark); border-radius:var(--radius-xl); padding:40px; text-align:center; }
.addon-featured h3 { font-family:var(--font-heading); font-size:1.4rem; color:#fff; margin:12px 0 16px; }
.addon-featured p { font-size:.92rem; color:rgba(255,255,255,.7); line-height:1.7; max-width:680px; margin:0 auto; }
.addon-featured__note { font-size:.84rem; color:var(--sun-yellow); margin-top:14px; margin-bottom:24px; font-weight:600; }
@media (max-width:768px) {
.addon-grid { grid-template-columns:1fr; }
.addon-featured { padding:28px 20px; }
.addon-featured h3 { font-size:1.2rem; }
}
/* === Detail Split (image + content) === */
.detail-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 40px); align-items:center; }
.detail-split--flip { direction:rtl; }
.detail-split--flip > * { direction:ltr; }
.detail-img { border-radius:var(--radius-xl); overflow:hidden; }
.detail-img img, .detail-img video { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.detail-img video { aspect-ratio:16/9; object-fit:contain; background:#000; }
/* === Detail List === */
.detail-list { display:flex; flex-direction:column; gap:8px; margin:14px 0 20px; }
.detail-list li { display:flex; align-items:flex-start; gap:10px; font-size:1.02rem; color:var(--w700); line-height:1.6; }
.detail-list li::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--coral); flex-shrink:0; margin-top:7px; }
.detail-list--gold li::before { background:var(--sun-yellow); }
.detail-list a {
text-decoration:none; border-bottom:2px solid transparent;
transition:border-color .2s ease;
}
.detail-list a:hover { border-bottom-color:var(--coral); }
/* === Callout (testimonial-style) === */
.callout {
background:var(--w50); border-left:3px solid var(--coral);
border-radius:0 var(--radius-lg) var(--radius-lg) 0;
padding:14px 18px; margin:16px 0;
}
.callout p { font-family:var(--font-display); font-size:.9rem; font-style:italic; color:var(--w700); line-height:1.6; }
.callout cite { display:block; margin-top:8px; font-family:var(--font-heading); font-size:.88rem; font-weight:600; font-style:normal; color:var(--w500); }
/* === Process Cards === */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; counter-reset:step; }
.process-card {
counter-increment:step; position:relative;
padding:36px 16px 16px;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
border-radius:var(--radius-lg);
}
.process-card::before {
content:counter(step, decimal-leading-zero);
position:absolute; top:10px; left:16px;
font-family:var(--font-display); font-size:1.4rem; color:var(--sun-yellow); opacity:.3;
}
.process-card h4 { color:#fff; margin-bottom:3px; font-size:.82rem; }
.process-card p { color:rgba(255,255,255,.75); font-size:.92rem; line-height:1.6; }
/* === CTA Banner === */
.cta-banner {
background:var(--coral); padding:52px 0; text-align:center;
position:relative; overflow:hidden;
}
.cta-banner::before {
content:''; position:absolute; inset:0;
background:repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(0,0,0,.04) 35px, rgba(0,0,0,.04) 36px);
}
.cta-banner .container { position:relative; z-index:1; }
.cta-banner h2 { color:#fff; margin-bottom:10px; }
.cta-banner p { color:rgba(255,255,255,.92); font-size:1.02rem; max-width:520px; margin:0 auto 20px; }
/* === POV Email Capture === */
.pov-capture { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 40px); align-items:center; }
.pov-form { display:flex; gap:8px; max-width:400px; }
.pov-form input {
flex:1; padding:10px 14px;
border:1px solid rgba(255,255,255,.2); border-radius:var(--radius);
font-size:.85rem; background:rgba(255,255,255,.06); color:#fff;
}
.pov-form input::placeholder { color:rgba(255,255,255,.35); }
.pov-form--light input { border-color:var(--w200); background:var(--white); color:var(--w700); }
.pov-form--light input::placeholder { color:var(--w400); }
.pov-preview {
background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.45);
border-radius:var(--radius-xl); padding:22px;
box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.pov-preview--light { background:var(--w100); border-color:var(--w200); }
/* === FAQ === */
.faq-list { max-width:680px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--w100); }
.faq-q {
width:100%; background:none; border:none; padding:16px 0;
display:flex; justify-content:space-between; align-items:center;
font-family:var(--font-heading); font-size:1.05rem; font-weight:600;
color:var(--blue); text-align:left; cursor:pointer;
}
.faq-q .icon { transition:transform .3s; flex-shrink:0; margin-left:12px; color:var(--w400); }
.faq-item.active .faq-q .icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a__inner { padding:0 0 16px; color:var(--w600); font-size:1.02rem; line-height:1.7; }
.faq-item.active .faq-a { max-height:640px; }
/* === Page Hero (inner pages) === */
.page-hero {
padding:calc(var(--header-h) + 40px) 0 36px;
background:linear-gradient(135deg, var(--blue-dark), var(--blue));
color:#fff; position:relative; overflow:hidden; margin-bottom:0;
}
.page-hero::before {
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse at 70% 50%, rgba(255,202,36,.05) 0%, transparent 60%);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; font-family:var(--font-display); margin-bottom:10px; }
.page-hero .tagline { font-family:var(--font-display); font-size:1.1rem; font-style:italic; color:var(--sun-yellow); margin-bottom:8px; }
.page-hero p { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:620px; line-height:1.7; }
.breadcrumb { font-family:var(--font-heading); font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:14px; letter-spacing:.05em; }
.breadcrumb a:hover { color:#fff; }
/* Video-background variant for location heroes (e.g. Mokena water tower) */
.page-hero--video { min-height:72vh; display:flex; align-items:center;
padding-top:calc(var(--header-h) + 70px); padding-bottom:70px; }
.page-hero--video .container { width:100%; }
.page-hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-hero__bg video { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.page-hero__bg::after { content:''; position:absolute; inset:0;
background:linear-gradient(115deg, rgba(20,21,58,.92) 0%, rgba(28,29,96,.78) 44%, rgba(28,29,96,.45) 100%); }
@media (max-width:768px){ .page-hero--video { min-height:60vh; } }
/* Trust / proof cards on location pages: numbered, accented, higher contrast */
.trust-grid { counter-reset: proof; }
.trust-grid .comm-card {
counter-increment: proof;
position:relative; overflow:hidden;
background:linear-gradient(158deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.045) 100%);
border:1px solid rgba(255,255,255,.16);
border-left:3px solid var(--coral);
padding:22px 22px 20px;
}
.trust-grid .comm-card::before {
content: counter(proof, decimal-leading-zero);
position:absolute; top:4px; right:14px; z-index:0;
font-family:var(--font-display); font-weight:700;
font-size:2.7rem; line-height:1; color:rgba(255,255,255,.07);
pointer-events:none;
}
.trust-grid .comm-card h3,.trust-grid .comm-card h4 { position:relative; z-index:1; color:var(--sun-yellow); font-size:1.14rem; margin-bottom:7px; }
.trust-grid .comm-card p { position:relative; z-index:1; color:rgba(255,255,255,.9); font-size:.96rem; line-height:1.6; }
.trust-grid .comm-card:hover {
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.24); border-left-color:var(--sun-yellow);
transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.22);
}
/* Community / local-presence photo grid on location pages */
.community-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0; padding:0; }
.community-card { border-radius:var(--radius-lg); overflow:hidden; background:var(--blue);
border-top:3px solid var(--coral); box-shadow:var(--shadow-md); transition:transform .3s var(--ease), box-shadow .3s var(--ease); margin:0; }
.community-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.community-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.community-card figcaption { padding:13px 15px; color:#fff; font-size:.92rem; line-height:1.45; }
@media (max-width:900px){ .community-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .community-grid { grid-template-columns:1fr; } }
/* === Locations Map === */
.loc-map {
position:relative; width:100%; aspect-ratio:16/10;
background:linear-gradient(135deg, rgba(51,51,147,.08), rgba(51,51,147,.03));
border-radius:var(--radius-xl); border:1px solid var(--w200); overflow:hidden;
}
.loc-pin {
position:absolute; transform:translate(-50%,-50%); cursor:pointer; z-index:2;
}
.loc-pin__dot {
border-radius:50%; border:2px solid #fff;
box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s;
}
.loc-pin:hover .loc-pin__dot { transform:scale(1.4); }
.loc-pin__popup {
display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
background:var(--blue-dark); color:#fff; padding:8px 12px; border-radius:var(--radius);
font-family:var(--font-heading); font-size:.68rem; white-space:nowrap;
box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:10;
}
.loc-pin:hover .loc-pin__popup { display:block; }
.loc-pin__popup strong { display:block; font-weight:700; margin-bottom:2px; }
.loc-pin__popup span { color:rgba(255,255,255,.5); }
/* === Contact Form === */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 40px); }
.form-wrap {
background:var(--white); border:1px solid var(--w100);
border-radius:var(--radius-xl); padding:24px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-group { margin-bottom:14px; }
.form-group label {
display:block; font-family:var(--font-heading); font-size:.72rem;
font-weight:600; color:var(--w500); margin-bottom:3px;
}
.form-group input,.form-group select,.form-group textarea {
width:100%; padding:9px 11px;
border:1px solid var(--w200); border-radius:var(--radius);
font-size:.85rem; color:var(--w700); background:var(--white);
transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(51,51,147,.06);
}
.form-group textarea { min-height:100px; resize:vertical; }
/* === Contact Info === */
/* === Contact Page Tiles === */
.contact-row {
display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.contact-card--tile {
display:flex; flex-direction:column; align-items:flex-start; gap:14px;
padding:28px 22px; background:#fff;
border:1.5px solid var(--blue); border-radius:14px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
text-decoration:none; color:inherit; min-height:170px;
}
.contact-card--tile:hover {
transform:translateY(-4px) scale(1.03);
box-shadow:0 0 0 4px rgba(51,51,147,.12), 0 18px 40px rgba(51,51,147,.18);
}
.contact-card--tile:hover .contact-card__icon {
background:var(--blue); color:#fff;
}
.contact-card--tile .contact-card__icon {
width:48px; height:48px;
background:rgba(51,51,147,.08); border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
color:var(--blue); transition:background .25s ease, color .25s ease;
}
.contact-card--tile .contact-card__icon svg { width:22px; height:22px; }
.contact-card--tile .contact-card__label {
font-family:var(--font-heading); font-size:.66rem; font-weight:600;
text-transform:uppercase; letter-spacing:.12em; color:var(--w500);
display:block;
}
.contact-card--tile .contact-card__value {
font-family:var(--font-heading); font-size:1rem; font-weight:600;
color:var(--blue); line-height:1.45; margin-top:-4px;
word-break:break-word;
}
.contact-map {
margin-top:32px; border-radius:14px; overflow:hidden;
aspect-ratio:21/9; background:var(--w100);
border:1px solid var(--w100);
}
.contact-map iframe { display:block; width:100%; height:100%; border:0; }
@media (max-width:920px) {
.contact-row { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px) {
.contact-row { grid-template-columns:1fr; }
.contact-card--tile { min-height:auto; padding:20px; flex-direction:row; align-items:center; }
.contact-card--tile .contact-card__icon { flex-shrink:0; }
}
/* === Trust Bar === */
.trust-bar {
background:var(--w50); border-bottom:1px solid var(--w100);
padding:30px 0; overflow-x:auto;
}
.trust-bar__inner {
display:flex; align-items:flex-end; justify-content:center;
gap:clamp(28px, 5vw, 64px); flex-wrap:wrap;
}
.trust-badge {
display:flex; flex-direction:column; align-items:center; gap:10px;
font-family:var(--font-heading); color:var(--w800); text-align:center;
transition:transform .25s ease;
min-width:140px;
}
.trust-badge:hover { transform:scale(1.06); }
.trust-badge a { color:inherit; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.trust-badge:hover a { color:var(--coral); }
.trust-badge__img {
height:60px; max-width:170px; width:auto;
object-fit:contain; display:block;
}
.trust-badge__img--lg {
height:84px; max-width:210px;
}
.trust-badge__img--md {
height:72px; max-width:190px;
}
.trust-badge__img--google {
height:64px; max-width:180px;
}
.trust-badge__caption {
font-family:var(--font-heading); font-weight:700;
font-size:.98rem; color:var(--w800);
letter-spacing:.02em; line-height:1.35;
}
.trust-badge__google {
display:flex; flex-direction:column; align-items:center; gap:4px;
height:60px; justify-content:center;
}
.trust-badge__google-stars { color:#FBBC05; font-size:1.4rem; letter-spacing:2px; line-height:1; }
.trust-badge__google-rating { font-family:var(--font-heading); font-weight:800; font-size:1.18rem; color:var(--w800); line-height:1; }
@media (max-width:680px) {
.trust-bar { padding:22px 0; }
.trust-bar__inner { gap:22px 26px; }
.trust-badge { min-width:100px; }
.trust-badge__img { height:46px; max-width:130px; }
.trust-badge__img--lg { height:62px; max-width:160px; }
.trust-badge__img--md { height:54px; max-width:148px; }
.trust-badge__img--google { height:48px; max-width:140px; }
.trust-badge__google { height:46px; }
.trust-badge__google-rating { font-size:1.05rem; }
.trust-badge__caption { font-size:.88rem; }
}
/* === Residential Service Cards === */
.res-service-card {
display:block; text-decoration:none;
background:var(--blue); border:1.5px solid var(--blue);
border-radius:var(--radius-lg); padding:22px 20px;
box-shadow:0 2px 10px rgba(26,26,62,.1);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.res-service-card h4 { color:#fff !important; font-size:1rem !important; margin-bottom:6px !important; }
.res-service-card p { color:rgba(255,255,255,.75) !important; font-size:.8rem !important; line-height:1.6 !important; }
.res-service-card:hover {
transform:translateY(-3px);
background:var(--blue-dark);
border-color:var(--coral);
box-shadow:0 0 0 2px var(--coral), 0 12px 30px rgba(51,51,147,.3);
}
/* === Residential Process Cards (How It Works) === */
.process-card {
background:var(--white); border:2px solid var(--coral);
border-radius:var(--radius-lg); padding:24px 22px 22px;
box-shadow:0 4px 16px rgba(26,26,62,.08);
transition:transform .25s ease, box-shadow .25s ease;
position:relative;
}
.process-card:hover {
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(26,26,62,.14);
}
.process-card:hover .process-card__num { background:var(--blue); transform:rotate(-4deg); }
.process-card__num {
display:inline-flex; align-items:center; justify-content:center;
width:52px; height:52px; border-radius:50%;
background:var(--coral); color:#fff;
font-family:var(--font-heading); font-size:1.3rem; font-weight:800;
letter-spacing:-.02em; margin-bottom:14px;
box-shadow:0 4px 14px rgba(254,101,110,.4);
transition:background .3s ease, transform .3s ease;
}
.process-card__body h4 {
color:var(--blue); font-size:1rem; margin-bottom:6px;
font-family:var(--font-heading); font-weight:700;
}
.process-card__body p { color:var(--w500); font-size:.8rem; line-height:1.65; margin:0; }
/* === Customer Testimonial Cards (clean white, no source badge) === */
.testimonial-card {
position:relative; background:#fff;
border-radius:16px; padding:30px 28px 24px;
box-shadow:var(--shadow-lg);
transition:transform .25s ease, box-shadow .25s ease;
display:flex; flex-direction:column; min-height:100%;
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); }
.testimonial-card__link { position:absolute; inset:0; z-index:2; border-radius:inherit; }
.testimonial-card__link:focus-visible { outline:3px solid var(--sun-yellow); outline-offset:3px; }
.testimonial-card__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.testimonial-card__stars {
display:inline-block; width:114px; height:20px; vertical-align:middle;
background:url("data:image/svg+xml,") left center/contain no-repeat;
}
.testimonial-card__source {
display:inline-flex; align-items:center; gap:6px;
font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:var(--w500);
}
.testimonial-card__source-logo {
width:18px; height:18px; display:inline-block; flex-shrink:0;
background:url("data:image/svg+xml,") center/contain no-repeat;
}
.testimonial-card__body {
position:relative;
font-family:var(--font-body); font-size:1.02rem; font-weight:400;
color:var(--w700); line-height:1.75; margin:0 0 20px; flex-grow:1;
}
.testimonial-card__body::before {
content:'\201C'; font-family:var(--font-display); font-size:2.2rem;
color:var(--coral); line-height:0; vertical-align:-.5em; margin-right:2px;
}
.testimonial-card__body::after {
content:'\201D'; font-family:var(--font-display); font-size:2.2rem;
color:var(--coral); line-height:0; vertical-align:-.5em; margin-left:2px;
}
.testimonial-card__footer {
border-top:1px solid var(--w100); padding-top:16px;
display:flex; align-items:center; gap:12px;
}
.testimonial-card__avatar {
width:48px; height:48px; border-radius:50%;
background:linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
color:#fff;
font-family:var(--font-heading); font-size:.98rem; font-weight:700; letter-spacing:.06em;
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0;
box-shadow:0 3px 8px rgba(51,51,147,.22);
}
.testimonial-card__meta { display:flex; flex-direction:column; line-height:1.35; }
.testimonial-card__name {
font-family:var(--font-heading); font-size:.98rem; font-weight:700;
color:var(--blue-dark);
}
.testimonial-card__sub {
font-family:var(--font-heading); font-size:.82rem; font-weight:500;
color:var(--w500); letter-spacing:.02em;
}
/* === Residential Work Gallery === */
.res-gallery {
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-auto-rows:240px;
gap:12px;
}
.res-gallery__item {
position:relative; margin:0; overflow:hidden; display:block;
border-radius:var(--radius-lg); background:var(--w100);
text-decoration:none; color:inherit; cursor:pointer;
transition:transform .35s ease, box-shadow .35s ease;
}
.res-gallery__item:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.res-gallery__item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.res-gallery__item:hover img { transform:scale(1.04); }
.res-gallery__item--wide { grid-column:span 2; grid-row:span 2; }
.res-gallery__item figcaption {
position:absolute; left:0; right:0; bottom:0;
padding:14px 16px;
background:linear-gradient(to top, rgba(17,24,49,.85) 0%, rgba(17,24,49,.55) 60%, rgba(17,24,49,0) 100%);
color:#fff; font-family:var(--font-heading);
display:flex; flex-direction:column; gap:2px;
}
.res-gallery__item figcaption strong { font-size:.95rem; font-weight:700; letter-spacing:.02em; }
.res-gallery__item figcaption span { font-size:.88rem; font-weight:500; color:rgba(255,255,255,.92); letter-spacing:.03em; }
@media (max-width:900px) {
.res-gallery { grid-template-columns:repeat(2, 1fr); grid-auto-rows:200px; }
.res-gallery__item--wide { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:560px) {
.res-gallery { grid-template-columns:1fr; grid-auto-rows:180px; }
.res-gallery__item--wide { grid-column:span 1; }
}
/* === Roofing Calculator === */
.calc-wrap {
background:var(--white); border:1px solid var(--w100); border-radius:var(--radius-xl);
padding:clamp(20px, 3vw, 32px); max-width:560px; margin:0 auto;
}
.calc-wrap label {
display:block; font-family:var(--font-heading); font-size:.78rem; font-weight:600;
color:var(--blue); margin-bottom:4px; margin-top:16px;
}
.calc-wrap label:first-child { margin-top:0; }
.calc-wrap select, .calc-wrap input[type="number"] {
width:100%; padding:10px 14px; border:1px solid var(--w200); border-radius:var(--radius);
font-size:.88rem; font-family:var(--font-body); background:var(--w50); color:var(--w700);
}
.calc-wrap select:focus, .calc-wrap input:focus { border-color:var(--blue); outline:none; }
.calc-result {
margin-top:20px; padding:16px; background:var(--blue); border-radius:var(--radius-lg);
text-align:center;
}
.calc-result__range {
font-family:var(--font-heading); font-size:1.4rem; font-weight:800; color:#fff;
}
.calc-result__note { color:rgba(255,255,255,.6); font-size:.72rem; margin-top:4px; }
.calc-result__monthly {
font-family:var(--font-heading); font-size:.9rem; color:var(--sun-yellow);
margin-top:8px; font-weight:700;
}
/* === Footer === */
.footer { background:var(--blue-dark); color:rgba(255,255,255,.5); padding:56px 0 20px; }
.footer__grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.2fr; gap:clamp(16px, 2.3vw, 28px); margin-bottom:32px; }
.footer__brand { max-width:280px; }
.footer__brand img { height:32px; margin-bottom:12px; }
.footer__logos { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__logos img { height:56px; width:auto; margin:0; }
.footer__brand p { font-size:.92rem; line-height:1.7; }
.footer__social { display:flex; gap:8px; margin-top:14px; }
.footer__social a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); transition:all .2s ease; }
.footer__social a:hover { background:var(--coral); color:#fff; transform:translateY(-1px); }
.footer__social svg { width:15px; height:15px; fill:currentColor; }
.footer__col h4 {
color:#fff; font-family:var(--font-heading); font-size:.86rem;
font-weight:700;
text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px;
}
.footer__col a { display:block; font-size:.92rem; padding:4px 0; transition:color .15s; }
.footer__col a:hover { color:#fff; }
.footer__col span { display:block; font-size:.92rem; padding:4px 0; }
.footer__col-sub {
display:block !important;
font-family:var(--font-heading);
font-size:.7rem !important;
font-weight:800;
text-transform:uppercase;
letter-spacing:.14em;
color:rgba(255,255,255,.45) !important;
margin-top:14px;
padding-top:10px !important;
padding-bottom:0 !important;
border-top:1px solid rgba(255,255,255,.08);
}
/* Footer column groups — wrap each subheading + its links so the second subheading
aligns horizontally across Commercial / Residential / About columns. */
.footer__col-group { display:block; }
.footer__col-group:first-of-type { min-height:234px; }
/* First subheading inside the first group — drop the redundant border/spacing */
.footer__col-group:first-of-type > .footer__col-sub {
margin-top:0 !important;
padding-top:0 !important;
border-top:none !important;
}
.footer__bottom {
border-top:1px solid rgba(255,255,255,.06); padding-top:16px;
display:flex; justify-content:space-between; align-items:center;
flex-wrap:wrap; gap:8px; font-size:.78rem;
}
/* === Scroll Animations === */
/* Elements start visible. JS adds .anim-ready to html, which enables animation. */
/* This way content is never hidden if JS fails to load. */
.anim { opacity:1; transform:translateY(0); }
html.anim-ready .anim { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
html.anim-ready .anim.visible { opacity:1; transform:translateY(0); }
.anim-d1 { transition-delay:.1s; }
.anim-d2 { transition-delay:.2s; }
.anim-d3 { transition-delay:.3s; }
/* === Responsive === */
@media (max-width:1024px) {
.hero__grid { grid-template-columns:1fr; gap:24px; }
.hero__visual { max-width:520px; }
.pathways { grid-template-columns:1fr; }
.comm-grid { grid-template-columns:1fr 1fr; }
.detail-split { grid-template-columns:1fr; gap:24px; }
.detail-split--flip { direction:ltr; }
.pov-capture { grid-template-columns:1fr; }
.contact-grid { grid-template-columns:1fr; }
.footer__grid { grid-template-columns:1fr 1fr; gap:20px; }
}
@media (max-width:768px) {
:root { --header-h:62px; --container:100%; --container-wide:100%; }
.container { padding:0 16px; }
.header__inner { padding:0 16px; }
/* Mobile logo */
.header__logo-icon { height:38px; width:38px; padding:3px; border-radius:8px; }
.header__logo-text { font-size:1.35rem; }
/* Mobile nav */
.nav { display:none; }
.header__mobile-toggle { display:block; }
/* Hero */
.hero { min-height:auto; padding-bottom:48px; }
.hero__stats {
position:relative; bottom:auto; left:auto; transform:none;
margin-top:16px; flex-wrap:wrap; gap:16px; padding:12px 16px;
justify-content:center;
}
/* Grids */
.process-grid { grid-template-columns:1fr 1fr; }
.comm-grid { grid-template-columns:1fr; }
.footer__grid {
grid-template-columns:1fr 1fr; gap:18px 14px;
}
.footer__brand { grid-column:1 / -1; max-width:none; }
.footer__bottom { flex-direction:column; text-align:center; }
.form-row { grid-template-columns:1fr; }
/* Buttons */
.btn-row { flex-direction:column; }
.btn-row .btn { width:100%; justify-content:center; }
/* Pathway cards */
.pathways .pathway { min-height:280px; }
/* Sticky CTA on mobile */
.mobile-sticky-cta {
display:block; position:fixed; bottom:0; left:0; right:0;
background:var(--blue); padding:10px 16px; z-index:999;
box-shadow:0 -4px 20px rgba(0,0,0,.2);
display:flex; gap:8px;
}
.mobile-sticky-cta a { flex:1; text-align:center; }
}
@media (min-width:769px) {
.mobile-sticky-cta { display:none; }
}
/* === Widescreen Fix === */
@media (min-width:1400px) {
.hero { min-height:80vh; }
}
/* === Our Process (icon-based horizontal) === */
.process-row {
display:grid; grid-template-columns:repeat(5,1fr); gap:20px; text-align:center;
position:relative;
}
.process-row::before {
content:''; position:absolute; top:32px; left:10%; right:10%;
height:2px; background:rgba(255,255,255,.1); z-index:0;
}
.process-step { position:relative; z-index:1; }
.process-step__icon {
width:64px; height:64px; border-radius:50%;
background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
display:flex; align-items:center; justify-content:center;
margin:0 auto 10px; font-size:1.3rem; color:var(--sun-yellow);
transition:all .3s;
}
.process-step:hover .process-step__icon {
background:rgba(255,255,255,.2); border-color:var(--sun-yellow);
transform:scale(1.1);
}
.process-step h4 { color:#fff; font-size:.85rem; margin-bottom:3px; }
.process-step p { color:rgba(255,255,255,.78); font-size:.92rem; line-height:1.55; }
/* Light variant */
.process-row--light::before { background:var(--w200); }
.process-step--light .process-step__icon {
background:var(--w50); border-color:var(--w200); color:var(--blue);
}
.process-step--light h4 { color:var(--blue); }
.process-step--light p { color:var(--w500); }
@media (max-width:768px) {
.process-row { grid-template-columns:1fr 1fr; gap:16px; }
.process-row::before { display:none; }
}
@media (max-width:480px) {
.process-row { grid-template-columns:1fr; }
}
/* === The Americanstruction Way — alternating zigzag timeline === */
.am-way { position:relative; padding:24px 0; }
.am-way__track {
display:grid; grid-template-columns:repeat(8, 1fr) 2fr; gap:0;
position:relative; height:420px;
}
/* Horizontal yellow rail — extends past Warranties to where the Roof Services end-cap icon sits */
.am-way__track::before {
content:''; position:absolute; left:5%; right:16%; top:50%;
height:4px; background:var(--sun-yellow); transform:translateY(-50%);
border-radius:2px; z-index:1;
}
.am-way__node { position:relative; }
/* Yellow dot where each stem meets the horizontal rail */
.am-way__node::before {
content:''; position:absolute; left:50%; top:50%;
width:14px; height:14px; border-radius:50%;
background:var(--sun-yellow);
transform:translate(-50%,-50%); z-index:3;
}
/* Vertical stem connecting rail to label */
.am-way__stem {
position:absolute; left:50%; width:3px;
background:var(--sun-yellow);
transform:translateX(-50%); z-index:2;
}
.am-way__node--up .am-way__stem { bottom:50%; height:30px; }
.am-way__node--down .am-way__stem { top:50%; height:30px; }
/* Label sits between stem and icon */
.am-way__label {
position:absolute; left:50%; transform:translateX(-50%);
width:175px; text-align:center;
font-family:var(--font-heading); font-weight:700; font-size:1.1rem;
color:#fff; line-height:1.25; z-index:4; letter-spacing:.005em;
}
.am-way__node--up .am-way__label { bottom:calc(50% + 36px); }
.am-way__node--down .am-way__label { top:calc(50% + 36px); }
/* Icon (no circle, no border, just the image) */
.am-way__icon {
position:absolute; left:50%; transform:translateX(-50%);
width:120px; height:120px;
display:flex; align-items:center; justify-content:center;
color:#fff; z-index:4;
transition:transform .25s ease;
}
.am-way__icon img, .am-way__icon svg {
width:100%; height:100%; object-fit:contain; display:block;
}
.am-way__icon svg { stroke:#fff; }
.am-way__node--up .am-way__icon { bottom:calc(50% + 86px); }
.am-way__node--down .am-way__icon { top:calc(50% + 86px); }
.am-way__node:hover .am-way__icon { transform:translateX(-50%) scale(1.06); }
/* End-cap node (Roof Services): icon centered on the rail, label below it. Defined after generic hover so it wins source-order. */
.am-way__node--end::before { display:none; }
.am-way__node--end .am-way__stem { display:none; }
.am-way__node--end .am-way__icon { top:50%; bottom:auto; transform:translate(-50%, -50%); }
.am-way__node--end:hover .am-way__icon { transform:translate(-50%, -50%) scale(1.06); }
.am-way__node--end .am-way__label { top:calc(50% + 52px); bottom:auto; }
/* Yellow dot capping the right end of the rail */
.am-way__track::after {
content:''; position:absolute;
right:16%; top:50%;
width:14px; height:14px; border-radius:50%;
background:var(--sun-yellow);
transform:translate(50%, -50%);
z-index:2;
}
/* Light variant for non-navy backgrounds */
.am-way--light .am-way__track::before,
.am-way--light .am-way__track::after,
.am-way--light .am-way__stem,
.am-way--light .am-way__node::before { background:var(--coral); }
.am-way--light .am-way__label { color:var(--blue); }
.am-way--light .am-way__icon { color:var(--blue); }
.am-way--light .am-way__icon img { filter:brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(2000%) hue-rotate(230deg); }
@media (max-width:900px) {
/* Mobile: rotate the desktop horizontal zigzag 90° into a vertical zigzag.
Yellow rail runs top-to-bottom in the center, with dots at each stage,
a short stem extending from the rail toward each icon, and content
alternating left (--up) and right (--down) of the rail. */
.am-way { padding:8px 0; }
.am-way__track {
display:block; position:relative; height:auto;
grid-template-columns:none; gap:0;
}
/* Hide desktop's horizontal rail + right-end dot — mobile draws per-node segments instead */
.am-way__track::before { display:none; }
.am-way__track::after { display:none; }
.am-way__node {
position:relative; display:flex; align-items:center;
min-height:118px; padding:8px 0; gap:10px;
}
/* Per-node vertical rail segment — so the rail terminates cleanly above the end-cap */
.am-way__node::after {
content:''; position:absolute;
left:50%; top:0; bottom:0; width:4px;
transform:translateX(-50%);
background:var(--sun-yellow); border-radius:2px;
z-index:1;
}
/* Yellow dot on the rail at each node */
.am-way__node::before {
content:''; position:absolute;
left:50%; top:50%;
width:18px; height:18px; border-radius:50%;
background:var(--sun-yellow);
transform:translate(-50%,-50%); z-index:3;
box-shadow:0 0 0 4px var(--blue-dark);
}
/* Short horizontal stem extending from the rail toward each icon.
High-specificity selectors override the desktop rules (.am-way__node--up .am-way__stem)
which set height:30px (vertical stem). On mobile the stem is horizontal: 26px × 4px,
same thickness as the vertical rail. */
.am-way__node .am-way__stem,
.am-way__node--up .am-way__stem,
.am-way__node--down .am-way__stem {
display:block; position:static; transform:none;
width:26px; height:4px; flex-shrink:0;
background:var(--sun-yellow); border-radius:2px;
bottom:auto; top:auto; left:auto; right:auto;
z-index:2;
}
/* Timeline starts with a dot: trim the first node's rail segment so it begins
at the dot's center, not above it. */
.am-way__node:first-of-type::after {
top:50%;
}
/* --up = LEFT side (DOM order: label, icon, stem). Stem touches rail, icon next, then label. */
.am-way__node--up {
flex-direction:row; justify-content:flex-end;
padding-right:calc(50% + 13px); padding-left:8px;
}
/* --down = RIGHT side (DOM order: stem, icon, label). Same hugging behavior, mirrored. */
.am-way__node--down {
flex-direction:row; justify-content:flex-start;
padding-left:calc(50% + 13px); padding-right:8px;
}
/* Neutralize all desktop absolute positioning on icon + label */
.am-way__node .am-way__icon,
.am-way__node--up .am-way__icon,
.am-way__node--down .am-way__icon,
.am-way__node--end .am-way__icon {
position:static; transform:none;
width:64px; height:64px; flex-shrink:0;
top:auto; bottom:auto; left:auto; right:auto;
}
.am-way__node .am-way__label,
.am-way__node--up .am-way__label,
.am-way__node--down .am-way__label,
.am-way__node--end .am-way__label {
position:static; transform:none;
width:auto; max-width:38vw;
font-size:1rem; font-weight:700; line-height:1.25;
top:auto; bottom:auto; left:auto; right:auto;
}
.am-way__node--up .am-way__label { text-align:right; }
.am-way__node--down .am-way__label { text-align:left; }
.am-way__node:hover .am-way__icon,
.am-way__node--end:hover .am-way__icon { transform:scale(1.04); }
/* End-cap (Roof Services): one full spacing of rail above the terminus dot,
then icon + label below — matches the dot-to-dot rhythm of the rest of the timeline. */
.am-way__node--end {
flex-direction:column; align-items:center; justify-content:flex-start;
padding:0 0 16px; gap:12px; min-height:auto; position:relative;
}
/* Rail segment runs from the top of the end node down to the terminus dot (~59px) —
half the regular node height, which closes the spacing gap to Warranties. */
.am-way__node--end::after {
display:block;
content:''; position:absolute;
left:50%; top:0; height:59px;
width:4px; transform:translateX(-50%);
background:var(--sun-yellow); border-radius:2px;
z-index:1;
bottom:auto; right:auto;
}
/* Terminating dot at the rail's bottom edge — same size and halo as every other dot.
`display:block` reverses the desktop `.am-way__node--end::before { display:none }` rule,
which would otherwise hide the dot on mobile because of equal specificity. */
.am-way__node--end::before {
display:block;
content:'';
top:59px; left:50%;
width:18px; height:18px; border-radius:50%;
background:var(--sun-yellow);
transform:translate(-50%,-50%);
box-shadow:0 0 0 4px var(--blue-dark);
z-index:3;
}
/* DOM order is label, icon, stem — use flex order so the icon appears above the label */
.am-way__node--end .am-way__icon {
order:1;
margin-top:80px; /* clear the dot + halo before the icon starts */
width:72px; height:72px;
background:transparent; box-shadow:none; padding:0;
}
.am-way__node--end .am-way__label {
order:2;
text-align:center; max-width:80%; font-size:1.05rem;
}
.am-way__node--end .am-way__stem { display:none; }
}
/* === Mega Menu Columns === */
.mega-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; }
.mega-col { break-inside:avoid; display:flex; flex-direction:column; }
/* === Commercial System Pages — Visual Upgrade === */
/* System hero with subtle photo backdrop */
.sys-hero { position:relative; overflow:hidden; padding:calc(var(--header-h) + 72px) 0 72px; color:#fff; background:var(--blue-dark); }
.sys-hero::before {
content:''; position:absolute; inset:0;
background-image:var(--hero-bg, none);
background-size:cover; background-position:center;
opacity:.55; filter:grayscale(10%);
}
.sys-hero::after {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg, rgba(10,14,48,.55) 0%, rgba(51,51,147,.25) 60%, rgba(10,14,48,.15) 100%);
}
.sys-hero .container { position:relative; z-index:2; }
.sys-hero .breadcrumb { color:rgba(255,255,255,.75); }
.sys-hero .breadcrumb a { color:rgba(255,255,255,.9); }
.sys-hero h1 { font-family:var(--font-display); font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; margin:0 0 10px; max-width:780px; color:var(--sun-yellow); text-shadow:0 2px 10px rgba(0,0,0,.35); }
.sys-hero__locale {
display:inline-block; margin:18px 0 0;
background:rgba(255,202,36,.85); color:var(--blue-dark);
font-family:var(--font-heading);
font-size:.66rem; font-weight:700;
text-transform:uppercase; letter-spacing:.14em;
padding:5px 12px; border-radius:99px;
}
.sys-hero .tagline { font-family:var(--font-heading); font-size:1.05rem; color:#fff; font-weight:600; font-style:normal; margin-bottom:14px; letter-spacing:.01em; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.sys-hero p { font-size:1rem; color:rgba(255,255,255,.92); max-width:620px; line-height:1.7; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.sys-hero__accent { position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(to bottom, var(--coral), var(--sun-yellow)); z-index:3; }
/* Numbered method cards */
.method-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.method-card {
position:relative; background:var(--blue); border:1px solid transparent;
border-radius:12px; padding:28px 24px 24px;
box-shadow:0 6px 18px rgba(51,51,147,.2);
transition:transform .25s, box-shadow .25s, border-color .25s;
overflow:hidden;
}
.method-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:4px;
background:linear-gradient(90deg, var(--coral), var(--sun-yellow));
transform:scaleX(.3); transform-origin:left; transition:transform .35s;
}
.method-card:hover { transform:translateY(-4px); box-shadow:0 0 0 2px var(--sun-yellow), 0 14px 32px rgba(51,51,147,.35); border-color:var(--sun-yellow); }
.method-card:hover::before { transform:scaleX(1); }
.method-card__num {
display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; border-radius:50%;
background:#fff; color:var(--blue);
font-family:var(--font-heading); font-weight:800; font-size:1rem;
margin-bottom:14px; letter-spacing:.02em;
box-shadow:0 4px 10px rgba(255,255,255,.25);
}
.method-card h4 { color:var(--sun-yellow); font-size:1.1rem; margin-bottom:8px; }
.method-card p { font-size:.88rem; color:rgba(255,255,255,.88); line-height:1.6; margin:0; }
/* Fit criteria cards with colored icon */
.fit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:980px; margin:0 auto; }
.fit-card {
display:flex; gap:14px; align-items:flex-start;
padding:18px 18px 18px 16px; background:#fff;
border:1px solid var(--w100); border-radius:10px;
transition:border-color .2s, transform .2s, box-shadow .2s;
}
.fit-card:hover { border-color:var(--coral); transform:translateY(-2px); box-shadow:0 0 0 2px var(--coral), 0 6px 18px rgba(0,0,0,.06); }
.fit-card__icon {
flex-shrink:0; width:38px; height:38px; border-radius:50%;
background:var(--blue);
color:#fff; display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:1rem;
box-shadow:0 4px 10px rgba(51,51,147,.25);
}
.fit-card__body strong { color:var(--blue); display:block; margin-bottom:2px; font-size:.95rem; }
.fit-card__body span { font-size:.82rem; color:var(--w600); line-height:1.5; }
/* Solid blue fit-cards for use on LIGHT (warm/white) sections where white cards would not separate.
The fit-card__icon (white check on blue) becomes a yellow check so it reads on the blue card. */
.fit-grid--solid .fit-card { background:var(--blue); border-color:var(--blue); }
.fit-grid--solid .fit-card:hover { background:var(--blue-mid); border-color:var(--coral); box-shadow:0 0 0 2px var(--coral), 0 6px 18px rgba(0,0,0,.18); }
.fit-grid--solid .fit-card__icon { background:var(--sun-yellow); color:var(--blue-dark); box-shadow:0 4px 10px rgba(0,0,0,.2); }
.fit-grid--solid .fit-card__body strong { color:#fff; }
.fit-grid--solid .fit-card__body span { color:rgba(255,255,255,.85); }
/* Manufacturer section — sleek light treatment */
.mfr-section {
position:relative; padding:88px 0;
background:var(--w50);
color:var(--w700);
border-top:1px solid var(--w100);
border-bottom:1px solid var(--w100);
}
.mfr-section .container { position:relative; z-index:1; }
.mfr-section h2 { color:var(--blue); }
.mfr-section .sec-sub { color:var(--w500); }
.mfr-row {
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:20px; max-width:1040px; margin:0 auto;
}
.mfr-item {
position:relative;
padding:32px 24px; text-align:center;
background:var(--blue);
border:6px solid var(--coral);
transition:transform .25s, box-shadow .25s, background .25s;
}
.mfr-item:hover { background:var(--blue-mid); transform:translateY(-3px); box-shadow:0 10px 24px rgba(204,0,0,.18); }
.mfr-item__name {
font-family:var(--font-display); font-size:1.6rem; font-weight:700;
color:#fff; margin-bottom:10px; letter-spacing:.01em;
line-height:1.1;
}
.mfr-item__cert {
display:inline-block; color:var(--sun-yellow);
font-family:var(--font-heading); font-size:.66rem; font-weight:700;
text-transform:uppercase; letter-spacing:.18em;
margin-bottom:10px;
}
.mfr-item__desc {
font-size:.82rem; color:rgba(255,255,255,.85);
line-height:1.55; max-width:220px; margin:0 auto;
}
/* Spec stat pills — premium dark variant */
.spec-pills {
display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
background:linear-gradient(135deg, var(--blue), var(--blue-dark));
padding:20px; border-radius:12px;
box-shadow:0 8px 24px rgba(51,51,147,.25);
margin-top:22px;
}
.spec-pill { padding:10px 12px; text-align:center; }
.spec-pill__value {
font-family:var(--font-heading); font-weight:800;
color:var(--sun-yellow); font-size:1.2rem; line-height:1;
margin-bottom:4px;
}
.spec-pill__label {
font-size:.7rem; color:rgba(255,255,255,.7);
text-transform:uppercase; letter-spacing:.1em;
}
/* Section eyebrow labels for system pages */
.sec-eyebrow {
display:inline-block; font-family:var(--font-heading);
font-size:.86rem; font-weight:800; letter-spacing:.14em;
text-transform:uppercase; color:var(--coral);
padding:7px 16px; background:rgba(255,85,104,.08);
border-radius:99px; margin-bottom:12px;
}
/* Section top accent for visual break */
.sys-accent-band {
height:6px; width:100%;
background:linear-gradient(90deg, var(--coral) 0%, var(--sun-yellow) 50%, var(--coral) 100%);
opacity:.9;
}
/* Brand-blue feature section for "Is X Right" drama */
.sys-dark-section {
position:relative; padding:72px 0; color:#fff; overflow:hidden;
background:linear-gradient(145deg, var(--blue) 0%, var(--blue-mid) 100%);
}
.sys-dark-section::before {
content:''; position:absolute; inset:0; opacity:.12;
background-image:radial-gradient(circle at 15% 20%, var(--sun-yellow) 0%, transparent 45%),
radial-gradient(circle at 85% 80%, var(--sun-orange, #ff874e) 0%, transparent 45%);
}
.sys-dark-section .container { position:relative; z-index:1; }
.sys-dark-section h2 { color:#fff; }
.sys-dark-section .sec-sub { color:rgba(255,255,255,.85); }
.sys-dark-section .sec-eyebrow { color:var(--sun-yellow); background:rgba(255,202,36,.18); }
.sys-dark-section .fit-card {
background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22);
backdrop-filter:blur(4px);
}
.sys-dark-section .fit-card:hover { background:rgba(255,255,255,.18); border-color:var(--sun-yellow); box-shadow:0 0 0 2px var(--sun-yellow), 0 6px 18px rgba(0,0,0,.18); }
.sys-dark-section .fit-card__body strong { color:#fff; }
.sys-dark-section .fit-card__body span { color:rgba(255,255,255,.88); }
/* === HubSpot Form Brand Override === */
.as-form-wrap {
background:#fff; border:1px solid var(--w100);
border-radius:14px; padding:36px;
box-shadow:0 2px 16px rgba(26,26,62,.05);
}
.as-form-wrap__head { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--w100); }
.as-form-wrap__head h3 { font-family:var(--font-heading); font-size:1.25rem; color:var(--blue); margin-bottom:6px; letter-spacing:-.01em; }
.as-form-wrap__head p { font-size:.85rem; color:var(--w500); line-height:1.55; margin:0; }
.as-form .hs-form,
.hs-form-private {
font-family:var(--font-body) !important;
}
.as-form .hs-form-field,
.hs-form-private .hs-form-field {
margin-bottom:20px;
}
.as-form .hs-form-field > label,
.hs-form-private .hs-form-field > label {
display:block; font-family:var(--font-heading); font-size:.72rem; font-weight:700;
color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.as-form .hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form-private .hs-input:not([type="checkbox"]):not([type="radio"]) {
width:100% !important; padding:12px 14px;
font-family:var(--font-body); font-size:.92rem; color:var(--w800);
background:#fff; border:1.5px solid var(--w200); border-radius:8px;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
box-sizing:border-box;
}
.as-form .hs-input:not([type="checkbox"]):not([type="radio"]):hover,
.hs-form-private .hs-input:not([type="checkbox"]):not([type="radio"]):hover {
border-color:var(--w300);
}
.as-form .hs-input:focus,
.hs-form-private .hs-input:focus {
outline:none; border-color:var(--blue);
box-shadow:0 0 0 3px rgba(51,51,147,.12);
}
.as-form select.hs-input,
.hs-form-private select.hs-input {
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
padding-right:36px;
}
.as-form textarea.hs-input,
.hs-form-private textarea.hs-input {
min-height:100px; resize:vertical;
max-width:100%; box-sizing:border-box;
}
@media (max-width:640px) {
.as-form-wrap { padding:20px 16px; }
.as-form textarea.hs-input,
.hs-form-private textarea.hs-input { min-height:110px; width:100% !important; }
.as-form .hs-input:not([type="checkbox"]):not([type="radio"]),
.hs-form-private .hs-input:not([type="checkbox"]):not([type="radio"]) {
padding:12px; font-size:.88rem; max-width:100%; box-sizing:border-box;
}
}
.as-form .inputs-list,
.hs-form-private .inputs-list { list-style:none; padding:0; margin:0; }
.as-form .inputs-list label,
.hs-form-private .inputs-list label {
display:flex; align-items:center; gap:8px;
font-family:var(--font-body); font-size:.85rem; color:var(--w700);
font-weight:400; text-transform:none; letter-spacing:0; margin-bottom:6px;
cursor:pointer;
}
.as-form input[type="checkbox"],
.as-form input[type="radio"],
.hs-form-private input[type="checkbox"],
.hs-form-private input[type="radio"] {
width:16px; height:16px; margin:0; accent-color:var(--blue);
}
.as-form .hs-field-desc,
.hs-form-private .hs-field-desc {
font-size:.72rem; color:var(--w500); line-height:1.5; margin-top:4px;
}
.as-form .hs-error-msgs,
.hs-form-private .hs-error-msgs {
list-style:none; padding:0; margin:6px 0 0;
font-size:.72rem; color:var(--coral);
}
.as-form .hs-button,
.as-form input[type="submit"],
.hs-form-private .hs-button {
width:100%; padding:18px 24px; margin-top:8px;
background:var(--blue) !important; color:#fff !important;
font-family:var(--font-heading); font-size:.92rem; font-weight:700;
text-transform:uppercase; letter-spacing:.08em;
border:none !important; border-radius:10px; cursor:pointer;
transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow:0 4px 12px rgba(51,51,147,.18);
}
.as-form .hs-button:hover,
.hs-form-private .hs-button:hover {
background:var(--blue-mid) !important; transform:translateY(-2px);
box-shadow:0 8px 20px rgba(51,51,147,.28);
}
.as-form .hs-button:active,
.hs-form-private .hs-button:active {
transform:translateY(0); box-shadow:0 2px 8px rgba(51,51,147,.18);
}
.as-form .submitted-message,
.hs-form-private .submitted-message {
padding:24px; background:var(--w50); border-left:3px solid var(--sun-yellow);
border-radius:8px; font-size:.92rem; color:var(--w700); line-height:1.6;
}
/* Two-column layout for compact pairs */
.as-form .form-columns-2,
.hs-form-private .form-columns-2 {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.as-form .form-columns-3,
.hs-form-private .form-columns-3 {
display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;
}
.as-form .form-columns-2 .hs-form-field,
.as-form .form-columns-3 .hs-form-field,
.hs-form-private .form-columns-2 .hs-form-field,
.hs-form-private .form-columns-3 .hs-form-field {
width:100% !important; padding:0 !important; float:none !important;
}
@media (max-width:640px) {
.as-form .form-columns-2,
.as-form .form-columns-3,
.hs-form-private .form-columns-2,
.hs-form-private .form-columns-3 { grid-template-columns:1fr; }
}
/* === Locations Page === */
.market-grid {
display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.market-card {
position:relative; display:flex; flex-direction:column; gap:4px;
padding:24px 18px; background:#fff;
border:1.5px solid var(--w100); border-radius:12px;
text-decoration:none; color:inherit; text-align:left;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
min-height:108px;
}
.market-card:hover {
transform:translateY(-3px); border-color:var(--blue);
box-shadow:0 0 0 2px var(--blue), 0 12px 28px rgba(26,26,62,.12);
}
.market-card h4 {
font-family:var(--font-heading); font-size:1.05rem; font-weight:700;
color:var(--blue); margin:0;
}
.market-card__sub {
font-family:var(--font-heading); font-size:.78rem; font-weight:600;
text-transform:uppercase; letter-spacing:.1em; color:var(--w500);
}
.market-card--hq { background:#fff; border:1.5px solid var(--coral); }
.market-card--hq h4 { color:var(--blue); }
.market-card--hq .market-card__sub { color:var(--w500); }
.market-card--hq:hover { transform:translateY(-3px); border-color:var(--coral); box-shadow:0 0 0 1px var(--coral), 0 14px 30px rgba(0,0,0,.16); }
.market-card--ondark { background:#fff; border:1.5px solid var(--w100); }
.market-card--ondark h4 { color:var(--blue-dark); font-size:1.12rem; }
.market-card--ondark .market-card__sub { color:var(--w500); font-size:.78rem; }
.market-card--ondark:hover { transform:translateY(-3px); border-color:var(--blue); box-shadow:0 10px 26px rgba(26,26,62,.16); }
.market-card--blue { background:var(--blue); border-color:var(--blue); }
.market-card--blue h4 { color:#fff; }
.market-card--blue .market-card__sub { color:rgba(255,255,255,.65); }
.market-card--blue:hover { transform:translateY(-3px); border-color:var(--coral); box-shadow:0 0 0 2px var(--coral), 0 12px 28px rgba(51,51,147,.25); }
.market-card__badge {
position:absolute; top:12px; right:12px;
font-family:var(--font-heading); font-size:.62rem; font-weight:800;
color:var(--blue-dark); background:var(--sun-yellow);
padding:3px 8px; border-radius:50px;
text-transform:uppercase; letter-spacing:.1em;
}
/* Inline "go to the city page" link used in the regional service-area sections */
.muni-link {
display:inline-flex; align-items:center; gap:6px;
font-family:var(--font-heading); font-weight:700; font-size:.98rem;
color:var(--coral); text-decoration:none;
transition:gap .2s ease;
}
.muni-link:hover { text-decoration:underline; gap:10px; }
.muni-link span { transition:transform .2s ease; }
.muni-link:hover span { transform:translateX(2px); }
.county-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.county-card {
background:#fff; border:1.5px solid var(--w100);
border-radius:14px; padding:22px 22px 20px;
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.county-card:hover {
transform:translateY(-2px); border-color:var(--blue);
box-shadow:0 0 0 2px var(--blue), 0 10px 24px rgba(26,26,62,.08);
}
.county-card h4 {
display:flex; align-items:center; gap:8px;
font-family:var(--font-heading); font-size:1rem; font-weight:700;
color:var(--blue); margin-bottom:10px;
}
.county-card__dot {
width:8px; height:8px; border-radius:50%;
background:var(--coral); flex-shrink:0;
}
.county-card p {
font-family:var(--font-body); font-size:.82rem; color:var(--w600);
line-height:1.7; margin:0;
}
@media (max-width:920px) {
.market-grid { grid-template-columns:repeat(3, 1fr); }
.county-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px) {
.market-grid { grid-template-columns:repeat(2, 1fr); }
.county-grid { grid-template-columns:1fr; }
}
/* === Partner / Credential Logo Rail === */
.logo-rail-section { padding:54px 0 50px; background:var(--w50); border-top:1px solid var(--w100); border-bottom:1px solid var(--w100); }
.logo-rail-section--white { background:#fff; }
.logo-rail__heading {
text-align:center; margin-bottom:26px;
}
.logo-rail__eyebrow {
display:inline-block; font-family:var(--font-heading); font-weight:800;
font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--coral); margin-bottom:6px;
}
.logo-rail__title {
font-family:var(--font-heading); font-weight:700; font-size:1.15rem;
color:var(--blue); letter-spacing:-.01em; margin:0 0 4px;
}
.logo-rail__sub {
font-family:var(--font-body); font-size:.85rem; color:var(--w500);
line-height:1.6; max-width:600px; margin:0 auto;
}
.logo-rail {
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:18px 28px;
}
.logo-rail__item {
display:flex; align-items:center; justify-content:center;
background:#fff; border:1px solid var(--w100); border-radius:10px;
padding:14px 22px; min-width:120px; height:80px;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-rail__item:hover {
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(10,13,51,.10);
border-color:var(--w200);
}
.logo-rail__item img,
.logo-rail__item svg {
max-height:48px; max-width:140px; width:auto; height:auto;
object-fit:contain; display:block;
}
@media (max-width:680px) {
.logo-rail { gap:12px 16px; }
.logo-rail__item { min-width:96px; height:64px; padding:10px 14px; }
.logo-rail__item img, .logo-rail__item svg { max-height:38px; max-width:104px; }
}
/* === Trusted By Infinite Marquee === */
.trusted-by {
background:#fff;
padding:54px 0 56px;
border-top:1px solid var(--w100);
border-bottom:1px solid var(--w100);
overflow:hidden;
}
.trusted-by__heading {
text-align:center;
margin-bottom:32px;
}
.trusted-by__eyebrow {
display:inline-block;
font-family:var(--font-heading); font-weight:800;
font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--coral); margin-bottom:6px;
}
.trusted-by__title {
font-family:var(--font-heading); font-weight:700; font-size:1.4rem;
color:var(--blue); letter-spacing:-.01em; margin:0 auto 8px;
max-width:760px; line-height:1.25;
}
.trusted-by__sub {
font-family:var(--font-body); font-size:.9rem; color:var(--w500);
line-height:1.6; max-width:600px; margin:0 auto;
}
.trusted-by__marquee {
position:relative;
width:100%;
overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trusted-by__track {
display:flex; align-items:center;
gap:64px;
width:max-content;
animation:trustedby-scroll 55s linear infinite;
will-change:transform;
}
.trusted-by__marquee:hover .trusted-by__track,
.trusted-by__track:hover {
animation-play-state:paused;
}
.trusted-by__item {
flex-shrink:0;
display:flex; align-items:center; justify-content:center;
height:128px;
}
.trusted-by__item img {
height:60px;
max-width:180px;
width:auto;
object-fit:contain;
display:block;
filter:grayscale(20%);
opacity:.92;
transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
/* Wider rectangular logos that need a moderate boost */
.trusted-by__item--lg img { height:84px; max-width:230px; }
/* Square / compact logos that need more height to match visual mass */
.trusted-by__item--xl img { height:100px; max-width:200px; }
/* Round / square badge logos (Mule-Hide, Yelp) that need to fill more visual space */
.trusted-by__item--xxl img { height:120px; max-width:200px; }
.trusted-by__item--wide img { height:78px; max-width:280px; }
.trusted-by__item:hover img {
filter:none;
opacity:1;
transform:scale(1.04);
}
@keyframes trustedby-scroll {
from { transform:translateX(0); }
to { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.trusted-by__track { animation:none; }
}
@media (max-width:680px) {
.trusted-by { padding:38px 0 40px; }
.trusted-by__title { font-size:1.1rem; }
.trusted-by__sub { font-size:.8rem; }
.trusted-by__track { gap:42px; animation-duration:42s; }
.trusted-by__item { height:104px; }
.trusted-by__item img { height:46px; max-width:140px; }
.trusted-by__item--lg img { height:64px; max-width:170px; }
.trusted-by__item--xl img { height:78px; max-width:160px; }
.trusted-by__item--xxl img { height:94px; max-width:160px; }
.trusted-by__item--wide img { height:56px; max-width:200px; }
}
/* === Locations — Commercial Tri-State Cards === */
.tristate-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
.tristate-card {
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
padding:24px 24px 22px;
backdrop-filter:blur(4px);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
position:relative;
}
.tristate-card:hover {
transform:translateY(-3px);
background:rgba(255,255,255,.14);
border-color:var(--sun-yellow);
box-shadow:0 0 0 2px var(--sun-yellow), 0 12px 28px rgba(0,0,0,.22);
}
.tristate-card__tag {
display:inline-block;
font-family:var(--font-heading);
font-size:.7rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--sun-yellow);
background:rgba(255,202,36,.14);
padding:5px 12px;
border-radius:50px;
margin-bottom:14px;
}
.tristate-card--primary .tristate-card__tag {
background:var(--sun-yellow);
color:var(--blue-dark);
}
.tristate-card h3,.tristate-card h4 {
font-family:var(--font-display);
font-size:1.6rem;
font-weight:700;
color:#fff;
margin:0 0 10px;
}
.tristate-card p {
font-size:.95rem;
color:rgba(255,255,255,.85);
line-height:1.6;
margin:0;
}
.region-pin {
display:inline-block;
width:18px; height:18px;
border-radius:50%;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,.18);
}
@media (max-width:820px) {
.tristate-grid { grid-template-columns:1fr; }
}
/* === Financing — Eligible Projects cards === */
.fin-eligible-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
.fin-eligible-card {
background:var(--blue);
border:1px solid var(--blue);
border-radius:12px;
padding:22px 20px;
display:flex;
align-items:center;
gap:16px;
position:relative;
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
box-shadow:var(--shadow-md);
}
.fin-eligible-card::before {
content:'';
position:absolute; top:0; left:0; right:0;
height:4px;
background:var(--sun-yellow);
}
.fin-eligible-card:hover {
transform:translateY(-3px);
box-shadow:0 0 0 2px var(--coral), 0 12px 24px rgba(0,0,0,.18);
border-color:var(--coral);
}
.fin-eligible-card__icon {
flex-shrink:0;
width:48px; height:48px;
border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.15);
color:#fff;
}
.fin-eligible-card__icon svg { width:24px; height:24px; }
.fin-eligible-card__name {
font-family:var(--font-heading);
font-size:1rem;
font-weight:700;
color:#fff;
line-height:1.3;
}
/* Accent bar color variants (cards are solid blue; bar + hover glow vary) */
.fin-eligible-card--coral::before { background:var(--coral); }
.fin-eligible-card--coral:hover { box-shadow:0 0 0 2px var(--coral), 0 12px 24px rgba(204,0,0,.18); border-color:var(--coral); }
.fin-eligible-card--yellow::before { background:var(--sun-yellow); }
.fin-eligible-card--yellow:hover { box-shadow:0 0 0 2px var(--sun-yellow), 0 12px 24px rgba(255,202,36,.22); border-color:var(--sun-yellow); }
@media (max-width:760px) {
.fin-eligible-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
}
@media (max-width:480px) {
.fin-eligible-grid { grid-template-columns:1fr; }
}
/* === Quote Popup (SEO-safe slide-in, not full-screen interstitial) === */
.quote-popup {
position:fixed;
right:24px;
bottom:24px;
width:340px;
max-width:calc(100vw - 32px);
background:#fff;
border-radius:14px;
box-shadow:0 18px 50px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.08);
border-top:4px solid var(--blue);
z-index:1000;
transform:translateY(20px);
opacity:0;
transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .32s ease;
font-family:var(--font-body, 'Libre Franklin', sans-serif);
}
.quote-popup.is-open { transform:translateY(0); opacity:1; }
.quote-popup__close {
position:absolute; top:8px; right:8px;
width:32px; height:32px; border:0; background:transparent;
font-size:1rem; color:#888; cursor:pointer;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.quote-popup__close:hover { background:#f3f3f3; color:#222; }
.quote-popup__body { padding:22px 22px 20px; }
.quote-popup__eyebrow {
display:inline-block; font-size:.7rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase;
color:var(--coral); margin-bottom:8px;
}
.quote-popup__title {
font-family:var(--font-heading, 'Barlow', sans-serif);
font-size:1.35rem; font-weight:700; color:var(--blue);
margin:0 0 8px; line-height:1.2;
}
.quote-popup__sub {
font-size:.85rem; color:#444; line-height:1.45; margin:0 0 14px;
}
.quote-popup__cta {
display:block; text-align:center;
background:var(--blue); color:#fff !important;
padding:11px 16px; border-radius:8px;
font-weight:700; font-size:.92rem; text-decoration:none;
transition:background .2s;
}
.quote-popup__cta:hover { background:var(--blue-dark); }
.quote-popup__phone {
display:block; text-align:center;
margin-top:8px; font-size:.78rem;
color:#666 !important; text-decoration:none;
}
.quote-popup__phone:hover { color:var(--blue) !important; }
@media (max-width:480px) {
.quote-popup {
right:12px; left:12px; bottom:84px;
width:auto; max-width:none;
}
.quote-popup__body { padding:18px 18px 16px; }
.quote-popup__title { font-size:1.15rem; }
.quote-popup__sub { font-size:.8rem; }
}