/*
Theme Name: Professional Garage Door Repair Miami Team
Theme URI: https://professionalgaragedoorrepairmiamiteam.com
Description: Professional garage door theme for Professional Garage Door Repair Miami Team
Version: 1786052463235
*/

:root {
  --primary:       #21262e;
  --primary-dark:  #1a1e25;
  --primary-light: #e4e5e6;
  /* 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:   #21262e;
  --secondary:     #0f1319;
  --accent:        #98a6b5;
  --accent-cta:    #6a747f;
  --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; }
.uyhsrd8-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.uyhsrd8-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
body.nav-open .uyhsrd8-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .uyhsrd8-nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .uyhsrd8-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. */
.uyhsrd8-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.uyhsrd8-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%); }
.uyhsrd8-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 */
.uyhsrd8-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); }
.uyhsrd8-lightbox.open { display: flex; animation: sfLightboxFade .18s ease-out; }
@keyframes sfLightboxFade { from { opacity: 0; } to { opacity: 1; } }
.uyhsrd8-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; }
.uyhsrd8-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); }
.uyhsrd8-lightbox-nav, .uyhsrd8-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; }
.uyhsrd8-lightbox-nav:hover, .uyhsrd8-lightbox-close:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.uyhsrd8-lightbox-nav:focus-visible, .uyhsrd8-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.uyhsrd8-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.uyhsrd8-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.uyhsrd8-lightbox-prev:hover, .uyhsrd8-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.uyhsrd8-lightbox-close { top: 20px; right: 20px; }
.uyhsrd8-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 / .uyhsrd8-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 > .uyhsrd8-band > p, .page-content > .uyhsrd8-band > h2, .page-content > .uyhsrd8-band > h3,
.page-content > .uyhsrd8-band > h4, .page-content > .uyhsrd8-band > ul:not(.uyhsrd8-signal-list),
.page-content > .uyhsrd8-band > ol:not(.uyhsrd8-steps), .page-content > .uyhsrd8-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(.uyhsrd8-signal-list), .page-content ol:not(.uyhsrd8-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(.uyhsrd8-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 .uyhsrd8-band { padding: 6px 0; }
.page-content .uyhsrd8-band:nth-of-type(even) { background: var(--bg-light); border-radius: 16px; padding: 20px 26px; margin: 16px 0; }
.page-content .uyhsrd8-band > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

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

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

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

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

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

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

@media (max-width: 768px) {
  .uyhsrd8-mobile-cta { display: flex; }
  body.uyhsrd8-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; }
  .uyhsrd8-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; }
  .uyhsrd8-lightbox-prev, .uyhsrd8-lightbox-next { width: 40px; height: 40px; }
  .uyhsrd8-lightbox-prev { left: 10px; }
  .uyhsrd8-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 .uyhsrd8-band:nth-of-type(even) { padding: 16px; margin: 12px 0; }
  .uyhsrd8-feature-card { padding: 20px; }
  .uyhsrd8-price-callout, .uyhsrd8-cta-strip { padding: 20px; }
  .uyhsrd8-cta-strip { flex-direction: column; align-items: stretch; }
  .uyhsrd8-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; }
  .uyhsrd8-cf-row { grid-template-columns: 1fr; }
  .uyhsrd8-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; }

