/* ═══════════════════════════════════════════════
PG Landing Page Design System v2 — ExP Roofing LLC
═══════════════════════════════════════════════ */
/* Full-width section breakout */
.pg-full { width:100vw !important; position:relative; left:50%; transform:translateX(-50%); display:block; }
/* ── Trust Bar ─────────────────────────────────── */
.pg-trust-bar { background-color:#081323 !important; margin-top:-10px; margin-bottom:0; overflow:hidden; }
.pg-trust-items { display:flex; flex-wrap:wrap; justify-content:center; max-width:1100px; margin:0 auto; }
.pg-trust-item { flex:1 1 180px; text-align:center; padding:22px 16px; border-right:1px solid rgba(255,255,255,0.08); }
.pg-trust-item:last-child { border-right:none; }
.pg-trust-num { font-size:1.9rem !important; font-weight:900 !important; color:#327EE8 !important; display:block; line-height:1; }
.pg-trust-label { font-size:0.75rem; color:#aaa !important; letter-spacing:0.8px; text-transform:uppercase; margin-top:4px; display:block; }
/* ── Section Wrappers ──────────────────────────── */
.pg-section-wrap { padding:60px 24px; overflow:hidden; }
.pg-section-wrap.pg-bg-gray { background-color:#EEEEED !important; }
.pg-section-wrap.pg-bg-dark { background-color:#081323 !important; }
.pg-section-inner { max-width:1100px; margin:0 auto; }
/* ── Override theme heading/text colors ─────────── */
.pg-section-wrap h2 { font-size:clamp(1.4rem,2.5vw,1.9rem) !important; font-weight:800 !important; color:#081323 !important; margin:0 0 6px !important; line-height:1.25 !important; text-decoration:none !important; }
.pg-section-wrap.pg-bg-dark h2,
.pg-section-wrap.pg-bg-dark h2 a { color:#ffffff !important; text-decoration:none !important; }
.pg-h2-bar { width:44px; height:4px; background-color:#327EE8 !important; border-radius:2px; margin:0 0 28px; }
.pg-section-wrap h3 { font-size:1.05rem !important; font-weight:700 !important; color:#081323 !important; margin:0 0 8px !important; text-decoration:none !important; }
.pg-section-wrap p { font-size:0.95rem; line-height:1.75; color:#444 !important; margin:0 0 16px; }
.pg-section-wrap ul { padding-left:20px; margin:0 0 16px; }
.pg-section-wrap li { font-size:0.93rem; line-height:1.7; color:#444 !important; margin-bottom:6px; }
.pg-section-wrap a { color:#327EE8 !important; }
/* ── Cards Grid ────────────────────────────────── */
.pg-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; margin-top:32px; }
.pg-card { background-color:#ffffff !important; border-radius:10px; box-shadow:0 2px 16px rgba(0,0,0,0.07); padding:28px 24px; border-top:3px solid #327EE8 !important; }
.pg-card h3 { font-size:1rem !important; font-weight:700 !important; color:#081323 !important; margin:0 0 10px !important; }
.pg-card p { font-size:0.88rem; color:#555 !important; line-height:1.7; margin:0; }
/* ── Warning Cards ─────────────────────────────── */
.pg-warning-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; margin-top:28px; }
.pg-warning-card { background-color:#f5f9fe !important; border:1px solid #ccdff9; border-radius:10px; padding:24px; }
.pg-warning-card h3 { color:#1e4c8b !important; font-size:0.95rem !important; font-weight:700 !important; margin:0 0 12px !important; }
.pg-warning-card ul { margin:0; padding-left:16px; }
.pg-warning-card li { font-size:0.875rem; color:#444 !important; line-height:1.65; margin-bottom:6px; }
/* ── Process Steps ─────────────────────────────── */
.pg-steps { margin-top:32px; display:flex; flex-direction:column; }
.pg-step { display:flex; gap:20px; padding-bottom:28px; position:relative; }
.pg-step:not(:last-child)::before { content:”; position:absolute; left:19px; top:42px; bottom:0; width:2px; background-color:#e5e7eb; }
.pg-step-num { flex:0 0 40px; width:40px; height:40px; background-color:#327EE8 !important; color:#fff !important; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:0.95rem; flex-shrink:0; }
.pg-step-body { flex:1; padding-top:6px; }
.pg-step-body h3 { font-size:0.98rem !important; font-weight:700 !important; color:#081323 !important; margin:0 0 6px !important; }
.pg-step-body p { font-size:0.88rem; color:#555 !important; line-height:1.7; margin:0; }
/* ── FAQ Accordion ─────────────────────────────── */
.pg-faq { margin-top:28px; border-top:1px solid #e5e7eb; }
.pg-faq details { border-bottom:1px solid #e5e7eb; }
.pg-faq summary { font-weight:700 !important; font-size:0.97rem !important; padding:18px 8px 18px 0; cursor:pointer; color:#081323 !important; list-style:none; display:flex !important; justify-content:space-between; align-items:center; gap:12px; }
.pg-faq summary::-webkit-details-marker { display:none; }
.pg-faq summary::after { content:’+’; font-size:1.4rem; color:#327EE8 !important; font-weight:300; flex-shrink:0; }
.pg-faq details[open] summary::after { content:’−’; }
.pg-faq details p { padding:4px 0 18px; color:#555 !important; font-size:0.92rem; line-height:1.75; margin:0; }
/* ── Feature Cards (Why Choose Us) ─────────────── */
.pg-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:28px; }
.pg-feature-card { background-color:#ffffff !important; border-radius:10px; padding:22px 20px; box-shadow:0 1px 8px rgba(0,0,0,0.06); display:flex; gap:14px; align-items:flex-start; }
.pg-feature-icon { font-size:1.6rem; flex-shrink:0; line-height:1; }
.pg-feature-text strong { display:block; font-size:0.95rem; color:#081323 !important; margin-bottom:5px; font-weight:700; }
.pg-feature-text span { font-size:0.85rem; color:#666 !important; line-height:1.6; }
/* ── Stat Bar (reviews/about) ───────────────────── */
.pg-stat-bar { display:flex; flex-wrap:wrap; gap:0; margin:28px 0; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.pg-stat { flex:1 1 140px; text-align:center; padding:24px 16px; border-right:1px solid #e5e7eb; }
.pg-stat:last-child { border-right:none; }
.pg-stat-num { font-size:2rem; font-weight:900; color:#327EE8 !important; display:block; line-height:1; }
.pg-stat-label { font-size:0.78rem; color:#777 !important; letter-spacing:0.6px; text-transform:uppercase; margin-top:4px; display:block; }
/* ── Two-column image+text ──────────────────────── */
.pg-two-col { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:28px; }
.pg-two-col img { width:100%; border-radius:10px; display:block; }
@media(max-width:720px) { .pg-two-col { grid-template-columns:1fr; } }
/* ── Service Area List ─────────────────────────── */
.pg-area-list { columns:4; column-gap:24px; margin:20px 0 32px; padding-left:18px; }
.pg-area-list li { font-size:0.92rem; color:#444 !important; margin-bottom:8px; break-inside:avoid; }
.pg-area-list li a { color:#444 !important; text-decoration:none !important; }
.pg-area-list li a:hover { color:#327EE8 !important; }
@media(max-width:640px) { .pg-area-list { columns:2; } }
/* ── Mid-page CTA Strip ────────────────────────── */
.pg-mid-cta-strip { background-color:#327EE8 !important; color:#ffffff !important; text-align:center; padding:52px 24px; overflow:hidden; }
.pg-mid-cta-strip h3 { font-size:1.6rem !important; font-weight:900 !important; margin:0 0 12px !important; color:#ffffff !important; }
.pg-mid-cta-strip p { margin:0 0 28px !important; font-size:1rem; color:#d6e5fa !important; max-width:580px; margin-left:auto !important; margin-right:auto !important; }
.pg-mid-cta-strip a.pg-cta-btn-inv { background-color:#ffffff !important; color:#327EE8 !important; padding:15px 36px; border-radius:6px; font-weight:800 !important; text-decoration:none !important; font-size:1rem; display:inline-block; }
/* ── Dark Section (final CTA) ──────────────────── */
.pg-bg-dark .pg-section-inner { color:#ffffff; }
.pg-bg-dark h2, .pg-bg-dark h2 a { color:#ffffff !important; text-decoration:none !important; }
.pg-bg-dark h3 { color:#ffffff !important; }
.pg-bg-dark p { color:#9ca3af !important; }
.pg-bg-dark li { color:#9ca3af !important; }
.pg-bg-dark strong { color:#e5e7eb !important; }
.pg-bg-dark a:not(.pg-cta-btn) { color:#adcbf6 !important; }
.pg-cta-btn { background-color:#327EE8 !important; color:#ffffff !important; padding:16px 42px; border-radius:8px; font-weight:800 !important; font-size:1.1rem; text-decoration:none !important; display:inline-block; box-shadow:0 4px 20px rgba(0,0,0,0.25); margin-top:16px; }
.pg-cta-btn:hover { opacity:0.9; }
/* ── Hero overrides (enforce site accent color) ── */
.pg-hero-phone { background:#327EE8 !important; color:#fff !important; }
.pg-form-subheading { background:#327EE8 !important; }
.pg-submit-btn { background:#327EE8 !important; text-align:center !important; padding:14px 20px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; }
.pg-hero-trust li::before { color:#327EE8 !important; }
/* ── Hide WP theme chrome (title, breadcrumbs, sidebar) ── */
/* Page title — our hero section owns the H1 */
h1.entry-title,
h1.page-title,
.entry-title,
.page-title,
.wp-block-post-title { display:none !important; }
/* Entry / page header block that wraps the title */
.entry-header,
.page-header,
.post-header,
.entry-meta,
.ast-above-header-bar,
.ast-below-header,
.ast-hero-section,
.ast-page-title-wrap,
.ast-single-post-order,
.elementor-page-title,
#page-title-bar,
.page-title-bar,
.page-title-wrap,
.page-title-container,
.page-title-section,
.hero-section-wrap,
.site-content > .breadcrumb,
.content-wrapper > .breadcrumb { display:none !important; }
/* Theme breadcrumb bars (RankMath, Yoast, Blocksy, Astra, etc.) */
.rank-math-breadcrumb,
.yoast-breadcrumb,
.breadcrumb-trail,
.breadcrumb-area,
.breadcrumbs,
.breadcrumb-wrap,
.site-breadcrumb,
.woocommerce-breadcrumb,
nav.breadcrumbs,
.ast-breadcrumbs-wrap,
.ast-breadcrumbs,
.generate-breadcrumbs,
.oceanwp-breadcrumbs,
.et_pb_breadcrumbs,
.neve-breadcrumbs,
.suki-breadcrumbs,
.kadence-breadcrumbs,
.bricks-breadcrumbs,
.elementor-widget-breadcrumbs { display:none !important; }
/* Right sidebar and widget areas (Search, Recent Comments, etc.) */
#secondary,
.widget-area,
.site-sidebar,
.sidebar-area,
aside.sidebar,
.elementor-widget-sidebar,
.widget_search,
.widget_recent_comments,
.widget_recent_entries,
.widget_categories,
.widget_archive,
.widget_meta { display:none !important; }
/* Expand content to full width when sidebar is hidden */
#primary,
.site-content .content-area,
.entry-content-wrap { width:100% !important; max-width:100% !important; float:none !important; }
/* Full-bleed bands — override themes (e.g. Twenty Twenty-One, block themes) that cap
.entry-content > * at ~610px via a high-specificity :not() chain. !important is required
to beat that cap; margin-based full-bleed works regardless of parent width/position. */
.entry-content > .pg-hero-wrap,
.entry-content > .pg-trust-bar,
.entry-content > .pg-section-wrap,
.pg-hero-wrap,
.pg-trust-bar,
.pg-section-wrap {
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% – 50vw) !important;
margin-right:calc(50% – 50vw) !important;
left:auto !important;
right:auto !important;
transform:none !important;
overflow-x:hidden;
}
/* ── Content Images ────────────────────────────── */
.pg-content-img { width:100%; height:auto; border-radius:8px; margin:28px 0 6px; display:block; }
.pg-img-caption { font-size:0.78rem; color:#888 !important; text-align:center; margin:0 0 24px; font-style:italic; }
/* ── Responsive ────────────────────────────────── */
@media(max-width:640px) {
.pg-section-wrap { padding:40px 16px; }
.pg-trust-item { flex:1 1 50%; border-bottom:1px solid rgba(255,255,255,0.08); }
.pg-mid-cta-strip h3 { font-size:1.2rem !important; }
}
ExP Contractors and Roofing serves Morrow, Georgia and the greater Atlanta area with reliable roofing services for homes and businesses. With years of hands-on experience, our team is dedicated to delivering quality workmanship and responsive customer care.