/**
 * Burnham Brothers Roofing - Main Stylesheet
 * Location: /assets/styles.css
 */

:root {
    --primary: #0d4f4f;
    --primary-light: #1a6b6b;
    --primary-dark: #083838;
    --accent: #f5a623;
    --accent-light: #ffb84d;
    --accent-dark: #d4890a;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --text-muted: #6b7280;
    --bg: #f8f9fa;
    --bg-alt: #eef2f5;
    --white: #ffffff;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin: 0 0 var(--space-md) 0;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (min-width: 768px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 1.75rem; }
}

p { margin: 0 0 var(--space-md) 0; }
a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--space-md) 0; padding-left: var(--space-xl); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.lead { font-size: 1.125rem; line-height: 1.7; color: var(--text-muted); }
.text-center { text-align: center; }

/* TOP BAR */
.top-bar { background: #1a1a1a; padding: var(--space-sm) 0; font-size: 0.875rem; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.top-bar__contact { display: flex; align-items: center; gap: var(--space-lg); }
.top-bar__item { display: flex; align-items: center; gap: var(--space-sm); color: rgba(255,255,255,0.8); }
.top-bar__item a { color: rgba(255,255,255,0.8); text-decoration: none; }
.top-bar__item a:hover { color: var(--accent); }
.top-bar__item svg { flex-shrink: 0; opacity: 0.7; }
.top-bar__social { display: flex; align-items: center; gap: var(--space-md); }
.top-bar__social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: rgba(255,255,255,0.7); transition: color var(--transition-fast); }
.top-bar__social a:hover { color: var(--accent); }
@media (max-width: 767px) { .top-bar { display: none; } }

/* HEADER */
.site-header { background: var(--primary); padding: var(--space-md) 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-md); }
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--text-light); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); }
.main-nav { display: none; gap: var(--space-xl); }
@media (min-width: 768px) { .main-nav { display: flex; } }
.main-nav a { color: var(--text-light); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.main-nav a:hover { color: var(--accent); text-decoration: none; }
.header-cta { display: flex; align-items: center; gap: var(--space-md); }
.header-cta-btn { display: none; }
@media (min-width: 768px) { .header-cta-btn { display: inline-flex; } }

/* MOBILE MENU TOGGLE */
.menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1001; }
@media (min-width: 768px) { .menu-toggle { display: none; } }
.menu-toggle__bar { display: block; width: 24px; height: 2px; background: var(--text-light); border-radius: 2px; transition: all var(--transition-base); }
.menu-toggle__bar:nth-child(1) { margin-bottom: 6px; }
.menu-toggle__bar:nth-child(3) { margin-top: 6px; }

/* MOBILE MENU */
.mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__panel { position: absolute; top: 0; right: 0; width: 85%; max-width: 320px; height: 100%; background: var(--white); box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--transition-base); display: flex; flex-direction: column; overflow-y: auto; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg); border-bottom: 1px solid #e5e7eb; background: var(--primary); }
.mobile-menu__header .logo { font-size: 1.25rem; }
.mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: none; border-radius: var(--radius-md); cursor: pointer; }
.mobile-menu__close:hover { background: rgba(255,255,255,0.2); }
.mobile-menu__close svg { color: var(--text-light); }
.mobile-menu__nav { flex: 1; padding: var(--space-lg); }
.mobile-menu__nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu__nav li { border-bottom: 1px solid #f3f4f6; }
.mobile-menu__nav a { display: block; padding: var(--space-md) 0; color: var(--text-dark); font-weight: 500; font-size: 1.0625rem; }
.mobile-menu__nav a:hover { color: var(--primary); }
.mobile-menu__cta { padding: var(--space-lg); border-top: 1px solid #e5e7eb; background: var(--bg); }
.mobile-menu__cta .btn { width: 100%; justify-content: center; margin-bottom: var(--space-sm); }
.mobile-menu__cta .btn:last-child { margin-bottom: 0; }
.mobile-menu__phone { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md); color: var(--primary); font-weight: 600; }
body.menu-open { overflow: hidden; }

/* MOBILE STICKY BAR */
.mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); box-shadow: 0 -4px 12px rgba(0,0,0,0.15); z-index: 999; padding: var(--space-sm) var(--space-md); padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 767px) { .mobile-sticky-bar { display: flex; gap: var(--space-sm); } body { padding-bottom: 80px; } }
.mobile-sticky-bar__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: none; cursor: pointer; }
.mobile-sticky-bar__btn:hover { text-decoration: none; }
.mobile-sticky-bar__btn--phone { background: var(--primary); color: var(--text-light); }
.mobile-sticky-bar__btn--phone:hover { background: var(--primary-light); }
.mobile-sticky-bar__btn--quote { background: var(--accent); color: var(--text-dark); }
.mobile-sticky-bar__btn--quote:hover { background: var(--accent-light); }
.mobile-sticky-bar__btn svg { flex-shrink: 0; }

/* BREADCRUMB */
.breadcrumb { background: var(--white); padding: var(--space-md) 0; border-bottom: 1px solid #e5e7eb; }
.breadcrumb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.875rem; }
.breadcrumb__item a { color: var(--text-muted); }
.breadcrumb__item a:hover { color: var(--primary); text-decoration: none; }
.breadcrumb__item span[aria-current] { color: var(--text-dark); font-weight: 500; }
.breadcrumb__separator { color: var(--text-muted); }