/* ═══════════════════ LUX DESIGN SYSTEM (Garage Door) ═══════════════════ */
:root {
  --radius: 0px;
  --bg-light: #f4f5f7;
  --border: #e7e3dc;
  --text-dark: #1b1d20;
  --text-muted: #75716a;
  --shadow-sm: 0 1px 2px rgba(20,18,14,.04);
  --shadow-md: 0 18px 48px rgba(20,18,14,.10);
}
body { font-family: 'Nunito', system-ui, sans-serif; color: #2c2e31; }
h1,h2,h3,h4 { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: .01em; }

/* ── Header — floats semi-transparent over the hero, solidifies on scroll.
   Logo (emblem + up-to-2-line brand name) sits left; all nav items cluster
   together on the right via margin-right:auto on the logo, so nothing floats
   off on its own. ── */
.site-header { position: fixed; top: 0; left: 0; right: 0; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); background: color-mix(in srgb, var(--secondary) 38%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s ease; }
.site-header.uyhsrd8-scrolled, body.nav-open .site-header { background: color-mix(in srgb, var(--secondary) 95%, transparent); }
.header-inner { min-height: 74px; height: auto; flex-wrap: nowrap; justify-content: flex-start; gap: 0; max-width: 1300px; padding-top: 8px; padding-bottom: 8px; }
/* Logo pushes the whole nav cluster to the right edge — one continuous row. */
.site-logo { gap: 13px; flex: 0 0 auto; margin-right: auto; padding-right: 26px; align-items: center; }
.lux-logo-emblem { width: 34px; height: 47px; color: var(--accent); flex-shrink: 0; display: block; }
.site-logo-text { min-width: 0; }
/* Brand name wraps to up to 2 beautiful lines instead of truncating. */
.site-logo-name { display: block; font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: .06em; font-size: .8rem; line-height: 1.34; color: var(--accent); white-space: normal; max-width: 215px; text-transform: uppercase; }
.site-logo-tagline { display: block; letter-spacing: .16em; text-transform: uppercase; font-size: .5rem; color: rgba(255,255,255,.5); margin-top: 5px; white-space: nowrap; max-width: 215px; overflow: hidden; text-overflow: ellipsis; }
/* All nav items share identical spacing (their own padding) so the WP menu,
   the Catalog dropdown, and the Aluminum/For-Professionals links read as one
   uniform row with no stray gaps. */
.header-nav { flex: 0 0 auto; }
.header-nav ul { flex-wrap: nowrap; gap: 0; }
.header-nav a, .lux-nav-coll-btn, .lux-nav-extra { font-family: 'Cabin', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.74); border-radius: 0; padding: 9px 12px; white-space: nowrap; }
.header-nav a:hover, .lux-nav-extra:hover { background: transparent; color: var(--accent); }
.header-phone { background: var(--accent); border: 1px solid var(--accent); color: var(--secondary) !important; border-radius: 0; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; letter-spacing: .1em; font-size: .72rem; text-transform: uppercase; padding: 11px 20px; flex-shrink: 0; margin-left: 16px; }
.header-phone:hover { background: transparent; color: var(--accent) !important; opacity: 1; }

/* ── Collection dropdown (desktop) ── */
.lux-nav-coll { position: relative; flex-shrink: 0; }
.lux-nav-coll-btn { display: inline-block; cursor: pointer; }
.lux-nav-coll:hover .lux-nav-coll-btn, .lux-nav-coll:focus-within .lux-nav-coll-btn { color: var(--accent); }
.lux-nav-extra { flex-shrink: 0; }
@media (max-width: 1180px) { .lux-nav-extra { display: none; } }
.lux-nav-coll:hover .lux-nav-coll-btn, .lux-nav-coll:focus-within .lux-nav-coll-btn { color: var(--accent); }
.lux-nav-coll-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--secondary); border: 1px solid rgba(255,255,255,.1); min-width: 300px; padding: 12px 0; display: none; z-index: 1001; max-height: 70vh; overflow-y: auto; }
.lux-nav-coll:hover .lux-nav-coll-menu, .lux-nav-coll:focus-within .lux-nav-coll-menu { display: block; }
.lux-nav-coll-menu a { display: block; padding: 10px 24px; color: rgba(255,255,255,.75); font-size: .82rem; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.05); transition: color .15s, background .15s; }
.lux-nav-coll-menu a:last-child { border-bottom: none; }
.lux-nav-coll-menu a:hover { color: var(--accent); background: rgba(255,255,255,.04); }
/* Category mega-menu — Windows / Doors / Glass Railing columns. Stays hidden
   (inherits .lux-nav-coll-menu display:none) until the Catalog item is hovered. */
