/*
Theme Name: Ridgeline Roofing Co. of Dallas
Theme URI: https://ridgelineroofingdallas.com
Description: Professional roofing theme for Ridgeline Roofing Co. of Dallas
Version: 1785775252321
*/

:root {
  --primary:       #0f9d6b;
  --primary-dark:  #0c7e56;
  --primary-light: #e2f3ed;
  --secondary:     #0c3a30;
  --accent:        #0f9d6b;
  --text-dark:     #1a1a2e;
  --text-muted:    #6b7280;
  --bg-light:      #f4f6f8;
  --white:         #ffffff;
  --border:        #e5e7eb;
  --radius:        14px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,.06);
  --shadow-md:     0 8px 24px rgba(0,52,153,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--text-dark); line-height: 1.6; }
img { max-width: 100%; height: auto; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { color: var(--primary); text-decoration: none; }
h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; line-height: 1.25; }

/* ── Header ── */
.site-header { background: var(--secondary); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 70px; max-width: 1200px; margin: 0 auto; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; min-width: 0; }
.site-logo-icon { height: 46px; width: 46px; border-radius: 11px; object-fit: contain; display: block; flex-shrink: 0; }
.site-logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.site-logo-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.18rem; color: #fff; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.site-logo-tagline { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; }
.header-nav { display: flex; }
.header-nav ul { list-style: none; display: flex; gap: 4px; flex-wrap: wrap; }
.header-nav a { color: rgba(255,255,255,.85); padding: 8px 12px; border-radius: 6px; font-size: .88rem; font-weight: 500; transition: all .2s; white-space: nowrap; }
.header-nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.header-phone { background: var(--accent); color: #fff !important; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-shrink: 0; transition: opacity .2s; }
.header-phone svg { width: 16px; height: 16px; }
.header-phone:hover { opacity: .9; color: #fff !important; }
.w7ka8f8-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.w7ka8f8-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
body.nav-open .w7ka8f8-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .w7ka8f8-nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .w7ka8f8-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ── */
.site-hero { background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); padding: 80px 0 60px; text-align: center; position: relative; overflow: hidden; }
.site-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 2; }
/* Real-<img> hero layers (sf_hero_img_tag): photo under scrim under copy. The hero
   sections keep their opaque gradient/color backgrounds as the no-photo fallback. */
.w7ka8f8-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.w7ka8f8-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 45%, transparent) 0%, color-mix(in srgb, var(--primary) 45%, transparent) 100%); }
.w7ka8f8-hero-scrim--page { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 52%, transparent) 0%, color-mix(in srgb, var(--primary) 52%, transparent) 100%); }
.site-hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; margin-bottom: 16px; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero-sub { color: rgba(255,255,255,.92); font-size: 1.1rem; margin-bottom: 32px; max-width: 620px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.hero-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 16px 32px; border-radius: 10px; font-weight: 800; font-size: 1.05rem; transition: opacity .2s, transform .1s; }
.btn-primary:hover { opacity: .9; color: #fff; transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 1rem; transition: all .2s; }
.btn-secondary:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.hero-stats { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; margin-bottom: 28px; }
.hero-stat { text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.2); }
.hero-stat:last-child { border-right: none; }
.hero-stat-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.9rem; color: #fff; line-height: 1; }
.hero-stat-label { font-size: .75rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.hero-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hero-badge { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.9); padding: 5px 14px; border-radius: 20px; font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.hero-badge::before { content: '✓'; color: var(--accent); font-weight: 900; }

/* ── Services ── */
.services-section { padding: 72px 0; background: #fff; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 12px; }
.section-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.service-card { background: var(--bg-light); border-radius: var(--radius); padding: 28px; transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; display: block; border: 2px solid transparent; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-light); }
.service-icon { width: 52px; height: 52px; background: var(--primary-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--primary); }
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; color: var(--text-dark); }
.service-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin-bottom: 14px; }
.service-link { color: var(--primary); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 4px; }
.service-link::after { content: '→'; transition: transform .2s; }
.service-card:hover .service-link::after { transform: translateX(4px); }

/* ── How It Works ── */
.how-section { padding: 72px 0; background: var(--bg-light); }
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 48px; }
.how-step { position: relative; }
.how-step-num { width: 52px; height: 52px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: 20px; }
.how-step h3 { font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
.how-step p { color: var(--text-muted); font-size: .95rem; line-height: 1.65; }

/* ── About Mini ── */
.about-mini { padding: 80px 0; background: var(--secondary); color: #fff; }
.about-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-mini h2 { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; }
.about-mini > .container > .about-mini-grid > div > p { color: rgba(255,255,255,.8); font-size: 1.02rem; line-height: 1.75; margin-bottom: 28px; }
.about-checks { list-style: none; margin-bottom: 32px; }
.about-checks li { color: rgba(255,255,255,.9); padding: 7px 0; font-size: .97rem; display: flex; align-items: center; gap: 10px; }
.about-checks li::before { content: '✓'; color: var(--accent); font-weight: 900; font-size: 1.1rem; flex-shrink: 0; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about-stat-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 24px 20px; text-align: center; }
.about-stat-num { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.about-stat-label { font-size: .78rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.owner-card { display: flex; flex-direction: column; align-items: center; gap: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 32px 24px; margin-top: 28px; text-align: center; }
.owner-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 5px solid var(--accent); box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.1); }
.owner-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; }
.owner-title { font-size: .88rem; color: rgba(255,255,255,.65); margin-top: 4px; letter-spacing: .02em; }

/* ── About Page Owner Hero ── */
.about-owner-hero { background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--primary) 60%, var(--secondary))); padding: 60px 0; }
.about-owner-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; max-width: 1000px; margin: 0 auto; }
.about-owner-photo { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; border: 6px solid var(--accent); box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.1); display: block; }
.about-owner-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2rem; color: #fff; margin-bottom: 6px; }
.about-owner-title { font-size: 1rem; color: rgba(255,255,255,.7); margin-bottom: 20px; letter-spacing: .04em; }
.about-owner-tagline { font-size: 1.1rem; color: rgba(255,255,255,.9); line-height: 1.7; font-style: italic; border-left: 4px solid var(--accent); padding-left: 18px; }
.about-owner-years { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 8px 18px; font-size: .9rem; color: rgba(255,255,255,.85); font-weight: 600; margin-top: 20px; }

