/* ==========================================================================
Big Easy Fence Supply - design system v2, "Property Line Pro".
SCOPE (corrected 2026-08-27): ONLY THE STRUCTURE of the reference site was
copied - information architecture, per-page-type section ORDER, section
composition (contained vs full-width, column counts, grid splits,
image/text alternation), where CTA bands and trust blocks sit, and the
DOM shape of a section.
THE VISUAL DESIGN SYSTEM IS FENCE SUPPLY'S OWN, unchanged from the
2026-08-26 contractor-tone correction: Archivo / Manrope / Space Mono,
ink #171B24, safety-orange #D8481F, steel #3E5C76, 4px radius, 8px
buttons, 112px section rhythm, 1260px container, and FS's own shadow
ramp and type sizes. No reference-site colour, font, type scale, button
skin, radius, shadow or spacing value survives in this file.
Structural additions that fix defects the audit found:
- A real estimate form living inside the hero (the site previously had
zero form elements and 24 CTAs pointing at a dead anchor).
- Footer column headings promoted out of the orphan-h5 that staging
introduced (live production does not have that defect).
- An explicit 768px tablet checkpoint and a 380px small-phone guard,
per Content-Layout-Image-Positioning-Standards.md.
========================================================================== */
:root{
/* --- Brand tokens, retoned again 2026-09-09 (v4) to CONTRAST WITH THE
LOGO, per instruction. The forest green of the first pass sat next
to the logo's blue as an analogous colour and muddied it. The
palette is now built OUT OF the logo and a neutral dark, which is
also exactly what the client's own live site does.
Sampled from logo-new.png: blue #007AC3, amber #F5A950.
Neutral dark and cool near-white sampled from the nine supplied
live-site screenshots: #22222E and #F4F7FC.
Logo legibility, measured on every surface it appears on:
header blue on #F4F7FC 4.13:1 amber on #F4F7FC 1.77:1
footer blue on #22222E 3.49:1 amber on #22222E 5.85:1
Logotypes are exempt from WCAG 1.4.11, and both surfaces carry at
least one half of the mark well clear of 3:1.
Text contrast, measured: ink/white 15.36, ink/near-white 14.47,
blue-d/white 6.54, blue-t/white 5.04, accent-d/white 4.83,
accent-dd/white 6.28, muted/near-white 6.43, accent/ink 5.60,
accent-l/ink 6.72 - all AA.
--accent (#F0A952) and --brand-blue (#007AC3) are FILLS. Small text
on them must be --ink, not white. */
--ink:#22222E;
--ink-soft:#2C2C3B;
--ink-softer:#454556;
--base:#FFFFFF;
--base-d:#F4F7FC;
--base-dd:#E4EAF3;
--accent:#F0A952; /* brand amber - primary CTA fill */
--accent-d:#A2651B; /* AA amber for text on light */
--accent-dd:#8A5514; /* AA for white text on an amber-dark fill */
--accent-l:#F7C083; /* amber on the dark band */
--brand-blue:#007AC3; /* logo blue - fills, icon rings */
--brand-blue-d:#00629E; /* AA for white text on a blue fill */
--brand-blue-t:#0A73B8; /* AA blue for accent WORDS on light */
--brand-blue-l:#5FB8F0; /* blue on the dark band */
--steel:#4E5A6B;
--steel-l:#8E9AAC;
--white:#FFFFFF;
--ink-line:rgba(34,34,46,.13);
--white-line:rgba(255,255,255,.16);
--muted:#55596A;
--muted-on-ink:rgba(244,247,252,.76);
/* --- FS v1 radius + shadow ramp, restored 2026-08-27 --- */
--radius:4px;
--radius-btn:8px;
--shadow:0 20px 40px -24px rgba(34,34,46,.22);
--shadow-lg:0 24px 48px -24px rgba(34,34,46,.22);
/* --- FS v1 type sizes --- */
--h1:clamp(2.5rem, 4.4vw, 3.7rem);
--h2:clamp(2rem, 3.2vw, 2.7rem);
--h3:1.5rem;
--h4:1.18rem;
/* --- FS v1 fonts --- */
--font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
--font-display:'Archivo', sans-serif;
--font-body:'Manrope', sans-serif;
--font-mono:'Space Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
body.bef-v2{
margin:0;
font-family:var(--font-body);
line-height:1.65;
color:var(--ink);
background:var(--base);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.bef-v2 img{max-width:100%;height:auto;display:block;}
body.bef-v2 a{color:var(--accent-d);}
body.bef-v2 ul{list-style:none;}
body.bef-v2 a:focus-visible,
body.bef-v2 button:focus-visible,
body.bef-v2 input:focus-visible,
body.bef-v2 select:focus-visible,
body.bef-v2 textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
body.bef-v2 h1,body.bef-v2 h2,body.bef-v2 h3,body.bef-v2 h4{
font-family:var(--font-display);
font-weight:800;
line-height:1.08;
letter-spacing:-0.01em;
color:var(--ink);
margin:0 0 .5em;
}
body.bef-v2 h1{font-size:var(--h1);}
body.bef-v2 h2{font-size:var(--h2);}
body.bef-v2 h3{font-size:var(--h3);}
body.bef-v2 h4{font-size:var(--h4);}
body.bef-v2 p{margin:0 0 1em;}
.skip-link{position:absolute;left:-999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.6rem 1rem;}
.skip-link:focus{left:0;}
.container{max-width:1260px;margin:0 auto;padding:0 32px;}
.container--narrow{max-width:820px;margin:0 auto;padding:0 32px;}
.center{text-align:center;}
.measure{max-width:660px;}
.lead{font-size:1.08rem;color:var(--muted);line-height:1.6;}
.eyebrow{
font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
letter-spacing:.14em;font-size:.72rem;color:var(--accent-d);
display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;
}
.eyebrow::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0;}
/* --- placeholder marker: anything a human must still supply --------------
Deliberately loud. These must not survive to production. */
.needs-data{
display:inline-block;
font-family:var(--font-mono);font-size:.68rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
background:repeating-linear-gradient(45deg,#FFE9B0,#FFE9B0 8px,#FFD980 8px,#FFD980 16px);
color:#6B4A00;border:1px dashed #B58900;border-radius:4px;
padding:.2rem .5rem;line-height:1.4;
}
.needs-block{
border:2px dashed #B58900;border-radius:var(--radius);
background:#FFFBEF;padding:1.2rem;color:#6B4A00;
}
.needs-block p{margin:.4rem 0 0;font-size:.9rem;}
/* ==========================================================================
Buttons (ported: 6px radius, uppercase, 800, 2px transparent border)
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 30px;border-radius:var(--radius-btn);
font-family:var(--font-body);font-weight:800;font-size:.94rem;
text-decoration:none;border:2px solid transparent;cursor:pointer;
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-primary{background:var(--accent-d);color:var(--white);box-shadow:0 10px 28px -12px rgba(178,58,23,.5);}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-dd);transform:translateY(-2px);}
/* Call CTA on dark backgrounds uses FS's own light-outline button. */
.btn-call{border-color:rgba(255,255,255,.55);color:var(--white);background:transparent;}
.btn-call:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);}
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;}
.btn-block{width:100%;}
/* CTA label visibility fix — 2026-08-27.
Buttons are elements, so `body.bef-v2 a` (specificity 0,1,2) outranked
the flat `.btn-*` rules (0,1,0) and repainted every CTA label in --accent-d.
On the --accent-d fill that rendered the text at 1.00:1 — literally invisible.
Re-assert each button's own colour at matching specificity. */
body.bef-v2 a.btn-primary,
body.bef-v2 a.btn-primary:hover,
body.bef-v2 a.btn-primary:focus-visible{color:var(--white);}
body.bef-v2 a.btn-call{color:var(--white);}
body.bef-v2 a.btn-call:hover,
body.bef-v2 a.btn-call:focus-visible{color:var(--ink);}
body.bef-v2 a.btn-outline{color:var(--ink);}
body.bef-v2 a.btn-outline:hover,
body.bef-v2 a.btn-outline:focus-visible{color:var(--white);}
body.bef-v2 a.btn-outline-light{color:#fff;}
/* ==========================================================================
Util strip + header
========================================================================== */
.util-strip{background:var(--ink-soft);color:var(--muted-on-ink);font-size:.82rem;font-family:var(--font-mono);}
.util-strip .container{display:flex;gap:1.6rem;align-items:center;padding:.42rem 0;}
.util-strip span{display:inline-flex;align-items:center;gap:.4rem;}
.util-strip a{color:var(--accent-l);text-decoration:none;font-weight:700;font-size:.95rem;}
.util-phone{margin-left:auto;}
.site-header{
position:sticky;top:0;z-index:60;background:#fff;
border-bottom:1px solid var(--ink-line);
}
.header-bar{display:flex;align-items:center;gap:1.4rem;padding:.6rem 0;}
.brand{display:inline-flex;align-items:center;text-decoration:none;}
.brand img{display:block;}
.nav-primary .menu{display:flex;align-items:center;gap:.2rem;margin:0;padding:0;}
.nav-primary a{
display:block;text-decoration:none;color:var(--ink);
font-weight:700;font-size:.95rem;padding:.6rem .7rem;border-radius:4px;
}
.nav-primary a:hover{color:var(--accent-d);background:var(--base-d);}
.nav-primary li{position:relative;}
.sub-menu{
position:absolute;top:100%;left:0;min-width:250px;margin:0;padding:.4rem;
background:#fff;border:1px solid var(--base-dd);border-radius:var(--radius);
box-shadow:var(--shadow-lg);
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.sub-menu a{font-weight:600;font-size:.92rem;}
.menu-item-has-children > a::after{
content:"";display:inline-block;margin-left:.4rem;
border:4px solid transparent;border-top-color:currentColor;
transform:translateY(2px);
}
/* Third level (Products > Aluminum Fencing > Commercial). Desktop only: flies
out to the right of its parent row instead of stacking over the first-level
panel. Below 1300 the nav is off-canvas and nests as an indented accordion. */
@media (min-width:1301px){
.sub-menu .sub-menu{top:-.4rem;left:100%;margin-left:.2rem;}
.sub-menu .menu-item-has-children > a{display:flex;align-items:center;justify-content:space-between;}
.sub-menu .menu-item-has-children > a::after{
border-top-color:transparent;border-left-color:currentColor;
transform:none;margin-left:.6rem;
}
}
.header-cta{display:flex;align-items:center;gap:.8rem;margin-left:auto;}
.header-phone{
text-decoration:none;color:var(--ink);font-weight:800;
font-family:var(--font-mono);font-size:.92rem;
}
.nav-toggle{
display:none;align-items:center;justify-content:center;
width:44px;height:44px;background:#fff;border:1px solid var(--base-dd);
border-radius:6px;cursor:pointer;color:var(--ink);
}
.nav-toggle span{display:block;width:20px;height:2px;background:currentColor;position:relative;}
.nav-toggle span::before,.nav-toggle span::after{
content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
/* ==========================================================================
Hero (ported: 1.15fr/.85fr copy + form grid, image bg, dark gradient)
========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--ink);}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;}
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg, rgba(23,27,36,.94) 0%, rgba(23,27,36,.72) 55%, rgba(23,27,36,.42) 100%);
}
.hero-grid{
position:relative;z-index:2;
display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;
align-items:center;padding:4rem 0 4.4rem;
}
.hero h1{color:#fff;max-width:22ch;text-wrap:balance;}
.hero h1 em{font-style:normal;color:var(--accent-l);}
.hero-sub{font-size:1.14rem;color:#D3D7DE;max-width:56ch;}
.herolist{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.55rem;font-weight:600;color:#E7E9ED;}
.herolist li{display:flex;gap:.6rem;align-items:baseline;}
.herolist li::before{content:"\2714";color:var(--accent-l);font-weight:800;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.5rem;}
/* ==========================================================================
Estimate form (Patios' PATTERN, native implementation — see functions.php)
========================================================================== */
.estimate-form-wrap{
background:#fff;border-radius:var(--radius);
border-top:6px solid var(--accent);
box-shadow:var(--shadow-lg);padding:1.5rem 1.4rem 1.2rem;
}
.estimate-form-wrap h3{font-size:1.3rem;margin-bottom:.2rem;}
.estimate-form-wrap .form-intro{font-size:.88rem;color:var(--muted);margin-bottom:1rem;}
.form-fineprint{font-size:.78rem;color:var(--muted);margin:.8rem 0 0;text-align:center;}
.form-row{display:grid;gap:.7rem;margin-bottom:.7rem;}
.form-row--2{grid-template-columns:1fr 1fr;}
.ef-field label{
display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-softer);margin-bottom:.25rem;
}
.ef-field .req{color:var(--accent);}
.ef-field input,.ef-field select,.ef-field textarea{
width:100%;padding:.62rem .7rem;font-family:var(--font-body);font-size:.95rem;
color:var(--ink);background:#fff;
border:1px solid var(--base-dd);border-radius:6px;
}
.ef-field textarea{min-height:76px;resize:vertical;}
.ef-field input:focus,.ef-field select:focus,.ef-field textarea:focus{border-color:var(--accent);}
/* honeypot — must never be visible or focusable to a real user */
.ef-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-notice{
border-radius:6px;padding:.7rem .85rem;margin-bottom:.9rem;font-size:.9rem;font-weight:600;
}
.form-notice--ok{background:#E7F6EC;border:1px solid #A8D9B9;color:#14532D;}
.form-notice--err{background:#FDECEA;border:1px solid #F3B5AE;color:#7F1D1D;}
.form-error{display:block;font-size:.78rem;color:#B3261E;font-weight:700;margin-top:.2rem;}
/* ==========================================================================
Badge bar / trust bar (ported)
========================================================================== */
.badge-bar{background:#fff;border-bottom:1px solid var(--base-dd);}
.badge-bar-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.4rem;padding:.95rem 0;margin:0;padding-inline:0;}
.badge-item{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.9rem;color:var(--ink);}
.badge-item .ico{
color:var(--accent);background:var(--base-d);border-radius:50%;
padding:.4rem;width:34px;height:34px;flex:0 0 34px;
display:inline-flex;align-items:center;justify-content:center;
}
/* ==========================================================================
Sections + bands (ported)
========================================================================== */
.section{padding:112px 0;}
.section--sand{background:var(--base-d);}
.section--dusk{background:var(--ink);color:#E8EAEE;}
.section--dusk h2,.section--dusk h3,.section--dusk h4{color:#fff;}
.section--dusk .lead{color:#C3C8D0;}
.section--dusk a:not(.btn){color:var(--accent-l);}
.section-head{margin-bottom:2.4rem;}
.section-head.center{text-align:center;margin-inline:auto;max-width:660px;}
/* ==========================================================================
Grid + cards (ported vocabulary)
========================================================================== */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{
display:flex;flex-direction:column;background:var(--white);
border:1px solid var(--ink-line);border-radius:var(--radius);
overflow:hidden;padding:0 0 22px;
text-decoration:none;color:var(--ink);
transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card h3{padding:0 1.2rem;margin-top:1.05rem;}
.card p{padding:0 1.2rem;color:var(--muted);font-size:.93rem;flex-grow:1;margin-bottom:.8rem;}
.card-media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--base-d);}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transition:transform .3s ease;}
.card:hover .card-media img{transform:scale(1.04);}
.card-tags{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1.2rem .6rem;}
.card-tags span{
font-family:var(--font-mono);font-size:.66rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;
background:var(--base-d);color:var(--ink-softer);border-radius:3px;padding:.18rem .45rem;
}
.card-link{
display:inline-flex;align-items:center;gap:.4rem;padding:0 1.2rem;
font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-d);
}
.card-date{
display:inline-flex;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;
color:var(--muted);font-weight:700;margin:.9rem 1.2rem .2rem;
text-transform:uppercase;letter-spacing:.06em;
}
/* Stats band (ported) */
.stat{text-align:center;padding:.6rem;border-left:1px solid var(--ink-softer);}
.grid-4 .stat:first-child{border-left:0;}
.stat-n{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--accent-l);line-height:1;}
.stat-l{margin-top:.45rem;font-size:.85rem;color:#C3C8D0;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
/* Why-us checks (ported) */
.why-split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;}
.checks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.checks li{
position:relative;padding-left:18px;font-size:.94rem;color:var(--ink-soft);
}
.checks li::before{
content:'';position:absolute;left:0;top:11px;width:6px;height:6px;
background:var(--accent);border-radius:50%;
}
.checks li strong{display:block;font-family:var(--font-display);font-size:1rem;}
.checks li span{display:block;font-weight:500;font-size:.88rem;color:var(--muted);}
.why-img img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 55%;}
/* Process (ported: white card, dark top rule, overhanging accent number) */
.process-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.process-track--5{grid-template-columns:repeat(5,1fr);gap:1.1rem;}
.process-step{
position:relative;background:var(--white);border:1px solid var(--ink-line);
border-radius:var(--radius);border-top:3px solid var(--steel);
padding:26px 26px 24px;
}
/* FS v1 step marker: light disc, ink hairline, Space Mono numeral. */
.process-watermark{
width:40px;height:40px;border-radius:50%;background:var(--base);
border:2px solid var(--ink-line);display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--muted);
margin-bottom:14px;
}
.process-step.is-visible .process-watermark{border-color:var(--accent);color:var(--accent);}
.process-step h3{font-size:1.18rem;margin-bottom:8px;}
.process-step p{color:var(--muted);font-size:.95rem;margin:0;}
/* Quotes / testimonials (ported) */
.quote{
margin:0;background:#fff;border-radius:var(--radius);
padding:1.5rem 1.5rem 1.3rem;box-shadow:var(--shadow);
display:flex;flex-direction:column;
}
.quote .stars{color:var(--accent);letter-spacing:.1em;}
.quote p{color:#33414E;font-size:.96rem;flex-grow:1;margin:.6rem 0 1rem;}
.quote footer{display:flex;align-items:center;gap:.7rem;}
.quote cite{font-style:normal;font-weight:800;display:block;color:var(--ink);}
.quote .loc{display:block;font-size:.8rem;color:var(--muted);}
.avatar-ph{
width:46px;height:46px;border-radius:50%;flex:0 0 46px;
background:var(--base-dd);border:1px dashed #B58900;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:.55rem;color:#6B4A00;text-align:center;line-height:1.1;
}
/* Work / gallery tiles (ported) */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.work-tile{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--base-d);}
.work-tile img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 55%;transition:transform .3s ease;}
.work-tile:hover img{transform:scale(1.04);}
.work-ph{
aspect-ratio:4/3;display:flex;flex-direction:column;gap:.5rem;
align-items:center;justify-content:center;text-align:center;padding:1rem;
border:2px dashed #B58900;background:#FFFBEF;color:#6B4A00;border-radius:var(--radius);
}
/* Areas (ported) */
.areas-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:2.4rem;align-items:center;}
.area-tags{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0;padding:0;}
.area-tags li{
background:#fff;border:1px solid var(--base-dd);border-left:3px solid var(--accent);
border-radius:6px;padding:.7rem .9rem;color:var(--ink);font-weight:700;font-size:.92rem;
box-shadow:0 4px 14px rgba(23,27,36,.08);
}
/* FAQ (ported) */
.faq-split{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:start;}
.faq details{border-bottom:1px solid var(--ink-line);}
.faq details:first-of-type{border-top:1px solid var(--ink-line);}
.faq summary{
font-family:var(--font-display);font-weight:700;font-size:1.05rem;
padding:1.1rem 2rem 1.1rem 0;cursor:pointer;list-style:none;position:relative;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
content:"+";position:absolute;right:0;top:1rem;
font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:1.3rem;
}
.faq details[open] summary::after{content:"\2212";}
.faq details > p{padding:0 0 1.1rem;margin:0;color:var(--muted);}
.faq-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);position:sticky;top:140px;}
/* CTA band (ported) */
.cta-band .cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:flex-end;}
/* ==========================================================================
Comparison table — Web-Redesign-Agent-Spec §12-19 table design system.
Real //. No div grids. Brand colors verified above.
Pills used ONLY for the genuinely categorical maintenance judgement.
========================================================================== */
.table-wrap{overflow-x:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);}
table.bef-table{width:100%;border-collapse:collapse;font-size:.94rem;}
table.bef-table caption{
caption-side:top;text-align:left;padding:1.1rem 1.2rem .2rem;
font-family:var(--font-mono);font-size:.72rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
table.bef-table th,table.bef-table td{
padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--base-dd);vertical-align:top;
}
table.bef-table thead th{
background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;
font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:0;
}
table.bef-table tbody th{
font-family:var(--font-display);font-weight:700;color:var(--ink);
background:var(--base-d);border-left:3px solid var(--accent);width:26%;
}
table.bef-table tbody tr:last-child th,
table.bef-table tbody tr:last-child td{border-bottom:0;}
.pill{
display:inline-block;border-radius:999px;padding:.16rem .6rem;
font-size:.74rem;font-weight:800;letter-spacing:.03em;
}
.pill--low{background:#E7F6EC;color:#14532D;border:1px solid #A8D9B9;}
.pill--med{background:#FFF4E0;color:#7A4A00;border:1px solid #F0CC8A;}
/* ==========================================================================
Footer (ported: 1.5fr 1fr 1fr 1fr, h4 column headings)
========================================================================== */
.site-footer{background:var(--ink);color:var(--muted-on-ink);padding:3.4rem 0 1.6rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;}
.site-footer h2{
color:#fff;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1rem;
}
.site-footer ul{margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.site-footer a{color:var(--muted-on-ink);text-decoration:none;font-size:.92rem;}
.site-footer a:hover{color:var(--accent-l);}
.site-footer address{font-style:normal;font-size:.92rem;margin:.9rem 0;line-height:1.6;}
.footer-brand p{font-size:.92rem;line-height:1.6;}
.footer-hours{display:block;font-family:var(--font-mono);font-size:.8rem;margin-top:.3rem;}
.footer-social{display:flex;gap:.7rem;margin-top:1rem;flex-direction:row !important;}
.footer-social img{width:16px;height:16px;}
.footer-bottom{
display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--white-line);font-size:.85rem;
}
.footer-legal a{margin-inline:.2rem;}
/* Mobile call bar (ported: TWO actions, was one) */
.mobile-callbar{
display:none;grid-template-columns:1fr 1fr;
position:fixed;bottom:0;left:0;right:0;z-index:70;
box-shadow:0 -6px 20px rgba(0,0,0,.28);
}
.mobile-callbar a{
display:flex;align-items:center;justify-content:center;gap:.45rem;
padding:.95rem .5rem;text-decoration:none;color:#fff;
font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.03em;
}
.mobile-callbar a:first-child{background:var(--accent);}
.mobile-callbar a:last-child{background:var(--ink);}
/* ==========================================================================
Reveal (kept from v1, with the no-JS guard)
========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);}
.reveal.is-visible{opacity:1;transform:none;}
.no-js .reveal{opacity:1;transform:none;}
/* ==========================================================================
RESPONSIVE
Ported skeleton: 1300 (off-canvas nav) / 980 / 640, plus the ≤640
"proof content stays horizontal" carousel behaviour.
ADDED per Content-Layout standard: 768 tablet checkpoint, 380 small phone.
========================================================================== */
@media (max-width:1300px){
.nav-primary{
position:fixed;inset:0;top:0;z-index:100;
background:var(--ink);padding:5rem 1.6rem 2rem;
transform:translateX(100%);transition:transform .25s ease;
overflow-y:auto;margin:0;
}
.nav-primary.open{transform:none;}
.nav-primary .menu{flex-direction:column;align-items:stretch;gap:.1rem;}
.nav-primary a{color:#fff;font-size:1.05rem;padding:.8rem .6rem;}
.nav-primary a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sub-menu{
position:static;opacity:1;visibility:visible;transform:none;
background:transparent;border:0;box-shadow:none;display:none;padding:0 0 0 1rem;
}
.nav-primary li.open > .sub-menu{display:block;}
.sub-menu a{color:#C3C8D0;font-size:.95rem;}
.nav-toggle{display:inline-flex;z-index:110;position:relative;}
body.nav-open .nav-toggle{color:#fff;border-color:var(--ink-softer);background:transparent;}
.header-phone span{display:none;}
.util-strip .util-lic{display:none;}
}
@media (max-width:980px){
.grid-3,.grid-4,.work-grid{grid-template-columns:repeat(2,1fr);}
.process-track,.process-track--5{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
.why-split,.areas-layout,.faq-split,.hero-grid,.cta-band .cta-inner{grid-template-columns:1fr;}
.hero-grid{gap:2.2rem;padding:3rem 0 3.4rem;}
/* Form first on tablet — it is the conversion action. */
.hero-form{order:-1;}
.faq-media img{position:static;}
.header-quote{display:none;}
.grid-4 .stat{border-left:0;}
.cta-actions{justify-content:flex-start;}
}
/* ADDED — explicit 768 tablet reflow checkpoint. */
@media (max-width:768px){
.section{padding:3.6rem 0;}
.grid-4{grid-template-columns:repeat(2,1fr);}
.why-split,.areas-layout{gap:2rem;}
}
@media (max-width:640px){
.section{padding:3.2rem 0;}
.grid-2,.grid-3,.grid-4,.work-grid,.area-tags{grid-template-columns:1fr;}
.util-strip .util-hours{display:none;}
.mobile-callbar{display:grid;}
.site-footer{padding-bottom:7rem;}
.footer-grid{grid-template-columns:1fr;gap:1.8rem;}
.form-row--2{grid-template-columns:1fr;}
.hero-grid{padding:2.4rem 0 3rem;}
/* Ported from Patios: proof content stays HORIZONTAL as swipe strips
instead of stacking into an endless scroll. */
.badge-bar-inner{
display:flex;flex-wrap:nowrap;justify-content:flex-start;
gap:1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.badge-bar-inner::-webkit-scrollbar{display:none;}
.badge-item{flex:0 0 auto;white-space:nowrap;}
.stats-band .grid-4{grid-template-columns:repeat(2,1fr);row-gap:1.4rem;}
.work-grid,.quote-grid{
display:flex;overflow-x:auto;gap:.9rem;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
padding-bottom:.6rem;scrollbar-width:none;
}
.work-grid::-webkit-scrollbar,.quote-grid::-webkit-scrollbar{display:none;}
.work-tile{flex:0 0 78%;scroll-snap-align:center;}
.quote-grid > .quote{flex:0 0 86%;scroll-snap-align:center;}
}
/* ==========================================================================
Components added 2026-08-27 when v2 went site-wide.
All ported from the reference template's equivalents, in FS brand tokens.
========================================================================== */
/* Breadcrumb — reference template puts this in every inner-page hero. */
.breadcrumb{
font-family:var(--font-mono);font-size:.74rem;color:#9AA2AE;
margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.breadcrumb a{color:#C7CBD3;text-decoration:none;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{margin-inline:.4rem;opacity:.6;}
.breadcrumb .current{color:#fff;}
/* Trust bar base (the ≤640 swipe-strip rule already exists above). */
.trust-bar-inner{margin:0;padding:0;}
/* Contact page two-column layout. */
.contact-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start;}
/* Blog post hero + body. */
.post-hero{background:var(--ink);color:#E8EAEE;padding:2.6rem 0 0;}
.post-hero h1{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:0;}
.post-hero .post-meta{
font-family:var(--font-mono);font-size:.76rem;color:var(--muted-on-ink);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem;
}
.post-featured{
margin-top:2rem;border-radius:var(--radius) var(--radius) 0 0;
overflow:hidden;aspect-ratio:3/2;background:var(--ink-soft);
}
.post-featured img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.article-content h2{font-size:1.5rem;margin:36px 0 14px;}
.article-content h3{font-size:1.18rem;margin:26px 0 10px;}
.article-content h2:first-child,.article-content h3:first-child{margin-top:0;}
.article-content p{color:var(--muted);margin-bottom:1rem;}
.article-content p strong{color:var(--ink);}
.article-content ul,.article-content ol{margin:0 0 1.2rem;padding-left:0;}
.article-content ul li,.article-content ol li{
list-style:none;color:var(--ink-soft);padding-left:1.4rem;position:relative;margin-bottom:.6rem;
}
.article-content ul li::before{
content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
background:var(--accent);border-radius:50%;
}
.article-content ol{counter-reset:art-ol;}
.article-content ol li{counter-increment:art-ol;}
.article-content ol li::before{
content:counter(art-ol) ".";background:none;width:auto;top:0;
font-family:var(--font-mono);font-weight:700;color:var(--accent);
}
.article-content a{color:var(--accent-d);font-weight:700;}
.article-content img{border-radius:var(--radius);margin:1.6rem 0;}
.article-content figure{margin:1.6rem 0;}
.article-content blockquote{
margin:1.6rem 0;padding:1rem 1.2rem;background:var(--base-d);
border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
}
.article-content details{border-bottom:1px solid var(--ink-line);padding:1.1rem 0;}
.article-content details summary{
font-family:var(--font-display);font-weight:700;cursor:pointer;list-style:none;
}
.article-content details summary::-webkit-details-marker{display:none;}
.article-content table{width:100%;border-collapse:collapse;margin:1.6rem 0;}
.article-content th,.article-content td{
padding:.7rem .9rem;border-bottom:1px solid var(--base-dd);text-align:left;
}
.article-content thead th{background:var(--ink);color:#fff;font-family:var(--font-display);}
/* Pagination. */
.pagination{margin-top:2.6rem;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}
.pagination .page-numbers{
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;height:44px;padding:0 .8rem;
background:#fff;border:1px solid var(--base-dd);border-radius:6px;
color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent-d);}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;}
/* HTML sitemap. */
.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.sitemap-col h3{font-size:1rem;margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent);}
.sitemap-col ul{margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.sitemap-col a{color:var(--muted);font-size:.93rem;text-decoration:none;}
.sitemap-col a:hover{color:var(--accent-d);}
@media (max-width:980px){
.contact-layout{grid-template-columns:1fr;}
.sitemap-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
.sitemap-grid{grid-template-columns:1fr;}
}
/* ==========================================================================
v1 -> v2 COMPATIBILITY LAYER (2026-08-27).
The 16 legacy pages (aluminum/wrought-iron child + product-detail pages,
privacy, terms, thank-you) hold fully-composed v1 HTML in post_content —
real Big Easy Fence Supply copy that must be preserved verbatim. Rather
than rewrite that content, these rules map the v1 class vocabulary onto
the v2 design tokens so the same markup renders correctly inside the v2
chrome. Content untouched; presentation unified.
========================================================================== */
body.bef-v2 .wrap{max-width:1260px;margin:0 auto;padding:0 32px;}
/* 2026-09-11 prnt.sc/HqoDkaNbo16L "gaps are too wide fix all pages like this" (LAYER 42):
was padding:112px 0 at EVERY width - this (0,1,2) rule also beat the .section
breakpoint values below (0,1,0), so phones got 112px too. Measured before on
53 pages: median 171px between section contents, p90 230px, max 345px (390px wide).
Now 72px per side on desktop easing to 48px on phones. Sections with their own
padding rules are unaffected. Old value in system-v2.css.bak-gaps-20260911. */
body.bef-v2 section{padding:clamp(48px,3vw + 30px,72px) 0;}
body.bef-v2 section:first-child{padding-top:2.6rem;}
/* v1 buttons -> v2 button system */
body.bef-v2 .btn-rust{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(216,72,31,.35);}
body.bef-v2 .btn-rust:hover{background:var(--accent-d);}
body.bef-v2 .btn-ink{background:var(--ink);color:#fff;}
body.bef-v2 .btn-ink-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
body.bef-v2 .btn-sand-outline{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;}
/* v1 hero/intro blocks. The v2 template supplies its own hero above the
content, so any hero left inside content is demoted to a plain intro. */
body.bef-v2 .mat-hero{background:transparent;padding:0 0 1.4rem;}
body.bef-v2 .mat-intro{max-width:760px;}
body.bef-v2 .mat-intro p{color:var(--muted);font-size:1.08rem;line-height:1.6;}
body.bef-v2 .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem;}
/* v1 two-column category rows -> v2 split rhythm */
body.bef-v2 .mat-cat-row{
display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;margin-bottom:3rem;
}
body.bef-v2 .mat-cat-row.is-reverse .mat-cat-media{order:-1;}
body.bef-v2 .mat-cat-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:auto;}
body.bef-v2 .mat-cat-copy h2,body.bef-v2 .mat-cat-copy h3{margin-bottom:.6rem;}
/* v1 factor/spec cards -> v2 card system */
body.bef-v2 .mat-factors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
body.bef-v2 .mat-factor-card{
background:#fff;border-radius:var(--radius);border-top:5px solid var(--accent);
padding:1.6rem 1.2rem 1.3rem;box-shadow:var(--shadow);
}
body.bef-v2 .mat-factor-card p{color:var(--muted);font-size:.92rem;margin:0;}
body.bef-v2 .spec-list{margin:1rem 0 0;padding:0;display:grid;gap:.6rem;}
body.bef-v2 .spec-list li{
position:relative;padding-left:1.4rem;color:var(--ink-soft);font-size:.95rem;list-style:none;
}
body.bef-v2 .spec-list li::before{
content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
background:var(--accent);border-radius:50%;
}
/* v1 inline link arrow */
body.bef-v2 .product-link{
display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.85rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none;
}
/* v1 in-content CTA band -> v2 dusk band */
body.bef-v2 .cta-band{background:var(--ink);color:#E8EAEE;border-radius:var(--radius);padding:3rem 2.6rem;}
body.bef-v2 .cta-band h2,body.bef-v2 .cta-band h3{color:#fff;}
body.bef-v2 .cta-band p{color:#C3C8D0;}
body.bef-v2 .cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center;}
body.bef-v2 .cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:flex-end;}
/* v1 figures + FAQ items */
body.bef-v2 .article-figure{margin:1.6rem 0;}
body.bef-v2 .article-figure img{border-radius:var(--radius);width:100%;height:auto;}
body.bef-v2 .faq-item{border-bottom:1px solid var(--ink-line);padding:1.1rem 0;}
body.bef-v2 .faq-item summary{
font-family:var(--font-display);font-weight:700;cursor:pointer;list-style:none;
position:relative;padding-right:2rem;
}
body.bef-v2 .faq-item summary::-webkit-details-marker{display:none;}
body.bef-v2 .faq-item summary::after{
content:"+";position:absolute;right:0;top:0;color:var(--accent);font-weight:800;font-size:1.2rem;
}
body.bef-v2 .faq-item[open] summary::after{content:"\2212";}
/* v1 testimonial cards -> v2 quote cards */
body.bef-v2 .testi-card{
background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);
border-top:3px solid var(--accent);
}
body.bef-v2 .testi-who{display:flex;align-items:center;gap:.7rem;margin-top:1rem;}
body.bef-v2 .testi-who .name{font-weight:800;color:var(--ink);}
body.bef-v2 .stars{color:var(--accent);letter-spacing:.1em;}
@media (max-width:980px){
body.bef-v2 .mat-cat-row{grid-template-columns:1fr;gap:1.8rem;}
body.bef-v2 .mat-cat-row.is-reverse .mat-cat-media{order:0;}
body.bef-v2 .mat-factors-grid{grid-template-columns:repeat(2,1fr);}
body.bef-v2 .cta-inner{grid-template-columns:1fr;}
body.bef-v2 .cta-actions{justify-content:flex-start;}
}
@media (max-width:640px){
body.bef-v2 .mat-factors-grid{grid-template-columns:1fr;}
body.bef-v2 .cta-band{padding:2rem 1.3rem;}
}
/* ==========================================================================
2026-08-27 — BANNER, CTA VISIBILITY AND RESPONSIVE LADDER PASS
Everything below is a CODE-LEVEL fix to a reported VISUAL symptom. No page
was rendered while writing it. Each block names the mechanism it targets.
========================================================================== */
/* --------------------------------------------------------------------------
B1. HERO BANNER — stop the crop.
Mechanism: .hero-bg is position:absolute/inset:0 with object-fit:cover, so
the image is forced to fill whatever height the hero content dictates. The
hero is content-driven and TALL (headline + sub + CTAs + facts, and on the
homepage a whole form). A very wide, short source image cover-fitted into a
tall box loses most of its height.
Fix has three parts:
(a) put a floor AND a sensible ceiling on the banner box so it cannot be
dragged to an extreme ratio by content,
(b) declare an explicit focal point at every width,
(c) art-direct the focal point for portrait viewports, where the crop is
worst.
Images whose native ratio is simply wrong for this slot cannot be rescued
by CSS and are listed in the human-supplies-images note in the report.
-------------------------------------------------------------------------- */
.hero{
position:relative;overflow:hidden;background:var(--ink);
/* isolate creates a stacking context so .hero-bg / ::after / .hero-grid
can never be re-ordered by a sibling's z-index. */
isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg img{
width:100%;height:100%;
object-fit:cover;
object-position:50% 42%; /* focal point: upper-middle, where fence tops sit */
display:block;
}
/* --------------------------------------------------------------------------
B1b. HERO MOTION — slow Ken Burns drift on the background photograph.
Transform-only (scale + translate) so it runs on the compositor and never
triggers layout: no CLS, no effect on LCP, nothing to download. The photo
starts already scaled to 1.05 so the pan can never expose a bare edge.
Origin matches the object-position focal point (50% 42%) so the fence tops
stay in frame through the whole cycle. The global prefers-reduced-motion
block at the top of this file (animation-duration:.01ms !important) stops
this for anyone who asks for reduced motion, so no separate guard here.
-------------------------------------------------------------------------- */
.hero-bg img{
transform-origin:50% 42%;
will-change:transform;
animation:bef-hero-drift 32s ease-in-out infinite alternate;
}
@keyframes bef-hero-drift{
from{transform:scale(1.05) translate3d(0,0,0);}
to{transform:scale(1.14) translate3d(-1.2%,-1.4%,0);}
}
/* The later global `body.bef-v2 img,svg,video{height:auto}` (see B7) outranks
`.hero-bg img{height:100%}` above, so below ~1200px the photo collapsed to
its intrinsic ratio and filled only the top strip of the hero, leaving flat
ink behind the copy and the form. Restated here at matching specificity so
the background photograph fills the hero at every width. */
body.bef-v2 .hero-bg img{height:100%;}
.hero::after{z-index:1;}
.hero-grid{position:relative;z-index:2;}
/* --------------------------------------------------------------------------
B2. HERO OVERLAY GRADIENT — the mobile contrast failure.
Mechanism: the gradient runs 100deg (left-to-right), dark on the left. On
desktop the copy sits left, over the dark end — fine. Below 980px the grid
collapses to ONE column, so the copy spans the full width and its right-hand
side lands on the 42%-opacity end, over open photo. Measured: hero sub text
drops from 8.25:1 to 5.10:1, and it degrades further over a light photo.
Fix: rotate the gradient to vertical and deepen it once the layout stacks.
-------------------------------------------------------------------------- */
@media (max-width:980px){
.hero::after{
background:linear-gradient(180deg, rgba(23,27,36,.72) 0%, rgba(23,27,36,.88) 55%, rgba(23,27,36,.96) 100%);
}
}
/* --------------------------------------------------------------------------
C1. CTA VISIBILITY — focus, hover and hit area.
Every interactive element gets a visible focus ring (keyboard users), and
every tap target is brought to at least 44x44 CSS px.
-------------------------------------------------------------------------- */
.btn{min-height:44px;}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.btn-call:hover,.btn-call:focus-visible{background:var(--white);color:var(--ink);}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--ink);color:var(--white);}
/* card-link reads as body copy at rest; give it an affordance. */
.card-link{text-decoration:none;}
.card:hover .card-link,.card:focus-visible .card-link{text-decoration:underline;text-underline-offset:3px;}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
/* Footer social icons were 16x16 anchors — far under the 44px minimum. */
.footer-social a{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:6px;
}
.footer-social a:hover,.footer-social a:focus-visible{background:rgba(255,255,255,.10);}
/* Header phone and util-strip links: give them a real hit area. */
.header-phone{display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem;}
.util-strip a{display:inline-flex;align-items:center;min-height:32px;}
/* Mobile call bar: both actions must clear 44px. */
.mobile-callbar a{min-height:52px;}
/* --------------------------------------------------------------------------
C2. TRUST SIGNALS ALWAYS VISIBLE.
The v1 design hid every trust signal — including "Licensed & Insured" —
inside a 26-second infinite marquee with no pause control. v2 replaced that
with a static badge bar, but the <=640 rule turned it into a horizontal
swipe strip, which still means most badges are off-screen at rest on a
phone. Wrap them instead so all of them are visible without interaction.
-------------------------------------------------------------------------- */
@media (max-width:640px){
.badge-bar-inner,.trust-bar-inner{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:.5rem .9rem;
overflow:visible !important;
padding:.9rem 0;
}
.badge-item{
flex:none !important;white-space:normal !important;
font-size:.82rem;line-height:1.35;align-items:flex-start;
}
.badge-item .ico{width:26px;height:26px;flex:0 0 26px;padding:.28rem;}
}
@media (max-width:400px){
.badge-bar-inner,.trust-bar-inner{grid-template-columns:1fr;}
}
/* --------------------------------------------------------------------------
D. RESPONSIVE LADDER — consolidated.
The v1 system had two breakpoints (980 / 640) and no tablet treatment at
all. This is the full ladder. Declared last so it resolves cleanly against
the earlier partial rules.
1600+ large desktop comfort
1300 nav goes off-canvas
1200 4-up grids -> 2-up
1024 tablet landscape
900 hero stacks
768 tablet portrait
640 phone
400 small phone
-------------------------------------------------------------------------- */
@media (min-width:1600px){
.container{max-width:1380px;}
.section{padding:128px 0;}
}
@media (max-width:1200px){
.grid-4{grid-template-columns:repeat(2,1fr);}
.hero-grid{gap:2.4rem;}
}
@media (max-width:1024px){
.section{padding:88px 0;}
.grid-3,.work-grid{grid-template-columns:repeat(2,1fr);}
.process-track--5{grid-template-columns:repeat(3,1fr);}
.contact-layout,.faq-split,.areas-layout{grid-template-columns:1fr;gap:2.4rem;}
.sitemap-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:2rem;padding:3rem 0 3.4rem;}
/* Form first once stacked: it is the conversion action, and burying it
under the full headline block pushes it far below the fold. */
.hero-form{order:-1;}
.hero h1{max-width:none;}
.why-split{grid-template-columns:1fr;gap:2rem;}
.cta-band .cta-inner{grid-template-columns:1fr;}
.cta-actions{justify-content:flex-start;}
}
@media (max-width:768px){
.section{padding:72px 0;}
.grid-2,.grid-3,.grid-4,.work-grid{grid-template-columns:repeat(2,1fr);}
.process-track,.process-track--5{grid-template-columns:1fr;gap:1.4rem;}
.sitemap-grid{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media (max-width:640px){
.section{padding:56px 0;}
.grid-2,.grid-3,.grid-4,.work-grid,.area-tags{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr;gap:1.8rem;}
.form-row--2{grid-template-columns:1fr;}
.hero-grid{padding:2.2rem 0 2.8rem;}
.site-footer{padding-bottom:7rem;}
.mobile-callbar{display:grid;}
/* Quote cards stay swipeable, but aligned to the container gutter. */
.quote-grid{
display:flex;overflow-x:auto;gap:.9rem;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
padding-bottom:.6rem;scrollbar-width:none;
}
.quote-grid::-webkit-scrollbar{display:none;}
.quote-grid > .quote{flex:0 0 86%;scroll-snap-align:start;}
/* Work tiles stack rather than scroll: they are content, not proof. */
.work-grid{display:grid;overflow:visible;}
}
@media (max-width:400px){
.container,.container--narrow{padding:0 16px;}
.btn{padding:14px 20px;font-size:.9rem;}
.hero h1{font-size:clamp(1.9rem,8vw,2.4rem);}
.mobile-callbar a{font-size:.78rem;padding:.8rem .3rem;}
.estimate-form-wrap{padding:1.1rem 1rem 1rem;}
}
/* --------------------------------------------------------------------------
E. OVERFLOW / STACKING GUARDS.
Cheap insurance against horizontal scroll and text-over-text, both of which
were named as symptoms.
-------------------------------------------------------------------------- */
body.bef-v2{overflow-x:hidden;}
body.bef-v2 img,body.bef-v2 svg,body.bef-v2 video{max-width:100%;height:auto;}
body.bef-v2 table{max-width:100%;}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Long unbroken strings (URLs in legal copy) must not push the layout wide. */
.article-content,.article-content p,.article-content li,.site-footer address{
overflow-wrap:anywhere;
}
/* Sticky header must always sit above hero content. */
.site-header{z-index:80;}
.mobile-callbar{z-index:90;}
.nav-primary{z-index:100;}
/* --------------------------------------------------------------------------
In-hero trust line. Used on About / Contact / FAQ / Testimonials / Sitemap,
where the reference site uses a compact trust line rather than the full
badge bar. Keeps every trust signal visible on every page without stacking
two trust blocks on top of each other.
-------------------------------------------------------------------------- */
.hero-trust{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
margin:1.6rem 0 0;padding:0;list-style:none;
font-size:.88rem;color:#D3D7DE;font-weight:600;
}
.hero-trust li{display:inline-flex;align-items:center;gap:.45rem;}
.hero-trust li::before{
content:"\2714";color:var(--accent-l);font-weight:800;font-size:.9em;
}
@media (max-width:640px){
.hero-trust{gap:.4rem 1rem;font-size:.82rem;}
}
/* ==========================================================================
2026-08-27 — UNSTYLED-CLASS PASS.
A markup-vs-stylesheet diff across all 22 rendered pages found classes
present in the DOM with no rule behind them. Untreated, each renders as
unstyled inline text or leaves dead space. Fixed below.
========================================================================== */
/* .hero--plain — THE IMPORTANT ONE.
Inner-page heroes carry no form column, but .hero-grid is a two-column
1.15fr/.85fr grid. With only one child, every inner hero was reserving an
empty 0.85fr column: a large dead gap to the right of the headline at every
width above 900px. Collapse to a single column and let the copy breathe. */
.hero--plain .hero-grid{grid-template-columns:1fr;}
.hero--plain .hero-copy{max-width:62ch;}
.hero--plain h1{max-width:20ch;}
/* Product-card index label ("01 / Aluminum"). */
.card-num{
display:block;padding:0 1.2rem;margin:1.05rem 0 -.4rem;
font-family:var(--font-mono);font-weight:700;font-size:.72rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent-d);
}
/* Testimonial initials disc. Without this the initials rendered as loose
inline text jammed against the customer name. */
.avatar-initials{
width:46px;height:46px;flex:0 0 46px;border-radius:50%;
background:var(--base-d);color:var(--ink-softer);
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-weight:800;font-size:.86rem;
letter-spacing:.02em;
}
/* Hero facts strip (homepage). */
.hero-facts{
display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;
margin:1.6rem 0 0;padding:1.2rem 0 0;list-style:none;
border-top:1px solid rgba(255,255,255,.18);
font-family:var(--font-mono);font-size:.78rem;color:#C3C8D0;
}
.hero-facts li{display:inline-flex;align-items:center;gap:.4rem;}
.hero-facts b{color:#fff;font-weight:700;}
/* Form heading: an