.lux-nav-mega { gap: 0; min-width: 540px; padding: 20px 8px; }
.lux-nav-coll:hover .lux-nav-coll-menu.lux-nav-mega, .lux-nav-coll:focus-within .lux-nav-coll-menu.lux-nav-mega { display: flex; }
.lux-mega-col { flex: 1; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.08); }
.lux-mega-col:last-child { border-right: none; }
.lux-mega-head { display: block; color: var(--accent); font-family: 'Cabin', system-ui, sans-serif; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: 0 6px 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.lux-nav-mega a { padding: 7px 6px; border-bottom: none; font-size: .8rem; }

/* ── Buttons — rectangular, tracked uppercase Montserrat (ViewLux) ── */
.btn-primary { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; padding: 16px 34px; font-family: 'Montserrat', system-ui, sans-serif; }
.btn-secondary { border-radius: 0; border-width: 1px; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; padding: 15px 30px; font-family: 'Montserrat', system-ui, sans-serif; }

/* ── Hero — CENTERED, editorial, full-bleed photo (ViewLux). Top padding
   clears the fixed transparent header that floats over it. ── */
.site-hero { text-align: center; padding: 200px 0 120px; }
.site-hero::before { display: none; }
.hero-content { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.site-hero h1 { font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: .005em; line-height: 1.14; max-width: 14ch; }
.hero-sub { margin: 0 auto; max-width: 620px; font-weight: 400; font-size: 1.1rem; }
.hero-btns, .hero-stats, .hero-badges { justify-content: center; }
.hero-stat { text-align: center; padding: 0 28px; }
.hero-stat-num { font-family: 'Raleway', sans-serif; font-weight: 700; color: var(--accent); }
.hero-badge { border-radius: 0; background: transparent; border-color: rgba(255,255,255,.22); letter-spacing: .08em; font-size: .68rem; text-transform: uppercase; font-weight: 500; font-family: 'Cabin', system-ui, sans-serif; }
.hero-badge::before { color: var(--accent); }
.lux-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--accent); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin-bottom: 22px; font-family: 'Cabin', system-ui, sans-serif; }
.lux-hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent); flex-shrink: 0; }
.lux-hero-eyebrow::after { content: ''; width: 30px; height: 1px; background: var(--accent); flex-shrink: 0; }

/* ── Section rhythm — generous whitespace ── */
.services-section, .how-section, .why-section, .reviews-section, .faq-section, .gallery-section, .blog-preview-section, .brands-section { padding: 104px 0; }
.section-header { margin-bottom: 60px; }
.section-header h2 { font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: .01em; }
.section-header p { font-weight: 300; font-size: 1.05rem; }
.lux-kicker { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; font-family: 'Nunito', system-ui, sans-serif; }

/* ── Cards — hairline borders, square corners, metal accents ── */
.service-card { background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 36px 30px; }
.service-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
/* Service tiles with a photo thumbnail (lux): image fills the top, text below.
   Padding moves to the body so the photo bleeds edge-to-edge. */