/* ── Brands ── */
.brands-section { padding: 56px 0; background: #fff; border-top: 1px solid var(--border); }
.brands-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.brand-chip { background: var(--bg-light); border: 2px solid var(--border); border-radius: 12px; padding: 14px 20px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .92rem; color: var(--text-dark); transition: border-color .2s, transform .15s, box-shadow .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; min-width: 140px; }
.brand-chip:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.brand-initial { width: 38px; height: 38px; background: var(--primary); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.brand-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .9rem; color: var(--text-dark); }

/* ── Why Choose Us ── */
.why-section { padding: 72px 0; background: var(--bg-light); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.why-card { background: #fff; border-radius: var(--radius); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); }
.why-icon { width: 56px; height: 56px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--primary); }
.why-icon svg { width: 26px; height: 26px; }
.why-card h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.why-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* ── Reviews ── */
.reviews-section { padding: 72px 0; background: #fff; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.review-card { background: var(--bg-light); border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); }
.review-stars { color: #f59e0b; font-size: 1.15rem; letter-spacing: 2px; margin-bottom: 14px; }
.review-text { color: #374151; font-size: .95rem; line-height: 1.75; margin-bottom: 18px; font-style: italic; }
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; background: var(--bg-light); }
.review-avatar-mono { display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--primary); }
.review-meta { display: flex; flex-direction: column; }
.review-author { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .9rem; }
.review-location { color: var(--text-muted); font-size: .85rem; }

/* ── FAQ ── */
.faq-section { padding: 72px 0; background: var(--bg-light); }
.faq-list { max-width: 800px; margin: 48px auto 0; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.faq-btn { width: 100%; background: none; border: none; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .97rem; color: var(--text-dark); text-align: left; gap: 12px; transition: background .15s; }
.faq-btn:hover { background: var(--bg-light); }
.faq-icon { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; margin-left: auto; transition: transform .25s; font-weight: 300; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-body { padding: 0 24px 20px; color: #555; font-size: .95rem; line-height: 1.75; }

/* ── Blog Previews ── */
.blog-preview-section { padding: 72px 0; background: #fff; }
.blog-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.blog-preview-card { background: var(--bg-light); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: box-shadow .2s; }
.blog-preview-card:hover { box-shadow: var(--shadow-md); }
.blog-preview-body { padding: 24px; }
.blog-preview-date { font-size: .78rem; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.blog-preview-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.4; margin-bottom: 10px; }
.blog-preview-title a { color: var(--text-dark); }
.blog-preview-title a:hover { color: var(--primary); }
.blog-preview-excerpt { color: var(--text-muted); font-size: .88rem; line-height: 1.65; margin-bottom: 16px; }
.read-more { color: var(--primary); font-weight: 600; font-size: .88rem; }

/* ── Homepage Gallery ── */
.gallery-section { padding: 72px 0; background: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.gallery-item { position: relative; display: block; background: var(--bg-light); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; aspect-ratio: 4 / 3; }
.gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); outline: none; }
.gallery-item:focus-visible { box-shadow: 0 0 0 3px var(--primary); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery-item:hover .gallery-img { transform: scale(1.03); }
.gallery-tag { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; padding: 4px 10px; border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 1; }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px 12px; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 60%, transparent 100%); color: #fff; font-size: .82rem; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.gallery-item:hover .gallery-caption, .gallery-item:focus-visible .gallery-caption { opacity: 1; transform: translateY(0); }

/* Lightbox */
.w7ka8f8-lightbox { position: fixed; inset: 0; background: rgba(8,10,16,.94); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; backdrop-filter: blur(6px); }
.w7ka8f8-lightbox.open { display: flex; animation: sfLightboxFade .18s ease-out; }
@keyframes sfLightboxFade { from { opacity: 0; } to { opacity: 1; } }
.w7ka8f8-lightbox-img { max-width: min(96vw, 1200px); max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); object-fit: contain; background: #000; }
.w7ka8f8-lightbox-caption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: rgba(255,255,255,.86); font-size: .9rem; max-width: 80vw; text-align: center; padding: 8px 16px; background: rgba(0,0,0,.55); border-radius: 8px; backdrop-filter: blur(4px); }
.w7ka8f8-lightbox-nav, .w7ka8f8-lightbox-close { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s; font-size: 1.4rem; line-height: 1; padding: 0; }
.w7ka8f8-lightbox-nav:hover, .w7ka8f8-lightbox-close:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.w7ka8f8-lightbox-nav:focus-visible, .w7ka8f8-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.w7ka8f8-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.w7ka8f8-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.w7ka8f8-lightbox-prev:hover, .w7ka8f8-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.w7ka8f8-lightbox-close { top: 20px; right: 20px; }
.w7ka8f8-lightbox-counter { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .82rem; font-family: 'Montserrat', sans-serif; letter-spacing: .05em; }

/* ── CTA Band ── */
.cta-band { background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%); padding: 64px 0; text-align: center; }
.cta-band h2 { font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── Page Templates ── */
.page-featured-img { width: 100%; max-height: 450px; object-fit: cover; border-radius: 10px; margin-bottom: 2em; display: block; }
.page-hero-section { background: linear-gradient(135deg, var(--secondary), var(--primary)); padding: 64px 0; text-align: center; }
.page-hero-section h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; margin-bottom: 12px; }
.page-hero-line { width: 60px; height: 4px; background: var(--accent); margin: 16px auto 0; border-radius: 2px; }
.brand-hero-logo-wrap { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 16px; padding: 14px 24px; margin-bottom: 24px; box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.brand-hero-logo { max-height: 64px; max-width: 200px; width: auto; object-fit: contain; display: block; }
.brand-hero-initial { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 16px; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2rem; color: #fff; margin-bottom: 20px; }
.page-breadcrumb { background: var(--bg-light); padding: 10px 0; font-size: .85rem; color: var(--text-muted); }
.page-breadcrumb a { color: var(--primary); }
.page-content-wrapper { background: #fff; padding: 52px 0 64px; }

/* ── Rich Page Content Typography ── */
.page-content { font-size: 18px; line-height: 1.78; color: #2c2c36; }
/* Editorial reading measure — cap prose line length for comfortable reading
   while letting full-width components (card grids, CTA strips, images, maps,
   signal lists, steppers) span the container. Scoped to DIRECT prose children
   of .page-content / .w7ka8f8-band so component internals are never squeezed. */
.page-content > p, .page-content > h2, .page-content > h3, .page-content > h4,
.page-content > ul, .page-content > ol, .page-content > blockquote,
.page-content > .w7ka8f8-band > p, .page-content > .w7ka8f8-band > h2, .page-content > .w7ka8f8-band > h3,
.page-content > .w7ka8f8-band > h4, .page-content > .w7ka8f8-band > ul:not(.w7ka8f8-signal-list),
.page-content > .w7ka8f8-band > ol:not(.w7ka8f8-steps), .page-content > .w7ka8f8-band > blockquote {
  max-width: 70ch; margin-left: auto; margin-right: auto;
}
.page-content h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--text-dark); letter-spacing: -.01em; margin-top: 54px; margin-bottom: 18px; }
.page-content h2::after { content: ''; display: block; width: 46px; height: 3px; background: var(--accent); margin-top: 14px; border-radius: 2px; }
.page-content h2:first-child { margin-top: 0; }
.page-content h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.22rem; color: var(--text-dark); margin-top: 34px; margin-bottom: 10px; }
.page-content h4 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text-dark); margin-top: 22px; margin-bottom: 8px; }
.page-content p { margin-bottom: 22px; }
.page-content ul:not(.w7ka8f8-signal-list), .page-content ol:not(.w7ka8f8-steps) { margin-top: 16px; margin-bottom: 24px; padding-left: 26px; }
.page-content li { margin-bottom: 11px; line-height: 1.72; padding-left: 4px; }
.page-content ul:not(.w7ka8f8-signal-list) li::marker { color: var(--accent); }
.page-content strong { color: var(--text-dark); font-weight: 700; }
.page-content a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.page-content a:hover { text-decoration: underline; }
.page-content em { font-style: italic; color: var(--text-muted); }
.page-content blockquote { border-left: 4px solid var(--accent); background: var(--bg-light); padding: 16px 22px; border-radius: 0 10px 10px 0; font-size: 1.12rem; font-style: italic; color: var(--text-dark); }
.page-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95rem; }
.page-content table th, .page-content table td { border: 1px solid var(--border); padding: 11px 14px; text-align: left; }
.page-content table th { background: var(--bg-light); font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--text-dark); }
.page-content table tr:nth-child(even) td { background: var(--bg-light); }

/* ── Scannable content components (content-layout.ts) ── */
/* Section bands — give each <h2> section visual rhythm; even sections sit on a panel. */
.page-content .w7ka8f8-band { padding: 6px 0; }
.page-content .w7ka8f8-band:nth-of-type(even) { background: var(--bg-light); border-radius: 16px; padding: 20px 26px; margin: 16px 0; }
.page-content .w7ka8f8-band > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Lead paragraph + inline tap-to-call */
.w7ka8f8-lead { font-size: 1.18rem; line-height: 1.7; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.w7ka8f8-lead-cta { margin: 14px 0 6px; }
.w7ka8f8-inline-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff !important; padding: 12px 22px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; transition: opacity .2s, transform .1s; }
.w7ka8f8-inline-cta:hover { opacity: .92; transform: translateY(-1px); text-decoration: none !important; }
.w7ka8f8-inline-cta svg { width: 16px; height: 16px; }

/* Feature card grid (what's included / services) */
.w7ka8f8-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin: 22px 0 8px; }
.w7ka8f8-feature-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.w7ka8f8-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.w7ka8f8-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--primary-light); color: var(--primary); margin-bottom: 14px; }
.w7ka8f8-feature-icon svg { width: 24px; height: 24px; }
.w7ka8f8-feature-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-dark); margin: 0 0 8px; }
.w7ka8f8-feature-card p { font-size: .97rem; line-height: 1.7; color: #444; margin-bottom: 10px; }
.w7ka8f8-feature-card p:last-child { margin-bottom: 0; }

/* Signal / warning list (signs you need … / common problems) */
.w7ka8f8-signal-list { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.w7ka8f8-signal-list li { position: relative; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 14px 16px 14px 48px; margin: 0; line-height: 1.65; }
.w7ka8f8-signal-list li::before { content: '!'; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.w7ka8f8-signal-list li strong { color: var(--text-dark); }

/* Numbered stepper (our process) */
.w7ka8f8-steps { list-style: none; margin: 24px 0; padding: 0; }
.w7ka8f8-step { position: relative; display: flex; gap: 18px; padding-bottom: 26px; margin: 0; }
.w7ka8f8-step:last-child { padding-bottom: 0; }
.w7ka8f8-step:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 2px; background: var(--primary-light); }
.w7ka8f8-step-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.w7ka8f8-step-body { padding-top: 6px; }
.w7ka8f8-step-body p { margin: 0 0 8px; }
.w7ka8f8-step-body p:last-child { margin-bottom: 0; }

/* Pricing callout */
.w7ka8f8-price-callout { background: var(--primary-light); border-left: 5px solid var(--primary); border-radius: 12px; padding: 22px 26px; margin: 20px 0; }
.w7ka8f8-price-callout p { margin-bottom: 12px; }
.w7ka8f8-price-callout p:last-child { margin-bottom: 0; }
.w7ka8f8-price-callout strong { color: var(--primary-dark); }

/* Mid-page CTA strip */
.w7ka8f8-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, var(--secondary), var(--primary)); border-radius: var(--radius); padding: 24px 28px; margin: 28px 0; }
.w7ka8f8-cta-strip-text { display: flex; flex-direction: column; gap: 4px; }
.w7ka8f8-cta-strip-text strong { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; }
.w7ka8f8-cta-strip-text span { color: rgba(255,255,255,.82); font-size: .96rem; }
.w7ka8f8-cta-strip-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff !important; padding: 13px 24px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 800; white-space: nowrap; transition: opacity .2s, transform .1s; }
.w7ka8f8-cta-strip-btn:hover { opacity: .92; transform: translateY(-1px); text-decoration: none !important; }
.w7ka8f8-cta-strip-btn svg { width: 16px; height: 16px; }

