/* Base design system: copied from Stucco HQ of Orange Park/index.html by _build/build-site.js. Edit it there. */
/* ============================================================
STUCCO HQ OF ORANGE PARK
Design tokens. Change these to restyle the whole page.
============================================================ */
:root{
--navy:#00304c;
--navy-deep:#002238;
--navy-soft:#0a3f5e;
--gold:#ff8a00;
--gold-dark:#e57a00;
--ink:#14232e;
--body:#4d626f;
--muted:#7a8b96;
--line:#e3e9ee;
--mist:#f4f7f9;
--paper:#fff;
--radius:14px;
--radius-lg:20px;
--shadow-sm:0 1px 2px rgba(0,48,76,.06), 0 2px 8px rgba(0,48,76,.05);
--shadow:0 4px 12px rgba(0,48,76,.07), 0 12px 32px rgba(0,48,76,.08);
--shadow-lg:0 18px 50px rgba(0,48,76,.14);
--wrap:1200px;
--display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
--text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--text);
font-size:16px;
line-height:1.65;
color:var(--body);
background:var(--paper);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.12;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.15rem,3.7vw,2.95rem);font-weight:800;text-wrap:balance}
h2{font-size:clamp(1.85rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,7vw,96px) 0}
.mist{background:var(--mist)}
.center{text-align:center}
/* Accessibility ------------------------------------------------ */
.skip{
position:absolute;left:-9999px;top:0;z-index:999;
background:var(--gold);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 8px 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.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;
}
/* Shared bits --------------------------------------------------- */
.eyebrow{
font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold);margin:0 0 14px;display:block;
}
.eyebrow.on-dark{color:var(--gold)}
.lede{font-size:1.05rem;max-width:60ch}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.01em;
padding:15px 28px;border-radius:10px;border:2px solid transparent;cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 6px 18px rgba(255,138,0,.3)}
.btn-gold:hover{background:var(--gold-dark);color:#fff;box-shadow:0 10px 26px rgba(255,138,0,.38)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-soft);color:#fff}
.btn-sm{padding:12px 22px;font-size:.88rem}
/* "(Placeholder)" marker. Delete the span once real data is in. */
.ph{
display:block;font-family:var(--text);font-size:.7rem;font-weight:500;
color:var(--muted);letter-spacing:.02em;margin-top:3px;
}
.ph-inline{font-size:.72rem;color:var(--muted);font-weight:500}
.on-dark .ph,.dark .ph{color:rgba(255,255,255,.5)}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:26px;height:26px}
/* ============================================================
UTILITY BAR
============================================================ */
.utility{background:var(--navy);color:rgba(255,255,255,.9);font-size:.8rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:center;padding-top:9px;padding-bottom:9px}
.utility li{display:flex;align-items:center;gap:8px;line-height:1.3}
.utility .icon{width:15px;height:15px;color:var(--gold)}
.utility .ph-inline{color:rgba(255,255,255,.55)}
/* ============================================================
HEADER
============================================================ */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.header.stuck{box-shadow:0 4px 20px rgba(0,48,76,.09)}
.header .wrap{display:flex;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav a{
font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--ink);
padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--gold);border-color:var(--gold);text-decoration:none}
.header-cta{display:flex;align-items:center;gap:18px;flex:none}
.phone-block{text-align:right;line-height:1.1}
.phone-block a{
font-family:var(--display);font-size:1.14rem;font-weight:800;color:var(--gold);
display:flex;align-items:center;gap:7px;justify-content:flex-end;
}
.phone-block a:hover{text-decoration:none;color:var(--gold-dark)}
.phone-block small{
display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);font-weight:600;margin-top:3px;
}
.burger{
display:none;background:none;border:1px solid var(--line);border-radius:9px;
padding:9px;cursor:pointer;color:var(--navy);margin-left:auto;
}
/* Mobile panel stays white so the white-background logo reads correctly */
.mobile-panel{display:none;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.mobile-panel.open{display:block}
.mobile-panel .wrap{padding-top:16px;padding-bottom:22px}
.mobile-panel a.m-link{
display:block;font-family:var(--display);font-weight:600;color:var(--ink);
padding:12px 0;border-bottom:1px solid var(--line);
}
.mobile-panel a.m-link:hover{color:var(--gold);text-decoration:none}
.mobile-actions{display:grid;gap:10px;margin-top:18px}
.mobile-actions .btn{width:100%}
/* ============================================================
HERO (split screen with curved divider)
============================================================ */
.hero{position:relative;background:var(--navy);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.hero-copy{
padding:clamp(52px,6.4vw,92px) clamp(24px,4vw,64px) clamp(84px,8vw,116px) 0;
display:flex;flex-direction:column;justify-content:center;
max-width:672px;margin-left:auto;width:100%;
}
.hero-copy h1{color:#fff}
.hero-copy h1 .line{display:block}
.hero-copy h1 .accent{color:var(--gold);display:block}
.hero-copy p{color:rgba(255,255,255,.82);font-size:1.06rem;max-width:44ch;margin:20px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-media{position:relative;min-height:440px}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-curve{position:absolute;left:-1px;top:0;height:100%;width:118px;z-index:2;pointer-events:none}
/* ============================================================
SERVICE RIBBON (floats over the hero seam)
============================================================ */
.ribbon-wrap{position:relative;z-index:5;margin-top:-58px}
.ribbon{
background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.ribbon a{
display:flex;align-items:center;gap:14px;padding:24px 22px;color:var(--ink);
border-right:1px solid var(--line);transition:background .18s ease;
}
.ribbon a:last-child{border-right:0}
.ribbon a:hover{background:var(--mist);text-decoration:none}
.ribbon .bubble{
width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold);
display:grid;place-items:center;flex:none;transition:background .18s ease;
}
.ribbon a:hover .bubble{background:var(--gold);color:#fff}
.ribbon strong{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--ink)}
.ribbon span{font-size:.78rem;color:var(--muted)}
/* ============================================================
TRUST BAR
============================================================ */
.trust{display:grid;grid-template-columns:repeat(6,1fr);gap:0;text-align:center}
.trust li{padding:8px 16px;border-right:1px solid var(--line)}
.trust li:last-child{border-right:0}
.trust .icon{color:var(--gold);width:26px;height:26px;margin:0 auto 12px}
.trust .val{font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1;display:block}
.trust .lbl{font-size:.8rem;color:var(--body);margin-top:7px;display:block;line-height:1.35}
/* ============================================================
ABOUT
============================================================ */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,68px);align-items:center}
.about-points{display:grid;gap:20px;margin:28px 0 30px}
.about-points li{display:flex;gap:14px}
.about-points .bubble{
width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--gold);
display:grid;place-items:center;flex:none;
}
.about-points h3{font-size:.98rem;margin-bottom:3px}
.about-points p{font-size:.88rem;margin:0;color:var(--body)}
.figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
/* ============================================================
SERVICE CARDS
============================================================ */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
/* Service card art is a deliberate placeholder. Swap .card-art for an ![]()
as soon as real project photography is available. */
.card-art{
position:relative;aspect-ratio:16/10;
background:
linear-gradient(135deg, rgba(255,255,255,.055) 25%, transparent 25%) -20px 0/40px 40px,
linear-gradient(160deg, var(--navy-soft), var(--navy) 62%, var(--navy-deep));
display:grid;place-items:center;color:rgba(255,255,255,.34);
}
.card-art .icon{width:46px;height:46px;stroke-width:1.3}
.card-art .badge{
position:absolute;left:12px;top:12px;font-size:.63rem;letter-spacing:.06em;
background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);padding:4px 9px;border-radius:20px;
}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:8px}
.card-body p{font-size:.9rem;margin-bottom:16px}
.card-link{
margin-top:auto;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--gold);
display:inline-flex;align-items:center;gap:7px;
}
.card-link .icon{width:15px;height:15px;transition:transform .18s ease}
.card:hover .card-link .icon{transform:translateX(4px)}
/* ============================================================
PROCESS
============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;position:relative}
.steps::before{
content:"";position:absolute;top:21px;left:12%;right:12%;height:2px;
background:var(--line);z-index:0;
}
.step{position:relative;z-index:1;text-align:center}
.step .num{
width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--gold);
color:var(--gold);font-family:var(--display);font-weight:800;display:grid;place-items:center;
margin:0 auto 18px;font-size:1rem;
}
.step .icon{color:var(--navy);width:24px;height:24px;margin:0 auto 12px}
.step h3{font-size:1rem;margin-bottom:7px}
.step p{font-size:.87rem;margin:0}
/* ============================================================
LEAD CAPTURE
============================================================ */
.lead{background:var(--navy);color:#fff}
.lead .wrap{padding-top:0;padding-bottom:0}
.lead-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,56px);align-items:center;padding:clamp(52px,6vw,84px) 0}
.lead h2{color:#fff}
.lead p{color:rgba(255,255,255,.8)}
.lead-assure{display:grid;gap:18px;margin-top:26px}
.lead-assure li{display:flex;gap:13px;align-items:flex-start}
.lead-assure .bubble{
width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--gold);
display:grid;place-items:center;flex:none;
}
.lead-assure strong{display:block;font-family:var(--display);color:#fff;font-size:.95rem}
.lead-assure span{font-size:.85rem;color:rgba(255,255,255,.72)}
.lead-assure a{color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem}
.form-card{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.79rem;font-weight:600;color:var(--ink);font-family:var(--display)}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
font-family:var(--text);font-size:.92rem;color:var(--ink);background:#fff;
border:1.5px solid var(--line);border-radius:9px;padding:12px 13px;width:100%;
transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,138,0,.15);
}
.field .err{font-size:.75rem;color:#c0392b;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.field.invalid .err{display:block}
.consent{display:flex;gap:11px;align-items:flex-start;margin:18px 0;font-size:.76rem;color:var(--body);line-height:1.55}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--gold)}
.form-card .btn{width:100%}
.form-alt{text-align:center;font-size:.82rem;color:var(--muted);margin:14px 0 0}
/* The dark .lead section whitens every p; text on the white form card needs its own colors */
.lead .form-card p{color:var(--body)}
.lead .form-card .form-alt{color:var(--muted)}
.form-success{
display:none;text-align:center;padding:26px 8px;
}
.form-success .icon{width:46px;height:46px;color:#2e9e5b;margin:0 auto 14px;stroke-width:1.7}
.form-success h3{font-size:1.3rem;margin-bottom:8px}
.form-card.done .form-body{display:none}
.form-card.done .form-success{display:block}
/* ============================================================
CREDENTIALS
============================================================ */
.cred-head{
text-align:center;font-family:var(--display);font-size:.78rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:34px;
}
.cred-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:center}
.cred{
text-align:center;padding:18px 10px;border-radius:var(--radius);background:#fff;
border:1px solid var(--line);
}
.cred .mark{
height:34px;display:grid;place-items:center;font-family:var(--display);font-weight:800;
font-size:.95rem;color:var(--muted);letter-spacing:.02em;
}
.cred .lbl{font-size:.75rem;color:var(--body);margin-top:8px;display:block}
.warranty{
grid-column:1/-1;margin-top:4px;
background:var(--navy);color:#fff;border-radius:var(--radius);padding:22px 28px;
display:flex;gap:18px;align-items:center;justify-content:center;text-align:left;
}
.warranty .icon{color:var(--gold);width:34px;height:34px;flex:none}
.warranty strong{font-family:var(--display);font-size:1.05rem;display:block;line-height:1.3}
.warranty .ph{display:inline;margin-left:6px}
.warranty span{font-size:.78rem;color:rgba(255,255,255,.72)}
/* ============================================================
WHY CHOOSE US (dark)
============================================================ */
.dark{background:var(--navy);color:rgba(255,255,255,.78)}
.dark h2,.dark h3{color:#fff}
.why-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why-item{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
border-radius:var(--radius);padding:22px 18px;transition:background .2s ease, transform .2s ease;
}
.why-item:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.why-item .icon{color:var(--gold);width:24px;height:24px;margin-bottom:13px}
.why-item h3{font-size:.95rem;margin-bottom:6px}
.why-item p{font-size:.83rem;margin:0;color:rgba(255,255,255,.7)}
/* ============================================================
FINANCING (replaces the offers block: no verified promotions)
============================================================ */
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.fin{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px}
.fin .icon{color:var(--gold);width:28px;height:28px;margin-bottom:16px}
.fin h3{margin-bottom:9px}
.fin p{font-size:.89rem;margin:0}
/* ============================================================
TESTIMONIALS
============================================================ */
.quotes{position:relative;margin-top:44px}
.quote-track{display:grid}
.quote{
grid-area:1/1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:clamp(28px,4vw,44px);text-align:center;max-width:780px;margin:0 auto;
opacity:0;visibility:hidden;transition:opacity .35s ease;
}
.quote.active{opacity:1;visibility:visible}
.stars{display:flex;gap:4px;justify-content:center;margin-bottom:18px;color:var(--gold)}
.stars .icon{width:19px;height:19px;fill:currentColor;stroke:none}
.quote blockquote{margin:0 0 20px;font-family:var(--display);font-size:1.18rem;line-height:1.5;color:var(--ink);font-weight:500}
.quote cite{font-style:normal;font-size:.86rem;color:var(--body);display:block}
.quote cite b{color:var(--ink);font-family:var(--display)}
.quote-nav{display:flex;gap:9px;justify-content:center;margin-top:26px}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:background .2s,width .2s}
.dot.active{background:var(--gold);width:26px;border-radius:6px}
.review-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;align-items:center}
.review-links span{font-size:.8rem;color:var(--muted)}
.chip{
display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
border-radius:30px;padding:8px 17px;font-size:.83rem;color:var(--ink);font-weight:600;
}
.chip:hover{border-color:var(--gold);text-decoration:none;color:var(--gold)}
/* ============================================================
SERVICE AREAS
============================================================ */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:center}
.city-list{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:26px 0 30px}
.city-list li{display:flex;gap:9px;align-items:center;font-size:.9rem;color:var(--ink)}
.city-list .icon{color:var(--gold);width:16px;height:16px}
.city-list li.primary{font-weight:700;font-family:var(--display)}
/* ============================================================
CRACK TRIAGE (uses the optional values slot from the brief)
============================================================ */
.triage{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.triage-col{border-radius:var(--radius-lg);padding:30px 28px;border:1px solid var(--line);background:#fff}
.triage-col.calm{border-left:4px solid #2e9e5b}
.triage-col.watch{border-left:4px solid var(--gold)}
.triage-col h3{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:1.05rem}
.triage-col.calm h3 .icon{color:#2e9e5b}
.triage-col.watch h3 .icon{color:var(--gold)}
.triage-col li{display:flex;gap:10px;font-size:.9rem;padding:7px 0;align-items:flex-start}
.triage-col li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);margin-top:9px;flex:none}
.triage-note{
margin-top:26px;text-align:center;font-size:.92rem;color:var(--body);
max-width:70ch;margin-left:auto;margin-right:auto;
}
/* ============================================================
MAP + FINAL CTA
============================================================ */
.map-embed{line-height:0}
.map-embed iframe{width:100%;height:440px;border:0;display:block}
.final{background:var(--navy);text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff;margin-bottom:14px}
.final p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 30px}
.final-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ============================================================
FOOTER
============================================================ */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.68);font-size:.87rem}
.footer .wrap{padding-top:60px;padding-bottom:36px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:34px}
/* The logo file is a JPG with a white background, so it sits in a white chip
to avoid a hard white rectangle on the navy footer. */
.footer-logo{background:#fff;border-radius:10px;padding:9px 13px;display:inline-block;margin-bottom:16px}
.footer-logo img{height:38px;width:auto}
.footer h4{
font-family:var(--display);color:#fff;font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 16px;font-weight:700;
}
.footer li{margin-bottom:9px}
.footer a{color:rgba(255,255,255,.68)}
.footer a:hover{color:var(--gold);text-decoration:none}
.footer-contact li{display:flex;gap:10px;align-items:flex-start}
.footer-contact .icon{color:var(--gold);width:16px;height:16px;margin-top:4px}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);
display:grid;place-items:center;color:#fff;transition:background .2s ease;
}
.socials a:hover{background:var(--gold)}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.11);margin-top:44px;padding-top:22px;
display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:.79rem;
}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:20px}
/* ============================================================
MOTION
============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.reveal{opacity:1;transform:none}
.btn:hover,.card:hover,.why-item:hover{transform:none}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1180px){
.nav{gap:17px}
.nav a{font-size:.83rem}
.cred-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:1024px){
.cards{grid-template-columns:repeat(2,1fr)}
.trust{grid-template-columns:repeat(3,1fr);gap:26px 0}
.trust li:nth-child(3){border-right:0}
.why-grid{grid-template-columns:1fr}
.why-list{grid-template-columns:repeat(3,1fr)}
.fin-grid{grid-template-columns:1fr}
}
@media (max-width:960px){
.nav,.header-cta .phone-block,.header-cta .btn{display:none}
.burger{display:block}
.header .wrap{gap:12px}
.hero-grid{grid-template-columns:1fr}
.hero-media{min-height:0;order:-1;aspect-ratio:4/3}
.hero-media img{position:relative;height:100%}
.hero-curve{display:none}
.hero-copy{
max-width:none;margin:0;padding:44px 24px 82px;
max-width:var(--wrap);margin-inline:auto;
}
.hero-actions .btn{flex:1 1 auto;justify-content:center}
.ribbon{grid-template-columns:1fr 1fr}
.ribbon a:nth-child(2){border-right:0}
.ribbon a:nth-child(1),.ribbon a:nth-child(2){border-bottom:1px solid var(--line)}
.split,.lead-grid,.area-grid,.triage{grid-template-columns:1fr}
.split .figure{order:-1}
.steps{grid-template-columns:1fr 1fr;gap:34px 22px}
.steps::before{display:none}
}
@media (max-width:680px){
.utility .wrap{gap:6px 20px;font-size:.72rem}
.utility li:nth-child(n+3){display:none}
.brand img{height:40px}
.trust{grid-template-columns:1fr 1fr;gap:26px 0}
.trust li{border-right:0}
.cards,.ribbon{grid-template-columns:1fr}
.ribbon a{border-right:0;border-bottom:1px solid var(--line)}
.ribbon a:last-child{border-bottom:0}
.steps{grid-template-columns:1fr}
.field-grid{grid-template-columns:1fr}
.why-list{grid-template-columns:1fr}
.cred-grid{grid-template-columns:1fr 1fr}
.city-list{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-bottom{flex-direction:column}
.map-embed iframe{height:340px}
.hero-actions{flex-direction:column;align-items:stretch}
}
@media (max-width:460px){
.footer-grid{grid-template-columns:1fr}
.cred-grid{grid-template-columns:1fr}
}
/* ============================================================
STUCCO HQ NETWORK: city page additions.
The base design system above is copied from the Orange Park
landing page by build-site.js. Everything below is new.
============================================================ */
/* Footer logo: the header logo reversed for the navy footer (user, 2026-11-02; the old text wordmark is in
Brand Notes - Stucco HQ Wordmark.md) */
.footer .f-logo{display:inline-block;margin-bottom:18px}
.footer .f-logo img{display:block;height:56px;width:auto}
@media (max-width:760px){.footer .f-logo img{height:50px}}
/* Unconfirmed values: visible in previews only (the production build refuses to run with any left) */
.confirm{background:#fff1dc;color:#8a4b00;border:1px dashed #e57a00;border-radius:5px;padding:0 5px;font-size:.78em;font-weight:600;white-space:nowrap}
.dark .confirm,.hero .confirm,.lead .confirm{background:rgba(255,138,0,.18);color:#ffd6a3;border-color:rgba(255,138,0,.6)}
/* Breadcrumbs */
.crumbs{font-size:.78rem;margin:0 0 18px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;color:rgba(255,255,255,.55)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{color:rgba(255,255,255,.82)}
/* Hero trust chips */
.hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0 0 30px;max-width:540px}
.hero-chips li{display:flex;gap:9px;align-items:flex-start;color:#fff;font-size:.86rem;line-height:1.4}
.hero-chips .icon{color:var(--gold);width:18px;height:18px;margin-top:1px}
.hero-copy p.hero-intro{max-width:56ch;font-size:1rem;margin:20px 0 24px}
/* Subheading under the H1 (service pages, user 2026-10-30): a step between the heading and the intro */
.hero-copy p.hero-sub{max-width:52ch;margin:16px 0 0;font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(1.08rem,1.5vw,1.22rem);line-height:1.45;color:#fff}
.hero-copy p.hero-sub + p.hero-intro{margin-top:14px}
.hero-ph{
position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.55);font-size:.82rem;
background:linear-gradient(135deg,rgba(255,255,255,.05) 25%,transparent 25%) -20px 0/40px 40px,
linear-gradient(160deg,var(--navy-soft),var(--navy) 62%,var(--navy-deep));
}
.hero-ph .icon{display:block;width:54px;height:54px;stroke-width:1.2;margin:0 auto 10px;color:rgba(255,255,255,.35)}
/* Section heads */
.head{max-width:760px}
.head.center{margin:0 auto;text-align:center}
.head .lede{margin-top:16px}
.head.center .lede{margin-left:auto;margin-right:auto}
/* Text + card layout (common issues) */
.two-col{display:grid;grid-template-columns:1.3fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start;margin-top:8px}
.prose p{font-size:1rem}
.prose a{font-weight:600}
.built-card{background:var(--navy);color:rgba(255,255,255,.82);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow)}
.built-card h3{color:#fff;font-size:1.15rem;margin-bottom:16px}
.built-card li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;padding:7px 0;border-top:1px solid rgba(255,255,255,.1)}
.built-card li:first-child{border-top:0}
.built-card .icon{color:var(--gold);width:18px;height:18px;margin-top:2px}
/* Why: four items in a 2 x 2 grid */
.why-list.four{grid-template-columns:repeat(2,1fr)}
/* Climate stat tiles */
.climate-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.stats{display:grid;gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center}
.stat .val{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--ink);line-height:1;grid-row:span 2;min-width:4.2ch}
.stat .lbl{font-size:.9rem;color:var(--ink);font-weight:600;line-height:1.35}
.stat .src{font-size:.72rem;color:var(--muted)}
/* Buying or selling + permits */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,36px)}
.panel h2{font-size:clamp(1.45rem,2.4vw,1.85rem);margin-bottom:16px}
.panel .icon-top{color:var(--gold);width:30px;height:30px;margin-bottom:14px}
.panel p{font-size:.95rem}
/* Neighborhoods and nearby */
.areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
.hood-group{margin-top:22px}
.hood-group h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hood-group .city-list{margin:0}
.nearby{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.slot-communities[hidden]{display:none}
.zip-group{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.zip-group h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.zip-list{display:flex;flex-wrap:wrap;gap:8px}
.zip-list li{background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:.84rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* FAQ accordion */
.faq{max-width:860px;margin:44px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;transition:border-color .18s ease, box-shadow .18s ease}
.faq details[open]{border-color:transparent;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:19px 22px;font-family:var(--display);font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.5rem;font-weight:600;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 22px 20px;font-size:.94rem}
.faq .ans p{margin:0}
/* Contact block */
.contact-list{display:grid;gap:16px;margin-top:26px}
.contact-list li{display:flex;gap:13px;align-items:flex-start}
.contact-list .bubble{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--gold);display:grid;place-items:center;flex:none}
.contact-list strong{display:block;font-family:var(--display);color:#fff;font-size:.95rem}
.contact-list span,.contact-list address{font-size:.88rem;color:rgba(255,255,255,.76);font-style:normal;display:block}
.contact-list a{color:#fff}
.contact-list a.big{font-family:var(--display);font-weight:800;font-size:1.2rem}
/* Final CTA on a light background (the contact block above it is navy) */
.final-light{background:var(--mist);text-align:center}
.final-light h2{margin-bottom:12px}
.final-light p{max-width:56ch;margin:0 auto 28px}
.final-light .btn-ghost{color:var(--navy);border-color:var(--navy)}
.final-light .btn-ghost:hover{background:var(--navy);color:#fff}
/* Sticky call bar on phones */
.callbar{display:none}
@media (max-width:960px){
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -6px 22px rgba(0,48,76,.14)}
.callbar .btn{flex:1;padding:14px 8px;font-size:.86rem;gap:7px;white-space:nowrap}
body{padding-bottom:76px}
.two-col,.climate-grid,.duo,.areas-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
.hero-chips{grid-template-columns:1fr}
.why-list.four{grid-template-columns:1fr}
}
/* Logo: the Outfit wordmark, version 2 (user, 2026-11-02; sources and script in Images/Logo). 40px on desktop is the
old logo's width, so the bar still fits "Call in St. Augustine Shores FL" and the search field (user: "make logo
smaller to fit in the nav bar"). 360-374px phones show the "ZIP or City" text beside it and need 36px. */
.header .brand img{height:40px;width:auto}
@media (min-width:360px) and (max-width:374px){.header .brand img{height:36px}}
/* The longest "Call in [City] FL" labels overflowed the bar by a few pixels at 1100-1299px (old logo too) */
@media (min-width:1100px) and (max-width:1299px){.header .wrap{gap:20px}}
/* Quote form: spam trap, optional text consent, send error, legal line */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#fdecea;color:#8a1f11;font-size:.86rem;line-height:1.5}
.form-error a{color:#8a1f11;font-weight:700}
.form-legal{margin:12px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted);text-align:center}
.form-legal a{color:inherit;text-decoration:underline}
button[disabled]{opacity:.6;cursor:wait}
/* Thank-you pages */
.thanks{padding:72px 0 88px;background:var(--cloud,#f4f7f9)}
.thanks-card{max-width:680px;margin:0 auto;text-align:center;background:#fff;border-radius:18px;padding:48px 32px;box-shadow:0 10px 40px rgba(0,48,76,.08)}
.thanks-card h1{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--navy);margin:14px 0 14px}
.thanks-card p{color:var(--body);margin:0 auto 12px;max-width:520px}
.thanks-card .final-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.thanks-icon{width:56px;height:56px;color:var(--gold)}
@media (max-width:560px){.thanks-card{padding:36px 20px}}
/* The dark lead section whitens every (.lead p); text inside the white form card needs its own colors */
.lead .form-card p{color:var(--body)}
.lead .form-card .form-alt,.lead .form-card .form-legal{color:var(--muted)}
.lead .form-card .form-alt a{color:var(--gold)}
.lead .form-card .form-error{color:#8a1f11}
/* Header: "Call in [City] FL" needs room. Below 1100px the menu links move into the menu button,
and the phone number and estimate button stay on the bar */
.nav a{white-space:nowrap}
@media (max-width:1099px){
.nav{display:none}
.burger{display:block;margin-left:0}
.header-cta{margin-left:auto}
}
/* "Find your city" search in the header (.has-find, on every page).
1280px and wider: a field in the bar, and the bar spreads wider than the page column to make room.
Narrower: a search button that opens the field in a strip under the bar. */
.has-find .wrap{max-width:1320px}
.find-toggle{
display:none;align-items:center;justify-content:center;flex:none;background:none;
border:1px solid var(--line);border-radius:9px;padding:9px;cursor:pointer;color:var(--navy);
}
.find-toggle[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.find{position:relative;flex:0 1 240px;min-width:180px;margin:0}
.find-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.find-field{
display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
background:var(--mist);border:1px solid var(--line);border-radius:999px;transition:border-color .15s,box-shadow .15s,background .15s;
}
.find-field:focus-within{background:#fff;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,138,0,.16)}
.find-field .icon{width:17px;height:17px;flex:none;color:var(--muted)}
.find-field input{
flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0;
font:500 .9rem/1 var(--text);color:var(--ink);
}
.find-field input::placeholder{color:var(--muted)}
.find-pop{
position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:max(100%,330px);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;
}
.find-pop[hidden]{display:none}
.find-note{margin:6px 10px 8px;font-size:.84rem;line-height:1.5;color:var(--body)}
.find-note:empty{display:none}
.find-list{max-height:320px;overflow-y:auto}
.find-opt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:10px;cursor:pointer}
.find-opt strong{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink)}
.find-opt span{font-size:.76rem;color:var(--muted);white-space:nowrap}
.find-opt:hover,.find-opt[aria-selected="true"]{background:var(--mist)}
.find-opt:hover strong,.find-opt[aria-selected="true"] strong{color:var(--gold-dark)}
.find-opt.is-place strong{font-weight:500;color:var(--body)}
@media (max-width:1279px){
.has-find .find-toggle{display:flex}
.has-find .find{
display:none;position:absolute;left:0;right:0;top:100%;min-width:0;
padding:16px 24px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(0,48,76,.08);
}
.has-find .find.open{display:block}
.has-find .find > *{max-width:560px;margin-left:auto;margin-right:auto}
.has-find .find-label{
position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;margin-bottom:8px;
font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);
}
.has-find .find-pop{position:static;width:auto;border:0;box-shadow:none;padding:6px 0 0}
}
@media (max-width:1099px){
.has-find .find-toggle{margin-left:auto}
.has-find .header-cta{margin-left:0}
}
.find-note a{font-weight:700;white-space:nowrap}
/* Search button text: hidden (but still read aloud) where the button sits beside the phone number,
shown as "ZIP or City" where it sits beside the menu button */
.find-vh,.find-toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1099px){
.has-find .find-toggle{gap:8px;padding:9px 12px 9px 14px}
.has-find .find-toggle-text{position:static;width:auto;height:auto;overflow:visible;clip:auto;font:600 .86rem/1 var(--display)}
}
/* Same height as the menu button beside it (an inline icon adds a few pixels of line space) */
.has-find .find-toggle .icon,.has-find .burger .icon{display:block}
/* Very small phones: no room for the text, so the icon only */
@media (max-width:359px){
.has-find .find-toggle{padding:9px}
.has-find .find-toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* Google review cards (navy band after the "Not Every Stucco Crack Is an Emergency" section) */
#reviews .lede{margin:14px auto 0}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.review{
margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:26px 26px 22px;box-shadow:var(--shadow-sm);
}
.review-stars{display:flex;gap:3px;color:var(--gold)}
.review-stars .star{width:18px;height:18px;fill:currentColor}
.review blockquote{margin:16px 0 20px;flex:1}
.review blockquote p{margin:0;font-size:.96rem;line-height:1.65;color:var(--ink)}
.review figcaption{padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;line-height:1.5;color:var(--muted)}
.review figcaption strong{display:block;font-family:var(--display);font-size:.98rem;font-weight:700;color:var(--ink)}
.review figcaption a{display:inline-block;margin-top:8px;font-weight:600}
@media (max-width:960px){
.reviews{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
}
/* Two cards: centered pair. Width-scoped so phones keep one column. */
@media (min-width:961px){.reviews.pair{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}}
/* Crack cards stacked beside a photo (.with-photo: every city page with a triagePhoto) */
.triage.with-photo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.triage-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--line);box-shadow:var(--shadow-sm)}
.triage-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.triage-stack{display:grid;gap:20px}
.with-photo .triage-col{padding:26px 28px}
.with-photo .triage-col ul{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media (max-width:960px){
.triage.with-photo{grid-template-columns:1fr}
.triage-photo{aspect-ratio:560/330}
}
@media (max-width:680px){
.with-photo .triage-col ul{grid-template-columns:1fr}
}
.triage-photo{position:relative;min-height:260px}
@media (max-width:960px){.triage-photo{min-height:0}}
/* Mobile hero with the photo behind the text (.hero-bg-mobile: every city page with a hero photo). Desktop keeps
the split layout. The photo fills the top of the hero and fades into navy behind the heading and text. */
@media (max-width:960px){
.hero-bg-mobile .hero-grid{position:relative}
.hero-bg-mobile .hero-media{position:absolute;top:0;left:0;right:0;height:clamp(380px,62vw,560px);order:0;aspect-ratio:auto;min-height:0;z-index:0}
.hero-bg-mobile .hero-media img{position:absolute;inset:0;height:100%}
.hero-bg-mobile .hero-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,48,76,.3) 0%,rgba(0,48,76,.55) 38%,rgba(0,48,76,.88) 72%,var(--navy) 100%);
}
.hero-bg-mobile .hero-copy{position:relative;z-index:1;padding-top:clamp(150px,30vw,230px)}
.hero-bg-mobile .crumbs,.hero-bg-mobile .eyebrow,.hero-bg-mobile h1,.hero-bg-mobile .hero-sub{text-shadow:0 1px 14px rgba(0,20,35,.55)}
/* A placeholder behind the text (service pages and the home page before their photo arrives): no label over the heading */
.hero-bg-mobile .hero-ph > div{display:none}
}
@media (max-width:960px){.hero-no-photo .hero-media{display:none}}
/* Service ribbon under the hero: three services. Stucco removal is only done as part of a larger project, not
offered on its own (user, 2026-10-29). Tablets keep one row of three; phones (680px and under) keep the base
one-column stack, so these rules stop at 681px. */
@media (min-width:681px){.ribbon{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px) and (min-width:681px){
.ribbon a{padding:20px 16px;gap:10px}
.ribbon a:nth-child(2){border-right:1px solid var(--line)}
.ribbon a:nth-child(1),.ribbon a:nth-child(2){border-bottom:0}
}
/* Service cards: three services since removal is no longer offered on its own (user, 2026-10-29) */
@media (min-width:681px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px) and (min-width:681px){.cards{gap:16px}}
/* Footer columns. The last column (the city office box or the profile's contact details) keeps room for a full
city name and ZIP. Narrower screens put the Stucco HQ blurb on its own row first, then four or two columns. */
.footer-grid{grid-template-columns:1.4fr .9fr .9fr .9fr minmax(235px,1.35fr)}
@media (max-width:1199px){
.footer-grid{grid-template-columns:1fr 1fr 1fr minmax(235px,1.3fr)}
.footer-grid > div:first-child{grid-column:1/-1;max-width:560px}
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}
/* Service Areas menu grouped by county (.has-mega / .m-areas). Mock-up on the Fort Lauderdale page (2026-10-29).
Desktop (1100px and wider, where the nav shows): a panel under the header bar. Counties sit in a rail under their
region headings; the selected county's cities fill up to four columns. Phones and tablets: inside the menu button,
Service Areas and each county open with a tap. */
.has-mega{display:flex;align-items:center}
.mega-btn{
display:inline-flex;align-items:center;gap:4px;background:none;border:0;border-bottom:2px solid transparent;
padding:6px 0;cursor:pointer;font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;
transition:color .15s,border-color .15s;
}
.mega-btn .icon{width:15px;height:15px;transition:transform .2s ease}
.mega-btn:hover,.has-mega.open .mega-btn{color:var(--gold);border-color:var(--gold)}
.has-mega.open .mega-btn .icon{transform:rotate(180deg)}
.mega{
position:absolute;left:0;right:0;top:100%;z-index:70;background:#fff;border-top:1px solid var(--line);
box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.has-mega.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
/* Short laptop screens: the panel scrolls inside itself instead of running off the bottom */
.mega{max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
.mega-inner{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:270px minmax(0,1fr)}
.mega-rail{display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px 0;border-right:1px solid var(--line)}
.mega-region{
margin:14px 0 4px 15px;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);
}
.mega-region:first-child{margin-top:0}
.mega-county{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;padding:6px 12px;
background:none;border:0;border-left:3px solid transparent;border-radius:0 8px 8px 0;cursor:pointer;
font:inherit;text-align:left;color:var(--ink);
}
.mega-county b{font-family:var(--display);font-size:.9rem;font-weight:600}
.mega-county small{font-size:.74rem;color:var(--muted);white-space:nowrap}
.mega-county:hover{background:var(--mist)}
.mega-county[aria-selected="true"]{background:var(--mist);border-left-color:var(--gold)}
.mega-county[aria-selected="true"] b{color:var(--navy)}
.mega-all,.m-all{
display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--gold);
}
.mega-all{margin:14px 0 0 15px}
.mega-all .icon,.m-all .icon{width:15px;height:15px}
.mega-panels{display:grid;padding:22px 0 22px 32px}
.mega-panel{grid-area:1/1;min-width:0}
.mega-panel:not(.is-active){visibility:hidden}
.mega-head{
display:flex;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);
font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--navy);
}
.mega-head span{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mega-cities{
list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;gap:2px 28px;
}
.mega-cities a,.m-cities a{display:block;padding:6px 0;font-size:.92rem;color:var(--body)}
.mega-cities a:hover,.m-cities a:hover{color:var(--gold);text-decoration:none}
.mega-cities a[aria-current="page"],.m-cities a[aria-current="page"]{color:var(--gold);font-weight:600}
@media (max-width:1099px){.mega{display:none}}
/* Phones and tablets: the same menu inside the menu button's panel */
.mobile-panel .m-acc{
display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;background:none;border:0;
border-bottom:1px solid var(--line);cursor:pointer;font-family:var(--display);font-size:1rem;font-weight:600;
color:var(--ink);text-align:left;
}
.m-acc .icon,.m-county .icon{width:18px;height:18px;color:var(--muted);transition:transform .2s ease;flex:none}
.m-acc[aria-expanded="true"] .icon,.m-county[aria-expanded="true"] .icon{transform:rotate(180deg)}
.m-areas{padding:6px 0 14px;border-bottom:1px solid var(--line)}
.m-region{
margin:14px 0 4px;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);
}
.m-county{
display:flex;align-items:center;gap:10px;width:100%;padding:10px 0 10px 12px;background:none;border:0;
border-left:3px solid var(--line);cursor:pointer;font-family:var(--display);font-size:.95rem;font-weight:600;
color:var(--ink);text-align:left;
}
.m-county small{margin-left:auto;font-family:var(--text);font-size:.75rem;font-weight:400;color:var(--muted)}
.m-county[aria-expanded="true"]{border-left-color:var(--gold)}
.m-cities{list-style:none;margin:0 0 6px;padding:0 0 0 27px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.m-cities[hidden]{display:none}
.m-all{margin-top:14px}
/* Service Areas hub (/service-areas/, 2026-10-29): navy top band, then the county finder, which reuses the Service
Areas menu's pieces (rail of counties, city columns) inside a card. Below 900px it becomes tap-to-open counties. */
.hub-hero{background:var(--navy);color:#fff;padding:44px 0 52px}
.hub-hero h1{color:#fff;margin:0}
.hub-hero h1 .line{display:block}
.hub-hero h1 .accent{display:block;color:var(--gold)}
.hub-intro{max-width:64ch;margin:18px 0 22px;font-size:1.02rem;color:rgba(255,255,255,.84)}
.hub-stats{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.hub-stats li{
display:flex;align-items:baseline;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.18);
border-radius:12px;background:rgba(255,255,255,.06);
}
.hub-stats b{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--gold);line-height:1}
.hub-stats span{font-size:.86rem;color:rgba(255,255,255,.82)}
.hub-finder{
margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.hub-tabs.mega-inner{max-width:none;padding:0 0 0 22px}
.hub-tabs .mega-panels{padding-right:28px}
.hub-acc{display:none;padding:6px 20px 18px}
@media (max-width:899px){
.hub-tabs{display:none}
.hub-acc{display:block}
}
/* Footer Service Areas column as regions with their counties (.footer-areas, trial on Fort Lauderdale, 2026-10-29).
Region names in white, counties as plain text under them; only "All service areas" is a link. */
.footer-areas{margin:0}
.footer-areas dt{margin:14px 0 4px;font-weight:600;color:#fff}
.footer-areas dt:first-child{margin-top:0}
.footer-areas dd{margin:0 0 3px;padding-left:14px;color:rgba(255,255,255,.62)}
.footer-all{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;color:var(--gold)!important}
.footer-all .icon{width:15px;height:15px}
.footer-all:hover{color:#fff!important}
/* ============================================================
SERVICE PAGES (/repair/, /installation/, /replacement/, 2026-10-30)
Built from the city pages' parts; these add the cards, the photo gallery, the options and the regional stats.
============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.svc-card .icon{color:var(--gold);width:28px;height:28px;margin-bottom:14px}
.svc-card h3{font-size:1.05rem;margin-bottom:8px}
.svc-card p{font-size:.9rem;margin:0}
.ph-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.ph-gallery li{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--navy)}
.ph-gallery li.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ph-gallery .hero-ph,.ph-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-gallery .hero-ph .icon{width:36px;height:36px}
.stats.row{grid-template-columns:repeat(3,1fr);margin-top:36px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.opt-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;display:flex;flex-direction:column}
.opt-card .icon{color:var(--gold);width:28px;height:28px;margin-bottom:12px}
.opt-card h3{font-size:1.1rem;margin-bottom:6px}
.opt-card .best{font-size:.88rem;color:var(--ink);font-weight:600;margin:0}
.opt-card dl{margin:6px 0 0}
.opt-card dt{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:14px;font-weight:600}
.opt-card dd{margin:3px 0 0;font-size:.9rem}
.opt-note{max-width:760px;margin:30px auto 0;text-align:center;font-size:.98rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.city-list.one{grid-template-columns:1fr;margin:18px 0 0}
.panel h3{font-size:1.2rem;margin-bottom:10px}
@media (max-width:1024px){
.svc-grid,.opt-grid,.cards.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
.stats.row{grid-template-columns:1fr}
.ph-gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
.svc-grid,.opt-grid,.cards.three{grid-template-columns:1fr}
}
/* Service pages: headings split into even lines, so none ends on a single word */
.svc-main h1 .line,.svc-main h1 .accent,.svc-main h2{text-wrap:balance}
/* Split hero on the service and city pages (user, 2026-10-30): the H1, subheading, intro and the four points share
one width, and the points' columns size to their text, so each point sits on one line and the hero is shorter.
On desktop the text column is wider (about 57/43 with the photo) and keeps at least 24px from the screen edge. */
.hero-copy p{text-wrap:pretty}
.hero-copy p.hero-sub,.hero-copy p.hero-intro,.hero-chips{max-width:none}
@media (min-width:681px){.hero-chips{grid-template-columns:auto auto;justify-content:start;gap:12px 28px}}
@media (min-width:961px){
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-copy{max-width:760px;padding-left:24px;padding-right:32px}
}
.ph-gallery li.wide{grid-column:span 2;aspect-ratio:auto}
/* Phones (two columns): the big first photo and the wide last photo each fill a row on their own, so nothing beside
them sets their height and they collapsed (14px and 0px tall, found 2026-10-30). Give them their own shape there
(user, 2026-10-31: fix it). */
@media (max-width:760px){
.ph-gallery li.big{grid-row:auto;aspect-ratio:4/3}
.ph-gallery li.wide{aspect-ratio:2/1}
}
/* Contact Us page (/contact-us/, user 2026-10-30): one navy section with the heading and ways to reach Stucco HQ
on the left and the message form on the right, then the three-service row on its bottom edge. */
.contact-hero .lead-grid{align-items:start;padding:clamp(36px,4.5vw,60px) 0 clamp(96px,9vw,124px)}
.contact-hero h1{color:#fff;margin:0}
.contact-hero h1 .line{display:block}
.contact-hero h1 .accent{display:block;color:var(--gold)}
.contact-hero h1 + p{max-width:52ch;margin:18px 0 0;font-size:1.02rem;text-wrap:pretty}
.contact-hero .contact-list span a{color:var(--gold);font-weight:600;white-space:nowrap}
.contact-main .ribbon-wrap{margin-bottom:clamp(48px,6vw,80px)}
.contact-hero .form-card h2{color:var(--navy);font-size:clamp(1.35rem,2.2vw,1.65rem);margin:0 0 6px}
.contact-hero .form-card p.form-intro{font-size:.88rem;line-height:1.55;margin:0 0 20px}
.contact-hero .field textarea{min-height:150px}
/* "Services in [City]": the heading and lede start a quarter of the way into the first service card and end a quarter
of the way into the last one, so the lede fits on fewer lines (every city page, user 2026-10-30, after the Fort
Lauderdale trial). On the service pages every centered heading with a blurb under it (Recent Work, reviews, signs,
weather, options, price, related services) and the closing call to action use the same width (user, 2026-10-30), so
they all line up the same way on the page. Centered headings with no blurb (process, standards, FAQ) keep theirs.
Width = the card row minus half a card: 100% - (100% - 2 gaps) / 6. The card gap is 24px, or 16px up to 1024px.
From 900px up only: on narrower tablets the cards are narrow too, and the rule would make the text narrower than the
usual heading width, so those keep it, and phones (stacked cards) do too. */
@media (min-width:900px){
#services .head,.svc-main .head.center:has(> .lede){max-width:calc(83.3333% + 5.3333px)}
#services .head .lede,.svc-main .head.center .lede{max-width:none}
.svc-main .final-light h2,.svc-main .final-light p{max-width:calc(83.3333% + 5.3333px);margin-left:auto;margin-right:auto}
}
@media (min-width:1025px){#services .head,.svc-main .head.center:has(> .lede),.svc-main .final-light h2,.svc-main .final-light p{max-width:calc(83.3333% + 8px)}}
/* "Sources and data used on this page" (sources.js): a closed accordion at the end of the Q&A section on city pages,
styled like the Q&A items (user, 2026-10-30, after the FCC Jacksonville page). */
.sources-item{max-width:860px;margin:28px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .18s ease, box-shadow .18s ease}
.sources-item[open]{border-color:transparent;box-shadow:var(--shadow)}
.sources-item summary{cursor:pointer;list-style:none;padding:19px 22px;font-family:var(--display);font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:18px}
.sources-item summary::-webkit-details-marker{display:none}
.sources-item summary::after{content:"+";color:var(--gold);font-size:1.5rem;font-weight:600;line-height:1;flex:none}
.sources-item[open] summary::after{content:"\2212"}
.sources-title{display:inline-flex;align-items:center;gap:10px}
.sources-title .icon{width:20px;height:20px;color:var(--navy-soft)}
.sources-body{padding:0 22px 20px}
.sources-intro{margin:0 0 6px;font-size:.9rem;color:var(--body)}
.sources-groups{columns:2;column-gap:32px}
.sources-group{break-inside:avoid;padding:10px 0 4px}
.sources-label{margin:0 0 4px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sources-group ul{list-style:none;margin:0;padding:0}
.sources-group li{padding:9px 0;border-top:1px solid var(--line);font-size:.84rem;line-height:1.5;color:var(--body)}
.sources-group li a{display:block;font-weight:600;font-size:.9rem;color:#1a73e8;text-decoration:none}
.sources-group li a:hover{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}
.sources-group li a .icon{width:13px;height:13px;margin-left:5px;vertical-align:-1px;color:currentColor}
.src-org{color:var(--ink);font-weight:500}
.src-org::after{content:" \00b7";color:var(--muted)}
.sources-reviewed{margin:12px 0 0;font-size:.8rem;color:var(--muted)}
@media (max-width:760px){.sources-groups{columns:1}.sources-item summary{padding:16px 18px}.sources-body{padding:0 18px 18px}}
/* TL;DR for AI answer engines (build-site.js tldr()), between the breadcrumbs and the eyebrow: a test on Boca Raton
(user, 2026-10-30). Closed it is barely visible: a thin, slightly lighter outline and label, and see-through, so
whatever is behind it (the navy, or the edge of the faded hero photo) shows through (user, 2026-10-31). Open: navy
with white text. 80% of its first size (user, 2026-10-31): 80% of the text column wide, 22px tall closed (20px
line + 1px borders), a 9px label. The breadcrumbs move up by its height plus the spacing (-26px = 22 + 10 + 12 - the
breadcrumbs' usual 18px gap), so the eyebrow stays put. */
.hero-copy.has-tldr .crumbs{margin:-26px 0 10px}
.tldr{width:80%;margin:0 0 12px;border:1px solid #0f3d59;border-radius:6px;background:var(--navy)}
.tldr:not([open]){background:transparent}
.tldr summary{list-style:none;cursor:pointer;display:block;height:20px;padding:0 10px;font:600 9px/20px var(--text);letter-spacing:.08em;color:#0f3d59}
.tldr summary::-webkit-details-marker{display:none}
.tldr-body{padding:4px 14px 14px;color:#fff}
.hero-copy .tldr-body p{color:#fff;font-size:.86rem;line-height:1.55;margin:0 0 10px;max-width:none}
.tldr-body ul{margin:0;padding-left:18px;list-style:disc}
.tldr-body li{color:#fff;font-size:.86rem;line-height:1.55;margin:0 0 6px}
/* Hero photo that fades into the text instead of ending at the curved orange line: every city and service page uses
version 2 (user, 2026-10-31, after comparing it with version 1); a page file can pick another version with
heroFade, or keep the original curve with heroFade: 'off'. Desktop only: phones and tablets already show the
photo behind the text. The photo reaches 300px under the text column and a left-to-right mask fades it
into the navy. Each version, and the original curve, is noted in hero-fade-saved/. */
@media (min-width:961px){
.hero-fade .hero-curve{display:none}
.hero-fade .hero-copy{position:relative;z-index:1}
.hero-fade .hero-media{margin-left:-300px}
/* v1 (the user liked it, 2026-10-31): navy to clear over 95% of the photo, half straight line, half smoothstep */
.hero-fade-v1 .hero-media img{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.064) 9.5%,rgba(0,0,0,.152) 19%,rgba(0,0,0,.258) 28.5%,rgba(0,0,0,.376) 38%,rgba(0,0,0,.5) 47.5%,rgba(0,0,0,.624) 57%,rgba(0,0,0,.742) 66.5%,rgba(0,0,0,.848) 76%,rgba(0,0,0,.936) 85.5%,#000 95%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.064) 9.5%,rgba(0,0,0,.152) 19%,rgba(0,0,0,.258) 28.5%,rgba(0,0,0,.376) 38%,rgba(0,0,0,.5) 47.5%,rgba(0,0,0,.624) 57%,rgba(0,0,0,.742) 66.5%,rgba(0,0,0,.848) 76%,rgba(0,0,0,.936) 85.5%,#000 95%)}
/* v2: one steady straight line from the photo's right edge to navy at its left edge, no faster change in the middle */
.hero-fade-v2 .hero-media img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 100%)}
}
/* "Not urgent doesn't mean ignore it." callout directly under the crack section's photo and cards, with the short note
("If what you see is in the first list...") under it (user, 2026-10-31): a white card with an orange edge across the
full width of the section, so the reminder to fix small cracks doesn't get lost in the small print. */
.triage-wait + .triage-note{margin-top:20px}
.triage-wait{
margin:24px 0 0;padding:16px 22px;background:#fff;border-left:4px solid var(--gold);
border-radius:var(--radius);box-shadow:var(--shadow-sm);font-size:.95rem;line-height:1.6;color:var(--body);text-wrap:pretty;
}
.triage-wait strong{color:var(--navy);font-family:'Outfit',sans-serif;font-weight:700}
/* "Not Every Stucco Crack Is an Emergency": the heading and lede start a quarter of the way into the photo card and
end the same distance in from the right edge, matching the other sections' wider centered headings (user,
2026-10-31). The photo takes 5/12 of the row minus its share of the 24px gap, so the indent on each side is
(100% - 24px) * 5/48 and the width is 100% - 2 indents = 79.1667% + 5px. Only while the photo sits beside the cards. */
@media (min-width:961px){
.triage-head:has(+ .with-photo){max-width:calc(79.1667% + 5px)}
.triage-head:has(+ .with-photo) .lede{max-width:none}
}
/* Service cards with a photo (cardPhotos in the city file, 2026-10-31): the image fills the 16:10 art panel in place
of the navy placeholder. */
.card-art.card-photo{background:var(--line)}
.card-art.card-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* ============================================================
HOME PAGE (/, 2026-11-02)
The city pages' hero, ribbon, cards, reviews, crack lists, steps, FAQ and form, plus the parts below: the
"at a glance" strip, the new construction band and the region row over the county finder.
============================================================ */
/* Hero: the photo's worker stands right of center, so keep him in view where the panel crops the sides */
.hero-home .hero-media img{object-position:62% 50%}
/* Residential and Commercial cards under the three services, half the row each (user, 2026-11-02; home page test).
Their photos are 2:1, so the wider cards stay about as tall as the three above; phones stack them like the rest. */
.cards.two{margin-top:24px}
.cards.two .card-art{aspect-ratio:2/1}
@media (min-width:681px){.cards.two{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1024px) and (min-width:681px){.cards.two{margin-top:16px}}
/* "At a glance" strip under the service ribbon: five facts in one row; three over two on tablets, then pairs */
.home-trust{padding:clamp(40px,5vw,64px) 0 clamp(36px,4.5vw,56px)}
.home-trust .trust{grid-template-columns:repeat(5,1fr)}
.home-trust .trust li{border-right:1px solid var(--line)}
.home-trust .trust li:last-child{border-right:0}
.home-trust .lbl{max-width:19ch;margin-left:auto;margin-right:auto}
@media (max-width:1024px){
.home-trust .trust{grid-template-columns:repeat(6,1fr);gap:28px 0}
.home-trust .trust li{grid-column:span 2}
.home-trust .trust li:nth-child(3){border-right:0}
.home-trust .trust li:nth-child(4){grid-column:2/4}
.home-trust .trust li:nth-child(5){grid-column:4/6}
}
@media (max-width:680px){
.home-trust .trust li{grid-column:span 3;border-right:0}
.home-trust .trust li:nth-child(odd){border-right:1px solid var(--line)}
.home-trust .trust li:nth-child(4){grid-column:span 3}
.home-trust .trust li:nth-child(5){grid-column:1/-1;border-right:0}
}
/* New construction: the layered-wall photo beside the copy, a card for builders and one for homeowners, four checks */
.nb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.nb-photo{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);box-shadow:var(--shadow-lg)}
.nb-photo img,.nb-photo .hero-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nb-tag{
position:absolute;left:14px;right:14px;bottom:14px;padding:11px 14px;border-radius:10px;
background:rgba(0,34,56,.86);color:#fff;font:600 .78rem/1.3 var(--display);letter-spacing:.05em;text-align:center;
}
.nb-copy .lede{margin-top:16px}
.nb-who{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 26px}
.nb-card{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px}
.nb-card .icon{color:var(--gold);width:24px;height:24px;margin-bottom:10px}
.nb-card h3{font-size:1rem;margin-bottom:6px}
.nb-card p{font-size:.88rem;margin:0}
.nb-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0 0 30px}
.nb-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.45;color:var(--ink)}
.nb-list .icon{color:var(--gold);width:19px;height:19px;margin-top:1px}
.nb-actions{display:flex;flex-wrap:wrap;gap:14px}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
@media (max-width:960px){
.nb-grid{grid-template-columns:1fr}
.nb-photo{aspect-ratio:4/3}
.nb-photo img{object-position:50% 58%}
}
@media (max-width:680px){
.nb-who,.nb-list{grid-template-columns:1fr}
.nb-actions .btn{flex:1 1 100%}
}
/* Where We Work: a card per region with its counties and every city, north to south. Cards in a row share a height.
On phones the Service Areas menu's tap-to-open counties instead. */
.region-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;margin:40px 0 30px}
.region-card{
grid-column:span 3;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:24px 26px 12px;box-shadow:var(--shadow-sm);
}
/* Five regions since 2026-11-03 (Tampa Bay): the Space Coast and Tampa Bay (one county each) side by side, then
South Florida across the full width. */
.region-card:nth-child(5){grid-column:1/-1}
@media (max-width:960px){.region-card:nth-child(n){grid-column:span 3}.region-card:nth-child(5){grid-column:1/-1}}
.region-card header{display:flex;gap:14px;align-items:center;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.region-card header .icon{flex:none;width:42px;height:42px;padding:10px;border-radius:50%;background:var(--navy);color:var(--gold)}
.region-card h3{font-size:1.12rem}
.region-card header small{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}
.region-card dl{margin:0}
.region-card dt{margin:12px 0 4px;font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.region-card dd{margin:0 0 6px}
.region-card dd ul{display:flex;flex-wrap:wrap;gap:2px 18px}
.region-card dd a{display:inline-block;padding:3px 0;font-size:.92rem;color:var(--ink)}
.region-card dd a:hover{color:var(--gold);text-decoration:none}
.home-acc{display:none;margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:6px 20px 18px}
.areas-all{text-align:center;margin:14px 0 0}
@media (max-width:680px){
.region-grid{display:none}
.home-acc{display:block}
.areas-all{margin-top:28px}
}
/* Headings split into even lines, as on the service pages; the Why and form headings get room above their text */
.home-main h1 .line,.home-main h1 .accent,.home-main h2,.home-trust .lbl{text-wrap:balance}
.home-main .why-grid h2,.home-main .lead h2{margin-bottom:16px}
/* New construction on desktop: the photo runs the full height of the copy beside it, cropped from the right so the
paper and lath bands at the left stay in view */
@media (min-width:961px){
.nb-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}
.nb-photo{aspect-ratio:auto;min-height:560px}
.nb-photo img{object-position:8% 50%}
}
/* On a light gray band (the installation page) the two audience cards turn white */
.mist .nb-card{background:#fff}
/* Liability disclaimer under the copyright line and legal links, every page (site.disclaimer, user 2026-11-02):
centered, each sentence on its own line */
.f-disclaimer{margin:18px 0 0;text-align:center;font-size:.76rem;line-height:1.6;color:rgba(255,255,255,.55)}
.f-disclaimer span{display:block}
/* ============================================================
LEGAL PAGES (/privacy-policy/, 2026-11-02)
A navy top band, then the text in one readable column beside a sticky list of its sections; tablets and phones
put the list above the text.
============================================================ */
.legal-top{background:var(--navy);color:#fff;padding:clamp(36px,4.5vw,56px) 0 clamp(44px,5.5vw,68px)}
.legal-top h1{color:#fff;margin:4px 0 14px}
.legal-updated{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.6);margin:0 0 12px}
.legal-intro{font-size:1.05rem;color:rgba(255,255,255,.82);max-width:64ch;margin:0}
.legal-body{padding-top:clamp(40px,5vw,64px)}
.legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.legal-toc{position:sticky;top:96px}
.legal-toc .toc-title{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.legal-toc ol{border-left:2px solid var(--line)}
.legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:.86rem;line-height:1.35;color:var(--body)}
.legal-toc a:hover{color:var(--navy);border-left-color:var(--gold);text-decoration:none}
.legal-text{max-width:760px}
.legal-text section{scroll-margin-top:96px;padding-top:36px;margin-top:36px;border-top:1px solid var(--line)}
.legal-text h2{font-size:clamp(1.45rem,2.4vw,1.8rem);margin-bottom:16px}
.legal-text h3{margin:22px 0 10px}
.legal-text p,.legal-text li{font-size:.97rem}
.legal-text section:not(.legal-contact) > ul{margin:0 0 1rem}
.legal-text section:not(.legal-contact) > ul li{position:relative;padding-left:20px;margin-bottom:9px}
.legal-text section:not(.legal-contact) > ul li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.legal-text strong{color:var(--ink)}
.legal-text .confirm{white-space:normal}
.legal-summary{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px)}
.legal-summary h2{font-size:1.25rem;margin-bottom:14px}
.legal-summary li{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px;font-size:.95rem;color:var(--ink)}
.legal-summary li:last-child{margin-bottom:0}
.legal-summary .icon{flex:none;width:20px;height:20px;color:var(--gold);margin-top:2px}
.legal-contact ul{display:grid;gap:16px;margin-top:20px}
.legal-contact li{display:flex;gap:13px;align-items:flex-start}
.legal-contact .bubble{width:38px;height:38px;border-radius:10px;background:var(--mist);color:var(--gold);display:grid;place-items:center;flex:none}
.legal-contact .bubble .icon{width:18px;height:18px}
.legal-contact strong{display:block;font-family:var(--display);font-size:.95rem}
.legal-contact span{display:block;font-size:.95rem}
@media (max-width:1024px){
.legal-grid{grid-template-columns:1fr}
.legal-toc{position:static;background:var(--mist);border-radius:var(--radius-lg);padding:20px 22px}
.legal-toc ol{border-left:0;columns:2;column-gap:28px}
.legal-toc a{padding:5px 0;margin:0;border-left:0}
.legal-text{max-width:none}
}
@media (max-width:680px){.legal-toc ol{columns:1}}
/* ============================================================
ABOUT PAGE (/about-us/, 2026-11-02)
The home page's parts plus the story: one readable column under the "at a glance" strip.
============================================================ */
/* The story beside the navy card of contractor standards; stacked on tablets and phones */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.about-story h2{margin:6px 0 20px}
.about-story p{font-size:1.06rem;line-height:1.75}
.about-story p:last-child{margin-bottom:0}
.about-standards{background:var(--navy);color:rgba(255,255,255,.82);border-radius:var(--radius-lg);padding:clamp(26px,3vw,36px);box-shadow:var(--shadow)}
.about-standards h2{color:#fff;font-size:clamp(1.35rem,2.2vw,1.65rem);margin-bottom:10px}
.about-standards p{font-size:.95rem;margin-bottom:16px}
.about-standards li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.95rem;line-height:1.5;color:#fff}
.about-standards li:first-child{border-top:0;padding-top:0}
.about-standards .icon{flex:none;width:20px;height:20px;color:var(--gold);margin-top:1px}
@media (max-width:960px){.about-grid{grid-template-columns:1fr}}
/* ============================================================
REGION PAGES (/stucco-repair-/, 2026-11-03)
============================================================ */
/* One card per county: its name, count and line of copy on the left, its city pages as chips and the smaller towns
it covers on the right. Stacked on tablets and phones. */
.county-list{display:grid;gap:22px;margin-top:40px}
.county-block{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(22px,3.5vw,48px);
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px;box-shadow:var(--shadow-sm);
}
.county-about header{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.county-about header .icon{flex:none;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--navy);color:var(--gold)}
.county-about h3{font-size:1.2rem}
.county-about small{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}
.county-about p{margin:0;font-size:.93rem}
.county-cities{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.county-towns{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--body)}
.county-towns strong{color:var(--ink);font-family:var(--display)}
@media (max-width:860px){.county-block{grid-template-columns:1fr;padding:24px 22px}}
/* Service cards with a link at the foot of each; three across until phones */
.region-main .svc-card{display:flex;flex-direction:column}
.region-main .svc-card .card-link{margin-top:auto;padding-top:16px}
@media (max-width:960px) and (min-width:681px){.region-main .svc-grid{grid-template-columns:repeat(3,1fr)}}
.region-main h1 .line,.region-main h1 .accent,.region-main h2,.region-main .home-trust .lbl{text-wrap:balance}
/* ============================================================
STUCCO FAQ (/faq/, 2026-11-03)
============================================================ */
/* Table of contents: a card per section, every question a jump link; two across on desktop, one on phones */
.faq-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
.faq-toc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm)}
.faq-toc-card header{display:flex;gap:14px;align-items:center;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.faq-toc-card header .icon{flex:none;width:42px;height:42px;padding:10px;border-radius:50%;background:var(--navy);color:var(--gold)}
.faq-toc-card h3{font-size:1.12rem}
.faq-toc-card h3 a{color:var(--ink)}
.faq-toc-card small{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}
.faq-toc-card ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.faq-toc-card li{font-size:.92rem;line-height:1.45;color:var(--muted)}
.faq-toc-card li::marker{color:var(--gold);font-weight:700}
.faq-toc-card li a{color:var(--ink)}
.faq-toc-card a:hover{color:var(--gold);text-decoration:none}
/* Desktop: Assembly (the longest list) on the right, the other three stacked on the left */
.faq-toc-card:nth-child(1){grid-column:1;grid-row:1}
.faq-toc-card:nth-child(2){grid-column:2;grid-row:1 / span 3}
.faq-toc-card:nth-child(3){grid-column:1;grid-row:2}
.faq-toc-card:nth-child(4){grid-column:1;grid-row:3}
@media (max-width:860px){.faq-toc{grid-template-columns:1fr}.faq-toc-card:nth-child(n){grid-column:auto;grid-row:auto}.faq-toc-card{padding:22px 20px}}
/* Answers: open on the page, one card each, with room under the sticky header when a jump link lands */
.faq-qas{max-width:860px;margin:36px auto 0;display:grid;gap:18px}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 30px;box-shadow:var(--shadow-sm);scroll-margin-top:120px}
.faq-main section[id]{scroll-margin-top:96px}
.qa h3{font-size:1.14rem;line-height:1.35;margin-bottom:12px;text-wrap:balance}
.qa-a p{margin:0 0 12px;font-size:.96rem}
.qa-a ul{margin:4px 0 14px;padding:0;list-style:none;display:grid;gap:8px}
.qa-a li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.qa-a li .icon{flex:none;width:16px;height:16px;margin-top:4px;color:var(--gold)}
.qa-note{margin:6px 0 12px;padding:12px 16px;border-left:4px solid var(--gold);background:#fff7ed;border-radius:0 var(--radius) var(--radius) 0;font-size:.92rem}
.qa-note strong{color:var(--ink);font-family:var(--display)}
.qa-cta{border-left-color:var(--navy);background:var(--mist)}
.qa-top{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:.84rem;font-weight:600;color:var(--gold)}
.qa-top .icon{width:14px;height:14px;transform:rotate(-90deg)}
.qa:target{border-color:var(--gold);box-shadow:var(--shadow)}
@media (max-width:680px){.qa{padding:22px 20px}}
.faq-main h1 .line,.faq-main h1 .accent,.faq-main h2{text-wrap:balance}
/* ============================================================
PAGE NOT FOUND (404.html, 2026-11-03)
============================================================ */
/* "Popular Pages": a glass card over the photo on desktop, a navy card under the text on phones and tablets */
.nf-card{position:relative;z-index:2;margin:0 20px 34px;padding:22px 24px;border-radius:var(--radius-lg);
background:rgba(0,34,56,.72);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:var(--shadow-lg)}
.nf-card h2{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:#fff;margin-bottom:12px}
.nf-card h2 .icon{width:20px;height:20px;color:var(--gold)}
.nf-card ul{margin:0 0 14px;padding:0 0 14px;list-style:none;display:grid;gap:4px;border-bottom:1px solid rgba(255,255,255,.18)}
.nf-card li a{display:flex;align-items:center;gap:10px;padding:6px 0;color:#fff;font-weight:600;font-size:.95rem}
.nf-card li a .icon{width:18px;height:18px;color:var(--gold);flex:none}
.nf-card li a:hover{color:var(--gold);text-decoration:none}
.nf-call{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;color:#fff}
.nf-call .icon{width:18px;height:18px;color:var(--gold)}
.nf-call:hover{color:var(--gold);text-decoration:none}
.nf-card small{display:block;margin-top:4px;text-align:center;font-size:.8rem;color:rgba(255,255,255,.75)}
@media (min-width:961px){
.nf-card{position:absolute;top:50%;right:max(32px,calc((100vw - 1200px) / 2));transform:translateY(-50%);width:310px;margin:0;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
/* The six "Where would you like to go?" cards, three across, each with its link at the foot */
.nf-main .svc-card{display:flex;flex-direction:column}
.nf-main .svc-card .card-link{margin-top:auto;padding-top:16px}
@media (max-width:960px) and (min-width:681px){.nf-main .nf-ways{grid-template-columns:repeat(2,1fr)}}
/* The services as chips, centered under the cards */
.nf-label{display:block;text-align:center;margin:44px 0 14px}
.nf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.nf-chips .chip .icon{width:16px;height:16px;color:var(--gold)}
/* Every service area: each region's counties, then its city pages as a run of links */
.nf-areas{text-align:center}
.nf-areas .eyebrow{display:block;margin-bottom:18px}
.nf-region{max-width:980px;margin:0 auto 22px}
.nf-region h3{font-size:1rem;margin-bottom:6px}
.nf-region h3 span{display:block;margin-top:2px;font-family:var(--body-font,inherit);font-size:.82rem;font-weight:600;color:var(--muted)}
.nf-region ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;margin:0;padding:0;list-style:none}
.nf-region li{font-size:.86rem}
.nf-region li:not(:last-child)::after{content:"\00B7";margin:0 8px;color:var(--muted)}
.nf-region a{color:var(--ink)}
.nf-region a:hover{color:var(--gold);text-decoration:none}
.nf-main h1 .line,.nf-main h1 .accent,.nf-main h2{text-wrap:balance}
/* ============================================================
GUIDE ARTICLES (content/guides, 2026-11-04)
============================================================ */
/* Article header: navy, text only, an orange rule at the foot; the H1 splits at its colon */
.art-hero{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 60%,var(--navy-soft) 100%);color:#fff;
padding:clamp(34px,5vw,56px) 0 clamp(40px,5.5vw,64px);border-bottom:4px solid var(--gold)}
.art-hero .wrap{max-width:1100px}
.art-hero .crumbs{margin:0 0 18px}
.art-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;max-width:22ch;margin:10px 0 18px;text-wrap:balance}
.art-hero h1 .line{display:block}
.art-hero h1 .accent{display:block;color:var(--gold)}
.art-dek{max-width:760px;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65;color:rgba(255,255,255,.88);margin:0 0 22px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.86rem;color:rgba(255,255,255,.82)}
.art-meta li{display:flex;align-items:center;gap:8px}
.art-meta .icon{width:17px;height:17px;color:var(--gold)}
/* The article beside a sticky sidebar; one column below 1025px, with the contents in a box at the top */
.art-section{padding-top:clamp(36px,5vw,64px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(36px,5vw,64px);align-items:start;max-width:1100px}
.art-body{max-width:760px;min-width:0}
.art-sticky{position:sticky;top:110px;display:grid;gap:18px}
.art-toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-sm)}
.art-toc-title{margin:0 0 10px;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.art-toc ol,.art-toc-m ol{margin:0;padding-left:1.25em;display:grid;gap:6px;font-size:.86rem;line-height:1.4}
.art-toc li::marker,.art-toc-m li::marker{color:var(--gold);font-weight:700}
.art-toc a,.art-toc-m a{color:var(--ink)}
.art-toc a:hover,.art-toc-m a:hover{color:var(--gold);text-decoration:none}
.art-cta{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:22px;display:grid;gap:10px;box-shadow:var(--shadow)}
.art-cta-title{margin:0;font-family:var(--display);font-weight:700;font-size:1.08rem;color:#fff}
.art-cta p{margin:0 0 4px;font-size:.88rem;color:rgba(255,255,255,.85)}
.art-cta .btn{width:100%;justify-content:center}
.art-toc-m{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 26px;padding:0 18px}
.art-toc-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 0;font-family:var(--display);font-weight:700;color:var(--ink)}
.art-toc-m summary::-webkit-details-marker{display:none}
.art-toc-m summary .icon{width:18px;height:18px;color:var(--gold)}
.art-toc-m[open] ol{padding-bottom:16px}
@media (max-width:1024px){
.art-grid{grid-template-columns:1fr}
.art-toc{display:none}
.art-toc-m{display:block}
.art-sticky{position:static}
.art-aside{max-width:760px}
}
/* Prose */
.art-body p{font-size:1.02rem;line-height:1.72;margin:0 0 16px}
.art-body .art-lead{font-size:1.05rem}
.art-body a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(255,138,0,.6);text-underline-offset:3px}
.art-body a:hover{color:var(--gold)}
.art-sec{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:96px}
.art-sec h2{font-size:clamp(1.42rem,2.5vw,1.85rem);line-height:1.2;margin:0 0 16px;text-wrap:balance}
.art-sec h3{font-size:1.14rem;line-height:1.3;margin:28px 0 10px;scroll-margin-top:96px}
.art-list{margin:6px 0 18px;padding:0;list-style:none;display:grid;gap:9px}
.art-list li{position:relative;padding-left:22px;line-height:1.6}
.art-list li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.art-steps{margin:8px 0 20px;padding:0;list-style:none;counter-reset:step;display:grid;gap:12px}
.art-steps li{counter-increment:step;position:relative;padding-left:44px;line-height:1.6;min-height:30px}
.art-steps li::before{content:counter(step);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:var(--navy);
color:#fff;font-family:var(--display);font-weight:700;font-size:.86rem;display:flex;align-items:center;justify-content:center}
.art-table{overflow-x:auto;margin:10px 0 22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.art-table table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
.art-table th,.art-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.art-table thead th{background:var(--navy);color:#fff;font-family:var(--display);font-size:.8rem;letter-spacing:.04em}
.art-table tbody th{color:var(--ink);font-family:var(--display);font-weight:700;width:24%}
.art-table tbody tr:nth-child(even){background:var(--mist)}
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:0}
.art-fig{margin:20px 0 26px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.art-fig img{display:block;width:100%;height:auto}
.art-body .art-note{font-size:.82rem;line-height:1.55;color:var(--muted)}
.art-body .art-disclaimer{margin-top:24px;font-size:.84rem;font-style:italic;color:var(--muted)}
.art-body .faq{max-width:none;margin:10px 0 0}
.art-body .sources-item{max-width:none;margin-top:40px}
/* YouTube, loaded only on click: the thumbnail and an orange play button until then */
.yt{position:relative;aspect-ratio:16/9;margin:12px 0 10px;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.yt-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-play img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s ease}
.yt-play:hover img{opacity:1}
.yt-btn{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.yt-btn::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---------- STUCCO GUIDES (/insights/, 2026-11-12): the article library, a card per guide ---------- */
.art-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.art-meta a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.gi-section{padding-top:clamp(36px,5vw,64px)}
.gi-section .wrap{max-width:1100px}
.gi-group{scroll-margin-top:110px}
.gi-group + .gi-group{margin-top:clamp(44px,6vw,72px)}
.gi-group h2{color:var(--navy);margin:0 0 8px}
.gi-intro{color:var(--muted,#55606b);max-width:720px;margin:0 0 24px}
.gi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gi-card a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:22px 22px 20px;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(0,48,76,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.gi-card a:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-2px)}
.gi-card a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.gi-meta{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted,#55606b);margin-bottom:10px}
.gi-meta .icon{width:15px;height:15px;color:var(--gold)}
.gi-card h3{color:var(--navy);font-size:1.12rem;line-height:1.3;margin:0 0 8px}
.gi-card p{font-size:.93rem;line-height:1.55;color:var(--muted,#55606b);margin:0 0 16px;flex:1}
.gi-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--gold-dark,#c96d00)}
.gi-more .icon{width:16px;height:16px}
@media (max-width:960px){.gi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.gi-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gi-card a{transition:none}.gi-card a:hover{transform:none}}