.lux-svc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lux-svc-thumb { width: 100%; aspect-ratio: 16/11; overflow: hidden; }
.lux-svc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lux-svc-card:hover .lux-svc-thumb img { transform: scale(1.04); }
.lux-svc-body { padding: 26px 28px 30px; }
.lux-svc-card .service-icon { margin: 30px 30px 0; }
.service-icon { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.service-link { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .73rem; font-weight: 600; }
.why-card { border-radius: 0; border: 1px solid var(--border); box-shadow: none; padding: 40px 28px; }
.why-icon { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.how-step-num { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Raleway', sans-serif; }
.review-card { border-radius: 0; background: #fff; }
.review-stars { color: var(--accent); }
.review-avatar-mono { background: var(--secondary); }
.faq-item { border-radius: 0; }
.faq-icon { color: var(--accent); }
.brand-chip { border-radius: 0; border-width: 1px; }
.brand-initial { border-radius: 0; background: var(--secondary); }
.blog-preview-card { border-radius: 0; }
.gallery-tag { display: none; }

/* ── Masonry gallery (lux) — ViewLux-style varied mosaic. CSS columns with
   nth-child aspect ratios so tiles are different sizes. White→transparent fade
   melts the section into the imagery. ── */
.gallery-section { padding: 104px 0 0; }
.gallery-section .container { max-width: none; padding: 0; }
.gallery-section .section-header { padding: 0 24px; }
.gallery-grid { display: block; columns: 3; column-gap: 10px; margin-top: 0; position: relative; }
.gallery-grid::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%); z-index: 2; pointer-events: none; }
.gallery-item { border-radius: 0; width: 100%; margin: 0 0 10px; break-inside: avoid; aspect-ratio: 4/3; overflow: hidden; }
.gallery-item:nth-child(6n+1) { aspect-ratio: 4/5; }
.gallery-item:nth-child(6n+3) { aspect-ratio: 1/1; }
.gallery-item:nth-child(6n+4) { aspect-ratio: 16/10; }
.gallery-item:nth-child(6n) { aspect-ratio: 3/4; }
@media (max-width: 900px) { .gallery-grid { columns: 2; } }

/* ── Photo CTA band — full-bleed dusk photo, white fade bleeding in from the
   section above, content overlapping the image (ViewLux quote-band pattern) ── */
.cta-band--photo { position: relative; overflow: hidden; padding: 200px 0 150px; text-align: center; }
.cta-band--photo .cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-band--photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 30%, rgba(11,12,14,.66) 100%); }
.cta-band--photo .container { position: relative; z-index: 2; }
/* Fixed-attachment parallax is ignored on most mobile browsers — fall back to
   a normal scroll so the image still shows cleanly. */
@media (max-width: 768px) { .cta-band--photo { background-attachment: scroll; padding: 120px 0 90px; } }
.about-stat-box { border-radius: 0; }
.about-stat-num { font-family: 'Raleway', sans-serif; font-weight: 700; }
.owner-card { border-radius: 0; }
.owner-photo { border-width: 2px; }
.about-owner-photo { border-width: 2px; }

/* ── Page templates ── */
.page-hero-section { background: var(--secondary); padding: 160px 0 84px; text-align: left; }
.page-hero-section.page-hero-brand { text-align: center; }
.page-hero-section h1 { font-weight: 700; }
.page-hero-line { margin: 18px 0 0; height: 1px; width: 72px; background: var(--accent); }
.page-content h2 { font-weight: 700; }
.page-content h2::after { width: 56px; height: 1px; }
.page-content table th, .spec-table th { background: var(--secondary); color: #fff; font-family: 'Nunito', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; font-weight: 600; border-color: var(--secondary); }
.page-content table tr:nth-child(even) td { background: transparent; }
.page-content table td, .spec-table td { border-color: var(--border); }
.page-content blockquote { border-radius: 0; }
.lux-al-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin: 34px 0; border-radius: 0; }
.lux-al-img.lux-al-lead { aspect-ratio: 16/8; margin: 10px 0 38px; }

/* ── Content components (content-layout.ts classes) ── */
.uyhsrd8-step-num { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: 'Raleway', sans-serif; }
.uyhsrd8-step:not(:last-child)::after { background: var(--border); left: 19px; }
.uyhsrd8-feature-card { border-radius: 0; }
/* Keep "What X Includes" cards tidy — clamp the body copy so cards stay even
   and never overflow with a wall of text. */