/* EYEBROW & SECTION HEADER */
.section-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.05em; color: var(--accent); text-transform: uppercase; }
.section-eyebrow--light { color: var(--accent); }
.section-header { text-align: center; margin-bottom: var(--space-2xl); }
.section-header--left { text-align: left; }
.section-header h2 { margin: var(--space-md) 0; font-size: 2rem; }
@media (min-width: 768px) { .section-header h2 { font-size: 2.5rem; } }
.section-header__intro { max-width: 700px; margin: 0 auto; color: var(--text-muted); font-size: 1.125rem; line-height: 1.7; }
.section-header--left .section-header__intro { margin: 0; }
.section-header--light h2, .section-header--light .section-header__intro { color: var(--text-light); }
.section-header + p, .section-header + h3, .section-header + div, .section-header + table { margin-top: var(--space-xl); }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: all var(--transition-base); cursor: pointer; border: 2px solid transparent; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--text-dark); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-light); border-color: var(--accent-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--secondary { background: var(--primary); color: var(--text-light); border-color: var(--primary); }
.btn--secondary:hover { background: var(--primary-light); border-color: var(--primary-light); }
.btn--outline { background: transparent; color: var(--text-light); border-color: var(--text-light); }
.btn--outline:hover { background: var(--text-light); color: var(--primary); }
.btn--outline-dark { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline-dark:hover { background: var(--primary); color: var(--text-light); }
.btn--small { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn--large { padding: 1rem 2rem; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--text { background: transparent; color: rgba(255,255,255,0.9); border-color: transparent; padding: 0.5rem 0; }
.btn--text:hover { background: transparent; color: var(--text-light); text-decoration: underline; }
.btn__icon { flex-shrink: 0; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.testimonials-grid + .btn-group, .service-areas-two-col + .btn-group { margin-top: var(--space-2xl); }

/* SECTIONS */
.section { padding: var(--space-3xl) 0; }
.section--light { background: var(--bg); }
.section--white { background: var(--white); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; margin: -1px 0; }
.section--dark { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.section--dark h2, .section--dark h3, .section--dark h4, .section--dark p, .section--dark li { color: var(--text-light); }
.section h3 { color: var(--primary); margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.section h3:first-child, .section-header + h3 { margin-top: 0; }
.section h4 { color: var(--primary-dark); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.section p strong { color: var(--primary); }
.section p strong:first-child { display: block; font-size: 1.125rem; margin-bottom: var(--space-xs); }

/* CONTENT LISTS */
.section ul, .content-block ul, .split-content ul, .two-col-grid ul, .three-col-grid ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: var(--space-md) 0;
}
/* Exclude feature-list from default ul styling */
.section ul.feature-list, .content-block ul.feature-list, .split-content ul.feature-list {
    list-style: none;
    padding-left: 0;
}
.section ul li, .content-block ul li, .split-content ul li {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}
.section ul ul { list-style: circle; margin: var(--space-sm) 0; }

/* HERO */
.hero { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: var(--space-3xl) 0; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%23ffffff" fill-opacity="0.03" x="0" y="0" width="50" height="50"/><rect fill="%23ffffff" fill-opacity="0.03" x="50" y="50" width="50" height="50"/></svg>'); background-size: 30px 30px; }
.hero .container { position: relative; z-index: 1; }
.hero__content { max-width: 700px; }
.hero__title { margin: var(--space-md) 0; font-size: 2.5rem; color: var(--text-light); line-height: 1.1; }
@media (min-width: 768px) { .hero__title { font-size: 3.5rem; } }
.hero__subtitle { margin: 0 0 var(--space-xl) 0; font-size: 1.25rem; color: rgba(255,255,255,0.9); line-height: 1.6; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* SPLIT CONTENT */
.split-content { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; }
@media (min-width: 768px) { .split-content { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.split-content--reverse .split-content__image { order: 1; }
@media (min-width: 768px) { .split-content--reverse .split-content__image { order: 2; } .split-content--reverse .split-content__text { order: 1; } }
.split-content__image { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; background: #ddd; }
.split-content__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-content__image-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 300px; background: linear-gradient(135deg, #e5e7eb, #d1d5db); color: var(--text-muted); font-size: 1.125rem; }
.split-content__badge { position: absolute; bottom: var(--space-lg); left: var(--space-lg); background: var(--accent); color: var(--text-dark); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.875rem; }
.split-content__text h2 { margin: 0 0 var(--space-lg) 0; }
.split-content__text p { margin: 0 0 var(--space-md) 0; color: var(--text-muted); }
.split-content__text p:last-of-type { margin-bottom: var(--space-xl); }

/* GRIDS */
.content-grid { display: grid; gap: var(--space-2xl); }
.content-grid--2col { grid-template-columns: 1fr; }
@media (min-width: 768px) { .content-grid--2col { grid-template-columns: 2fr 1fr; } }
.services-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.value-grid { display: grid; gap: var(--space-xl); }
.value-grid--2-col { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) { .value-grid--2-col { grid-template-columns: repeat(2, 1fr); } }
.value-grid--3-col { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .value-grid--3-col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .value-grid--3-col { grid-template-columns: repeat(3, 1fr); } }
.value-grid--4-col { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .value-grid--4-col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .value-grid--4-col { grid-template-columns: repeat(4, 1fr); } }
.value-grid--6-col { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .value-grid--6-col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .value-grid--6-col { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .value-grid--6-col { grid-template-columns: repeat(6, 1fr); } }
.systems-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; margin-top: var(--space-2xl); }
@media (min-width: 768px) { .systems-grid { grid-template-columns: repeat(3, 1fr); } }
.challenges-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .challenges-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .challenges-grid { grid-template-columns: repeat(3, 1fr); } }
.inspection-grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .inspection-grid { grid-template-columns: repeat(2, 1fr); } }
.service-types-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .service-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-types-grid { grid-template-columns: repeat(4, 1fr); } }
.seasonal-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .seasonal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .seasonal-grid { grid-template-columns: repeat(4, 1fr); } }
.service-areas-two-col { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .service-areas-two-col { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.warranty-grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .warranty-grid { grid-template-columns: repeat(2, 1fr); } }
.testimonials-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.two-col-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .two-col-grid { grid-template-columns: repeat(2, 1fr); } }
.three-col-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .three-col-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .three-col-grid { grid-template-columns: repeat(3, 1fr); } }
.content-block { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.content-block h3 { margin-top: 0; color: var(--primary); }
.content-block p:last-child { margin-bottom: 0; }
.process-timeline { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .process-timeline { grid-template-columns: repeat(4, 1fr); } }
.stats-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* CARDS */
.service-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card__header { background: var(--primary); padding: var(--space-lg); }
.service-card__header h3 { margin: 0; font-size: 1.125rem; color: var(--text-light); }
.service-card__body { padding: var(--space-lg); flex-grow: 1; }
.service-card__description { margin: 0 0 var(--space-md) 0; font-size: 0.9375rem; color: var(--text-muted); }
.service-card__benefit { margin: 0; font-size: 0.875rem; color: var(--text-dark); }
.service-card__benefit strong { color: var(--primary); }
.service-card__footer { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.service-card__footer .btn { width: 100%; justify-content: center; }

.value-card { text-align: center; padding: var(--space-xl); background: var(--white); border-radius: var(--radius-lg); border: 1px solid #e5e7eb; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-light); }
.value-card__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }
.value-card__title { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.value-card__description { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }
.section--light .value-card { background: var(--white); }
.section--white .value-card { background: var(--bg); border-color: transparent; }

.system-card { background: rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid rgba(255,255,255,0.2); }
.system-card h3 { color: var(--accent) !important; margin: 0 0 var(--space-lg) 0; font-size: 1.25rem; }
.system-card ul { list-style: none; padding: 0; margin: 0; }
.system-card li { padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; font-size: 0.9375rem; }
.system-card li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

.challenge-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid #e5e7eb; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.challenge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.challenge-card__icon { font-size: 2rem; margin-bottom: var(--space-md); }
.challenge-card h4 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.challenge-card p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

.service-type-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 2px solid var(--primary); text-align: center; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.service-type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-type-card h3 { margin: 0 0 var(--space-md) 0; font-size: 1.125rem; color: var(--primary); }
.service-type-card p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

.seasonal-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.seasonal-card__header { padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); }
.seasonal-card__icon { font-size: 1.5rem; }
.seasonal-card__header h3 { margin: 0; font-size: 1.125rem; color: var(--text-light); }
.seasonal-card--spring .seasonal-card__header { background: linear-gradient(135deg, #10b981, #059669); }
.seasonal-card--summer .seasonal-card__header { background: linear-gradient(135deg, #f59e0b, #d97706); }
.seasonal-card--fall .seasonal-card__header { background: linear-gradient(135deg, #f97316, #ea580c); }
.seasonal-card--winter .seasonal-card__header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.seasonal-card ul { list-style: none; padding: var(--space-lg); margin: 0; }
.seasonal-card li { padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; font-size: 0.9375rem; color: var(--text-muted); border-bottom: 1px solid #f3f4f6; }
.seasonal-card li:last-child { border-bottom: none; }
.seasonal-card li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 600; }

.testimonial-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); }
.testimonial-card__stars { color: var(--accent); font-size: 1.25rem; margin-bottom: var(--space-md); }
.testimonial-card__quote { font-size: 1rem; line-height: 1.7; color: var(--text-dark) !important; margin: 0 0 var(--space-lg) 0; font-style: italic; }
.testimonial-card__name { color: var(--text-dark) !important; }
.testimonial-card__detail { color: var(--text-muted) !important; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-md); }
.testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--text-light); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.testimonial-card__name { font-weight: 600; color: var(--text-dark); }
.testimonial-card__detail { font-size: 0.875rem; color: var(--text-muted); }

/* FEATURE LIST - see main definition below line 650 */
.feature-list--2col { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 640px) { .feature-list--2col { grid-template-columns: repeat(2, 1fr); } }
.feature-list__item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; }

/* CALLOUT BOX */
.callout-box { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--bg-alt); border-left: 4px solid var(--primary); }
.callout-box h4 { margin: 0 0 var(--space-sm) 0; font-size: 1rem; color: var(--primary); }
.callout-box p { margin: 0; }
.callout-box--warning { background: #fef3c7; border-left-color: var(--warning); }
.callout-box--warning h4 { color: var(--accent-dark); }
.callout-box--success { background: #d1fae5; border-left-color: var(--success); }
.callout-box--success h4 { color: #065f46; }
.callout-box--info { background: #dbeafe; border-left-color: var(--info); }
.callout-box--info h4 { color: #1e40af; }
.callout-box--centered { text-align: center; border-left: none; border-top: 4px solid var(--accent); margin-top: var(--space-2xl); background: rgba(255,255,255,0.1); }
.callout-section { padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--bg-alt); border-left: 4px solid var(--primary); margin-top: var(--space-xl); }
.callout-section h3 { margin: 0 0 var(--space-md) 0; font-size: 1.125rem; color: var(--primary); }
.callout-section ol { margin: 0; padding-left: var(--space-lg); }
.callout-section li { margin-bottom: var(--space-sm); color: var(--text-muted); }

/* SERVICE AREAS */
.service-areas-two-col .service-areas-column h4 { font-size: 1.25rem; font-weight: 700; color: var(--primary-dark); margin: 0 0 var(--space-md) 0; padding-bottom: var(--space-sm); border-bottom: 3px solid var(--accent); display: inline-block; }
.service-areas-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.service-area-tag { display: inline-block; padding: 0.625rem 1.25rem; background: var(--white); border: 1px solid #e5e7eb; border-radius: 50px; font-size: 0.9375rem; color: var(--text-dark); transition: all var(--transition-fast); cursor: default; text-decoration: none; }
a.service-area-tag { cursor: pointer; }
a.service-area-tag:hover { border-color: var(--accent); background: #fffbeb; color: var(--primary-dark); }
.service-area-tag:hover { border-color: var(--accent); background: #fffbeb; }

/* WARRANTY */
.warranty-column h3 { margin: 0 0 var(--space-md) 0; font-size: 1.25rem; color: var(--primary); }
.warranty-box { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-lg); border: 2px solid #e5e7eb; }
.warranty-box h4 { margin: 0 0 var(--space-md) 0; font-size: 1rem; }
.warranty-box ul { list-style: none; padding: 0; margin: 0; }
.warranty-box li { padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; font-size: 0.9375rem; }
.warranty-box--covered { border-color: var(--success); }
.warranty-box--covered h4 { color: var(--success); }
.warranty-box--covered li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 600; }
.warranty-box--not-covered { border-color: var(--error); }
.warranty-box--not-covered h4 { color: var(--error); }
.warranty-box--not-covered li::before { content: "✗"; position: absolute; left: 0; color: var(--error); font-weight: 600; }

/* PROCESS STEP */
.process-step { text-align: center; position: relative; }
.process-step__number { width: 60px; height: 60px; background: var(--accent); color: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.5rem; margin: 0 auto var(--space-md); }
.process-step h3 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; }
.process-step p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* STAT ITEM */
.stat-item { text-align: center; }
.stat-item__value { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-item__label { font-size: 0.9375rem; color: var(--text-muted); margin-top: var(--space-sm); }
.section--dark .stat-item__value { color: var(--accent); }
.section--dark .stat-item__label { color: rgba(255,255,255,0.8); }

/* FAQ */
.faq-section { max-width: 800px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-md); }
.faq-item { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid #e5e7eb; }
.faq-item__question { width: 100%; padding: var(--space-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); background: none; border: none; cursor: pointer; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-dark); transition: background var(--transition-fast); }
.faq-item__question:hover { background: var(--bg); }
.faq-item__question span:first-child { flex: 1; }
.faq-item__icon { flex-shrink: 0; transition: transform var(--transition-base); color: var(--primary); }
.faq-item.is-open .faq-item__icon { transform: rotate(180deg); }
.faq-item__answer { display: none; }
.faq-item.is-open .faq-item__answer { display: block; }
.faq-item__answer-inner { padding: 0 var(--space-lg) var(--space-lg); }
.faq-item__answer-inner p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.faq-item__answer-inner a { color: var(--primary); font-weight: 500; }

/* TABLES */
/* Default table styles */
.section table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.9375rem; border-radius: var(--radius-md); overflow: hidden; }
.section table th, .section table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid #e5e7eb; }
.section table th { background: var(--primary); color: var(--text-light); font-family: 'Montserrat', sans-serif; font-weight: 600; }
.section table tbody tr:hover { background: var(--bg); }

.table-wrapper { overflow-x: auto; margin: var(--space-lg) 0; }
.content-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.content-table th, .content-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid #e5e7eb; }
.content-table th { background: var(--primary); color: var(--text-light); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.025em; }
.content-table th:first-child { border-top-left-radius: var(--radius-md); }
.content-table th:last-child { border-top-right-radius: var(--radius-md); }
.content-table tbody tr { transition: background var(--transition-fast); }
.content-table tbody tr:hover { background: var(--bg); }
.content-table--striped tbody tr:nth-child(odd) { background: var(--bg); }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: var(--space-md) var(--space-lg); text-align: center; border: 1px solid #e5e7eb; }
.comparison-table th { background: var(--primary); color: var(--text-light); font-family: 'Montserrat', sans-serif; font-weight: 600; }
.comparison-table th.highlight { background: var(--accent); color: var(--text-dark); }
.comparison-table td:first-child { text-align: left; font-weight: 500; background: var(--bg); }
.comparison-table .check { color: var(--success); font-size: 1.25rem; }
.comparison-table .cross { color: var(--error); font-size: 1.25rem; }
.pricing-table { width: 100%; border-collapse: collapse; }
.pricing-table th, .pricing-table td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid #e5e7eb; }
.pricing-table th { text-align: left; background: var(--bg); font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--primary); }
.pricing-table td:last-child { text-align: right; font-weight: 600; color: var(--primary); }
.brands-table { width: 100%; border-collapse: collapse; }
.brands-table th, .brands-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid #e5e7eb; }
.brands-table th { background: var(--primary); color: var(--text-light); font-family: 'Montserrat', sans-serif; font-weight: 600; }
.brands-table tbody tr:hover { background: var(--bg); }

/* BENEFITS GRID */
.benefits-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }
.benefit-item { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid #e5e7eb; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.benefit-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit-item h4 { margin: 0 0 var(--space-sm) 0; color: var(--primary); }
.benefit-item p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* PROS CONS */
.pros-cons-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pros-cons-grid { grid-template-columns: repeat(2, 1fr); } }
.pros, .cons { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pros { border-left: 4px solid var(--success); }
.cons { border-left: 4px solid var(--error); }
.pros h4, .cons h4 { margin: 0 0 var(--space-md) 0; }
.pros h4 { color: var(--success); }
.cons h4 { color: var(--error); }
.pros ul, .cons ul { margin: 0; padding-left: var(--space-lg); }
.pros li, .cons li { margin-bottom: var(--space-sm); }

/* PROCESS STEPS */
.process-steps { display: grid; gap: var(--space-xl); }
.step { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-left: 4px solid var(--accent); position: relative; padding-left: calc(var(--space-xl) + 70px); }
.step-number { position: absolute; left: var(--space-lg); top: var(--space-xl); width: 50px; height: 50px; background: var(--accent); color: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem; }
.step h3 { margin: 0 0 var(--space-sm) 0; color: var(--primary); font-size: 1.125rem; }
.step h4 { margin: 0 0 var(--space-md) 0; color: var(--primary); }
.step p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.step ul { margin: 0; padding-left: var(--space-lg); }
.step li { margin-bottom: var(--space-sm); color: var(--text-muted); }
@media (max-width: 767px) {
    .step { padding-left: var(--space-xl); padding-top: calc(var(--space-xl) + 60px); }
    .step-number { left: var(--space-lg); top: var(--space-lg); }
}

/* TIMELINE INFO */
.timeline-info { margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-left: 4px solid var(--primary); }
.timeline-info h3 { margin: 0 0 var(--space-md) 0; color: var(--primary); font-size: 1.25rem; }
.timeline-info ul { margin: 0; padding-left: var(--space-lg); }
.timeline-info li { margin-bottom: var(--space-sm); color: var(--text-muted); }

/* BADGES */
.badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge--critical { background: #dc2626; color: white; }
.badge--high { background: #f59e0b; color: white; }
.badge--medium { background: #3b82f6; color: white; }
.badge--low { background: #10b981; color: white; }

/* RELATED LINKS */
.related-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .related-links { grid-template-columns: repeat(2, 1fr); } }
.related-links li { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.related-links li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-links a { display: block; padding: var(--space-lg); color: var(--primary); font-weight: 500; text-decoration: none; }
.related-links a:hover { color: var(--primary-dark); }

/* CTA */
.cta-section { padding: var(--space-3xl) 0; text-align: center; }
.cta-section--primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.cta-section__title { margin: 0 0 var(--space-md) 0; font-size: 2rem; color: var(--text-light); }
.cta-section__description { margin: 0 0 var(--space-xl) 0; font-size: 1.125rem; color: rgba(255,255,255,0.9); max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-section__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.cta-inline { background: var(--primary); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-2xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; margin-top: var(--space-2xl); }
@media (min-width: 640px) { .cta-inline { flex-direction: row; justify-content: space-between; text-align: left; } }
.cta-inline__title { margin: 0; color: var(--text-light); font-size: 1.125rem; font-weight: 600; }

/* FORMS */
.quote-form { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-lg); max-width: 500px; }
.quote-form__title { margin: 0 0 var(--space-lg) 0; font-size: 1.5rem; text-align: center; }
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; margin-bottom: var(--space-sm); font-weight: 500; font-size: 0.9375rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,79,79,0.1); }
.form-group textarea { min-height: 120px; resize: vertical; }

/* ACCREDITATIONS */
.accreditations { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xl); align-items: center; }
.accreditation-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.accreditation-item__logo { width: 80px; height: 80px; background: var(--bg); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.accreditation-item__name { font-size: 0.875rem; color: var(--text-muted); max-width: 100px; }

/* FOOTER */
.site-footer { background: var(--primary-dark); color: var(--text-light); padding: var(--space-3xl) 0 var(--space-xl); }
.footer-grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; margin-bottom: var(--space-2xl); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand .logo { display: inline-block; margin-bottom: var(--space-md); }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.9375rem; margin: 0 0 var(--space-sm) 0; }
.footer-column h4 { color: var(--text-light); font-size: 1rem; margin: 0 0 var(--space-lg) 0; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin-bottom: var(--space-sm); }
.footer-column a { color: rgba(255,255,255,0.7); font-size: 0.9375rem; }
.footer-column a:hover { color: var(--accent); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-xl); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--accent); }

/* FORM FIELDS */
.form-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-field { margin-bottom: var(--space-md); }
.form-field label { display: block; margin-bottom: var(--space-sm); font-weight: 500; font-size: 0.9375rem; color: var(--text-dark); }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,79,79,0.1); }
.form-field--full { grid-column: 1 / -1; }
.form-field textarea { min-height: 120px; resize: vertical; }
.checkbox-label { display: flex; align-items: flex-start; gap: var(--space-sm); cursor: pointer; font-size: 0.9375rem; color: var(--text-dark); }
.checkbox-label input[type="checkbox"] { width: auto; margin-top: 0.25rem; accent-color: var(--primary); }
.form-submit { text-align: center; margin-top: var(--space-xl); }
.form-privacy { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--space-md); }
.form-privacy a { color: var(--primary); }
.contact-form { max-width: 700px; margin: 0 auto; }

/* CONTACT INFO CARDS */
.contact-info-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-info-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-info-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-md); border: 1px solid #e5e7eb; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.contact-info-card__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }
.contact-info-card h3 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.contact-info-card__text { font-size: 1rem; font-weight: 600; color: var(--text-dark); margin: 0 0 var(--space-xs) 0; }
.contact-info-card__subtext { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 var(--space-md) 0; }

/* CONTACT INFO INLINE (FAQ Page) */
.contact-info-inline { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .contact-info-inline { grid-template-columns: repeat(3, 1fr); } }
.contact-item { text-align: center; padding: var(--space-lg); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-item h4 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.contact-item p { margin: 0 0 var(--space-xs) 0; }
.contact-item p a { color: var(--primary); font-weight: 600; font-size: 1.0625rem; }
.contact-item p a:hover { color: var(--accent); }
.contact-item__subtext { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--space-sm); }

/* EMERGENCY CALLOUT */
.emergency-callout { text-align: center; max-width: 700px; margin: 0 auto; padding: var(--space-xl); }
.emergency-callout__icon { font-size: 3rem; margin-bottom: var(--space-md); }
.emergency-callout h3 { color: var(--text-light); margin: 0 0 var(--space-md) 0; font-size: 1.5rem; }
.emergency-callout p { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-lg) 0; font-size: 1.0625rem; line-height: 1.7; }
.emergency-callout strong { color: var(--accent); }

/* CONTACT ALTERNATIVE (Dark Section) */
.contact-alternative { display: grid; gap: var(--space-xl); max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .contact-alternative { grid-template-columns: 1fr 1fr; } }
.contact-alternative__call, .contact-alternative__emergency { text-align: center; padding: var(--space-lg); }
.contact-alternative h3 { color: var(--text-light); margin: 0 0 var(--space-md) 0; font-size: 1.375rem; }
.contact-alternative p { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-md) 0; line-height: 1.7; }
.contact-alternative__phone { margin: var(--space-md) 0; }
.contact-alternative__phone a { color: var(--accent); font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.contact-alternative__phone a:hover { color: var(--white); text-decoration: underline; }
.contact-alternative__hours { color: rgba(255,255,255,0.7); font-size: 0.9375rem; margin: 0; }

/* ESTIMATE FORM */
.estimate-form-wrapper { max-width: 800px; margin: 0 auto; }
.estimate-form__header { text-align: center; margin-bottom: var(--space-xl); }
.estimate-form__header h2 { margin: 0 0 var(--space-md) 0; }
.estimate-form__header p { color: var(--text-muted); margin: 0; }
.form-section { margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid #e5e7eb; }
.form-section:last-of-type { border-bottom: none; }
.form-section h3 { font-size: 1.125rem; color: var(--primary); margin: 0 0 var(--space-lg) 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.radio-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: 0.9375rem; }
.radio-label input[type="radio"] { accent-color: var(--primary); }

/* PROJECT CARDS */
.project-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-card__image { height: 200px; background: linear-gradient(135deg, #e5e7eb, #d1d5db); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.project-card__content { padding: var(--space-lg); }
.project-card__type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 600; margin-bottom: var(--space-xs); }
.project-card__title { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; }
.project-card__location { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* PROJECT MASONRY */
.project-masonry { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .project-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-masonry { grid-template-columns: repeat(3, 1fr); } }
.project-masonry-item { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.project-masonry-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-masonry-item__image { height: 220px; background: linear-gradient(135deg, #e5e7eb, #d1d5db); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.project-masonry-item__content { padding: var(--space-lg); }
.project-masonry-item__type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 600; margin-bottom: var(--space-xs); }
.project-masonry-item__title { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; }
.project-masonry-item__location { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* BRAND CARDS */
.brand-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
.brand-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid #e5e7eb; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.brand-card__logo { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); font-size: 2rem; }
.brand-card__name { font-weight: 600; color: var(--primary); margin: 0 0 var(--space-xs) 0; }
.brand-card__desc { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* RELATED AREAS */
.related-areas { text-align: center; }
.related-areas__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }
.related-areas__link { display: inline-block; padding: 0.625rem 1.25rem; background: var(--white); border: 1px solid #e5e7eb; border-radius: 50px; font-size: 0.9375rem; color: var(--primary); font-weight: 500; text-decoration: none; transition: all var(--transition-fast); }
.related-areas__link:hover { border-color: var(--primary); background: var(--primary); color: var(--text-light); text-decoration: none; }
.related-areas__link--back { background: var(--bg); color: var(--text-muted); }
.related-areas__link--back:hover { background: var(--primary); color: var(--text-light); border-color: var(--primary); }

/* FAQ NAV */
.faq-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); justify-content: center; }
.faq-nav-item { padding: 0.5rem 1rem; background: var(--bg); border: 1px solid #e5e7eb; border-radius: 50px; font-size: 0.875rem; color: var(--text-dark); cursor: pointer; transition: all var(--transition-fast); }
.faq-nav-item:hover, .faq-nav-item.active { background: var(--primary); color: var(--text-light); border-color: var(--primary); }
.faq-navigation { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

/* FAQ PAGE SECTIONS */
.section section[id] { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid #e5e7eb; }
.section section[id]:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* TRUST BADGES */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: center; align-items: center; }
.trust-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.trust-badge__icon { width: 64px; height: 64px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.trust-badge__label { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }

/* RATING CARDS */
.rating-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .rating-grid { grid-template-columns: repeat(4, 1fr); } }
.rating-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); }
.rating-card__value { font-size: 2.5rem; font-weight: 700; color: var(--primary); margin-bottom: var(--space-xs); }
.rating-card__label { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.rating-card__stars { color: var(--accent); font-size: 1.25rem; margin-top: var(--space-sm); }
.rating-card__unit { font-size: 1rem; color: var(--text-muted); margin-bottom: var(--space-xs); }

/* RATING SUMMARY GRID (Reviews Page) */
.rating-summary-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .rating-summary-grid { grid-template-columns: repeat(4, 1fr); } }

/* CATEGORY GRID (Reviews Page) */
.category-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid #e5e7eb; }
.category-card h3 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.category-card__count { font-size: 0.9375rem; color: var(--text-dark); margin: 0 0 var(--space-sm) 0; font-weight: 500; }
.category-card__themes { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* REVIEW PLATFORMS (Reviews Page) */
.review-platforms { text-align: center; max-width: 700px; margin: 0 auto; }
.review-platforms__intro { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: var(--space-lg); }
.review-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

/* COMPARISON GRID */
.comparison-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 768px) { .comparison-grid { grid-template-columns: repeat(3, 1fr); } }
.comparison-item { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid #e5e7eb; }
.comparison-item h3 { color: var(--primary); margin-bottom: var(--space-md); font-size: 1.25rem; }
.comparison-item ul { margin: 0; padding: 0; list-style: none; }
.comparison-item ul li { padding: var(--space-sm) 0; border-bottom: 1px solid #f3f4f6; }
.comparison-item ul li:last-child { border-bottom: none; }

/* MATERIAL COMPARISON TABLE */
.material-comparison { overflow-x: auto; }
.material-comparison table { min-width: 600px; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
.material-comparison th { background: var(--primary); color: var(--text-light); font-weight: 600; }
.material-comparison td, .material-comparison th { padding: var(--space-md); text-align: left; }
.material-comparison tr:nth-child(even) { background: var(--bg); }
.material-comparison tr:hover { background: #e5e7eb; }

/* PROCESS TIMELINE - vertical timeline layout */
.process-timeline { position: relative; padding-left: var(--space-3xl); }
.process-timeline::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; background: var(--primary); border-radius: 2px; }
.process-timeline .process-step { position: relative; padding-bottom: var(--space-xl); text-align: left; }
.process-timeline .process-step:last-child { padding-bottom: 0; }
.process-timeline .process-step::before { content: ''; position: absolute; left: calc(-1 * var(--space-3xl) + 7px); top: 5px; width: 18px; height: 18px; background: var(--primary); border-radius: 50%; border: 3px solid var(--white); box-shadow: var(--shadow-sm); }
.process-timeline .process-step__number { display: none; }
.process-timeline .process-step h3 { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; color: var(--primary); }
.process-timeline .process-step p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* SPECS TABLE */
.specs-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
.specs-table th, .specs-table td { padding: var(--space-md); text-align: left; border-bottom: 1px solid #e5e7eb; }
.specs-table th { background: var(--primary); color: var(--text-light); font-weight: 600; }
.specs-table tr:last-child td { border-bottom: none; }
.specs-table tr:hover td { background: var(--bg); }

/* FEATURE LIST */
.feature-list { list-style: none; padding: 0; margin: var(--space-md) 0; }
.feature-list li { position: relative; padding: var(--space-sm) 0 var(--space-sm) 42px; border-bottom: 1px solid #f3f4f6; min-height: 28px; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before { content: '✓'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: #10b981; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; font-size: 0.8rem; font-weight: bold; }
.feature-list li.feature-list__item { padding-left: 0; }
.feature-list li.feature-list__item::before { display: none; }
.feature-list__icon { width: 24px; height: 24px; flex-shrink: 0; background: var(--primary); color: var(--text-light); border-radius: 50%; text-align: center; line-height: 24px; font-size: 0.75rem; }
.feature-list__text { flex: 1; }

/* SEASON CARDS */
.season-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }
.season-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary); }
.season-card__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }
.season-card h3 { margin: 0 0 var(--space-md) 0; color: var(--primary); font-size: 1.25rem; }
.season-card ul { list-style: none; padding: 0; margin: 0; }
.season-card li { position: relative; padding: var(--space-xs) 0 var(--space-xs) 24px; font-size: 0.9375rem; color: var(--text-muted); }
.season-card li::before { content: '•'; position: absolute; left: 8px; color: var(--primary); font-weight: bold; }
.season-card--spring { border-top-color: #10b981; }
.season-card--spring .season-card__icon { color: #10b981; }
.season-card--summer { border-top-color: #f59e0b; }
.season-card--summer .season-card__icon { color: #f59e0b; }
.season-card--fall { border-top-color: #f97316; }
.season-card--fall .season-card__icon { color: #f97316; }
.season-card--winter { border-top-color: #3b82f6; }
.season-card--winter .season-card__icon { color: #3b82f6; }

/* PLAN CARDS */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 2px solid #e5e7eb; position: relative; display: flex; flex-direction: column; }
.plan-card--featured { border-color: var(--primary); box-shadow: var(--shadow-md); }
.plan-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--text-light); padding: 0.25rem 1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.plan-card__header { text-align: center; padding-bottom: var(--space-md); border-bottom: 1px solid #e5e7eb; margin-bottom: var(--space-md); }
.plan-card__header h3 { margin: 0; color: var(--primary); font-size: 1.5rem; }
.plan-card__subtitle { margin: var(--space-xs) 0 0 0; color: var(--text-muted); font-size: 0.875rem; }
.plan-card ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.plan-card li { position: relative; padding: var(--space-sm) 0 var(--space-sm) 28px; font-size: 0.9375rem; color: var(--text-muted); border-bottom: 1px solid #f3f4f6; }
.plan-card li:last-child { border-bottom: none; }
.plan-card li::before { content: '✓'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #10b981; font-weight: bold; }
.plan-card__best-for { margin: var(--space-md) 0 0 0; text-align: center; font-size: 0.875rem; color: var(--text-muted); }

/* RESPONSE TIME CARDS */
.response-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 640px) { .response-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .response-grid { grid-template-columns: repeat(4, 1fr); } }
.response-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; border-top: 4px solid var(--primary); }
.response-card__icon { font-size: 2.5rem; margin-bottom: var(--space-sm); }
.response-card h3 { margin: 0 0 var(--space-xs) 0; color: var(--primary); font-size: 1.125rem; }
.response-card__time { margin: 0 0 var(--space-md) 0; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; }
.response-card ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.response-card li { padding: var(--space-xs) 0; font-size: 0.875rem; color: var(--text-muted); border-bottom: 1px solid #f3f4f6; }
.response-card li:last-child { border-bottom: none; }
.response-card li strong { color: var(--text-dark); }

/* INFO CARDS - Generic reusable card grid */
.info-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .info-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .info-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.info-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 4px solid var(--accent); }
.info-card__icon { font-size: 2rem; margin-bottom: var(--space-md); }
.info-card h3 { margin: 0 0 var(--space-md) 0; color: var(--primary); font-size: 1.125rem; }
.info-card p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.info-card ul { list-style: none; padding: 0; margin: 0; }
.info-card li { position: relative; padding: var(--space-xs) 0 var(--space-xs) 20px; font-size: 0.9375rem; color: var(--text-muted); }
.info-card li::before { content: '•'; position: absolute; left: 6px; color: var(--primary); font-weight: bold; }
.info-card li strong { color: var(--text-dark); }
.info-card .feature-list li { padding-left: 42px; }
.info-card .feature-list li::before { content: '✓'; left: 0; width: 24px; height: 24px; background: #10b981; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; font-size: 0.8rem; font-weight: bold; }
.info-card__highlight { font-size: 2rem; font-weight: 700; color: var(--primary); margin: 0 0 var(--space-sm) 0; }

/* COMPARISON CARDS */
.comparison-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .comparison-grid { grid-template-columns: repeat(2, 1fr); } }
.comparison-card { background: var(--white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 2px solid #e5e7eb; position: relative; }
.comparison-card--recommended { border-color: #10b981; }
.comparison-card--alternative { border-color: #f59e0b; }
.comparison-card__badge { position: absolute; top: -12px; left: var(--space-lg); background: #10b981; color: var(--text-light); padding: 0.25rem 1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.comparison-card h3 { margin: 0 0 var(--space-sm) 0; color: var(--primary); font-size: 1.25rem; }
.comparison-card__subtitle { margin: 0 0 var(--space-md) 0; color: #f59e0b; font-weight: 600; font-size: 0.875rem; }
.comparison-card__section { margin-bottom: var(--space-md); }
.comparison-card__section:last-child { margin-bottom: 0; }
.comparison-card__section h4 { margin: 0 0 var(--space-sm) 0; color: var(--text-dark); font-size: 0.9375rem; font-weight: 600; }
.comparison-card__section--warning h4 { color: #dc2626; }
.comparison-card ul { list-style: none; padding: 0; margin: 0; }
.comparison-card li { position: relative; padding: var(--space-xs) 0 var(--space-xs) 24px; font-size: 0.875rem; color: var(--text-muted); }
.comparison-card--recommended li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: bold; }
.comparison-card--alternative li::before { content: '•'; position: absolute; left: 6px; color: #f59e0b; font-weight: bold; }
.comparison-card__section--warning li::before { content: '✗'; left: 0; color: #dc2626; }

/* CHECKLIST */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: var(--space-xl); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: var(--space-sm); width: 20px; height: 20px; background: var(--success); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; }

/* TABLE STYLES */
.inspection-table { margin: var(--space-lg) 0; }
.inspection-table table { width: 100%; }
.section table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: none !important; }
.section table th, .section table td { padding: var(--space-md) !important; text-align: left; border: none !important; border-bottom: 1px solid #e5e7eb !important; }
.section table thead tr { background: var(--primary) !important; }
.section table th { background: transparent !important; color: var(--text-light) !important; font-weight: 600; }
.section table tbody tr:nth-child(even) { background: var(--bg); }
.section table tr:last-child td { border-bottom: none !important; }
.section table tbody tr:hover { background: #e5e7eb; }
.section table td strong { color: var(--primary); }

/* Fix for tables with inline styles */
.section table[style] { border-collapse: collapse !important; }
.section table[style] th, .section table[style] td { border: none !important; border-bottom: 1px solid #e5e7eb !important; }

/* SECTION CONTAINER */
.section-container { max-width: 100%; }
.content-text { max-width: 800px; }
.content-text p { margin-bottom: var(--space-md); }

/* DAMAGE GRID */
.damage-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .damage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .damage-grid { grid-template-columns: repeat(4, 1fr); } }
.damage-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid #e5e7eb; }
.damage-card h4 { color: var(--primary); margin: 0 0 var(--space-sm) 0; font-size: 1rem; }
.damage-card p { margin: 0 0 var(--space-xs) 0; font-size: 0.875rem; color: var(--text-muted); }
.damage-card p strong { color: var(--text-dark); }
.urgency-badge { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-top: var(--space-sm); }
.urgency-critical { background: var(--error); color: var(--text-light); }
.urgency-high { background: var(--warning); color: var(--text-dark); }
.urgency-mediumhigh { background: #f59e0b; color: var(--text-dark); }
.urgency-medium { background: var(--info); color: var(--text-light); }

/* WARNING CHECKLIST */
.warning-checklist { display: grid; gap: var(--space-xl); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) { .warning-checklist { grid-template-columns: repeat(3, 1fr); } }
.checklist-column { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; }
.checklist-column h4 { color: var(--primary); margin: 0 0 var(--space-md) 0; font-size: 1.125rem; }
.checklist-column ul { list-style: none; padding: 0; margin: 0; }
.checklist-column ul li { position: relative; padding-left: var(--space-xl); padding-top: var(--space-xs); padding-bottom: var(--space-xs); font-size: 0.9375rem; }
.checklist-column ul li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: bold; }

/* PROCESS GRID */
.process-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
.process-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; position: relative; }
.process-card h4 { color: var(--primary); margin: 0 0 var(--space-sm) 0; font-size: 1rem; }
.process-card p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }
.process-number { width: 40px; height: 40px; background: var(--primary); color: var(--text-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; margin-bottom: var(--space-md); }

/* CLIMATE IMPACTS */
.climate-impacts { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .climate-impacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .climate-impacts { grid-template-columns: repeat(3, 1fr); } }
.impact-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; }
.impact-card h4 { color: var(--primary); margin: 0 0 var(--space-sm) 0; font-size: 1rem; }
.impact-card p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

/* TRUST GRID */
.trust-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; text-align: center; }
.trust-card h4 { color: var(--primary); margin: 0 0 var(--space-sm) 0; font-size: 1rem; }
.trust-card p { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.trust-icon { font-size: 2rem; margin-bottom: var(--space-md); }
.trust-footer { text-align: center; margin-top: var(--space-xl); font-size: 1.125rem; }

/* GENERIC CARD GRIDS */
.card-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; }
.card h4 { color: var(--primary); margin: 0 0 var(--space-sm) 0; }
.card p { margin: 0; color: var(--text-muted); }

/* MATERIALS GRID - Residential Roofing Page */
.materials-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .materials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .materials-grid { grid-template-columns: repeat(3, 1fr); } }
.material-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid #e5e7eb; display: flex; flex-direction: column; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.material-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.material-card h4 { color: var(--primary); margin: 0 0 var(--space-md) 0; font-size: 1.25rem; font-weight: 600; }
.material-card dl { margin: 0 0 var(--space-lg) 0; flex-grow: 1; }
.material-card dt { font-weight: 600; color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-sm); }
.material-card dt:first-child { margin-top: 0; }
.material-card dd { margin: 0; color: var(--text-dark); font-size: 1rem; }
.material-card .btn { margin-top: auto; align-self: flex-start; }