/*
Theme Name: Victory Garage Door  Solutions Northridge
Theme URI: https://victorygaragedoorsolutionsnorthridge.com
Description: Professional garage door theme for Victory Garage Door  Solutions Northridge
Version: 1786052479770
*/

:root {
  --primary:       #1c1a17;
  --primary-dark:  #161512;
  --primary-light: #e4e4e3;
  /* CTA-safe variants — only for button/link backgrounds that carry solid WHITE
     text (see ensureContrastOnWhite doc comment). --primary/--accent themselves
     stay untouched: both also do double duty as light-on-dark hover/text colors
     elsewhere, where darkening would hurt rather than help. */
  --primary-cta:   #1c1a17;
  --secondary:     #0f0d0b;
  --accent:        #f4801a;
  --accent-cta:    #ab5a12;
  --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: 8px 24px; height: auto; min-height: 70px; max-width: 1200px; margin: 0 auto; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 1; 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: normal; }
.site-logo-tagline { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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-cta); 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; }
.vphgynd-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.vphgynd-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
body.nav-open .vphgynd-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .vphgynd-nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .vphgynd-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. */
.vphgynd-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.vphgynd-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%); }
.vphgynd-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-cta); 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 */
.vphgynd-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); }
.vphgynd-lightbox.open { display: flex; animation: sfLightboxFade .18s ease-out; }
@keyframes sfLightboxFade { from { opacity: 0; } to { opacity: 1; } }
.vphgynd-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; }
.vphgynd-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); }
.vphgynd-lightbox-nav, .vphgynd-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; }
.vphgynd-lightbox-nav:hover, .vphgynd-lightbox-close:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.vphgynd-lightbox-nav:focus-visible, .vphgynd-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vphgynd-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.vphgynd-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.vphgynd-lightbox-prev:hover, .vphgynd-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.vphgynd-lightbox-close { top: 20px; right: 20px; }
.vphgynd-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; }
/* max-width/overflow-x here (not on body — a global overflow:hidden masks real
   layout bugs elsewhere) is the section-level safety net for the hero content:
   badges/bullets/stat rows below already flex-wrap, but a live 390px mobile audit
   still caught the hero clipped horizontally, so the section itself now clips any
   residual sub-pixel/nowrap overflow instead of widening the page. */
.page-hero-section { background: linear-gradient(135deg, var(--secondary), var(--primary)); padding: 64px 0; text-align: center; max-width: 100%; overflow-x: hidden; }
.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 / .vphgynd-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 > .vphgynd-band > p, .page-content > .vphgynd-band > h2, .page-content > .vphgynd-band > h3,
.page-content > .vphgynd-band > h4, .page-content > .vphgynd-band > ul:not(.vphgynd-signal-list),
.page-content > .vphgynd-band > ol:not(.vphgynd-steps), .page-content > .vphgynd-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(.vphgynd-signal-list), .page-content ol:not(.vphgynd-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(.vphgynd-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 .vphgynd-band { padding: 6px 0; }
.page-content .vphgynd-band:nth-of-type(even) { background: var(--bg-light); border-radius: 16px; padding: 20px 26px; margin: 16px 0; }
.page-content .vphgynd-band > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Lead paragraph + inline tap-to-call */
.vphgynd-lead { font-size: 1.18rem; line-height: 1.7; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.vphgynd-lead-cta { margin: 14px 0 6px; }
.vphgynd-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; }
.vphgynd-inline-cta:hover { opacity: .92; transform: translateY(-1px); text-decoration: none !important; }
.vphgynd-inline-cta svg { width: 16px; height: 16px; }

/* Feature card grid (what's included / services) */
.vphgynd-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin: 22px 0 8px; }
.vphgynd-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; }
.vphgynd-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vphgynd-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; }
.vphgynd-feature-icon svg { width: 24px; height: 24px; }
.vphgynd-feature-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-dark); margin: 0 0 8px; }
.vphgynd-feature-card p { font-size: .97rem; line-height: 1.7; color: #444; margin-bottom: 10px; }
.vphgynd-feature-card p:last-child { margin-bottom: 0; }

/* Signal / warning list (signs you need … / common problems) */
.vphgynd-signal-list { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 12px; }
.vphgynd-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; }
.vphgynd-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; }
.vphgynd-signal-list li strong { color: var(--text-dark); }