.uyhsrd8-feature-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.uyhsrd8-feature-icon { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.uyhsrd8-signal-list li { border-radius: 0; }
.uyhsrd8-signal-list li::before { background: var(--accent); }
.uyhsrd8-inline-cta, .uyhsrd8-cta-strip-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-family: 'Nunito', system-ui, sans-serif; }
.uyhsrd8-cta-strip { border-radius: 0; }
.uyhsrd8-price-callout { border-radius: 0; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.uyhsrd8-price-callout strong { color: var(--text-dark); }
.page-content .uyhsrd8-band:nth-of-type(even) { border-radius: 0; }
.city-cta-box { border-radius: 0; }
.city-nearby-cities { border-radius: 0; }
.uyhsrd8-hero-badge { border-radius: 0; }
.uyhsrd8-mid-cta { border-radius: 0; }
.uyhsrd8-review-card { border-radius: 0; background: #fff; }
.uyhsrd8-gallery img { border-radius: 0; }
.cta-band { background: var(--secondary); }
.cta-band h2 { font-weight: 700; }
.uyhsrd8-mobile-cta a, .uyhsrd8-stickybar a { border-radius: 0; letter-spacing: .08em; }
.uyhsrd8-mcta-call, .uyhsrd8-stickybar-call { background: #16a34a; }
.uyhsrd8-fab { background: var(--accent); border-radius: 0; }

/* ── Footer ── */
.site-footer { background: #0b0c0e; }
.footer-col h4 { letter-spacing: .18em; font-weight: 600; font-family: 'Nunito', system-ui, sans-serif; }
.footer-phone { border-radius: 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.footer-phone:hover { background: var(--accent); color: var(--secondary); }

/* ── Contact form ── */
.uyhsrd8-contact-form { border-radius: 0; }
.uyhsrd8-cf-field input, .uyhsrd8-cf-field select, .uyhsrd8-cf-field textarea { border-radius: 0; border-width: 1px; background: #fff; }

/* ── Centered grids (ViewLux) — flex so an odd last row centers instead of
   left-aligning. Applies to homepage services, the "Our Services" page, the
   why-cards, and the collection grids. ── */
.services-grid, .why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.services-grid > * { flex: 0 1 310px; max-width: 360px; }
.why-grid > * { flex: 0 1 250px; max-width: 290px; }

/* ── Collection grid (homepage + /collection/) — 3-col centered, render-on-light ── */
.lux-coll-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.lux-coll-grid > * { flex: 0 1 320px; max-width: 360px; }
.lux-coll-desc { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin-top: 10px; }
.lux-coll-card { background: #fff; border: 1px solid var(--border); display: block; text-decoration: none; transition: border-color .2s, box-shadow .25s, transform .25s; overflow: hidden; }
.lux-coll-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lux-coll-img { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; background: var(--bg-light); }
.lux-coll-noimg { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--secondary), var(--primary)); color: var(--accent); font-family: 'Raleway', sans-serif; font-size: 1.5rem; letter-spacing: .1em; }
.lux-coll-body { padding: 24px 26px 28px; }
.lux-coll-series { color: var(--accent); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 8px; font-family: 'Nunito', system-ui, sans-serif; }
.lux-coll-name { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.32rem; color: var(--text-dark); line-height: 1.3; }
.lux-coll-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: .73rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* ── Editorial bands — alternating light/dark image+text rows (ViewLux body) ── */
.lux-band { padding: 96px 0; background: #fff; }
.lux-band--dark { background: var(--secondary); }
.lux-band-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.lux-band--flip .lux-band-grid { grid-template-columns: 1fr 1.05fr; }
.lux-band--flip .lux-band-text { order: 2; }
.lux-band--flip .lux-band-media { order: 1; }
.lux-band h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.22; margin-bottom: 22px; color: var(--text-dark); }
.lux-band p { color: #54575c; font-weight: 300; font-size: 1.03rem; line-height: 1.85; margin-bottom: 16px; }
.lux-band ul { list-style: none; margin: 18px 0 22px; padding: 0; }
.lux-band li { padding: 7px 0 7px 26px; position: relative; color: #44474c; font-size: .98rem; line-height: 1.6; }
.lux-band li::before { content: ''; position: absolute; left: 0; top: 17px; width: 14px; height: 1px; background: var(--accent); }
.lux-band--dark h2 { color: #fff; }
.lux-band--dark p { color: rgba(255,255,255,.74); }
.lux-band--dark li { color: rgba(255,255,255,.8); }
.lux-band-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lux-band .lux-kicker { margin-bottom: 12px; }
@media (max-width: 900px) {
  .lux-band { padding: 64px 0; }
  .lux-band-grid, .lux-band--flip .lux-band-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Stacked: headline/text first, image second — same rhythm on every band */
  .lux-band--flip .lux-band-text { order: 0; }
  .lux-band--flip .lux-band-media { order: 0; }
}

/* ── Design philosophy band ── */
.lux-philosophy { padding: 110px 0; background: var(--secondary); color: #fff; }
.lux-philosophy-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.lux-philosophy h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; margin-bottom: 22px; }
.lux-philosophy p { color: rgba(255,255,255,.74); font-weight: 300; font-size: 1.05rem; line-height: 1.85; margin-bottom: 18px; }
.lux-philosophy-frame { position: relative; }
.lux-philosophy-frame::after { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--accent); pointer-events: none; }
.lux-philosophy-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; position: relative; }

/* ── Performance feature grid ── */
.lux-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.lux-perf-cell { background: #fff; padding: 34px 22px; text-align: center; }
.lux-perf-cell svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 14px; }
.lux-perf-cell h3 { font-size: .88rem; font-family: 'Nunito', system-ui, sans-serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.lux-perf-cell p { color: var(--text-muted); font-size: .84rem; line-height: 1.6; }

/* ── Production / install process ── */
.lux-process { padding: 104px 0; background: var(--bg-light); }
.lux-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 44px 32px; }
.lux-process-step { padding-top: 18px; border-top: 1px solid var(--border); }
.lux-process-num { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 2.2rem; color: var(--accent); line-height: 1; margin-bottom: 12px; display: block; }
.lux-process-step h3 { font-family: 'Nunito', system-ui, sans-serif; font-weight: 600; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.lux-process-step p { color: var(--text-muted); font-size: .92rem; line-height: 1.7; }

/* ── Product page ── */
.lux-product-hero { background: var(--secondary); padding: 165px 0 76px; }
.lux-product-series { display: inline-flex; align-items: center; gap: 14px; color: var(--accent); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; font-family: 'Nunito', system-ui, sans-serif; }
.lux-product-series::before { content: ''; width: 44px; height: 1px; background: var(--accent); flex-shrink: 0; }
.lux-product-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; max-width: 860px; }
.lux-product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0 8px; }
.lux-product-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--border); display: block; }
.finish-swatch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); padding: 8px 16px; font-size: .8rem; letter-spacing: .04em; background: #fff; }

/* ── Lux responsive ── */
@media (max-width: 900px) {
  .lux-philosophy-grid { grid-template-columns: 1fr; gap: 44px; }
  .lux-philosophy-frame::after { display: none; }
}
@media (max-width: 768px) {
  .site-hero { padding: 130px 0 64px; }
  .page-hero-section { padding: 130px 0 64px; }
  .lux-product-hero { padding: 135px 0 64px; }
  .cta-band--photo { padding: 120px 0 84px; }
  .lux-nav-coll { display: none; }
  .services-section, .how-section, .why-section, .reviews-section, .faq-section, .gallery-section, .blog-preview-section, .brands-section, .lux-process { padding: 44px 0; }
  .lux-philosophy { padding: 56px 0; }
  .section-header { margin-bottom: 32px; }
  .gallery-grid { columns: 2; column-gap: 8px; }
  .gallery-item:nth-child(n+7) { display: none; }
  .lux-coll-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 14px; justify-content: flex-start; }
  .lux-coll-grid > * { flex: 0 0 74%; max-width: 74%; scroll-snap-align: start; }
  .lux-coll-body { padding: 16px 18px 20px; }
  .reviews-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 14px; }
  .reviews-grid > * { flex: 0 0 82%; scroll-snap-align: start; }
  .lux-svc-thumb { aspect-ratio: 16/9; }
  .lux-svc-body { padding: 18px 20px 22px; }
  .lux-svc-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lux-process-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .lux-process-step p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; }
  .lux-perf-cell { padding: 22px 14px; }
  .lux-perf-cell p, .why-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .why-card { padding: 26px 20px; }
  .lux-band p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lux-band-media img { aspect-ratio: 16/10; }
  .lux-band-grid { gap: 26px; }
  .blog-preview-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}