/* ==========================================================================
Nagra Roofing — main stylesheet
1. Tokens
2. Reset & base
3. Layout
4. Typography
5. Buttons, pills & badges
6. Header / navigation
7. Mobile drawer & call bar
8. Heroes
9. Cards & grids
10. Sections (stats, process, storm, service area, checklist)
11. Forms
12. Blog & article
13. Footer
14. Responsive
========================================================================== */
/* 1. Tokens ================================================================ */
:root {
/* Brand — one orange, #F54C0F. The darker shades below are that same colour
stepped down; they exist only for hover states and for text on white,
where the pure brand colour sits at 3.55:1 and would fail contrast. */
--orange: #F54C0F;
--orange-hover: #D3410D;
--orange-link: #C43D0C;
/* Formerly a yellow. Kept as a name so call sites did not all have to change,
but it is now the brand orange like everything else. */
--amber: #F54C0F;
--amber-hover: #D3410D;
/* Navy / dark */
--navy: #14263C;
--navy-section: #10233B;
--navy-dark: #0B1B2E;
--navy-footer: #0A1626;
/* Text */
--text: #46566B;
--text-2: #64748B;
--text-3: #374A61;
--muted: #8296AC;
--muted-2: #93A6BC;
/* On dark */
--on-dark: #B9C7DA;
--on-dark-2: #9FB2C8;
--on-dark-3: #7E93AC;
--on-dark-4: #5F7690;
--on-dark-list: #D5DFEC;
--on-dark-pill: #E8EEF6;
/* Surfaces */
--white: #FFFFFF;
--bg-light: #F6F8FB;
--bg-tile: #F1F5FA;
--bg-hover: #F4F7FB;
--bg-input: #FBFCFE;
/* Borders */
--border: #E6EBF2;
--border-2: #EAEFF5;
--border-3: #D7DFEA;
--ghost: #D9E2EE;
/* Storm / warn */
--warn-bg: #FEF6F3;
--warn-bg-2: #FEF0EB;
--warn-bg-3: #FDE7DF;
--warn-border: #FBB89F;
--warn-dash: #FAA687;
--warn-text: #B5380B;
--tag-bg: #FEEDE7;
/* Shape */
--r-card: 16px;
--r-card-sm: 14px;
--r-btn: 11px;
--r-btn-sm: 10px;
--r-pill: 999px;
--shadow-card: 0 1px 3px rgba(16, 35, 59, .05);
--shadow-drop: 0 18px 44px rgba(16, 35, 59, .16);
--shadow-cta: 0 8px 22px rgba(245, 76, 15, .35);
--shadow-lift: 0 10px 26px rgba(245, 76, 15, .12);
/* Design specifies 1240px of CONTENT with 24px padding outside it.
This sheet is border-box, so the box is 1240 + 2*24 = 1288. */
--container: 1288px;
--header-h: 78px;
--section-y: clamp(56px, 8vw, 96px);
}
/* 2. Reset & base ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Barlow', system-ui, -apple-system, sans-serif;
font-size: 16px;
background: var(--white);
color: var(--text);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-link); }
button { font-family: inherit; }
:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 2px;
border-radius: 4px;
}
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.landing [id] { scroll-margin-top: 20px; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
background: var(--orange);
color: var(--white);
padding: 12px 20px;
font-weight: 700;
border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--white); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* 3. Layout ================================================================ */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
.container--narrow { max-width: 968px; } /* 920 content */
.container--article { max-width: 808px; } /* 760 content */
.section { padding-block: var(--section-y); }
.section--light { background: var(--bg-light); }
.section--navy { background: var(--navy-section); }
.section--dark { background: var(--navy-dark); }
.section--tight { padding-block: clamp(44px, 6vw, 64px); }
.section--rule { border-bottom: 1px solid var(--border-2); }
.stack { display: flex; flex-direction: column; gap: 44px; }
.stack--sm { gap: 24px; }
.stack--md { gap: 32px; }
.stack--lg { gap: 40px; }
.section-head {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 660px;
}
.section-head--wide { max-width: 680px; }
/* Lets a longer standfirst run the full container width instead of being held
to the default measure — for intros that are a paragraph rather than a line. */
.section-head--full { max-width: none; }
.section-head--center {
max-width: 900px;
margin-inline: auto;
align-items: center;
text-align: center;
}
/* A centred heading is fine; a centred paragraph that wraps over three or four
lines is not — every line starts in a different place and the eye loses the
left edge. Body copy inside a centred head stays ranged left, in a block that
is itself centred. */
.section-head--center .doc-prose {
text-align: left;
max-width: 720px;
margin-inline: auto;
}
.section-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
/* 4. Typography ============================================================ */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--orange);
}
.eyebrow::before {
content: '';
width: 8px;
height: 8px;
background: currentColor;
flex-shrink: 0;
}
.eyebrow--amber { color: var(--amber); }
.h1 {
font-size: clamp(32px, 5.2vw, 58px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -1.5px;
color: var(--navy);
text-wrap: balance;
}
/* Per the design: Home 58 · Storm 52 · Residential/About 48 · Contact/Repair/Blog 46 · Post 42 */
.h1--52 { font-size: clamp(30px, 4.9vw, 52px); letter-spacing: -1.4px; line-height: 1.05; }
.h1--48 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1.2px; }
.h1--46 { font-size: clamp(29px, 4.4vw, 46px); letter-spacing: -1.2px; }
.h1--post{ font-size: clamp(29px, 4.2vw, 42px); letter-spacing: -1px; line-height: 1.12; }
.h1--sm { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -1.2px; } /* alias of --48 */
.h2 {
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
color: var(--navy);
text-wrap: balance;
}
.h2--40 { font-size: clamp(27px, 3.4vw, 40px); }
.h2--sm { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.8px; }
.h2--article { font-size: clamp(23px, 2.6vw, 32px); letter-spacing: -.8px; }
.h3 { font-size: clamp(19px, 2vw, 21px); font-weight: 800; letter-spacing: -.3px; color: var(--navy); }
.h4 { font-size: 17.5px; font-weight: 800; color: var(--navy); }
.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; text-wrap: pretty; }
.body { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.body--sm { font-size: 15px; line-height: 1.55; }
.fine { font-size: 13.5px; color: var(--muted); }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--white); }
.on-dark .lead, .on-dark .body { color: var(--on-dark); }
.on-dark .fine { color: var(--on-dark-3); }
.text-link {
display: inline-block;
font-size: 15.5px;
font-weight: 700;
color: var(--orange);
padding-block: 3px;
}
.text-link:hover { color: var(--orange-link); }
/* 5. Buttons, pills & badges =============================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 15px 28px;
border: 2px solid transparent;
border-radius: var(--r-btn);
font-size: 16px;
font-weight: 700;
line-height: 1.1;
text-align: center;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Submit spinner. The button keeps its size while loading — a button that
shrinks mid-click moves the thing under the cursor. */
.btn__spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
display: inline-block;
margin-right: 9px;
vertical-align: -3px;
animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn.is-loading { cursor: progress; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
.btn__spinner { animation-duration: 2s; }
}
.btn--primary {
background: var(--orange);
color: var(--white);
box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--orange-hover); color: var(--white); }
.btn--amber {
background: var(--amber);
color: var(--white);
font-weight: 800;
box-shadow: 0 8px 22px rgba(245, 76, 15, .3);
}
.btn--amber:hover { background: var(--amber-hover); color: var(--white); }
.btn--outline {
border-color: rgba(255, 255, 255, .45);
color: var(--white);
}
.btn--outline:hover { border-color: var(--white); color: var(--white); }
.btn--outline-dark {
border-color: var(--border-3);
color: var(--navy);
}
.btn--outline-dark:hover { border-color: var(--navy); color: var(--navy); }
.btn--outline-warn {
border-color: var(--warn-dash);
color: var(--warn-text);
}
.btn--outline-warn:hover { border-color: var(--warn-text); color: var(--warn-text); }
.btn--navy { background: var(--navy-section); color: var(--white); font-weight: 800; }
.btn--navy:hover { background: var(--navy-footer); color: var(--white); }
.btn--sm { min-height: 42px; padding: 12px 22px; font-size: 15px; border-radius: var(--r-btn-sm); }
.btn--primary.btn--sm { box-shadow: 0 5px 14px rgba(245, 76, 15, .28); }
.btn--lg { font-size: clamp(15.5px, 1.5vw, 16.5px); padding: 16px 30px; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .22);
color: var(--on-dark-pill);
font-size: 13.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: var(--r-pill);
}
.chip {
border: 1px solid var(--border-3);
color: var(--text-3);
font-size: 15px;
font-weight: 600;
padding: 8px 19px;
border-radius: var(--r-pill);
}
.chip--solid { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 700; }
.chip--confirm { border: 1.5px dashed var(--warn-dash); background: var(--warn-bg-2); color: var(--warn-text); font-size: 14px; }
.tag {
align-self: flex-start;
background: var(--tag-bg);
color: var(--warn-text);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 11px;
border-radius: var(--r-pill);
}
.badge-priority {
position: absolute;
top: 12px;
right: 12px;
background: var(--amber);
color: var(--white);
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 11px;
border-radius: var(--r-pill);
}
/* "[… to confirm]" placeholder badge */
.confirm {
display: inline-block;
background: var(--warn-bg-2);
border: 1px dashed var(--warn-dash);
color: var(--warn-text);
border-radius: 6px;
padding: 1px 8px;
font-size: .92em;
font-weight: 600;
}
/* Inside the stat strip the design shows a plain bold marker, not a boxed badge. */
.confirm--inline {
background: none;
border: 0;
border-radius: 0;
padding: 0;
font-weight: 700;
font-size: inherit;
}
/* 6. Header / navigation =================================================== */
.storm-strip {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
background: var(--amber);
color: var(--white);
font-size: 15px;
font-weight: 700;
padding: 11px 24px;
text-align: center;
}
/* The strip is a container now, not one big link, so the hover moves onto the
numbers themselves. Keeping the two numbers in their own flex box stops the
strip wrapping between a number and the "or" that belongs to it. */
.storm-strip__nums { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.storm-strip__cta {
color: var(--white);
font-weight: 800;
text-decoration: underline;
white-space: nowrap;
}
.storm-strip__cta:hover { color: var(--navy); }
.storm-strip__or { font-weight: 700; opacity: .8; }
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--white);
border-bottom: 1px solid var(--border);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
gap: 24px;
}
/* The logo is one image. width/height sit on the ![]()
so the header never
reflows while it loads; the height below is what actually renders.
min-width:0 lets it give way rather than forcing the header wider than the
screen — a 44px-tall logo is ~201px across, which will not sit beside the
CTA and the hamburger on a 375px phone. Phone sizes are set further down. */
.logo { display: flex; align-items: center; min-width: 0; }
.logo img { height: 44px; width: auto; max-width: 100%; display: block; }
.logo--dark img { height: 50px; }
.nav { flex: 1; display: flex; justify-content: center; align-self: stretch; }
.nav__list { display: flex; align-items: stretch; gap: 2px; }
.nav__item { display: flex; align-items: center; }
.nav__link {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
font-size: 15.5px;
font-weight: 600;
color: var(--navy);
white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active { color: var(--orange); }
.nav__caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--muted-2);
margin-top: 2px;
}
.dropdown, .mega {
position: absolute;
top: 100%;
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow-drop);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index: 40;
}
.dropdown {
left: 0;
min-width: 240px;
border-radius: 12px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 1px;
}
.dropdown--right { left: auto; right: 0; }
.nav__item.has-dropdown { position: relative; }
.nav__item.has-mega { position: static; }
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown,
.nav__item:hover > .mega,
.nav__item:focus-within > .mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__item.has-mega:hover > .mega,
.nav__item.has-mega:focus-within > .mega { transform: translateX(-50%) translateY(0); }
.dropdown__link {
display: block;
padding: 9px 12px;
font-size: 15px;
font-weight: 500;
color: #3A4C63;
border-radius: 8px;
}
.dropdown__link:hover { background: var(--bg-hover); color: var(--orange); }
.mega {
left: 50%;
transform: translateX(-50%) translateY(-6px);
/* Four columns. The panel is centred on the Services item, which sits a little
left of the viewport centre — at the 1081px where the nav first appears a
940px panel still clears both edges. The Exterior column carries two links
to the others' five or six, so its track is narrower. */
width: 960px;
max-width: calc(100vw - 32px);
border-radius: var(--r-card-sm);
padding: 20px;
display: grid;
/* Exterior gets a fixed, narrower track: it holds two short labels, and taking
its width out of the shared space keeps the other three columns as wide as
they were at three columns — "Commercial Roof Installation" must not wrap. */
grid-template-columns: repeat(2, minmax(0, 1fr)) 150px minmax(0, 1fr);
gap: 14px;
}
.mega__col { display: flex; flex-direction: column; gap: 1px; }
.mega__col--storm {
background: var(--warn-bg);
border: 1px solid #FDE2D9;
border-radius: 10px;
padding: 8px;
}
.mega__title {
display: block;
padding: 6px 10px;
font-size: 14.5px;
font-weight: 800;
color: var(--navy);
letter-spacing: .2px;
}
.mega__title:hover { color: var(--orange); }
.mega__title--storm { color: var(--warn-text); }
.mega__rule { height: 1px; background: #EDF1F7; margin: 4px 10px 6px; }
.mega__rule--storm { background: #FDE2D9; }
.mega__link {
display: block;
padding: 7px 10px;
font-size: 14px;
font-weight: 500;
color: var(--text);
border-radius: 7px;
}
.mega__link:hover { background: var(--bg-hover); color: var(--orange); }
.mega__link--storm:hover { background: var(--warn-bg-3); }
.mega__note { padding: 6px 10px 4px; font-size: 12.5px; color: #B5380B; }
.header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.header-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.header-phone__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.6px;
color: var(--muted-2);
text-transform: uppercase;
}
/* 16px rather than 18px: two numbers stacked under one label need to stay
inside the 88px header without crowding the CTA beside them. */
.header-phone__number { font-size: 16px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.header-phone__number:hover { color: var(--orange); }
.hamburger {
display: none;
width: 46px;
height: 46px;
padding: 12px;
background: none;
border: 1px solid var(--border);
border-radius: var(--r-btn-sm);
cursor: pointer;
flex-direction: column;
justify-content: space-between;
}
.hamburger span {
display: block;
height: 2.5px;
width: 100%;
background: var(--navy);
border-radius: 2px;
transition: transform .22s ease, opacity .22s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* 7. Mobile drawer & call bar ============================================== */
.drawer-overlay {
position: fixed;
inset: 0;
z-index: 1500;
background: rgba(10, 22, 38, .55);
opacity: 0;
transition: opacity .25s ease;
}
.drawer-overlay.is-open { opacity: 1; }
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1600;
width: min(360px, 88vw);
background: var(--white);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .28s ease;
box-shadow: -12px 0 40px rgba(10, 22, 38, .2);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.drawer__title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.drawer__close {
width: 44px;
height: 44px;
font-size: 30px;
line-height: 1;
background: none;
border: none;
color: var(--navy);
cursor: pointer;
}
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 12px 20px; -webkit-overflow-scrolling: touch; }
.drawer__link,
.acc__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 52px;
padding: 12px 12px;
font-size: 17px;
font-weight: 700;
color: var(--navy);
background: none;
border: none;
border-bottom: 1px solid var(--border-2);
text-align: left;
cursor: pointer;
}
.acc__icon {
width: 10px;
height: 10px;
border-right: 2.5px solid var(--muted-2);
border-bottom: 2.5px solid var(--muted-2);
transform: rotate(45deg);
margin-right: 4px;
transition: transform .22s ease;
flex-shrink: 0;
}
.acc__trigger[aria-expanded="true"] { color: var(--orange); }
.acc__trigger[aria-expanded="true"] .acc__icon { transform: rotate(-135deg); border-color: var(--orange); }
.acc__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .26s ease;
}
/* No padding on the inner wrapper — it would survive the 0fr collapse and leave
a gap under a closed section. The links carry their own spacing. */
.acc__panel > * { overflow: hidden; min-height: 0; }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel-inner { display: flex; flex-direction: column; }
.acc__panel-inner > :first-child { margin-top: 4px; }
.acc__panel-inner > :last-child { margin-bottom: 10px; }
.acc__heading {
padding: 12px 12px 6px 20px;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--navy);
}
.acc__heading--storm { color: var(--warn-text); }
.acc__link {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 12px 10px 20px;
font-size: 15.5px;
font-weight: 500;
color: var(--text);
border-radius: 8px;
}
.acc__link:hover { background: var(--bg-hover); color: var(--orange); }
.drawer__foot {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
flex-shrink: 0;
}
body.is-locked { overflow: hidden; }
/* Fixed mobile CTA. .call-bar dials; .quote-bar jumps to the form on the
landing page. Same object, two jobs, so they share every rule. */
.call-bar,
.quote-bar {
display: none;
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 1400;
background: var(--orange);
color: var(--white);
font-weight: 800;
font-size: 17px;
min-height: 54px;
padding: 16px;
border-radius: 12px;
justify-content: center;
align-items: center;
box-shadow: 0 12px 28px rgba(11, 22, 38, .4);
}
.call-bar:hover,
.quote-bar:hover { color: var(--white); }
/* .call-bar holds two numbers, so it is a container and its children carry the
padding and the tap target. .quote-bar is still a single link and keeps the
shared rules above untouched. Each half is ~140px on a 320px phone, which
fits a 15px number with room to spare. */
.call-bar { padding: 6px; gap: 0; }
.call-bar__num {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 4px;
color: var(--white);
font-size: 15px;
font-weight: 800;
white-space: nowrap;
}
.call-bar__num:hover { color: var(--white); }
.call-bar__div {
width: 1px;
align-self: stretch;
margin-block: 8px;
background: rgba(255, 255, 255, .38);
}
/* 8. Heroes ================================================================ */
.hero-photo {
position: relative;
background: #0E1F33;
overflow: hidden;
}
.hero-photo__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Sits between the photo and the scrim. Starts transparent so a video that
never loads simply leaves the photo showing, with no flash of empty space. */
.hero-photo__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .7s ease;
pointer-events: none;
}
.hero-photo__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero-photo__video { display: none; }
}
.hero-photo__scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(11, 25, 42, .96) 30%, rgba(11, 25, 42, .72) 58%, rgba(11, 25, 42, .38));
}
.hero-photo__inner--storm {
padding-top: clamp(52px, 5.8vw, 84px);
padding-bottom: clamp(58px, 6.4vw, 92px);
}
.hero-photo__scrim--storm {
background: linear-gradient(100deg, rgba(8, 18, 32, .96) 34%, rgba(8, 18, 32, .7) 62%, rgba(8, 18, 32, .35));
}
.hero-photo__inner {
position: relative;
padding-top: clamp(48px, 5vw, 72px);
padding-bottom: clamp(56px, 7vw, 88px);
display: flex;
gap: 56px;
align-items: center;
flex-wrap: wrap;
}
.hero-copy {
flex: 1 1 440px;
max-width: 660px;
display: flex;
flex-direction: column;
gap: 22px;
}
.hero-copy .lead { color: rgba(255, 255, 255, .87); max-width: 560px; }
/* Storm hero has no form beside it, so the copy runs to the design's 820px. */
.hero-copy--full { max-width: none; flex-basis: 100%; }
.hero-copy--full .lead { max-width: 640px; }
.hero-navy { background: var(--navy-section); padding-block: clamp(48px, 6vw, 68px); }
.hero-navy__inner { display: flex; flex-direction: column; gap: 18px; }
.hero-split {
display: grid;
grid-template-columns: 1.1fr .9fr; /* Residential */
gap: 56px;
align-items: center;
}
/* About Us splits 1.05/0.95 with a wider gap in the design. */
.hero-split--about { grid-template-columns: 1.05fr .95fr; gap: 64px; }
.hero-split__copy { display: flex; flex-direction: column; gap: 20px; }
.hero-split__media {
height: 320px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--r-card);
overflow: hidden;
}
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__media--light { border-color: var(--border); height: 380px; border-radius: 18px; }
.breadcrumb {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size: 13.5px;
color: var(--on-dark-3);
}
.breadcrumb a { color: var(--on-dark-2); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb strong { color: var(--on-dark-pill); font-weight: 600; }
.breadcrumb--light { color: var(--muted); }
.breadcrumb--light a { color: var(--text-2); }
.breadcrumb--light a:hover { color: var(--orange); }
.breadcrumb--light strong { color: var(--text-3); }
/* 9. Cards & grids ========================================================= */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-card-sm);
padding: 26px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-card);
transition: background-color .18s ease, border-color .18s ease,
box-shadow .22s ease, transform .22s ease;
}
/* Hover lifts the card into the warm brand tint. Scoped to (hover: hover) so
phones and tablets never get a stuck highlight after a tap — a touch device
fires :hover and then leaves it applied until you tap elsewhere.
Border WIDTH stays at 1px throughout: growing it on hover would nudge the
card's contents by half a pixel and make the whole grid twitch. */
@media (hover: hover) {
.card:hover {
background: var(--warn-bg);
border-color: var(--warn-border);
box-shadow: var(--shadow-lift);
transform: translateY(-3px);
}
/* Already warm, so lean a shade deeper or the hover would be invisible. */
.card--warn:hover {
background: var(--warn-bg-3);
border-color: var(--warn-dash);
}
}
.card--flush { padding: 0; overflow: hidden; border-radius: var(--r-card); }
.card--dashed { background: var(--bg-input); border: 1.5px dashed var(--border-3); box-shadow: none; }
.card--warn {
background: var(--warn-bg);
border: 1.5px solid var(--warn-border);
box-shadow: var(--shadow-lift);
}
.card__media { height: 172px; position: relative; flex-shrink: 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--sm { height: 158px; }
.card__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__body--sm { padding: 24px; gap: 10px; }
.card__text { font-size: 15.5px; line-height: 1.55; color: var(--text); }
.card__spacer { flex: 1; }
.icon-tile {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-tile);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-tile--warn { background: var(--warn-bg-3); }
.ic-diamond { width: 15px; height: 15px; border: 3px solid var(--orange); transform: rotate(45deg); }
.ic-square { width: 16px; height: 16px; border: 3px solid var(--orange); }
.ic-circle { width: 16px; height: 16px; border: 3px solid var(--orange); border-radius: 50%; }
.ic-lines { display: flex; flex-direction: column; gap: 4px; }
.ic-lines span { display: block; width: 18px; height: 3px; background: var(--orange); }
.ic-glyph { font-size: 20px; font-weight: 800; color: var(--orange); line-height: 1; }
.ic-glyph--warn { color: var(--warn-text); }
.bullet-list { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.bullet-list li { display: flex; gap: 9px; font-size: 15px; color: var(--text); }
.bullet-list li::before { content: '\203A'; color: var(--orange); font-weight: 800; }
.review-card { gap: 14px; }
.review-card__stars { color: var(--amber); font-size: 16px; letter-spacing: 3px; }
.review-card__quote { font-size: 16px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }
.review-card__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review-card__name { font-size: 15px; font-weight: 700; color: var(--navy); }
.review-card__place { font-size: 13.5px; color: var(--muted); }
/* 10. Sections ============================================================= */
/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat + .stat { border-left: 1px solid var(--border-2); padding-left: 32px; }
.stat__num {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: clamp(34px, 4vw, 44px);
font-weight: 700;
color: var(--navy);
line-height: 1;
align-self: flex-start;
}
.stat__num em { font-style: normal; color: var(--orange); }
.stat__num--pending { border-bottom: 2px dashed var(--warn-dash); }
.stat__label {
font-size: 14px;
font-weight: 600;
letter-spacing: .8px;
color: var(--text-2);
text-transform: uppercase;
}
.stat__label .confirm { text-transform: none; letter-spacing: 0; }
.stat-strip--dark .stat + .stat { border-left-color: rgba(255, 255, 255, .1); }
.stat-strip--dark .stat__num { color: var(--white); font-size: clamp(32px, 3.6vw, 42px); }
.stat-strip--dark .stat__num em { color: var(--amber); }
.stat-strip--dark .stat__num--pending { border-bottom-color: rgba(245, 76, 15, .6); }
.stat-strip--dark .stat__label { color: var(--on-dark-2); font-size: 13.5px; }
/* Process — top-ruled columns with ghost numerals */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.process-step {
border-top: 3px solid var(--orange);
padding-top: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.process-step__num {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: 48px;
font-weight: 700;
color: var(--ghost);
line-height: 1;
}
.process-step h4 { font-size: 18px; font-weight: 800; color: var(--navy); }
/* Numbered step cards (About / Storm) */
.step-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 28px 30px;
display: flex;
gap: 24px;
align-items: flex-start;
box-shadow: var(--shadow-card);
}
.step-card__num {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: 46px;
font-weight: 700;
color: var(--orange);
line-height: 1;
width: 60px;
flex-shrink: 0;
}
.step-card__body { display: flex; flex-direction: column; gap: 6px; }
.step-card__body h3 { font-size: 20px; font-weight: 800; color: var(--navy); }
.step-card__body p { font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.step-inline {
display: flex;
gap: 20px;
align-items: flex-start;
border-top: 3px solid var(--orange);
padding-top: 18px;
}
.step-inline__num {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: 40px;
font-weight: 700;
color: var(--ghost);
line-height: 1;
width: 52px;
flex-shrink: 0;
}
.step-inline__body { display: flex; flex-direction: column; gap: 5px; }
.step-inline__body h4 { font-size: 18px; font-weight: 800; color: var(--navy); }
.step-inline__body p { font-size: 15.5px; line-height: 1.55; color: var(--text); }
/* Hail band (dark, two columns) */
.split-dark {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: center;
}
.split-dark__copy { display: flex; flex-direction: column; gap: 20px; }
.split-dark__list { display: flex; flex-direction: column; gap: 14px; }
.glass-step {
background: rgba(255, 255, 255, .045);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--r-card-sm);
padding: 22px 24px;
display: flex;
gap: 18px;
align-items: flex-start;
}
.glass-step__num {
font-family: 'Barlow Condensed', 'Barlow', sans-serif;
font-size: 32px;
font-weight: 700;
color: var(--amber);
line-height: 1;
width: 44px;
flex-shrink: 0;
}
.glass-step__body { display: flex; flex-direction: column; gap: 5px; }
.glass-step__body h4 { font-size: 17px; font-weight: 800; color: var(--white); }
.glass-step__body p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); }
/* Storm checklist band */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.check-item {
background: rgba(255, 255, 255, .045);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: 20px 22px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.check-item::before { content: '\2713'; color: var(--amber); font-weight: 800; font-size: 17px; line-height: 1.5; }
.check-item p { font-size: 16px; line-height: 1.55; color: var(--on-dark-list); }
.check-cta {
background: var(--amber);
border-radius: 12px;
padding: 20px 22px;
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.check-cta p { font-size: 16.5px; font-weight: 800; color: var(--white); }
/* Tile checklist (light) */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile-check {
display: flex;
gap: 11px;
align-items: flex-start;
font-size: 16px;
line-height: 1.5;
color: var(--text-3);
background: var(--bg-light);
border-radius: 10px;
padding: 14px 16px;
}
.tile-check::before { content: '\2713'; color: var(--orange); font-weight: 800; }
.tile-bullet {
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 20px;
display: flex;
gap: 14px;
align-items: flex-start;
font-size: 15.5px;
line-height: 1.5;
color: var(--text-3);
}
.tile-bullet::before {
content: '';
width: 10px;
height: 10px;
background: var(--orange);
transform: rotate(45deg);
margin-top: 6px;
flex-shrink: 0;
}
/* Slim "why" strip */
.why-strip { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.why-strip__title { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.why-strip__list { display: flex; gap: 26px; flex-wrap: wrap; flex: 1; }
.why-strip__list li {
display: flex;
gap: 9px;
align-items: center;
font-size: 15.5px;
font-weight: 600;
color: var(--text-3);
}
.why-strip__list li::before { content: '\2713'; color: var(--orange); font-weight: 800; }
/* Service area chips */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
/* FAQ */
.faq-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-card h3,
.faq-card h4 { font-size: 17px; font-weight: 800; color: var(--navy); }
.faq-card p { font-size: 15.5px; line-height: 1.6; color: var(--text); }
/* Service-page two-column layout with sticky sidebar */
.doc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 370px;
gap: 60px;
align-items: start;
}
.doc-main { display: flex; flex-direction: column; gap: 64px; }
.doc-block { display: flex; flex-direction: column; gap: 24px; }
.doc-side {
position: sticky;
top: calc(var(--header-h) + 24px);
display: flex;
flex-direction: column;
gap: 18px;
}
.doc-side__media {
height: 180px;
border-radius: var(--r-card-sm);
overflow: hidden;
border: 1px solid var(--border);
}
.doc-side__media img { width: 100%; height: 100%; object-fit: cover; }
.side-cta {
background: var(--navy-section);
border-radius: var(--r-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.side-cta h3 { font-size: 21px; font-weight: 800; color: var(--white); letter-spacing: -.3px; }
.side-cta p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark); }
.side-warn {
background: var(--warn-bg);
border: 1.5px solid var(--warn-border);
border-radius: var(--r-card-sm);
padding: 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.side-warn h4 { font-size: 16px; font-weight: 800; color: var(--navy); }
.side-warn p { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.side-warn a { font-size: 14.5px; font-weight: 700; color: var(--warn-text); }
.side-warn a:hover { color: var(--orange); }
/* Long-form page copy (service pages, home, residential) */
.doc-main--prose { gap: 44px; }
.prose { gap: 16px; }
.prose p { font-size: 16.5px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.prose h3 { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; margin-top: 6px; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; }
.prose li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--text-3); }
.prose ul li::before { content: '\2713'; color: var(--orange); font-weight: 800; }
.prose ol { counter-reset: prose-step; }
.prose ol li { counter-increment: prose-step; }
.prose ol li::before { content: counter(prose-step) '.'; color: var(--orange); font-weight: 800; min-width: 16px; }
.prose a { color: var(--orange); font-weight: 700; }
.prose a:hover { text-decoration: underline; }
.faq-card.prose { gap: 8px; }
.faq-card.prose p { font-size: 15.5px; line-height: 1.6; }
.prose-wrap { max-width: 860px; }
.side-links {
border: 1px solid var(--border);
border-radius: var(--r-card-sm);
padding: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.side-links h4 { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 2px; }
.side-links a { font-size: 14.5px; font-weight: 600; color: var(--text-3); }
.side-links a:hover { color: var(--orange); }
/* Contact info cards */
.info-card {
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 26px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.info-card__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--muted);
text-transform: uppercase;
}
.info-card__phone { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; }
.info-card__phone:hover { color: var(--orange); }
.info-card p { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.info-card--warn {
background: var(--warn-bg);
border: 1.5px solid var(--warn-border);
align-items: stretch;
}
.info-card--warn .info-card__label { color: var(--warn-text); font-weight: 800; }
.info-card--warn p { font-size: 15px; line-height: 1.55; color: var(--text); }
.contact-layout {
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
gap: 60px;
align-items: start;
}
.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.media-band {
height: 340px;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border);
margin-top: 64px;
}
.media-band img { width: 100%; height: 100%; object-fit: cover; }
/* 11. Forms ================================================================ */
.form-card {
width: 404px;
flex-shrink: 0;
background: var(--white);
border-radius: var(--r-card);
box-shadow: 0 30px 70px rgba(5, 13, 24, .5);
padding: 30px;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-card--page {
width: auto;
border: 1px solid var(--border);
border-radius: 18px;
padding: clamp(24px, 3vw, 36px);
box-shadow: 0 16px 44px rgba(16, 35, 59, .08);
gap: 16px;
}
.form-card__head { display: flex; flex-direction: column; gap: 5px; }
.form-card__head h2 { font-size: clamp(22px, 2.4vw, 26px); font-weight: 800; color: var(--navy); letter-spacing: -.5px; }
.form-card__head h3 { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.form-card__head p { font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row--gap { gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13.5px; font-weight: 700; color: var(--text-3); }
.input, .select, .textarea {
width: 100%;
padding: 13px 15px;
border: 1px solid var(--border-3);
border-radius: 9px;
font-family: inherit;
font-size: 15px;
color: var(--navy);
background: var(--bg-input);
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(245, 76, 15, .15);
}
.select { color: var(--text); appearance: none; padding-right: 40px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393A6BC' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
.textarea { resize: vertical; min-height: 96px; }
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--orange); background: #FFF7F4; }
/* SMS consent block (TCPA / A2P). Both boxes are optional — submitting is what
agrees to the policy, per .consent-agree beneath them. */
.consent-group { display: flex; flex-direction: column; gap: 12px; }
.consent {
display: flex;
gap: 11px;
align-items: flex-start;
font-size: 12.5px;
color: var(--text-2);
line-height: 1.5;
cursor: pointer;
text-wrap: pretty;
}
.consent input {
margin-top: 2px;
accent-color: var(--orange);
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
}
.consent:hover { color: var(--text-3); }
/* The shared .has-error rule only restyles text fields; a checkbox needs its own
marker or a rejected submit gives the visitor nothing to look at. */
.consent input.has-error { outline: 2px solid var(--orange); outline-offset: 2px; }
.consent-agree {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-2);
text-wrap: pretty;
}
.consent-agree a { font-weight: 600; text-decoration: underline; }
.form-fine { font-size: 13.5px; color: var(--muted); text-align: center; }
.form-fine a { font-weight: 700; }
.field__error {
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
color: var(--warn-text);
}
.req { color: var(--orange); }
/* Honeypot — off-screen for people, still submitted by bots. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* reCAPTCHA v3 -------------------------------------------------------------
The floating badge is hidden until a protected form scrolls into view, so it
doesn't sit over every page. Google's terms allow hiding it as long as the
notice below appears in the form — see .recaptcha-terms. */
.grecaptcha-badge {
visibility: hidden;
opacity: 0;
transition: opacity .3s ease, visibility .3s ease;
}
body.recaptcha-visible .grecaptcha-badge {
visibility: visible;
opacity: 1;
}
.recaptcha-terms {
font-size: 12.5px;
line-height: 1.5;
color: var(--muted);
text-align: center;
}
.recaptcha-terms a { color: var(--text-2); text-decoration: underline; }
.recaptcha-terms a:hover { color: var(--orange); }
.form-status {
display: none;
font-size: 14.5px;
font-weight: 600;
line-height: 1.5;
border-radius: 9px;
padding: 12px 14px;
}
.form-status.is-error { display: block; background: var(--warn-bg-2); border: 1px solid var(--warn-dash); color: var(--warn-text); }
.form-status.is-success { display: block; background: #EEF7F0; border: 1px solid #B9DDC3; color: #1E6B37; }
/* ── Glass form panel ─────────────────────────────────────────────────────
For forms that sit on a photo or a dark band. Add .form-glass to the wrapper
around the form. The contact page uses the same .form-card on a light
background and must stay white, which is why none of this is on .form-card
itself.
This is the skin only — colours and the blur. Width and padding are set per
placement below, so the compact hero card and the roomy full-width variant
can share one look.
The blur is what makes the text legible over a moving photo. Browsers without
backdrop-filter still get the translucent fill, which is enough on its own. */
.form-glass .form-card {
background: rgba(10, 22, 38, .34);
-webkit-backdrop-filter: blur(18px) saturate(130%);
backdrop-filter: blur(18px) saturate(130%);
border: 1px solid rgba(255, 255, 255, .20);
}
.form-glass .form-card__head h2,
.form-glass .form-card__head h3 { color: var(--white); }
.form-glass .form-card__head p { color: rgba(255, 255, 255, .76); }
.form-glass .field__label { color: rgba(255, 255, 255, .84); }
.form-glass .input,
.form-glass .select,
.form-glass .textarea {
color: var(--white);
/* background-color, NOT the background shorthand: the shorthand resets
background-repeat/position and the select's caret then tiles across the
whole field as a zigzag. */
background-color: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .26);
}
.form-glass .input::placeholder,
.form-glass .textarea::placeholder { color: rgba(255, 255, 255, .70); }
.form-glass .select { color: rgba(255, 255, 255, .70); }
/* The native dropdown list is drawn by the OS, not the page — it needs its own
dark-on-white so the options are not white text on a white menu. */
.form-glass .select option { color: var(--navy); background: var(--white); }
.form-glass .select:has(option:checked:not([value=""])) { color: var(--white); }
/* Recoloured caret: the default one is a dark grey that disappears on glass. */
.form-glass .select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FFFFFF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-glass .input:focus,
.form-glass .select:focus,
.form-glass .textarea:focus {
border-color: var(--orange);
background-color: rgba(255, 255, 255, .16);
}
.form-glass .input.has-error,
.form-glass .select.has-error,
.form-glass .textarea.has-error { background-color: rgba(245, 76, 15, .18); border-color: var(--orange); }
.form-glass .consent { color: rgba(255, 255, 255, .78); }
.form-glass .consent:hover { color: var(--white); }
.form-glass .consent-agree { color: rgba(255, 255, 255, .78); }
.form-glass .consent-agree a { color: var(--white); }
.form-glass .form-fine { color: rgba(255, 255, 255, .78); }
.form-glass .form-fine a { color: var(--white); }
.form-glass .field__error { color: #FFC9B7; }
.form-glass .recaptcha-terms { color: rgba(255, 255, 255, .66); }
.form-glass .recaptcha-terms a { color: rgba(255, 255, 255, .86); }
/* ── Compact sizing, for the two hero cards ── */
.hero-form .form-card,
.lp-hero__form .form-card {
padding: 22px 24px;
gap: 11px;
}
.hero-form .form-card__head,
.lp-hero__form .form-card__head { gap: 3px; }
.hero-form .form-card__head h3,
.lp-hero__form .form-card__head h3 { font-size: 21px; }
.hero-form .form-card__head p,
.lp-hero__form .form-card__head p { font-size: 13.5px; }
.hero-form .input, .hero-form .select, .hero-form .textarea,
.lp-hero__form .input, .lp-hero__form .select, .lp-hero__form .textarea { padding: 11px 14px; }
.hero-form .textarea,
.lp-hero__form .textarea { min-height: 72px; }
.hero-form .consent-group,
.lp-hero__form .consent-group { gap: 9px; }
.hero-form .consent, .hero-form .consent-agree,
.lp-hero__form .consent, .lp-hero__form .consent-agree { font-size: 12px; }
/* ── Widths ── */
.hero-form .form-card { width: 468px; }
.lp-hero__form .form-card { width: 520px; }
/* 12. Blog & article ======================================================= */
.page-head,
.blog-head { background: var(--bg-light); border-bottom: 1px solid var(--border-2); padding: clamp(44px, 6vw, 68px) 0 40px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 9px 19px;
border-radius: var(--r-pill);
font-size: 14.5px;
font-weight: 700;
border: 1.5px solid var(--border-3);
background: var(--white);
color: var(--text-3);
cursor: pointer;
min-height: 44px;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.filter-pill:hover { border-color: var(--navy); color: var(--navy); }
.filter-pill.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-pill.is-active:hover { color: var(--white); }
.post-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-card);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 35, 59, .1); }
.post-card__title { font-size: 18.5px; font-weight: 800; color: var(--navy); line-height: 1.3; text-wrap: pretty; }
.post-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.post-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.post-card__read { font-size: 13px; color: var(--muted); }
.post-card__more { font-size: 14.5px; font-weight: 700; color: var(--orange); }
.post-card.is-hidden { display: none; }
.blog-empty { display: none; padding: 40px 0; font-size: 17px; color: var(--text-2); }
.blog-empty.is-visible { display: block; }
.article-head { display: flex; flex-direction: column; gap: 18px; }
.article-meta {
display: flex;
gap: 14px;
align-items: center;
font-size: 14.5px;
color: var(--muted);
flex-wrap: wrap;
}
.article-meta strong { font-weight: 700; color: var(--text-3); }
.article-hero {
max-width: 980px;
margin: 36px auto 0;
height: clamp(200px, 34vw, 400px);
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 26px; }
.article__lead { font-size: clamp(17px, 1.7vw, 18px); line-height: 1.75; color: var(--text-3); text-wrap: pretty; }
.article h2 {
font-size: clamp(23px, 2.4vw, 27px);
font-weight: 800;
color: var(--navy);
letter-spacing: -.5px;
margin-top: 10px;
text-wrap: balance;
}
.article p { font-size: clamp(16px, 1.6vw, 17px); line-height: 1.75; color: var(--text); text-wrap: pretty; }
.article ul { display: flex; flex-direction: column; gap: 12px; }
.article ul li {
display: flex;
gap: 11px;
align-items: flex-start;
font-size: 16.5px;
line-height: 1.6;
color: var(--text-3);
}
.article ul li::before { content: '\2713'; color: var(--orange); font-weight: 800; }
.inline-cta {
background: var(--warn-bg);
border: 1.5px solid var(--warn-border);
border-radius: var(--r-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.inline-cta h3 { font-size: 20px; font-weight: 800; color: var(--navy); }
.inline-cta p { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.related-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-card-sm);
padding: 24px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--shadow-card);
}
.related-card h3 { font-size: 17.5px; font-weight: 800; color: var(--navy); line-height: 1.35; text-wrap: pretty; }
.related-card span { font-size: 14.5px; font-weight: 700; color: var(--orange); margin-top: auto; }
/* 12b. Third-party estimator embed ========================================= */
/* Roofr's supplied snippet is a fixed 800x600. Fixed width is the problem: on a
phone it is wider than the viewport and drags the whole page into sideways
scrolling. Fluid width with a set height keeps the tool intact and the page
behaving — the height is the frame's, since we cannot measure the content
inside a cross-origin iframe. */
.estimator {
width: 100%;
max-width: 880px;
margin-inline: auto;
border: 1px solid var(--border);
border-radius: var(--r-card);
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-card);
}
/* The frame is sized to fit Roofr's tallest step, so the tool never gets its own
scrollbar — one scrollbar inside another is where a visitor loses the "Get
started" button below the fold and assumes the page is broken. The content is
cross-origin, so its height cannot be measured from here and these are set
from what the tool actually renders; if Roofr changes the layout, this is the
number to adjust. */
.estimator__frame {
display: block;
width: 100%;
height: 900px;
border: 0;
}
.estimator__fallback { text-align: center; color: var(--muted); }
.estimator__fallback a { font-weight: 700; }
/* Narrower means taller: the tool stacks vertically and its text wraps to more
lines, so it needs more room here, not less. */
@media (max-width: 768px) {
.estimator__frame { height: 1050px; }
}
/* 13. Footer =============================================================== */
.cta-band {
background: var(--navy-section);
padding: clamp(60px, 8vw, 92px) 24px;
position: relative;
overflow: hidden;
}
.cta-band__shape {
position: absolute;
width: 460px;
height: 460px;
transform: rotate(45deg);
pointer-events: none;
}
.cta-band__shape--1 { right: -140px; top: -180px; border: 2px solid rgba(255, 255, 255, .05); }
.cta-band__shape--2 { right: -60px; top: -100px; border: 2px solid rgba(255, 255, 255, .04); }
.cta-band__inner {
max-width: 840px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
position: relative;
}
.cta-band__title {
font-size: clamp(30px, 4vw, 46px);
font-weight: 800;
color: var(--white);
letter-spacing: -1px;
line-height: 1.08;
text-wrap: balance;
}
.cta-band__text {
font-size: clamp(16px, 1.7vw, 18px);
line-height: 1.6;
color: var(--on-dark);
max-width: 620px;
text-wrap: pretty;
}
.cta-band__fine { font-size: 14px; color: var(--on-dark-3); margin-top: 4px; }
.cta-band .btn-row { margin-top: 10px; }
.site-footer { background: var(--navy-footer); color: var(--on-dark-2); padding-top: 64px; }
.footer-grid {
display: grid;
grid-template-columns: 1.7fr 1fr 1.15fr 1.4fr;
gap: 44px;
padding-bottom: 52px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-blurb { font-size: 15px; line-height: 1.6; max-width: 320px; text-wrap: pretty; }
/* Two numbers stacked. The gap is tighter than .footer-brand's own 16px so the
pair reads as one block of contact details rather than two separate items. */
.footer-phones { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.footer-phone { font-size: 21px; font-weight: 800; color: var(--white); }
.footer-phone:hover { color: var(--amber); }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-col__title {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--on-dark-4);
text-transform: uppercase;
margin-bottom: 6px;
}
/* Padding lifts these to a 24px+ hit area (WCAG 2.5.8); the negative margin
keeps the visual spacing identical to the design. */
.footer-link {
font-size: 15px;
color: var(--on-dark-2);
padding-block: 4px;
margin-block: -4px;
}
.footer-link:hover { color: var(--white); }
.footer-col--contact { gap: 12px; }
.footer-contact-phone { font-size: 16px; font-weight: 700; color: var(--white); padding-block: 4px; margin-block: -4px; }
.footer-contact-phone:hover { color: var(--amber); }
.footer-address, .footer-note { font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
/* .site-footer has no bottom padding of its own, so the credit line carries the
breathing room under it — without this it sits flush against the page edge. */
.footer-credit { font-size: 15px; color: var(--on-dark-4); text-align: center; padding: 16px 0 30px; }
/* Studio credit link, shared by both footers. Padding lifts it to a 24px+ hit
area (WCAG 2.5.8); the negative margin keeps the line spacing unchanged. */
.footer-credit__link {
color: var(--on-dark-2);
font-weight: 700;
padding-block: 4px;
margin-block: -4px;
}
.footer-credit__link:hover { color: var(--amber); }
.footer-legal {
border-top: 1px solid rgba(255, 255, 255, .08);
padding: 20px 0 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.footer-legal p { font-size: 13.5px; color: var(--on-dark-4); }
.footer-legal__links { display: flex; gap: 22px; }
.footer-legal__links a {
font-size: 13.5px;
color: var(--on-dark-3);
padding-block: 5px;
margin-block: -5px;
}
.footer-legal__links a:hover { color: var(--white); }
/* 14. Responsive =========================================================== */
/* ── Large desktop → small desktop: tighten the header ── */
@media (max-width: 1200px) {
.header-inner { gap: 16px; }
.nav__link { padding: 9px 10px; font-size: 15px; }
.mega {
width: 920px;
grid-template-columns: repeat(2, minmax(0, 1fr)) 130px minmax(0, 1fr);
}
.footer-grid { gap: 32px; }
}
/* 14. Landing page & thank-you ============================================= */
/* Chrome for /get-a-quote and the two thank-you pages. The landing header and
footer carry no navigation at all — see includes/landing-header.php for why. */
.landing-header {
background: var(--white);
border-bottom: 1px solid var(--border);
}
.landing-header__inner {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.landing-logo { display: flex; align-items: center; min-width: 0; }
.landing-logo img { height: 44px; width: auto; max-width: 100%; display: block; }
/* The header's only tappable element, and it goes to the form. flex-shrink keeps
it at full width so the logo gives way first on a narrow screen. */
.landing-header__cta { flex-shrink: 0; }
.landing-footer { background: var(--navy-footer); padding: 44px 0 34px; }
.landing-footer__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.landing-footer__brand img { height: 50px; width: auto; display: block; }
.landing-footer__blurb {
max-width: 560px;
font-size: 15px;
line-height: 1.65;
color: var(--on-dark);
}
.landing-footer__contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 22px;
font-size: 15px;
color: var(--on-dark-2);
}
.landing-footer__contact a { color: var(--white); font-weight: 700; }
.landing-footer__contact a:hover { color: var(--orange); }
.landing-footer__credit { font-size: 15px; color: var(--on-dark-4); }
.landing-footer__legal {
font-size: 13.5px;
color: var(--on-dark-4);
border-top: 1px solid rgba(255, 255, 255, .10);
padding-top: 18px;
width: 100%;
}
/* ── Reviews carousel ──
A horizontally scrollable row with arrows. It is a plain overflow-x scroller
underneath, so it still works by swipe or keyboard if the JS never runs — the
arrows are an enhancement, not the mechanism. */
.revs { position: relative; }
.revs__track {
display: flex;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Room for the card shadow, which an overflow container would otherwise clip. */
padding: 6px 2px 14px;
scrollbar-width: none;
}
.revs__track::-webkit-scrollbar { display: none; }
.revs__track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.revs__track > .review-card {
flex: 0 0 calc((100% - 44px) / 3);
scroll-snap-align: start;
}
/* Service cards run three-up, matching the review carousel above. */
.revs__track > .svc-card {
flex: 0 0 calc((100% - 44px) / 3);
scroll-snap-align: start;
}
@media (max-width: 1000px) {
.revs__track > .svc-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 660px) {
.revs__track > .svc-card { flex-basis: 86%; }
}
/* Nothing to scroll (a wide screen fitting every card) — hide the dead arrows. */
.revs--static .revs__nav { display: none; }
.revs__nav { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.revs__btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--border-3);
background: var(--white);
color: var(--navy);
font-size: 18px;
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
.revs__btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: var(--white); }
.revs__btn:disabled { opacity: .35; cursor: default; }
/* The card supplies the inset already, so the body must not add a second one:
the heading has to start at the left edge of the image above it. */
.lp-cards .card__body { padding: 0; }
/* These images sit inside the card's padding rather than bleeding to its edge,
so they need their own corners — a flush card gets them from the card's
overflow:hidden instead. Rounded a little tighter than the card itself, which
is what reads as concentric once the padding is between them. */
.lp-cards .card__media {
border-radius: 10px;
overflow: hidden;
}
/* ── Landing hero ── */
.lp-hero { position: relative; background: var(--navy-dark); overflow: hidden; }
.lp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(11, 25, 42, .96) 32%, rgba(11, 25, 42, .74) 60%, rgba(11, 25, 42, .42));
}
.lp-hero__inner {
position: relative;
padding-top: clamp(44px, 5vw, 68px);
padding-bottom: clamp(52px, 6.5vw, 84px);
display: flex;
gap: 56px;
align-items: center;
flex-wrap: wrap;
}
.lp-hero__copy { flex: 1 1 420px; max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.lp-hero__copy .lead { color: rgba(255, 255, 255, .88); max-width: 560px; }
.lp-hero__form { flex-shrink: 0; }
.lp-ticks { display: flex; flex-direction: column; gap: 10px; }
.lp-ticks li {
position: relative;
padding-left: 28px;
font-size: 16px;
line-height: 1.5;
color: var(--on-dark-list);
}
.lp-ticks li::before {
content: '\2713';
position: absolute;
left: 0;
top: -1px;
color: var(--orange);
font-weight: 800;
font-size: 17px;
}
/* ── Closing CTA band ── */
.lp-close {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
max-width: 720px;
margin-inline: auto;
}
.lp-close__text { color: var(--on-dark); max-width: 600px; }
.lp-close .btn-row { margin-top: 4px; }
.lp-close .lp-area { margin-top: 14px; }
.lp-area__title {
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--on-dark-3);
margin-bottom: 6px;
}
.lp-area__list { font-size: 15.5px; line-height: 1.7; color: var(--on-dark-list); }
.lp-hours { font-size: 14.5px; color: var(--on-dark-2); }
/* ── Mid-page CTA strip ──
A full-bleed navy band sitting between two light sections: copy left, one
button right. Shallower padding than a real section — it is a break in the
scroll, not another block of content. Wraps to stacked on narrow screens. */
.cta-strip { background: var(--navy-section); padding-block: clamp(28px, 3.6vw, 44px); }
.cta-strip__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px 32px;
flex-wrap: wrap;
}
.cta-strip__copy { display: flex; flex-direction: column; gap: 6px; }
.cta-strip__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.6px;
color: var(--white);
text-wrap: balance;
}
.cta-strip__text {
font-size: clamp(15px, 1.5vw, 16.5px);
line-height: 1.55;
color: var(--on-dark);
text-wrap: pretty;
}
.cta-strip__btn { flex-shrink: 0; }
/* ── Thank-you pages ──
A standalone screen: logo, confirmation card, nothing else. Sized to fit the
viewport so there is nothing to scroll. */
.bare__screen {
position: relative;
/* dvh tracks the mobile URL bar as it collapses; vh is the fallback for
browsers without it and would otherwise leave the page a bar-height too
tall, which is exactly the scroll we are trying to avoid. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--navy-dark);
overflow: hidden;
}
.bare__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bare__scrim { position: absolute; inset: 0; background: rgba(11, 25, 42, .84); }
.bare__main {
position: relative;
flex: 1;
display: grid;
place-items: center;
padding: clamp(24px, 4vw, 44px) 24px;
min-height: 0;
}
.bare__stack {
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(18px, 3vw, 30px);
}
.bare__logo { height: clamp(34px, 4.5vw, 48px); width: auto; display: block; }
.ty-card {
width: 100%;
max-width: 560px;
background: var(--white);
border-radius: var(--r-card);
box-shadow: 0 30px 70px rgba(5, 13, 24, .38);
padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 52px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(10px, 1.4vw, 14px);
}
.ty-card__check {
width: clamp(58px, 6vw, 74px);
height: clamp(58px, 6vw, 74px);
border-radius: 50%;
display: grid;
place-items: center;
background: var(--tag-bg);
color: var(--orange);
font-size: clamp(26px, 3vw, 33px);
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
.ty-card__rule { width: 46px; height: 2px; background: var(--warn-border); }
.ty-card__title {
font-size: clamp(30px, 4.4vw, 44px);
font-weight: 800;
letter-spacing: -1px;
color: var(--navy);
line-height: 1.1;
}
.ty-card__text { font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.55; color: var(--text); max-width: 430px; }
/* Side by side where the card is wide enough, stacked where it is not. Wrapping
rather than always stacking is what keeps the landscape-phone case — short and
wide, the one the height queries below exist for — on a single row. */
.ty-card__calls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 4px;
}
.ty-card__call { display: inline-flex; align-items: center; gap: 10px; }
.ty-card__redirect { font-size: 13.5px; color: var(--muted); }
/* Short viewports — a phone in landscape — trim the card rather than scroll. */
@media (max-height: 620px) {
.ty-card { padding: 22px 24px; gap: 8px; }
.ty-card__check { width: 48px; height: 48px; font-size: 22px; }
.ty-card__rule { display: none; }
.ty-card__title { font-size: 28px; }
.ty-card__text { font-size: 14.5px; }
.bare__logo { height: 30px; }
}
/* A phone held sideways leaves ~400px of height for everything. */
@media (max-height: 460px) {
.bare__logo { height: 24px; }
.bare__main { padding: 14px 20px; }
.bare__stack { gap: 12px; }
.ty-card { padding: 16px 22px; gap: 6px; }
.ty-card__check { width: 38px; height: 38px; font-size: 18px; }
.ty-card__title { font-size: 23px; }
.ty-card__text { font-size: 13.5px; line-height: 1.45; }
.ty-card__call { padding: 10px 20px; font-size: 15px; }
.ty-card__redirect { font-size: 12.5px; }
}
/* ── Tablet landscape: collapse the desktop nav into the drawer ── */
@media (max-width: 1080px) {
.nav { display: none; }
.hamburger { display: flex; }
.header-inner { justify-content: space-between; }
.header-actions { gap: 14px; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.doc-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.split-dark { gap: 44px; }
.hero-split { gap: 40px; }
}
/* ── Tablet: 3-col grids → 2-col, hero form drops below the copy ── */
@media (max-width: 1024px) {
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-photo__inner { gap: 40px; }
.form-card { width: 100%; max-width: 520px; }
.hero-form .form-card,
.lp-hero__form .form-card { width: 100%; max-width: 560px; }
.lp-hero__inner { gap: 40px; }
.revs__track > .review-card { flex-basis: calc((100% - 22px) / 2); }
.lp-hero__form { width: 100%; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer-blurb { max-width: none; }
}
/* ── Tablet portrait ── */
@media (max-width: 900px) {
.doc-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.doc-side { position: static; }
.doc-main { gap: 48px; }
.split-dark { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hero-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero-split__media { height: 280px; order: -1; }
.hero-split__media--light { height: 300px; }
.contact-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }
.why-strip { gap: 24px; }
.why-strip__list { gap: 16px 26px; }
}
/* ── Small tablet / large phone: sticky call bar takes over from the header
phone number. Card grids stay two-up until 700px. ── */
@media (max-width: 820px) {
.call-bar,
.quote-bar { display: flex; }
/* Room under the last section so the bar never covers the submit button.
:not(.bare) because the single-screen thank-you pages carry no fixed bar —
the padding there is 86px of pure scroll on a page that must not scroll. */
.landing { padding-bottom: 80px; }
body:not(.bare) { padding-bottom: 86px; }
.drawer__foot { padding-bottom: 92px; }
/* Lift Google's badge clear of the fixed call bar. */
.grecaptcha-badge { bottom: 92px !important; }
.header-phone { display: none; }
/* Two-up, with the dividers meeting in the middle as a single cross.
The gap moves inside the cells as padding: a grid gap would break both
lines exactly where they are supposed to join. */
.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 0; }
.stat:nth-child(odd) { border-left: none; padding-left: 0; padding-right: 20px; }
.stat:nth-child(even) { border-left: 1px solid var(--border-2); padding-left: 20px; padding-right: 0; }
.stat:nth-child(1),
.stat:nth-child(2) { padding-top: 0; padding-bottom: 22px; }
.stat:nth-child(3),
.stat:nth-child(4) { padding-top: 22px; padding-bottom: 0; border-top: 1px solid var(--border-2); }
.stat-strip--dark .stat:nth-child(even) { border-left-color: rgba(255, 255, 255, .1); }
.stat-strip--dark .stat:nth-child(3),
.stat-strip--dark .stat:nth-child(4) { border-top-color: rgba(255, 255, 255, .1); }
.step-card { padding: 24px; gap: 16px; }
.step-card__num { font-size: 38px; width: 46px; }
.article-hero { margin-top: 24px; }
.media-band { height: 240px; margin-top: 40px; }
.footer-legal { justify-content: flex-start; }
}
/* ── Phone: every grid goes single column ── */
@media (max-width: 700px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.process-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.check-grid, .tile-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ── Small mobile ── */
@media (max-width: 560px) {
.container { padding-inline: 18px; }
.btn { width: 100%; }
.btn-row { flex-direction: column; align-items: stretch; }
.header-actions .btn { width: auto; }
.landing-header__inner .btn { width: auto; }
.drawer__foot .btn { width: 100%; }
.check-cta .btn, .inline-cta .btn { width: 100%; }
.inline-cta .btn-row { width: 100%; }
.form-row { grid-template-columns: minmax(0, 1fr); }
.form-card { padding: 24px 20px; box-shadow: 0 16px 40px rgba(5, 13, 24, .35); }
.landing-header__inner { min-height: 66px; }
.revs__track > .review-card { flex-basis: 88%; }
.revs__track { gap: 16px; }
.ty__next { padding: 22px 20px; }
.ty__badge { width: 58px; height: 58px; font-size: 27px; }
.landing-footer__contact { flex-direction: column; gap: 8px; }
.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 40px; }
.footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
/* Stays two-up on phones — one per row turned the strip into a long
scroll of near-empty rows. The 820px rules above already handle the
dividers; only the spacing and type need tightening here. */
.stat:nth-child(odd) { padding-right: 16px; }
.stat:nth-child(even) { padding-left: 16px; }
.stat:nth-child(1), .stat:nth-child(2) { padding-bottom: 18px; }
.stat:nth-child(3), .stat:nth-child(4) { padding-top: 18px; }
.stat__num { font-size: 30px; }
.stat__label { font-size: 12.5px; letter-spacing: 1.2px; }
.why-strip__title { font-size: 20px; }
.card__body { padding: 22px; }
.step-card { flex-direction: column; gap: 10px; }
.step-card__num { width: auto; }
.check-cta { flex-direction: column; align-items: stretch; }
.article-meta { gap: 8px; font-size: 13.5px; }
.info-card__phone { font-size: 25px; }
.storm-strip { font-size: 14px; padding: 10px 18px; }
}
/* ── Phones: tighten the header so logo + CTA + menu button still fit. ── */
@media (max-width: 440px) {
.header-inner { gap: 12px; }
.header-actions { gap: 10px; }
.header-cta { padding: 12px 16px; font-size: 14.5px; }
/* Full-size logo + CTA + hamburger do not fit across a phone. */
.logo img { height: 34px; }
.landing-logo img { height: 32px; }
.landing-header__cta { padding: 11px 14px; font-size: 14px; }
.storm-strip { font-size: 13.5px; }
}
/* ── Smallest phones (≤360px): drop the header CTA. Conversion is still one
tap away via the fixed call bar and the drawer buttons. ── */
@media (max-width: 374px) {
.container { padding-inline: 16px; }
.header-cta { display: none; }
.logo img { height: 32px; }
}
/* ── FAQ accordion ───────────────────────────────────────────────────────────
Built on /, so it opens without JavaScript and stays
keyboard accessible. Printing force-opens every panel (see the print block). */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq {
border: 1px solid var(--border);
border-radius: var(--r-card-sm, 12px);
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease;
}
.faq + .faq { margin-top: 0; }
.faq:hover { border-color: #c9d2de; }
.faq[open] { border-color: var(--navy); box-shadow: var(--shadow-card); }
.faq__q {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 19px 22px;
cursor: pointer;
list-style: none;
font-size: 17px;
font-weight: 800;
line-height: 1.45;
color: var(--navy);
}
/* Safari/Chrome draw their own triangle without this. */
.faq__q::-webkit-details-marker,
.faq__q::marker { display: none; content: ''; }
.faq__q:focus-visible {
outline: 2px solid var(--orange);
outline-offset: -2px;
border-radius: var(--r-card-sm, 12px);
}
/* Plus that becomes a minus when the panel is open. */
.faq__icon {
flex: none;
position: relative;
width: 22px;
height: 22px;
margin-left: auto;
border-radius: 50%;
background: var(--bg-tile, #eef2f7);
transition: background .18s ease, transform .18s ease;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
inset: 50% 6px auto 6px;
height: 2px;
border-radius: 2px;
background: var(--navy);
transform: translateY(-50%);
transition: opacity .18s ease, transform .18s ease;
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq[open] .faq__icon { background: var(--navy); }
.faq[open] .faq__icon::before,
.faq[open] .faq__icon::after { background: #fff; }
.faq[open] .faq__icon::after { opacity: 0; transform: translateY(-50%) rotate(0deg); }
.faq__a { padding: 0 22px 20px; }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.faq__a li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.7; margin-bottom: 6px; }
.faq__a li::before {
content: '';
position: absolute;
left: 4px; top: .62em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--orange);
}
@media (max-width: 640px) {
.faq__q { padding: 16px 16px; font-size: 16px; gap: 12px; }
.faq__a { padding: 0 16px 18px; }
}
/* ── Service tiles ───────────────────────────────────────────────────────────
A short list of service names from the copy, as a grid. Items that match a
built page become links; the rest are plain tiles. */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: 12px;
margin: 6px 0 22px;
padding: 0;
list-style: none;
}
.tile-grid li { margin: 0; }
.tile {
display: flex;
align-items: center;
gap: 12px;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--r-card-sm);
background: #fff;
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
color: var(--navy);
text-decoration: none;
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.tile:hover { border-color: var(--navy); box-shadow: var(--shadow-card); transform: translateY(-1px); }
a.tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tile__ic {
flex: none;
position: relative;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--bg-tile, #eef2f7);
}
/* Tick, drawn rather than shipped as an icon font. */
.tile__ic::after {
content: '';
position: absolute;
left: 9px; top: 6px;
width: 6px; height: 11px;
border: solid var(--orange);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.tile__label { flex: 1; }
.tile__go { flex: none; color: var(--orange); font-weight: 800; opacity: 0; transition: opacity .16s ease; }
a.tile:hover .tile__go { opacity: 1; }
/* On a dark band the tiles invert. */
.on-dark .tile {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
color: var(--white);
}
.on-dark a.tile:hover { border-color: rgba(255, 255, 255, .5); }
.on-dark .tile__ic { background: rgba(255, 255, 255, .12); }
.on-dark .tile__ic::after { border-color: var(--amber); }
/* ── Doc section: heading beside copy ────────────────────────────────────────
Uses the whole container instead of a narrow centre column, without letting
the copy run to 150 characters a line: the heading takes the left third and
the body fills the rest. The heading sticks while its own section scrolls. */
.doc-cols {
display: grid;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: 60px;
align-items: start;
}
.doc-cols__head { position: sticky; top: calc(var(--header-h) + 28px); }
.doc-cols__head .h2 { margin: 0; }
.doc-cols__body { max-width: none; }
/* The doc intro, straight after the service cards. No section padding of its
own on top — the cards above already provide it. */
.doc-intro { padding-block: 0 clamp(8px, 1.5vw, 16px); }
.doc-prose--lead p { font-size: 17.5px; line-height: 1.7; }
/* Two text columns when there is a lot of copy and no photo to carry it. */
.doc-cols__body--wide { max-width: none; columns: 2; column-gap: 52px; }
.doc-cols__body--wide p { break-inside: avoid; }
@media (max-width: 1000px) {
.doc-cols { grid-template-columns: 1fr; gap: 20px; }
.doc-cols__head { position: static; }
.doc-cols__body--wide { columns: 1; }
}
/* ── Doc section: panel ──────────────────────────────────────────────────────
Copy inside a bordered card, for a section that is a set of signals to watch
for rather than continuous prose. */
.doc-panel {
border: 1px solid var(--border);
border-left: 4px solid var(--orange);
border-radius: var(--r-card);
background: #fff;
padding: clamp(24px, 3vw, 38px);
box-shadow: var(--shadow-card);
}
/* ── Doc section: dark band ── */
.doc-dark { background: var(--navy-section); }
.doc-dark .doc-prose p { color: var(--on-dark); }
.doc-dark .doc-prose h3 { color: var(--white); }
.doc-dark .h2 { color: var(--white); }
.doc-dark .doc-list li { color: var(--on-dark); }
.doc-dark .doc-list li::before { background: rgba(255, 255, 255, .12); }
/* ── Copy beside a photo ─────────────────────────────────────────────────────
Breaks a long run of doc sections up: every other one puts its copy next to
an image, and the image swaps sides each time so the page has a rhythm rather
than one long centre column. */
.media-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: 52px;
align-items: center;
}
.media-split__media {
margin: 0;
height: 340px;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--border);
}
.media-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Image first on alternate sections. The source order stays copy-then-image so
it still reads correctly when the columns collapse. */
.media-split--flip { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.media-split--flip .media-split__copy { order: 2; }
.media-split--flip .media-split__media { order: 1; }
@media (max-width: 900px) {
.media-split,
.media-split--flip { grid-template-columns: 1fr; gap: 28px; }
.media-split--flip .media-split__copy,
.media-split--flip .media-split__media { order: 0; }
.media-split__media { height: 240px; }
}
/* ── Content with a narrow column beside it ──────────────────────────────────
Main content left, a photo or a call-to-action card right. Used by the FAQs
and the closing section on the home page. */
.aside-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 370px;
gap: 56px;
align-items: start;
}
/* When the copy beside the card is short, top-aligning it leaves a hole under
the paragraph the height of the card. Centring absorbs the difference. */
.aside-layout--center { align-items: center; }
.aside-col {
position: sticky;
top: calc(var(--header-h) + 24px);
display: flex;
flex-direction: column;
gap: 20px;
}
.aside-col__media {
margin: 0;
height: 300px;
border-radius: var(--r-card-sm);
overflow: hidden;
border: 1px solid var(--border);
}
.aside-col__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) {
.aside-layout { grid-template-columns: 1fr; gap: 32px; }
/* Not sticky once it is stacked underneath — it would trail the page. */
.aside-col { position: static; }
.aside-col__media { height: 220px; }
}
/* ── Long-form doc copy ──────────────────────────────────────────────────────
Body copy for the content-doc sections. The band itself is a plain .section /
.section--light with a .section-head, exactly like the hand-built sections
above it — this only sets the reading measure and rhythm inside it. */
/* Doc copy living inside a service card — tighter than a full-width band. */
.card__prose { display: flex; flex-direction: column; gap: 12px; }
.card__prose p { font-size: 15.5px; line-height: 1.62; color: var(--text); margin: 0; }
.card__prose ul { margin: 2px 0; }
.doc-prose p { font-size: 16.5px; line-height: 1.75; color: var(--text); margin: 0 0 18px; }
.doc-prose p:last-child { margin-bottom: 0; }
.doc-prose h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 28px 0 12px; }
.doc-prose h3:first-child { margin-top: 0; }
/* Bulleted lists inside the doc copy get the tick treatment. */
.doc-list { margin: 4px 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.doc-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.doc-list li {
position: relative;
padding-left: 30px;
font-size: 16px;
line-height: 1.6;
color: var(--text);
}
.doc-list li::before {
content: '';
position: absolute;
left: 0; top: .2em;
width: 19px; height: 19px;
border-radius: 50%;
background: var(--bg-tile, #eef2f7);
}
.doc-list li::after {
content: '';
position: absolute;
left: 6px; top: .48em;
width: 6px; height: 10px;
border: solid var(--orange);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@media (max-width: 760px) {
.doc-band { padding: 40px 0; }
.doc-list--2 { grid-template-columns: 1fr; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ── Print ── */
@media print {
.site-header, .drawer, .drawer-overlay, .call-bar, .quote-bar, .cta-band, .storm-strip { display: none !important; }
body { padding-bottom: 0; }
/* A collapsed answer would otherwise print as a heading with nothing under it. */
.faq__a { display: block !important; }
.faq__icon { display: none; }
}