/* Numbered stepper (our process) */
.vphgynd-steps { list-style: none; margin: 24px 0; padding: 0; }
.vphgynd-step { position: relative; display: flex; gap: 18px; padding-bottom: 26px; margin: 0; }
.vphgynd-step:last-child { padding-bottom: 0; }
.vphgynd-step:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 2px; background: var(--primary-light); }
.vphgynd-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; }
.vphgynd-step-body { padding-top: 6px; }
.vphgynd-step-body p { margin: 0 0 8px; }
.vphgynd-step-body p:last-child { margin-bottom: 0; }

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

/* Mid-page CTA strip */
.vphgynd-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; }
.vphgynd-cta-strip-text { display: flex; flex-direction: column; gap: 4px; }
.vphgynd-cta-strip-text strong { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; }
.vphgynd-cta-strip-text span { color: rgba(255,255,255,.82); font-size: .96rem; }
.vphgynd-cta-strip-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-cta); 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; }
.vphgynd-cta-strip-btn:hover { opacity: .92; transform: translateY(-1px); text-decoration: none !important; }
.vphgynd-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; }
/* Explicit color (not inherited from .city-cta-box) — MEGA_HOME/MEGA_CHILD and
   UMBRELLA_HOME both carry a global h1,h2,h3,h4 heading-color rule (dark ink/navy,
   for headings on the WHITE page background). Any matching rule for the h3
   element wins over an ancestor's inherited color regardless of specificity, so
   without this line the heading silently rendered dark-ink-on-dark-secondary
   here — a live audit measured ~1.01:1 (effectively invisible). */
.city-cta-box h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; color: #fff; }
.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) ── */
.vphgynd-sal-section { background: #f1f5f9; border-top: 1px solid var(--border); padding: 40px 0; }
.vphgynd-sal-heading { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.vphgynd-sal-cloud { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; max-width: 1000px; margin: 0 auto; }
.vphgynd-sal-cloud a { font-size: .82rem; color: var(--primary); text-decoration: none; white-space: nowrap; line-height: 1.8; }
.vphgynd-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 h4 { 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-cta); 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); }