/* ── City-Service Page ── */
.city-cta-box { background: var(--secondary); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; color: #fff; }
.city-cta-box h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.city-cta-box p { color: rgba(255,255,255,.75); font-size: .9rem; margin-bottom: 16px; }
.city-cta-box .btn-primary { width: 100%; justify-content: center; margin-bottom: 10px; }
.city-nearby-cities { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.city-nearby-cities h4 { font-family: 'Montserrat', sans-serif; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px; }
.city-nearby-cities a { display: flex; align-items: center; gap: 6px; color: var(--primary); font-size: .88rem; padding: 7px 0; border-bottom: 1px solid var(--border); font-weight: 500; }
.city-nearby-cities a:last-child { border-bottom: none; }
.city-nearby-cities a::before { content: '→'; font-size: .75rem; color: var(--accent); }

/* ── Service-Area Link Cloud (only rendered on sites with ≤20 cities) ── */
.w7ka8f8-sal-section { background: #f1f5f9; border-top: 1px solid var(--border); padding: 40px 0; }
.w7ka8f8-sal-heading { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.w7ka8f8-sal-cloud { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; max-width: 1000px; margin: 0 auto; }
.w7ka8f8-sal-cloud a { font-size: .82rem; color: var(--primary); text-decoration: none; white-space: nowrap; line-height: 1.8; }
.w7ka8f8-sal-cloud a:hover { text-decoration: underline; }

/* ── Footer ── */
.site-footer { background: #0d0d1a; color: rgba(255,255,255,.7); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; margin-bottom: 36px; }
.footer-col h5 { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 16px; font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; }
.footer-col p { font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.55); }
.footer-col a { display: block; color: rgba(255,255,255,.55); font-size: .9rem; margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-phone { display: inline-block; margin-top: 14px; background: var(--accent); color: #fff; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: .95rem; }
.footer-phone:hover { color: #fff; opacity: .9; }
/* #37 display: real business hours in the footer contact column. */
.footer-hours { margin: 4px 0 16px; }
.footer-hours-row { display: flex; justify-content: space-between; gap: 14px; font-size: .85rem; line-height: 1.7; color: rgba(255,255,255,.55); }
.footer-hours-row dt { font-weight: 600; color: rgba(255,255,255,.72); }
.footer-hours-row dd { margin: 0; text-align: right; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; text-align: center; font-size: .83rem; color: rgba(255,255,255,.35); }

/* ── Mega Brand family strip (MEGA_CHILD only; gated so non-mega CSS is unchanged) ── */
.w7ka8f8-family-strip { margin: 4px 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.w7ka8f8-family-lead { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; }
.w7ka8f8-family-lead strong { color: rgba(255,255,255,.82); font-weight: 600; }
.w7ka8f8-family-lead a { color: var(--accent); font-weight: 600; }
.w7ka8f8-family-lead a:hover { text-decoration: underline; }
.w7ka8f8-family-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 10px 0 0; padding: 0; }
.w7ka8f8-family-links a { color: rgba(255,255,255,.5); font-size: .82rem; }
.w7ka8f8-family-links a:hover { color: #fff; }

/* ── City page layout ── */
.city-page-grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }
.city-sidebar { position: sticky; top: 90px; align-self: start; }

/* ── Conversion chrome on city/service pages ── */
.w7ka8f8-hero-conv { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.w7ka8f8-hero-subhead { font-size: 1.05rem; opacity: .95; margin: 10px 0 0; max-width: 660px; line-height: 1.5; }
.w7ka8f8-hero-bullets { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.w7ka8f8-hero-bullets li { position: relative; padding-left: 22px; font-weight: 600; }
.w7ka8f8-hero-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.w7ka8f8-cap-section { background: var(--bg-light, #f6f8fa); padding: 30px 0; }
.w7ka8f8-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.w7ka8f8-cap-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; min-height: 48px; }
.w7ka8f8-cap-icon { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.w7ka8f8-cap-label { font-weight: 700; font-size: .98rem; line-height: 1.25; max-width: 16ch; }
@media (max-width: 640px) { .w7ka8f8-cap-grid { grid-template-columns: repeat(2, 1fr); } }
.w7ka8f8-guarantee { padding: 48px 0; background: var(--secondary); color: #fff; text-align: center; }
.w7ka8f8-guarantee h2 { color: #fff; margin-bottom: 24px; }
.w7ka8f8-guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.w7ka8f8-guarantee-item { background: rgba(255,255,255,.08); border-radius: 10px; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.w7ka8f8-guarantee-item strong { font-size: 1.02rem; }
.w7ka8f8-guarantee-item span { opacity: .9; font-size: .92rem; line-height: 1.4; }
.w7ka8f8-guarantee-cta { display: inline-flex; }
@media (max-width: 760px) { .w7ka8f8-guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
.w7ka8f8-meet-owner { padding: 48px 0; }
.w7ka8f8-meet-owner .container { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.w7ka8f8-owner-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.w7ka8f8-owner-text { flex: 1; min-width: 260px; }
.w7ka8f8-owner-text h2 { margin-bottom: 10px; }
.w7ka8f8-owner-text p { margin-bottom: 16px; max-width: 60ch; }
.w7ka8f8-stars { display: flex; align-items: center; gap: 8px; }
.w7ka8f8-stars-fill { color: #ffb400; letter-spacing: 1px; font-size: 1.05rem; }
.w7ka8f8-stars-meta { color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 600; }
.w7ka8f8-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.w7ka8f8-hero-badge { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 4px 10px; font-size: .82rem; font-weight: 600; }
.w7ka8f8-hero-call { margin-top: 4px; }
.w7ka8f8-trustbar { background: var(--bg-light); border-bottom: 1px solid var(--border); }
.w7ka8f8-trustbar .container { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 0; font-size: .85rem; font-weight: 600; color: var(--text-dark); }
.w7ka8f8-mid-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0; padding: 22px 26px; background: var(--bg-light); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.w7ka8f8-mid-cta strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; }
.w7ka8f8-mid-cta span { color: var(--text-muted); font-size: .9rem; }
/* #14 — "What happens when you call" reassurance block (near the primary CTA). */
.w7ka8f8-reassure { margin: 40px 0; padding: 26px 28px; background: var(--primary-light); border: 1px solid var(--border); border-radius: var(--radius); }
.w7ka8f8-reassure h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.12rem; margin-bottom: 16px; }
.w7ka8f8-reassure-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.w7ka8f8-reassure-steps li { display: flex; gap: 12px; align-items: flex-start; }
.w7ka8f8-reassure-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.w7ka8f8-reassure-steps strong { display: block; font-size: .96rem; color: var(--text-dark); line-height: 1.35; }
.w7ka8f8-reassure-steps span { display: block; color: var(--text-muted); font-size: .86rem; line-height: 1.5; margin-top: 2px; }
@media (max-width: 600px) { .w7ka8f8-reassure-steps { grid-template-columns: 1fr; } }
/* #15 — "Recent {service} jobs in {city}" proof strip (captioned AI work photos). */
.w7ka8f8-recent-jobs { margin: 44px 0; }
.w7ka8f8-recent-jobs h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 6px; }
.w7ka8f8-recent-jobs-sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 18px; }
.w7ka8f8-recent-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.w7ka8f8-recent-job { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); }
.w7ka8f8-recent-job img { width: 100%; height: 168px; object-fit: cover; display: block; }
.w7ka8f8-recent-job figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
.w7ka8f8-contact-band { background: var(--bg-light); border-top: 1px solid var(--border); padding: 32px 0; }
.w7ka8f8-contact-band .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.w7ka8f8-contact-band strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.15rem; }
.w7ka8f8-contact-band span { color: var(--text-muted); font-size: .92rem; }
.w7ka8f8-gallery-section { margin: 44px 0; }
.w7ka8f8-gallery-section h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 18px; }
.w7ka8f8-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.w7ka8f8-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.w7ka8f8-reviews-block { margin: 44px 0; }
.w7ka8f8-reviews-block h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 12px; }
.w7ka8f8-reviews-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.w7ka8f8-reviews-rating strong { font-size: 1.2rem; }
.w7ka8f8-reviews-rating span { color: var(--text-muted); font-size: .9rem; }
.w7ka8f8-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.w7ka8f8-review-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.w7ka8f8-review-card p { font-style: italic; color: var(--text-dark); margin-bottom: 10px; font-size: .92rem; }
.w7ka8f8-review-card span { color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.w7ka8f8-stickybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100; display: none; gap: 0; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.w7ka8f8-stickybar a { flex: 1; text-align: center; padding: 15px 8px; font-weight: 700; font-size: .95rem; }
.w7ka8f8-stickybar-call { background: #16a34a; color: #fff; flex: 1.7; } /* calls are the goal → green, dominant */
.w7ka8f8-fab { position: fixed; bottom: 78px; right: 16px; z-index: 1100; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
@media (max-width: 768px) {
  .w7ka8f8-stickybar { display: flex; }
  /* No .w7ka8f8-fab on mobile — the sticky Call bar already carries the call CTA,
     and the corner is reserved for the chat bubble (raised above the bar). */
  body { padding-bottom: 56px; }
}
@media (min-width: 769px) {
  .w7ka8f8-fab { display: flex; }
}

/* ── Contact Page ── */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin: 52px 0 64px; }
/* ── Contact Form ── */
.w7ka8f8-contact-form { background: #fff; border-radius: 16px; padding: 36px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.w7ka8f8-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.w7ka8f8-cf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.w7ka8f8-cf-field label { font-weight: 600; font-size: .88rem; color: var(--text-dark); margin-bottom: 6px; letter-spacing: .01em; }
.w7ka8f8-cf-req { color: var(--accent); }
.w7ka8f8-cf-field input, .w7ka8f8-cf-field select, .w7ka8f8-cf-field textarea { border: 2px solid var(--border); border-radius: 8px; padding: 11px 14px; font-size: .97rem; font-family: inherit; color: var(--text-dark); background: var(--bg-light); transition: border-color .2s, background .2s; outline: none; width: 100%; box-sizing: border-box; }
.w7ka8f8-cf-field input:focus, .w7ka8f8-cf-field select:focus, .w7ka8f8-cf-field textarea:focus { border-color: var(--primary); background: #fff; }
.w7ka8f8-cf-field textarea { resize: vertical; min-height: 100px; }
.w7ka8f8-cf-success { text-align: center; padding: 48px 24px; }
.w7ka8f8-cf-success h3 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 12px 0 8px; }
.w7ka8f8-cf-success p { color: var(--text-muted); }
.w7ka8f8-cf-text-row { text-align: center; margin-top: 14px; font-size: .92rem; color: var(--text-muted); }
.w7ka8f8-cf-text-btn { display: inline-flex; align-items: center; margin-left: 8px; background: #0284c7; color: #fff; padding: 8px 18px; border-radius: 8px; font-weight: 700; }
.w7ka8f8-cf-text-btn:hover { opacity: .9; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .about-mini-grid { grid-template-columns: 1fr; gap: 40px; }
  .city-page-grid { grid-template-columns: 1fr !important; }
  .city-sidebar { position: static !important; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .about-owner-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .about-owner-photo { margin: 0 auto; width: 220px; height: 220px; }
  .about-owner-tagline { border-left: none; border-top: 4px solid var(--accent); padding-left: 0; padding-top: 16px; }
}

/* ── Sticky mobile call/quote bar (all pages) ── */
.w7ka8f8-mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200; background: var(--secondary); box-shadow: 0 -2px 12px rgba(0,0,0,.28); padding: 8px; gap: 8px; }
.w7ka8f8-mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 8px; border-radius: 9px; font-weight: 800; font-size: .95rem; transition: opacity .2s; }
.w7ka8f8-mobile-cta a:hover { opacity: .92; }
.w7ka8f8-mcta-call { background: #16a34a; color: #fff; }
.w7ka8f8-mcta-call svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .w7ka8f8-mobile-cta { display: flex; }
  body.w7ka8f8-has-mcta { padding-bottom: 70px; }
  /* Header — logo truncates, phone hides, hamburger appears */
  .header-inner { flex-wrap: nowrap; height: auto; padding: 12px 16px; gap: 8px; }
  .site-logo { gap: 9px; flex: 1; min-width: 0; }
  .site-logo-icon { height: 38px; width: 38px; border-radius: 9px; }
  .site-logo-text { overflow: hidden; }
  .site-logo-name { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
  .site-logo-tagline { display: none; }
  .header-phone { display: none; }
  /* Mobile = call-first: drop the header "Get Free Estimate"/"Schedule" pill so the
     sticky header is just logo + menu. The estimate CTA lives in the bottom sticky bar.
     !important because each template's own .vd-cta-pill { display:inline-flex } rule is
     concatenated AFTER this one (equal specificity, later wins) and would re-show it. */
  .vd-cta-pill, .iron-cta-pill, .apex-cta-pill { display: none !important; }
  .w7ka8f8-nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; }
  .header-nav { display: none; width: 100%; order: 3; }
  body.nav-open .header-nav { display: block; }
  body.nav-open .header-inner { flex-wrap: wrap; }
  .header-nav ul { flex-direction: column; gap: 0; padding: 8px 0 4px; }
  .header-nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); display: block; font-size: .95rem; }
  /* Hero */
  .site-hero { padding: 52px 0 40px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 320px; justify-content: center; }
  .hero-stats { gap: 0; }
  .hero-stat { padding: 0 10px; }
  .hero-stat-num { font-size: 1.3rem; }
  .hero-stat-label { font-size: .62rem; }
  .hero-badges { gap: 6px; }
  .hero-badge { font-size: .72rem; padding: 4px 10px; }
  /* Sections */
  .about-mini { padding: 52px 0; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .about-stat-box { padding: 16px 12px; }
  .about-stat-num { font-size: 1.7rem; }
  .owner-card { flex-direction: column; text-align: center; padding: 16px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .gallery-section { padding: 52px 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
  .gallery-tag { font-size: .62rem; padding: 3px 8px; }
  .w7ka8f8-lightbox-prev, .w7ka8f8-lightbox-next { width: 40px; height: 40px; }
  .w7ka8f8-lightbox-prev { left: 10px; }
  .w7ka8f8-lightbox-next { right: 10px; }
  .how-steps { gap: 20px; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .why-card { padding: 20px 16px; }
  .faq-btn { font-size: .9rem; padding: 16px 18px; }
  /* Content components */
  .page-content .w7ka8f8-band:nth-of-type(even) { padding: 16px; margin: 12px 0; }
  .w7ka8f8-feature-card { padding: 20px; }
  .w7ka8f8-price-callout, .w7ka8f8-cta-strip { padding: 20px; }
  .w7ka8f8-cta-strip { flex-direction: column; align-items: stretch; }
  .w7ka8f8-cta-strip-btn { width: 100%; justify-content: center; }
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cta-band { padding: 44px 0; }
  .w7ka8f8-cf-row { grid-template-columns: 1fr; }
  .w7ka8f8-contact-form { padding: 24px 16px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; margin: 32px 0 48px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Partner badge (renders only when SF_PARTNER is set) ── */
.lux-partner-badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--accent); color: var(--accent); padding: 8px 18px; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; }

/* ══════════════ VERDANT DESIGN SYSTEM ══════════════ */
:root {
  --accent-dark: #0b7a52;
  --tint:        #eef7f4;
  --ink:         #15201b;
  --ink-soft:    #3c4a43;
  --ink-muted:   #7b8a83;
  --vd-radius:   18px;
  --vd-shadow:   0 16px 44px rgba(18,60,40,.10);
  --vd-border:   #e6ece8;
}
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.01em; line-height: 1.12; text-transform: none; }
a { color: var(--accent); }
.vd-accent { color: var(--accent); }
.vd-muted { color: var(--ink-muted); font-weight: 800; }

/* ── Eyebrow ── */
.vd-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .04em; margin-bottom: 14px; }
.vd-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.vd-eyebrow--light { color: #fff; }
.vd-eyebrow--light::before { background: var(--accent); }

/* ── Buttons ── */
.vd-btn, .vd-btn-ghost, .vd-btn-sm { display: inline-flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .95rem; padding: 15px 28px; border-radius: 12px; transition: transform .15s, box-shadow .2s, background .2s; }
.vd-btn { background: var(--accent); color: #fff !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 36%, transparent); }
.vd-btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
.vd-btn-ghost { background: rgba(255,255,255,.12); color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.vd-btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.vd-btn-sm { background: var(--accent); color: #fff !important; font-size: .82rem; padding: 11px 20px; border-radius: 10px; }
.vd-btn-sm:hover { background: var(--accent-dark); }

/* ── Top bar ── */
.vd-topbar { background: #fff; border-bottom: 1px solid var(--vd-border); font-size: .85rem; }
.vd-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vd-topbar-addr { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-weight: 500; }
.vd-topbar-addr svg { color: var(--accent); }
.vd-topbar-right { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary); border-radius: 30px; padding: 6px 8px 6px 16px; }
.vd-topbar-email { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-weight: 500; }
.vd-topbar-email:hover { color: #fff; }
.vd-topbar-phone { background: var(--accent); color: #fff !important; font-weight: 700; padding: 6px 16px; border-radius: 24px; }

/* ── Header (white) ── */
.site-header { background: #fff; box-shadow: 0 1px 0 var(--vd-border); }
.site-header.w7ka8f8-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.header-inner { height: 76px; gap: 20px; }
.site-logo-name { color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.site-logo-tagline { color: var(--ink-muted); }
.header-nav a { color: #28332e; font-weight: 600; font-size: .9rem; }
.header-nav a:hover { color: var(--accent); background: transparent; }
.header-phone { background: transparent; color: var(--ink) !important; padding: 0; font-weight: 700; gap: 7px; }
.header-phone svg { display: none; }
.header-phone::before { content: 'Call Us:'; color: var(--ink-muted); font-weight: 600; margin-right: 4px; }
.header-phone:hover { color: var(--accent) !important; opacity: 1; }
.w7ka8f8-nav-toggle span { background: var(--ink); }
.vd-cta-pill { display: inline-flex; align-items: center; background: var(--accent); color: #fff !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .85rem; padding: 13px 22px; border-radius: 12px; flex-shrink: 0; transition: background .2s, transform .15s; }
.vd-cta-pill:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* ══════════════ HOMEPAGE ══════════════ */
/* ── Hero ── */
.vd-hero { position: relative; background: var(--secondary); background-size: cover; background-position: center; }
.vd-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(8,30,20,.86) 0%, rgba(8,30,20,.7) 45%, rgba(8,30,20,.25) 100%); }
.vd-hero-inner { position: relative; z-index: 2; padding: 120px 24px; max-width: 1200px; }
.vd-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 20px; }
.vd-hero-sub { color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.7; max-width: 540px; margin-bottom: 30px; }
.vd-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── About + stats ── */
.vd-about { padding: 90px 0; background: #fff; }
.vd-about-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-bottom: 52px; }
.vd-about-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--ink); max-width: 760px; }
.vd-circle-btn { width: 132px; height: 132px; border-radius: 50%; background: var(--accent); color: #fff !important; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .82rem; line-height: 1.3; flex-shrink: 0; transition: transform .2s, background .2s; }
.vd-circle-btn:hover { background: var(--accent-dark); transform: rotate(8deg); }
.vd-stats { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 18px; }
.vd-stats-media { border-radius: var(--vd-radius); overflow: hidden; box-shadow: var(--vd-shadow); min-height: 200px; background: var(--tint); }
.vd-stats-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-stat { background: var(--tint); border-radius: var(--vd-radius); padding: 26px 24px; display: flex; flex-direction: column; }
.vd-stat b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.5rem; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.vd-stat-h { font-weight: 700; color: var(--ink); margin-bottom: 26px; }
.vd-stat-p { font-size: .88rem; color: var(--ink-muted); line-height: 1.55; margin-top: auto; }

/* ── Why ── */
.vd-why { padding: 90px 0; background: var(--tint); }
.vd-why-head { text-align: center; margin-bottom: 44px; }
.vd-why-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--ink); }
.vd-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vd-why-card { background: #fff; border-radius: var(--vd-radius); padding: 30px 26px; box-shadow: var(--vd-shadow); }
.vd-why-ic { width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.vd-why-ic svg { width: 26px; height: 26px; }
.vd-why-card h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 9px; }
.vd-why-card p { font-size: .9rem; color: var(--ink-muted); line-height: 1.6; }

/* ── 3-step process ── */
.vd-process { padding: 90px 0; background: #fff; }
.vd-process-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.vd-process-copy h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--ink); margin-bottom: 30px; }
.vd-steps { display: grid; gap: 24px; margin-bottom: 28px; }
.vd-step { display: flex; gap: 18px; position: relative; }
.vd-step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 42px; bottom: -24px; width: 2px; background: repeating-linear-gradient(var(--accent) 0 4px, transparent 4px 9px); opacity: .4; }
.vd-step-num { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vd-step-tx h3 { font-size: 1.08rem; color: var(--ink); margin-bottom: 6px; }
.vd-step-tx p { font-size: .9rem; color: var(--ink-muted); line-height: 1.6; }
.vd-process-foot { font-size: .92rem; color: var(--ink-muted); line-height: 1.65; margin-bottom: 22px; max-width: 520px; }
.vd-process-media { position: relative; }
.vd-process-img { width: 100%; border-radius: var(--vd-radius); display: block; object-fit: cover; aspect-ratio: 4/4.2; box-shadow: var(--vd-shadow); }
/* Rotating "same-day" seal */
.vd-seal { position: absolute; right: -22px; top: -22px; width: 116px; height: 116px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--vd-shadow); }
.vd-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: vd-spin 14s linear infinite; }
.vd-seal-ring text { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 8.3px; font-weight: 700; letter-spacing: .12em; }
.vd-seal-play { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
@keyframes vd-spin { to { transform: rotate(360deg); } }

/* ── Before / After slider ── */
.vd-ba { padding: 90px 0; background: var(--tint); }
.vd-ba-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 38px; flex-wrap: wrap; }
.vd-ba-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--ink); }
.vd-ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.vd-ba-card { background: #fff; border-radius: var(--vd-radius); padding: 12px; box-shadow: var(--vd-shadow); }
.vd-ba-slider { position: relative; border-radius: 12px; overflow: hidden; user-select: none; line-height: 0; }
.vd-ba-after { display: block; width: 100%; height: auto; }
.vd-ba-before { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.vd-ba-before img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; }
.vd-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.vd-ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vd-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vd-ba-labels { display: flex; justify-content: space-between; padding: 12px 8px 4px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--ink); font-size: .92rem; }

/* ── Testimonials ── */
.vd-reviews { padding: 90px 0; background: #fff; }
.vd-reviews-head { text-align: center; margin-bottom: 44px; }
.vd-reviews-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--ink); }
.vd-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vd-rev-card { background: #fff; border: 1px solid var(--vd-border); border-radius: var(--vd-radius); padding: 28px; box-shadow: var(--vd-shadow); display: flex; flex-direction: column; }
.vd-rev-stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 14px; }
.vd-rev-text { color: var(--ink-soft); font-size: .92rem; line-height: 1.7; margin-bottom: 20px; flex: 1; }
.vd-rev-foot { display: flex; align-items: center; gap: 11px; }
.vd-rev-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; flex-shrink: 0; }
.vd-rev-who b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .92rem; color: var(--ink); }
.vd-rev-google { margin-left: auto; }
.vd-rev-google svg { width: 20px; height: 20px; }

/* ── Areas ── */
.vd-areas { padding: 90px 0; background: var(--tint); }
.vd-areas h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ink); margin-bottom: 24px; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.vd-chip { background: #fff; border: 1px solid var(--vd-border); color: var(--ink-soft); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .82rem; padding: 9px 18px; border-radius: 30px; transition: background .2s, color .2s; }
.vd-chip:first-child, .vd-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.vd-chip:hover { background: var(--accent); color: #fff; }
.vd-map { border-radius: var(--vd-radius); overflow: hidden; box-shadow: var(--vd-shadow); }
.vd-map iframe { display: block; width: 100%; border: 0; }

/* ── Bottom form ── */
.vd-form-section { padding: 90px 0; background: var(--secondary); }
.vd-form-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.vd-form-copy h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 16px; }
.vd-form-copy p { color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.7; margin-bottom: 26px; }
.vd-form-call { display: inline-flex; align-items: center; gap: 14px; }
.vd-form-call .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vd-form-call .ic svg { width: 24px; height: 24px; }
.vd-form-call span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); }
.vd-form-call b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; color: #fff; }
.vd-form-card { background: #fff; border-radius: var(--vd-radius); padding: 32px; box-shadow: var(--vd-shadow); }
.vd-form-card h3 { color: var(--ink); font-size: 1.3rem; margin-bottom: 18px; }

/* ══════════════ INNER-PAGE OVERRIDES (shared base classes) ══════════════ */
.site-hero { background: var(--secondary); }
.site-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.btn-primary { background: var(--accent); border-radius: 12px; font-family: 'Plus Jakarta Sans', sans-serif; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { border-radius: 12px; font-family: 'Plus Jakarta Sans', sans-serif; }
.section-header h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--ink); }
.services-section, .reviews-section, .brands-section { background: #fff; }
.how-section { background: var(--tint); }
.service-card { border-radius: var(--vd-radius); border-color: transparent; }
.service-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, #fff); box-shadow: var(--vd-shadow); }
.service-icon { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); border-radius: 13px; }
.service-link, a { color: var(--accent); }
.how-step-num { background: var(--accent); font-family: 'Plus Jakarta Sans', sans-serif; }
.about-mini, .cta-band { background: var(--secondary); }
.about-stat-num, .about-checks li::before { color: var(--accent); }
.owner-photo, .about-owner-photo { border-color: var(--accent); }
.why-section { padding: 80px 0; background: var(--tint); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 22px; }
.why-card { background: #fff; border-radius: var(--vd-radius); padding: 28px; box-shadow: var(--vd-shadow); }
.why-icon { width: 52px; height: 52px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.why-icon svg { width: 26px; height: 26px; }
.why-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
.faq-section { background: #fff; }
.faq-btn { font-family: 'Plus Jakarta Sans', sans-serif; }
.w7ka8f8-mcta-call { background: #16a34a; }
.review-avatar-mono, .brand-initial { background: var(--accent); }
.footer-phone, .footer-col a:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 980px) {
  .vd-stats { grid-template-columns: 1fr 1fr; }
  .vd-why-grid { grid-template-columns: 1fr 1fr; }
  .vd-process-grid, .vd-form-grid { grid-template-columns: 1fr; }
  .vd-rev-grid { grid-template-columns: 1fr; }
  .vd-ba-grid { grid-template-columns: 1fr; }
  .vd-about-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vd-stats, .vd-why-grid { grid-template-columns: 1fr; }
  .vd-hero-inner { padding: 84px 24px; }
}
/* Mobile menu fix — same bug the Apex block below patches for itself: this skin's
   .header-inner { height: 76px } is concatenated AFTER the base mobile
   height:auto rule (equal specificity, later wins), so the open nav wrapped
   below a white box locked at 76px — dark links, no background, spilling onto
   the dark hero and reading as "menu hidden behind the hero". Let the header
   grow, give the open nav an opaque white panel, and lift the header above the
   sticky mobile CTA bar (z-index 1200). Scoped to the hamburger breakpoint. */
@media (max-width: 768px) {
  body.nav-open .site-header  { z-index: 1300; }
  body.nav-open .header-inner { height: auto; }
  body.nav-open .header-nav   { background: #fff; }
  body.nav-open .header-nav a { color: var(--ink); border-bottom-color: var(--vd-border); }
}

/* ══ MEGA_CHILD: Tier-1 chassis + branch chrome ═══════════════════════════════ */

:root {
  --mg-surface: #f9fafb;
  --mg-card: #ffffff;
  --mg-ink: #111928;
  --mg-muted: #6b7280;
  --mg-line: #e5e7eb;
  --mg-cta: var(--primary, #1d4ed8);
  --mg-second: var(--accent, #6b7280);
  --mg-tint: color-mix(in srgb, var(--primary, #1d4ed8) 6%, #fff);
  --mg-tint-line: color-mix(in srgb, var(--primary, #1d4ed8) 16%, #fff);
  --mg-display-w: 700;
  --mg-track: -.005em;
  --mg-shadow-sm: 0 1px 3px rgba(17,25,40,.06);
  --mg-shadow-md: 0 8px 26px rgba(17,25,40,.09);
  --mg-shadow-lg: 0 18px 44px rgba(17,25,40,.14);
}
body { background: var(--mg-surface); color: var(--mg-ink); }
body p, body li { line-height: 1.8; }
h1, h2, h3, h4 { color: var(--mg-ink); font-weight: var(--mg-display-w); letter-spacing: var(--mg-track); }
.section-header h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
.section-header p { color: var(--mg-muted); }
a { color: var(--mg-cta); }
/* Rule 2 — the accent color is NOT a button color; CTAs are always the primary. */
.btn-primary { background: var(--mg-cta); color: #fff; border-radius: 9px; box-shadow: 0 4px 14px color-mix(in srgb, var(--mg-cta) 32%, transparent); }
.btn-primary:hover { opacity: .93; }

/* ══ Interior pages get the SAME design (item 4) ══════════════════════════════
   Everything above the fold was branded and everything past the homepage was the
   fleet default. These rules cover every generated interior template - service
   pages, guides, blog posts, the signature pages, /locations - so a visitor never
   crosses an invisible line between "designed" and "generic". */
.page-content-wrapper { background: #fff; padding: 8px 0 72px; }
.page-hero-section { background: linear-gradient(160deg, var(--mg-ink) 0%, #0b1220 100%); }
/* Interior hero PHOTO (service + city pages): the homepage hero image behind the
   same darkened scrim, so the title band is branded instead of a flat gradient.
   Only present when sf_role_hero_bg() actually emitted an image, so a site with no
   hero yet keeps the gradient above and nothing here applies. */
.page-hero-section.w7ka8f8-hero-photo { position: relative; overflow: hidden; }
.page-hero-section .w7ka8f8-role-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.page-hero-section .w7ka8f8-hero-scrim--page { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,25,40,.86) 0%, rgba(17,25,40,.76) 55%, rgba(11,18,32,.92) 100%); }
.page-hero-section.w7ka8f8-hero-photo > .container { position: relative; z-index: 2; }
.page-hero-section.w7ka8f8-hero-photo h1,
.page-hero-section.w7ka8f8-hero-photo .w7ka8f8-hero-subhead,
.page-hero-section.w7ka8f8-hero-photo .w7ka8f8-hero-bullets li { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.page-content { max-width: 78ch; }
.page-content > h2 { position: relative; font-size: clamp(1.4rem, 2.5vw, 1.85rem); margin: 44px 0 16px; padding-bottom: 12px; }
.page-content > h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--mg-cta); border-radius: 2px; }
.page-content h3 { font-size: 1.16rem; margin: 28px 0 10px; }
.page-content h4 { font-size: 1.02rem; margin: 22px 0 8px; }
.page-content p, .page-content li { color: #374151; font-size: 1.01rem; line-height: 1.8; }
.page-content ul, .page-content ol { padding-left: 22px; margin: 14px 0 20px; }
.page-content li { margin: 7px 0; }
.page-content ul li::marker { color: var(--mg-cta); }
.page-content a { color: var(--mg-cta); font-weight: 600; }
.page-content a:hover { text-decoration: underline; }
.page-content strong { color: var(--mg-ink); }
.page-content blockquote { margin: 24px 0; border-left: 4px solid var(--mg-cta); background: var(--mg-tint); border-radius: 0 12px 12px 0; padding: 18px 24px; color: var(--mg-ink); font-size: 1.03rem; }
.page-content blockquote p:last-child { margin-bottom: 0; }
.page-content img { border-radius: 14px; box-shadow: var(--mg-shadow-sm); }
.page-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0 28px; font-size: .95rem; border: 1px solid var(--mg-line); border-radius: 14px; overflow: hidden; }
.page-content table th { background: var(--mg-surface); color: var(--mg-ink); font-weight: 800; text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--mg-line); }
.page-content table td { padding: 13px 16px; border-bottom: 1px solid var(--mg-line); color: #374151; }
.page-content table tr:last-child td { border-bottom: 0; }
.page-content hr { border: 0; border-top: 1px solid var(--mg-line); margin: 34px 0; }
/* Content-pipeline fragments that ship inside the_content on interior pages. */
.w7ka8f8-feature-card, .w7ka8f8-steps, .w7ka8f8-callout, .w7ka8f8-cost-table, .w7ka8f8-checklist { border-radius: 14px; }
.w7ka8f8-feature-card { background: var(--mg-card); border: 1px solid var(--mg-line); box-shadow: var(--mg-shadow-sm); }
.w7ka8f8-callout { background: var(--mg-tint); border: 1px solid var(--mg-tint-line); padding: 18px 22px; }
/* Interior CTA bands + the global fallback lead form. */
.cta-band, .w7ka8f8-global-estimate { background: var(--mg-surface); border-top: 1px solid var(--mg-line); }
.cta-band h2 { color: var(--mg-ink); }
.w7ka8f8-contact-form { background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 18px; box-shadow: var(--mg-shadow-sm); }
.w7ka8f8-contact-form input, .w7ka8f8-contact-form select, .w7ka8f8-contact-form textarea { border: 1px solid var(--mg-line); border-radius: 9px; }
.w7ka8f8-contact-form input:focus, .w7ka8f8-contact-form select:focus, .w7ka8f8-contact-form textarea:focus { outline: none; border-color: var(--mg-cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-cta) 16%, transparent); }
/* Breadcrumbs + pagination + archive cards. */
.w7ka8f8-breadcrumbs { color: var(--mg-muted); font-size: .84rem; }
.w7ka8f8-breadcrumbs a { color: var(--mg-muted); }
.w7ka8f8-breadcrumbs a:hover { color: var(--mg-cta); }
.blog-card, .archive-card, .w7ka8f8-post-card { background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 16px; box-shadow: var(--mg-shadow-sm); }
.w7ka8f8-sal-section { background: var(--mg-surface); border-top: 1px solid var(--mg-line); }
.w7ka8f8-sal-heading { color: var(--mg-ink); font-weight: 800; }
.w7ka8f8-sal-cloud a { color: var(--mg-muted); }
.w7ka8f8-sal-cloud a:hover { color: var(--mg-cta); }

/* ══ Header lockup + button hierarchy — SHARED by the hub and its branches ════
   A branch wears the parent brand's mark, so the lockup rules have to be identical
   on both roles or the two sites stop looking like one company. */
.site-header { background: #fff; box-shadow: 0 1px 0 var(--mg-line), 0 6px 20px rgba(17,25,40,.05); }
.header-inner { min-height: 82px; }
/* Wordmark sources are wide marks on square canvases with generous margins (the
   same family as the umbrella's -full renders), so a small contain box shows a
   tiny mark. Umbrella-proven treatment: a bigger fixed box + cover, which crops
   the canvas whitespace instead of shrinking the mark. */
.w7ka8f8-mgh-wordmark { display: block; height: 64px; width: 230px; max-width: 230px; object-fit: cover; object-position: center; }
.w7ka8f8-mgh-lockup { display: flex; align-items: center; gap: 14px; }
.w7ka8f8-mgh-lockup .site-logo-icon { width: 48px; height: 48px; }
.site-logo-name { color: var(--mg-ink); letter-spacing: var(--mg-track); }
.site-logo-tagline { color: var(--mg-muted); font-size: .74rem; font-weight: 600; letter-spacing: .01em; }
.w7ka8f8-mgh-has-wordmark .site-logo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Branch region label: "[parent wordmark] | California". */
.w7ka8f8-mgc-region { display: inline-flex; align-items: center; font-size: 1.05rem; font-weight: 700; color: var(--mg-ink); letter-spacing: -.01em; white-space: nowrap; padding-left: 15px; border-left: 1px solid var(--mg-line); align-self: center; height: 34px; }
.header-nav a { color: var(--mg-ink); font-size: .88rem; }
.header-nav a:hover { color: var(--mg-cta); }
/* Desktop header: phone is PLAIN TEXT, the estimate CTA is the only solid button. */
.header-phone.w7ka8f8-mgh-phone { background: none !important; padding: 6px 4px; border-radius: 6px; color: var(--mg-ink) !important; font-weight: 700; font-size: 1rem; white-space: nowrap; box-shadow: none; transition: color .15s, background .15s; }
.header-phone.w7ka8f8-mgh-phone:hover, .header-phone.w7ka8f8-mgh-phone:focus-visible { color: var(--mg-cta) !important; background: var(--mg-tint) !important; }
.header-phone.w7ka8f8-mgh-phone:active { background: var(--mg-tint-line) !important; }
.w7ka8f8-mega-book { display: inline-flex; align-items: center; justify-content: center; background: var(--mg-cta); color: #fff !important; padding: 12px 22px; border-radius: 9px; font-weight: 800; font-size: .93rem; flex-shrink: 0; box-shadow: 0 3px 12px color-mix(in srgb, var(--mg-cta) 34%, transparent); transition: transform .1s, opacity .2s; }
.w7ka8f8-mega-book:hover { opacity: .93; transform: translateY(-1px); color: #fff !important; }
/* Hero pairing: solid brand CALL + transparent white-outline estimate. */
.site-hero .btn-primary, .w7ka8f8-mgh-cta-call { background: var(--mg-cta); color: #fff !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--mg-cta) 36%, transparent); }
.site-hero .btn-primary:hover, .w7ka8f8-mgh-cta-call:hover { opacity: .93; color: #fff !important; }
.site-hero .btn-secondary, .w7ka8f8-mgh-cta-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.75); box-shadow: none; }
.site-hero .btn-secondary:hover, .w7ka8f8-mgh-cta-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff !important; }
/* Sticky mobile bar: call solid, estimate outlined. */
.w7ka8f8-mcta-call { background: var(--mg-cta) !important; color: #fff !important; }
.w7ka8f8-mcta-book { background: #fff !important; color: var(--mg-cta) !important; border: 1.5px solid var(--mg-tint-line); }
@media (max-width: 1100px) {
  .w7ka8f8-mgh-wordmark { height: 52px; width: 186px; max-width: 186px; }
  .w7ka8f8-mgc-region { font-size: .95rem; padding-left: 12px; }
}
@media (max-width: 768px) {
  .header-inner { min-height: 68px; }
  .w7ka8f8-mgh-wordmark { height: 46px; width: 164px; max-width: 164px; }
  .w7ka8f8-mgc-region { font-size: .88rem; padding-left: 10px; height: 26px; }
  .header-phone.w7ka8f8-mgh-phone { display: none; }
  .w7ka8f8-mega-book { display: none; }
  /* The base theme paints the hamburger bars #fff (built for dark headers); the
     mega header is WHITE, so the toggle was invisible on mobile. Ink it. */
  .w7ka8f8-nav-toggle span { background: var(--mg-ink) !important; }
  /* The utility strip wraps to two lines on narrow screens; Special Offers is
     the drop (user directive) - it stays reachable from the offers strip/page. */
  .w7ka8f8-mega-util-offers { display: none; }
}


/* ══ Photo service cards (item 8) — photo top, copy below, round icon chip in
   the bottom-right corner of the body. ══════════════════════════════════════ */
.w7ka8f8-mgh-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 36px; }
.w7ka8f8-mgh-pcard { display: flex; flex-direction: column; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 16px; overflow: hidden; box-shadow: var(--mg-shadow-sm); transition: transform .16s, box-shadow .16s, border-color .16s; }
.w7ka8f8-mgh-pcard:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow-md); border-color: var(--mg-tint-line); }
.w7ka8f8-mgh-pcard-img { display: block; background: var(--mg-tint); }
.w7ka8f8-mgh-pcard-img img { display: block; width: 100%; height: 190px; object-fit: cover; }
.w7ka8f8-mgh-pcard-body { position: relative; display: block; padding: 24px 24px 22px; flex: 1; }
.w7ka8f8-mgh-pcard-body h3 { font-size: 1.08rem; margin: 0 0 8px; padding-right: 52px; line-height: 1.35; }
.w7ka8f8-mgh-pcard-body p { color: var(--mg-muted); font-size: .92rem; margin: 0 0 14px; }
.w7ka8f8-mgh-pcard-more { display: inline-block; font-weight: 800; font-size: .87rem; color: var(--mg-cta); }
.w7ka8f8-mgh-pcard-ic { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--mg-tint); border: 1px solid var(--mg-tint-line); color: var(--mg-cta); display: inline-flex; align-items: center; justify-content: center; }
.w7ka8f8-mgh-pcard-ic svg { width: 21px; height: 21px; }

/* ══ Parts comparison (item 10) — vertical tab rail + green/red compare boxes ══ */
.w7ka8f8-mgh-parts { padding: 84px 0; background: var(--mg-surface); border-top: 1px solid var(--mg-line); }
.w7ka8f8-mgh-parts-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 26px; margin-top: 36px; align-items: start; }
.w7ka8f8-mgh-parts-tabs { display: flex; flex-direction: column; gap: 6px; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 16px; padding: 10px; box-shadow: var(--mg-shadow-sm); position: sticky; top: 92px; }
.w7ka8f8-mgh-parts-tab { text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .94rem; color: var(--mg-ink); padding: 13px 16px; border-radius: 10px; transition: background .14s, color .14s; }
.w7ka8f8-mgh-parts-tab:hover { background: var(--mg-tint); }
.w7ka8f8-mgh-parts-tab.w7ka8f8-mgh-parts-on { background: var(--mg-cta); color: #fff; }
.w7ka8f8-mgh-parts-panels { min-width: 0; }
.w7ka8f8-mgh-parts-panel[hidden] { display: none; }
.w7ka8f8-mgh-parts-panel h3 { font-size: 1.35rem; margin: 0 0 10px; }
.w7ka8f8-mgh-parts-intro { color: var(--mg-muted); font-size: 1rem; margin: 0 0 22px; max-width: 74ch; }
.w7ka8f8-mgh-parts-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.w7ka8f8-mgh-parts-box { border-radius: 16px; padding: 22px; border: 1px solid; }
.w7ka8f8-mgh-parts-us { background: #f0fdf4; border-color: #bbf7d0; }
.w7ka8f8-mgh-parts-them { background: #fef2f2; border-color: #fecaca; }
.w7ka8f8-mgh-parts-badge { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.w7ka8f8-mgh-parts-us .w7ka8f8-mgh-parts-badge { color: #15803d; }
.w7ka8f8-mgh-parts-them .w7ka8f8-mgh-parts-badge { color: #b91c1c; }
.w7ka8f8-mgh-parts-mark { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.w7ka8f8-mgh-parts-us .w7ka8f8-mgh-parts-mark { background: #16a34a; }
.w7ka8f8-mgh-parts-them .w7ka8f8-mgh-parts-mark { background: #dc2626; }
.w7ka8f8-mgh-parts-mark svg { width: 14px; height: 14px; }
.w7ka8f8-mgh-parts-photo { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: rgba(255,255,255,.6); }
.w7ka8f8-mgh-parts-photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.w7ka8f8-mgh-parts-box p { margin: 0; font-size: .93rem; color: #1f2937; }

/* ══ Join our team (item 11) ═════════════════════════════════════════════════ */
.w7ka8f8-mgh-join { background: var(--mg-surface); border-top: 1px solid var(--mg-line); }
.w7ka8f8-mgh-join-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 20px; overflow: hidden; box-shadow: var(--mg-shadow-md); }
.w7ka8f8-mgh-join-card.w7ka8f8-mgh-join-nophoto { grid-template-columns: 1fr; }
.w7ka8f8-mgh-join-photo { min-height: 260px; background: var(--mg-tint); }
.w7ka8f8-mgh-join-photo img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.w7ka8f8-mgh-join-body { padding: 44px 42px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.w7ka8f8-mgh-join-body h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 0 0 14px; }
.w7ka8f8-mgh-join-body p { color: var(--mg-muted); font-size: 1rem; margin: 0 0 24px; max-width: 60ch; }

/* ══ Coupons: the action is PRINT (item 6) ═══════════════════════════════════ */
.w7ka8f8-mega-coupon-cta { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .88rem; white-space: nowrap; }
.w7ka8f8-mega-coupon-cta:hover { text-decoration: underline; }
@media print {
  .w7ka8f8-mega-coupon-cta, .w7ka8f8-mgh-pstrip, .site-header, .site-footer, .w7ka8f8-mega-util { display: none !important; }
  .w7ka8f8-mega-coupon { break-inside: avoid; page-break-inside: avoid; }
}

/* ══ /our-promise page template (item 5c) ════════════════════════════════════ */
.w7ka8f8-mgh-promise-hero { background: linear-gradient(160deg, var(--mg-ink) 0%, #0b1220 100%); color: #fff; padding: 84px 0 78px; text-align: center; }
.w7ka8f8-mgh-promise-hero .container { max-width: 860px; }
.w7ka8f8-mgh-promise-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.05rem); line-height: 1.12; margin: 0 0 18px; }
.w7ka8f8-mgh-promise-hero .w7ka8f8-mgh-eyebrow { color: color-mix(in srgb, var(--mg-cta) 45%, #fff); }
.w7ka8f8-mgh-promise-cosign { color: rgba(255,255,255,.88); font-size: 1.08rem; margin: 0 0 16px; }
.w7ka8f8-mgh-promise-cosign strong { color: #fff; }
.w7ka8f8-mgh-promise-lead { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 660px; margin: 0 auto 26px; }
.w7ka8f8-mgh-promise-hero .w7ka8f8-mgh-hero-ctas { justify-content: center; }
.w7ka8f8-mgh-promise-hero .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.w7ka8f8-mgh-promise-terms { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 18px; padding: 30px 32px; margin: 40px 0 56px; }
.w7ka8f8-mgh-promise-terms h2 { font-size: 1.3rem; margin: 0 0 6px; padding: 0; }
.w7ka8f8-mgh-promise-terms h2::after { display: none; }
.w7ka8f8-mgh-promise-terms p { color: var(--mg-muted); margin: 0; }

/* ══ /locations rich entries (punch-list #22 — these shipped unstyled) ════════ */
.w7ka8f8-loc-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 18px 0 40px; }
.w7ka8f8-loc-entry { background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 14px; padding: 22px 24px 20px; box-shadow: var(--mg-shadow-sm); scroll-margin-top: 90px; transition: box-shadow .15s, border-color .15s; }
.w7ka8f8-loc-entry:hover { box-shadow: var(--mg-shadow-md); border-color: var(--mg-tint-line); }
.w7ka8f8-loc-entry .w7ka8f8-loc-city { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mg-cta); margin: 0 0 6px; }
.w7ka8f8-loc-entry .w7ka8f8-loc-name { font-size: 1.14rem; margin: 0 0 12px; line-height: 1.3; }
.w7ka8f8-loc-entry .w7ka8f8-loc-name a { color: var(--mg-ink); }
.w7ka8f8-loc-entry .w7ka8f8-loc-name a:hover { color: var(--mg-cta); }
.w7ka8f8-loc-entry p { color: var(--mg-muted); font-size: .94rem; margin: 0 0 12px; }
.w7ka8f8-loc-entry .w7ka8f8-nap { background: var(--mg-surface); border: 1px solid var(--mg-line); border-radius: 10px; padding: 12px 14px; font-size: .9rem; color: var(--mg-ink); line-height: 1.55; margin: 0 0 14px; }
.w7ka8f8-loc-entry .w7ka8f8-nap a { font-weight: 800; color: var(--mg-cta); }
.w7ka8f8-visit-child { margin: 0 !important; }
.w7ka8f8-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mg-cta); color: #fff !important; padding: 11px 20px; border-radius: 9px; font-weight: 800; font-size: .9rem; box-shadow: 0 3px 12px color-mix(in srgb, var(--mg-cta) 30%, transparent); transition: opacity .15s, transform .1s; }
.w7ka8f8-btn:hover { opacity: .93; transform: translateY(-1px); color: #fff !important; }

@media (max-width: 900px) {
  .w7ka8f8-mgh-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .w7ka8f8-mgh-franchise .container { grid-template-columns: 1fr; text-align: center; }
  .w7ka8f8-mgh-franchise p { margin: 0 auto; }
}
@media (max-width: 768px) {
  .w7ka8f8-mega-util-inner { justify-content: center; }
  .w7ka8f8-mega-util-phone { display: none; }
  .w7ka8f8-mega-book { display: none; } /* booking lives in the sticky bottom bar on mobile */
  .w7ka8f8-mega-find-inner { flex-direction: column; text-align: center; }
  .w7ka8f8-mega-find-btns { justify-content: center; }
  .w7ka8f8-mega-find-badge { display: none; }
  .w7ka8f8-mega-coupon-amt { width: 84px; font-size: 1.25rem; }
  .w7ka8f8-mgh-hero { padding: 58px 0 96px; }
  .w7ka8f8-mgh-heromoats { gap: 8px 18px; margin-top: 18px; }
  .w7ka8f8-mgh-heromoat { font-size: .86rem; }
  .w7ka8f8-mgh-lead { margin-top: -30px; }
  .w7ka8f8-mgh-lead-card { padding: 24px 18px 20px; }
  .w7ka8f8-mgh-revtrack { padding: 6px 16px 16px; gap: 14px; }
  .w7ka8f8-mgh-revslider::before, .w7ka8f8-mgh-revslider::after { width: 24px; }
  .w7ka8f8-loc-entries { grid-template-columns: 1fr; }
  .w7ka8f8-mgh-services, .w7ka8f8-mgh-values, .w7ka8f8-mgh-why, .w7ka8f8-mgh-story, .w7ka8f8-mgh-mapband,
  .reviews-section, .faq-section, .blog-preview-section, .w7ka8f8-mega-coupons, .w7ka8f8-mgh-join { padding: 54px 0; }
  .w7ka8f8-mgh-proof { gap: 10px 14px; margin-top: 22px; }
  .w7ka8f8-mgh-proof-item { padding: 7px 14px 7px 8px; }
  .w7ka8f8-mgh-proof-txt { font-size: .85rem; }
  .w7ka8f8-mgh-pstrip-in { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .w7ka8f8-mgh-pstrip-txt { font-size: .88rem; flex: 1 1 auto; }
  .w7ka8f8-mgh-pstrip-link { margin-left: 0; }
  .w7ka8f8-mgh-join-card, .w7ka8f8-mgh-join-card.w7ka8f8-mgh-join-nophoto { grid-template-columns: 1fr; }
  .w7ka8f8-mgh-join-body { padding: 30px 22px; }
  .w7ka8f8-mega-moats-grid { gap: 20px 24px; }
  .w7ka8f8-mgh-parts { padding: 54px 0; }
  .w7ka8f8-mgh-parts-wrap { grid-template-columns: 1fr; }
  .w7ka8f8-mgh-parts-tabs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .w7ka8f8-mgh-parts-tabs::-webkit-scrollbar { display: none; }
  .w7ka8f8-mgh-parts-tab { white-space: nowrap; }
  .w7ka8f8-mgh-pcard-img img { height: 168px; }
}


/* ── Utility strip (mini) ── */
.w7ka8f8-mega-util { background: var(--mg-ink); color: rgba(255,255,255,.72); font-size: .82rem; }
.w7ka8f8-mega-util-inner { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 18px; }
.w7ka8f8-mega-util-links { display: flex; gap: 20px; flex-wrap: wrap; }
.w7ka8f8-mega-util-links a { color: rgba(255,255,255,.72); font-weight: 600; }
.w7ka8f8-mega-util-links a:hover { color: #fff; }
.w7ka8f8-mega-util-family { color: #fff !important; font-weight: 700 !important; }
.w7ka8f8-mgc-branch { margin-left: auto; color: rgba(255,255,255,.55); font-weight: 600; white-space: nowrap; }
.w7ka8f8-mega-util-phone { color: #fff !important; font-weight: 700; white-space: nowrap; }

/* ── Promise strip (identical to the hub's) ── */
.w7ka8f8-mgh-pstrip { background: var(--mg-cta); color: #fff; }
.w7ka8f8-mgh-pstrip-in { max-width: 1200px; margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 14px; }
.w7ka8f8-mgh-pstrip-ic { flex-shrink: 0; display: inline-flex; }
.w7ka8f8-mgh-pstrip-ic svg { width: 20px; height: 20px; }
.w7ka8f8-mgh-pstrip-txt { font-weight: 700; font-size: .95rem; }
.w7ka8f8-mgh-pstrip-link { margin-left: auto; color: #fff !important; font-weight: 800; font-size: .88rem; white-space: nowrap; border-bottom: 2px solid rgba(255,255,255,.55); padding-bottom: 1px; }
.w7ka8f8-mgh-pstrip-link:hover { border-color: #fff; }
.w7ka8f8-mgh-pstrip-x { flex-shrink: 0; background: none; border: 0; color: rgba(255,255,255,.75); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.w7ka8f8-mgh-pstrip-x:hover { color: #fff; }

/* ── Branch identity line ── */
.w7ka8f8-mgc-branchline { background: var(--mg-surface); border-bottom: 1px solid var(--mg-line); }
.w7ka8f8-mgc-branchline-in { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 10px; font-size: .87rem; font-weight: 700; color: var(--mg-ink); letter-spacing: .01em; }
.w7ka8f8-mgc-branchline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-cta); flex-shrink: 0; }

/* ── Moats bar (same round-outline-chip treatment as the hub) ── */
.w7ka8f8-mega-moats { background: #fff; padding: 34px 0; border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.w7ka8f8-mega-moats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
.w7ka8f8-mega-moat { display: flex; align-items: center; gap: 14px; color: var(--mg-ink); font-size: .93rem; font-weight: 600; line-height: 1.45; }
.w7ka8f8-mega-moat-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid var(--mg-tint-line); color: var(--mg-cta); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--mg-shadow-sm); }
.w7ka8f8-mega-moat-ic svg { width: 20px; height: 20px; stroke-width: 1.7; }

/* Header lockup, phone and CTA hierarchy come from megaChassisCss above - the
   branch wears the parent's mark under exactly the same rules as the hub. */

/* ── Parent-brand section ── */
.w7ka8f8-mgc-parent { padding: 78px 0; background: var(--mg-surface); border-top: 1px solid var(--mg-line); }
.w7ka8f8-mgc-parent-card { max-width: 820px; margin: 0 auto; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 20px; padding: 42px 40px; box-shadow: var(--mg-shadow-md); text-align: center; }
.w7ka8f8-mgc-parent-card h2 { font-size: clamp(1.4rem, 2.7vw, 1.95rem); margin: 0 0 16px; }
.w7ka8f8-mgc-parent-card p { color: var(--mg-muted); font-size: 1rem; margin: 0 0 16px; }
.w7ka8f8-mgc-parent-card p:last-of-type { margin-bottom: 24px; }

/* ── Family (umbrella) band ── */
.w7ka8f8-mgc-family { background: var(--mg-ink); color: #fff; padding: 56px 0; }
.w7ka8f8-mgc-family-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.w7ka8f8-mgc-family h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 10px; }
.w7ka8f8-mgc-family p { color: rgba(255,255,255,.8); margin: 0; max-width: 62ch; }
.w7ka8f8-mgc-family .w7ka8f8-mgh-code { color: color-mix(in srgb, var(--mg-cta) 45%, #fff); }
.w7ka8f8-mgc-family .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; white-space: nowrap; }

@media (max-width: 768px) {
  .w7ka8f8-mega-util-inner { flex-wrap: wrap; justify-content: center; padding: 8px 16px; gap: 8px 16px; }
  .w7ka8f8-mgc-branch { margin-left: 0; }
  .w7ka8f8-mega-util-phone { display: none; }
  .w7ka8f8-mgh-pstrip-in { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .w7ka8f8-mgh-pstrip-txt { flex: 1 1 auto; font-size: .88rem; }
  .w7ka8f8-mgh-pstrip-link { margin-left: 0; }
  .w7ka8f8-mgc-branchline-in { padding: 9px 16px; font-size: .82rem; }
  .w7ka8f8-mgc-parent { padding: 52px 0; }
  .w7ka8f8-mgc-parent-card { padding: 28px 22px; }
  .w7ka8f8-mgc-family-inner { flex-direction: column; align-items: flex-start; }
}