/* ── 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 ── */
.vphgynd-hero-conv { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vphgynd-hero-subhead { font-size: 1.05rem; opacity: .95; margin: 10px 0 0; max-width: 660px; line-height: 1.5; }
.vphgynd-hero-bullets { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.vphgynd-hero-bullets li { position: relative; padding-left: 22px; font-weight: 600; }
.vphgynd-hero-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.vphgynd-cap-section { background: var(--bg-light, #f6f8fa); padding: 30px 0; }
.vphgynd-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.vphgynd-cap-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; min-height: 48px; }
.vphgynd-cap-icon { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.vphgynd-cap-label { font-weight: 700; font-size: .98rem; line-height: 1.25; max-width: 16ch; }
@media (max-width: 640px) { .vphgynd-cap-grid { grid-template-columns: repeat(2, 1fr); } }
.vphgynd-guarantee { padding: 48px 0; background: var(--secondary); color: #fff; text-align: center; }
.vphgynd-guarantee h2 { color: #fff; margin-bottom: 24px; }
.vphgynd-guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.vphgynd-guarantee-item { background: rgba(255,255,255,.08); border-radius: 10px; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.vphgynd-guarantee-item strong { font-size: 1.02rem; }
.vphgynd-guarantee-item span { opacity: .9; font-size: .92rem; line-height: 1.4; }
.vphgynd-guarantee-cta { display: inline-flex; }
@media (max-width: 760px) { .vphgynd-guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
.vphgynd-meet-owner { padding: 48px 0; }
.vphgynd-meet-owner .container { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.vphgynd-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); }
.vphgynd-owner-text { flex: 1; min-width: 260px; }
.vphgynd-owner-text h2 { margin-bottom: 10px; }
.vphgynd-owner-text p { margin-bottom: 16px; max-width: 60ch; }
.vphgynd-stars { display: flex; align-items: center; gap: 8px; }
.vphgynd-stars-fill { color: #ffb400; letter-spacing: 1px; font-size: 1.05rem; }
.vphgynd-stars-meta { color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 600; }
.vphgynd-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vphgynd-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; }
.vphgynd-hero-call { margin-top: 4px; }
.vphgynd-trustbar { background: var(--bg-light); border-bottom: 1px solid var(--border); }
.vphgynd-trustbar .container { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 0; font-size: .85rem; font-weight: 600; color: var(--text-dark); }
.vphgynd-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); }
.vphgynd-mid-cta strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; }
.vphgynd-mid-cta span { color: var(--text-muted); font-size: .9rem; }
/* #14 — "What happens when you call" reassurance block (near the primary CTA). */
.vphgynd-reassure { margin: 40px 0; padding: 26px 28px; background: var(--primary-light); border: 1px solid var(--border); border-radius: var(--radius); }
.vphgynd-reassure h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.12rem; margin-bottom: 16px; }
.vphgynd-reassure-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.vphgynd-reassure-steps li { display: flex; gap: 12px; align-items: flex-start; }
.vphgynd-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; }
.vphgynd-reassure-steps strong { display: block; font-size: .96rem; color: var(--text-dark); line-height: 1.35; }
.vphgynd-reassure-steps span { display: block; color: var(--text-muted); font-size: .86rem; line-height: 1.5; margin-top: 2px; }
@media (max-width: 600px) { .vphgynd-reassure-steps { grid-template-columns: 1fr; } }
/* #15 — "Recent {service} jobs in {city}" proof strip (captioned AI work photos). */
.vphgynd-recent-jobs { margin: 44px 0; }
.vphgynd-recent-jobs h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 6px; }
.vphgynd-recent-jobs-sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 18px; }
.vphgynd-recent-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vphgynd-recent-job { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); }
.vphgynd-recent-job img { width: 100%; height: 168px; object-fit: cover; display: block; }
.vphgynd-recent-job figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
.vphgynd-contact-band { background: var(--bg-light); border-top: 1px solid var(--border); padding: 32px 0; }
.vphgynd-contact-band .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vphgynd-contact-band strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.15rem; }
.vphgynd-contact-band span { color: var(--text-muted); font-size: .92rem; }
.vphgynd-gallery-section { margin: 44px 0; }
.vphgynd-gallery-section h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 18px; }
.vphgynd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vphgynd-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.vphgynd-reviews-block { margin: 44px 0; }
.vphgynd-reviews-block h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 12px; }
.vphgynd-reviews-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.vphgynd-reviews-rating strong { font-size: 1.2rem; }
.vphgynd-reviews-rating span { color: var(--text-muted); font-size: .9rem; }
.vphgynd-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vphgynd-review-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.vphgynd-review-card p { font-style: italic; color: var(--text-dark); margin-bottom: 10px; font-size: .92rem; }
.vphgynd-review-card span { color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.vphgynd-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); }
.vphgynd-stickybar a { flex: 1; text-align: center; padding: 15px 8px; font-weight: 700; font-size: .95rem; }
.vphgynd-stickybar-call { background: #16a34a; color: #fff; flex: 1.7; } /* calls are the goal → green, dominant */
.vphgynd-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) {
  .vphgynd-stickybar { display: flex; }
  /* No .vphgynd-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) {
  .vphgynd-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 ── */
.vphgynd-contact-form { background: #fff; border-radius: 16px; padding: 36px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.vphgynd-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.vphgynd-cf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.vphgynd-cf-field label { font-weight: 600; font-size: .88rem; color: var(--text-dark); margin-bottom: 6px; letter-spacing: .01em; }
.vphgynd-cf-req { color: var(--accent); }
.vphgynd-cf-field input, .vphgynd-cf-field select, .vphgynd-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; }
.vphgynd-cf-field input:focus, .vphgynd-cf-field select:focus, .vphgynd-cf-field textarea:focus { border-color: var(--primary); background: #fff; }
.vphgynd-cf-field textarea { resize: vertical; min-height: 100px; }
.vphgynd-cf-success { text-align: center; padding: 48px 24px; }
.vphgynd-cf-success h3 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 12px 0 8px; }
.vphgynd-cf-success p { color: var(--text-muted); }
.vphgynd-cf-text-row { text-align: center; margin-top: 14px; font-size: .92rem; color: var(--text-muted); }
.vphgynd-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; }
.vphgynd-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) ── */
.vphgynd-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; }
.vphgynd-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; }
.vphgynd-mobile-cta a:hover { opacity: .92; }
.vphgynd-mcta-call { background: #16a34a; color: #fff; }
.vphgynd-mcta-call svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .vphgynd-mobile-cta { display: flex; }
  body.vphgynd-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; white-space: nowrap; 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; }
  .vphgynd-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; }
  .vphgynd-lightbox-prev, .vphgynd-lightbox-next { width: 40px; height: 40px; }
  .vphgynd-lightbox-prev { left: 10px; }
  .vphgynd-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 .vphgynd-band:nth-of-type(even) { padding: 16px; margin: 12px 0; }
  .vphgynd-feature-card { padding: 20px; }
  .vphgynd-price-callout, .vphgynd-cta-strip { padding: 20px; }
  .vphgynd-cta-strip { flex-direction: column; align-items: stretch; }
  .vphgynd-cta-strip-btn { width: 100%; justify-content: center; }
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* min-height (not just padding) guarantees a >=44px tap target regardless of
     font metrics — a live mobile audit measured the link list well under that. */
  .footer-col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
  .cta-band { padding: 44px 0; }
  .vphgynd-cf-row { grid-template-columns: 1fr; }
  .vphgynd-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; }

/* ══════════════ IRONCLAD DESIGN SYSTEM ══════════════ */
:root {
  --accent-dark: #cf6810;
  --tint:        #fff6ec;
  --ink:         #1c1c1c;
  --ink-soft:    #3a3a3a;
  --ink-muted:   #6b6b6b;
  --iron-radius: 18px;
  --iron-shadow: 0 18px 50px rgba(0,0,0,.10);
}
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); }
h1, h2, h3, h4 { font-family: 'Anton', 'Oswald', 'Montserrat', sans-serif; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: .98; }
a { color: var(--accent); }

/* ── Shared eyebrow pill ── */
.iron-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #1c1c1c; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: 7px 16px; border-radius: 30px; margin-bottom: 18px; }
.iron-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ── Buttons ── */
.iron-btn, .iron-btn-ghost { display: inline-flex; align-items: center; gap: 9px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; padding: 16px 30px; border-radius: 40px; transition: transform .15s, box-shadow .2s, background .2s; }
.iron-btn { background: var(--accent); color: #fff !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent); }
.iron-btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
.iron-btn::after { content: '↗'; font-size: 1.05em; line-height: 1; }
.iron-btn-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.45); }
.iron-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.iron-btn-ghost svg { width: 17px; height: 17px; }

/* ── Top utility bar (header.php) ── */
.iron-topbar { background: var(--secondary); color: rgba(255,255,255,.82); font-size: .82rem; }
.iron-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.iron-topbar a { color: #fff; font-weight: 600; }
.iron-topbar a:hover { color: var(--accent); }
.iron-topbar .iron-topbar-promo b { color: var(--accent); }

/* ── Header (white, sticky) ── */
.site-header { background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.site-header.vphgynd-scrolled { box-shadow: 0 4px 22px rgba(0,0,0,.12); }
.header-inner { height: auto; min-height: 78px; gap: 22px; }
.site-logo-name { color: var(--ink); font-family: 'Anton', sans-serif; letter-spacing: .02em; }
.site-logo-tagline { color: var(--ink-muted); }
.header-nav a { color: #262626; 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; flex-direction: row-reverse; gap: 9px; text-align: left; line-height: 1.1; }
.header-phone svg { color: var(--accent); width: 34px; height: 34px; background: color-mix(in srgb, var(--accent) 14%, #fff); border-radius: 50%; padding: 8px; }
.header-phone:hover { opacity: 1; color: var(--accent) !important; }
.vphgynd-nav-toggle span { background: var(--ink); }
.iron-cta-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff !important; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: 13px 22px; border-radius: 40px; flex-shrink: 0; transition: background .2s, transform .15s; }
.iron-cta-pill::after { content: '↗'; }
.iron-cta-pill:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* ══════════════ HOMEPAGE ══════════════ */
/* ── Hero ── */
.iron-hero { background: var(--secondary); position: relative; overflow: hidden; }
.iron-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; }
.iron-hero-copy { padding: 70px 56px 70px 24px; position: relative; z-index: 2; }
.iron-hero .iron-eyebrow { background: rgba(255,255,255,.1); color: #fff; }
.iron-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.3rem); color: #fff; margin-bottom: 20px; }
.iron-hero h1 .hl { color: var(--accent); }
.iron-hero-sub { color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.7; max-width: 520px; margin-bottom: 30px; }
.iron-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.iron-hero-trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.iron-trust-badge { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600; }
.iron-trust-badge svg { width: 20px; height: 20px; }
.iron-trust-stars { color: #ffb400; letter-spacing: 1px; font-size: .8rem; }
.iron-hero-media { position: relative; min-height: 440px; background-size: cover; background-position: center; }
.iron-hero-media::before { content: ''; position: absolute; top: 0; left: -1px; bottom: 0; width: 90px; background: linear-gradient(105deg, var(--secondary) 0%, var(--secondary) 42%, transparent 42.2%); z-index: 2; }
.iron-badge { position: absolute; left: -46px; top: 64px; z-index: 3; background: var(--accent); color: #fff; width: 132px; height: 132px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.35); transform: rotate(-4deg); }
.iron-badge b { font-family: 'Anton', sans-serif; font-size: 2.6rem; line-height: 1; }
.iron-badge span { font-family: 'Oswald', sans-serif; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; line-height: 1.25; }
/* #23: seed-driven hero layout variant — media on the LEFT. Same markup; only the
   column order, copy padding, badge position, and the diagonal mask flip. */
.iron-hero--media-left .iron-hero-inner { grid-template-columns: .95fr 1.05fr; }
.iron-hero--media-left .iron-hero-copy { order: 2; padding: 70px 24px 70px 56px; }
.iron-hero--media-left .iron-hero-media { order: 1; }
.iron-hero--media-left .iron-hero-media::before { left: auto; right: -1px; background: linear-gradient(255deg, var(--secondary) 0%, var(--secondary) 42%, transparent 42.2%); }
.iron-hero--media-left .iron-badge { left: auto; right: -46px; transform: rotate(4deg); }

/* ── Why Choose Us ── */
.iron-why { padding: 96px 0; background: var(--tint); }
.iron-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.iron-why-media { position: relative; }
.iron-why-media > img { width: 100%; border-radius: var(--iron-radius); display: block; object-fit: cover; aspect-ratio: 4/3.4; box-shadow: var(--iron-shadow); }
.iron-float-cards { position: absolute; left: -8px; bottom: -26px; display: flex; gap: 14px; }
.iron-float-card { background: #fff; border-radius: 16px; padding: 18px 18px; width: 168px; box-shadow: var(--iron-shadow); }
.iron-float-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.iron-float-card .ic svg { width: 22px; height: 22px; }
.iron-float-card h4 { font-size: .82rem; letter-spacing: .02em; margin-bottom: 5px; color: var(--ink); }
.iron-float-card p { font-size: .76rem; color: var(--ink-muted); line-height: 1.5; text-transform: none; font-family: 'Inter', sans-serif; }
.iron-why-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: var(--ink); margin-bottom: 18px; }
.iron-why-copy h2 .hl { color: var(--accent); }
.iron-why-copy > p { color: var(--ink-muted); font-size: 1rem; line-height: 1.75; margin-bottom: 24px; max-width: 540px; }
.iron-checks { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; }
.iron-checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-soft); font-size: .96rem; }
.iron-checks li svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }

/* ── Stats band ── */
.iron-stats { background: var(--accent); }
.iron-stats-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.iron-stat { display: flex; align-items: center; gap: 16px; color: #fff; }
.iron-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.25); }
.iron-stat .ic { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iron-stat .ic svg { width: 26px; height: 26px; }
.iron-stat b { font-family: 'Anton', sans-serif; font-size: 1.95rem; line-height: 1; display: block; }
.iron-stat span { font-size: .8rem; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }

/* ── Before / After ── */
.iron-ba-section { padding: 96px 0; background: var(--tint); text-align: center; }
.iron-ba-section .iron-ba-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: var(--ink); margin-bottom: 44px; }
.iron-ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.iron-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #fff; padding: 14px; border-radius: var(--iron-radius); box-shadow: var(--iron-shadow); }
.iron-ba figure { position: relative; margin: 0; }
.iron-ba img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; }
.iron-ba figcaption { position: absolute; left: 12px; bottom: 12px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 14px; border-radius: 20px; }
.iron-ba .is-before figcaption { background: rgba(20,20,20,.78); }
.iron-ba .is-after figcaption { background: var(--accent); }

/* ── Marquee ── */
.iron-marquee { background: var(--accent); overflow: hidden; padding: 16px 0; }
.iron-marquee-track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: iron-marq 28s linear infinite; }
.iron-marquee-track span { font-family: 'Anton', sans-serif; font-size: 1.15rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; }
.iron-marquee-track span::after { content: '✳'; color: rgba(255,255,255,.7); font-size: .9rem; }
@keyframes iron-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Reviews ── */
.iron-reviews { padding: 96px 0; background: var(--tint); text-align: center; }
.iron-reviews .iron-rev-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: var(--ink); margin-bottom: 44px; }
.iron-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.iron-rev-card { background: #fff; border-radius: var(--iron-radius); padding: 28px; box-shadow: var(--iron-shadow); display: flex; flex-direction: column; }
.iron-rev-stars { color: #ffb400; letter-spacing: 2px; margin-bottom: 14px; }
.iron-rev-text { color: var(--ink-soft); font-size: .94rem; line-height: 1.7; margin-bottom: 20px; flex: 1; }
.iron-rev-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid #eee; padding-top: 16px; }
.iron-rev-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 1.1rem; flex-shrink: 0; }
.iron-rev-who b { display: block; font-family: 'Oswald', sans-serif; font-size: .92rem; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.iron-rev-who span { font-size: .8rem; color: var(--ink-muted); }
.iron-rev-google { margin-left: auto; flex-shrink: 0; }
.iron-rev-google svg { width: 22px; height: 22px; }

/* ── Areas We Serve ── */
.iron-areas { padding: 96px 0; background: #fff; }
.iron-areas h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: var(--ink); margin-bottom: 26px; }
.iron-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.iron-chip { background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); color: var(--ink-soft); font-family: 'Oswald', sans-serif; font-weight: 500; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 9px 18px; border-radius: 30px; transition: background .2s, color .2s; }
.iron-chip:first-child, .iron-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.iron-chip:hover { background: var(--accent); color: #fff; }
.iron-map { border-radius: var(--iron-radius); overflow: hidden; box-shadow: var(--iron-shadow); }
.iron-map iframe { display: block; width: 100%; border: 0; }

/* ── Bottom lead form ── */
.iron-form-section { padding: 96px 0; background: var(--secondary); }
.iron-form-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.iron-form-copy .iron-eyebrow { background: rgba(255,255,255,.1); color: #fff; }
.iron-form-copy h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 18px; }
.iron-form-copy h2 .hl { color: var(--accent); }
.iron-form-copy p { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.7; margin-bottom: 26px; }
.iron-form-call { display: inline-flex; align-items: center; gap: 14px; }
.iron-form-call .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iron-form-call .ic svg { width: 26px; height: 26px; }
.iron-form-call span { display: block; font-size: .78rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.iron-form-call b { font-family: 'Anton', sans-serif; font-size: 1.7rem; color: #fff; }
.iron-form-card { background: #fff; border-radius: var(--iron-radius); padding: 34px; box-shadow: var(--iron-shadow); }

/* ══════════════ INNER-PAGE OVERRIDES (shared base classes) ══════════════ */
.site-hero { background: var(--secondary); }
.site-hero h1 { font-family: 'Anton', sans-serif; }
.btn-primary { background: var(--accent-cta); border-radius: 40px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { border-radius: 40px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.section-header h2 { font-family: 'Anton', sans-serif; color: var(--ink); }
.services-section, .reviews-section, .brands-section { background: #fff; }
.how-section { background: var(--tint); }
.service-card { border-radius: var(--iron-radius); border-color: transparent; }
.service-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, #fff); box-shadow: var(--iron-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: 'Anton', sans-serif; }
.about-mini, .cta-band { background: var(--secondary); }
.about-stat-num, .about-checks li::before, .owner-photo { 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(--iron-radius); padding: 28px; box-shadow: var(--iron-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: 'Oswald', sans-serif; color: var(--ink); }
.faq-section { background: #fff; }
.faq-btn { font-family: 'Oswald', sans-serif; }
.vphgynd-cf-success, .vphgynd-contact-form .btn-primary { color: #fff; }
.vphgynd-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: 900px) {
  .iron-hero-inner, .iron-why-grid, .iron-form-grid { grid-template-columns: 1fr; }
  .iron-hero-copy { padding: 54px 24px; }
  /* #23: media-left variant collapses to the same mobile stack (copy first). */
  .iron-hero--media-left .iron-hero-inner { grid-template-columns: 1fr; }
  .iron-hero--media-left .iron-hero-copy { order: 1; padding: 54px 24px; }
  .iron-hero--media-left .iron-hero-media { order: 2; }
  .iron-hero-media { min-height: 320px; }
  .iron-hero-media::before { display: none; }
  .iron-badge, .iron-hero--media-left .iron-badge { left: auto; right: 20px; top: 20px; transform: none; }
  .iron-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .iron-stat:nth-child(2) { border-right: none; }
  .iron-ba-grid, .iron-rev-grid { grid-template-columns: 1fr; }
  .iron-float-cards { position: static; margin-top: 16px; }
}
@media (max-width: 560px) {
  .iron-ba { grid-template-columns: 1fr; }
  .iron-stats-inner { grid-template-columns: 1fr; }
  .iron-stat:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 14px; }
}
/* Mobile menu fix — same bug the Apex block below patches for itself: this skin's
   .header-inner { height: 78px } is concatenated AFTER the base mobile
   height:auto rule (equal specificity, later wins), so the open nav wrapped
   below a white box locked at 78px — 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: #ececec; }
}

/* ── Long brand lockup (41 chars) — see pressure-valve note atop generateStyleCss ── */
@media (min-width: 769px) {
  .site-logo-name { font-size: .9rem; max-width: 300px; }
  .header-nav a { font-size: .84rem; padding: 8px 9px; }
}