/*
Theme Name: Haven
Theme URI: https://havenhomebrands.com
Description: Professional garage door theme for Haven
Version: 1791302929269
*/

:root {
  --primary:       #12161A;
  --primary-dark:  #0e1215;
  --primary-light: #e3e3e4;
  /* 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:   #12161A;
  --secondary:     #0B0E11;
  --accent:        #8A6A3A;
  --accent-cta:    #8A6A3A;
  --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; }
.hyxvvtr-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
.hyxvvtr-nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all .3s; }
body.nav-open .hyxvvtr-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .hyxvvtr-nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .hyxvvtr-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. */
.hyxvvtr-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hyxvvtr-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%); }
.hyxvvtr-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; }
/* SF-SVCGRID-v1 — /our-services/ cards used to run ragged: excerpts differ in
   length, so every card was a different height and "Learn More" landed at a
   different baseline in each column. Stretch the cards, fix the media ratio,
   clamp the excerpt and pin the link to the bottom so the row reads as a row. */
.services-grid { align-items: stretch; }
.services-grid > .service-card { display: flex; flex-direction: column; height: 100%; }
.lux-svc-card .lux-svc-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.lux-svc-card .lux-svc-body h3 { min-height: 2.6em; margin-bottom: 10px; }
.lux-svc-card .lux-svc-body p {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 18px;
  line-height: 1.6; height: 6.4em;
}
.lux-svc-card .service-link { margin-top: auto; align-self: flex-start; }
.lux-svc-thumb { flex: 0 0 auto; }
.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 */
.hyxvvtr-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); }
.hyxvvtr-lightbox.open { display: flex; animation: sfLightboxFade .18s ease-out; }
@keyframes sfLightboxFade { from { opacity: 0; } to { opacity: 1; } }
.hyxvvtr-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; }
.hyxvvtr-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); }
.hyxvvtr-lightbox-nav, .hyxvvtr-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; }
.hyxvvtr-lightbox-nav:hover, .hyxvvtr-lightbox-close:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.hyxvvtr-lightbox-nav:focus-visible, .hyxvvtr-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hyxvvtr-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.hyxvvtr-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.hyxvvtr-lightbox-prev:hover, .hyxvvtr-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.hyxvvtr-lightbox-close { top: 20px; right: 20px; }
.hyxvvtr-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; }
/* Service Area city cards. These values are exactly what page-service-area.php
   used to carry as inline styles; they moved here (Sep-8-2026) so a theme layout
   can actually restyle them — an inline style can only be overridden with
   !important, which left this page permanently stuck on the base look no matter
   which design a site was on. Rendering is unchanged for every template that
   does not override them. */
/* FAQ group heading. Was an inline <style> block inside page-faq.php, which the
   browser applied after the stylesheet and so beat every layout rule — the one
   belfor override had to be !important to land at all. Same values, now in the
   cascade where a layout can simply restyle it. */
.faq-group-heading { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-dark); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.hyxvvtr-sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 36px; }
.hyxvvtr-sa-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.hyxvvtr-sa-city { font-family: Montserrat, sans-serif; font-size: .97rem; font-weight: 700; margin-bottom: 10px; }
.hyxvvtr-sa-link { color: var(--primary); font-size: .88rem; font-weight: 600; }
/* Contact page info cards — same story as .hyxvvtr-sa-* above: these four cards were
   four copies of one inline style, unreachable by any layout. */
.hyxvvtr-ct-cards { display: flex; flex-direction: column; gap: 16px; }
.hyxvvtr-ct-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--bg-light); border-radius: 12px; border: 1px solid var(--border); }
/* 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 / .hyxvvtr-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 > .hyxvvtr-band > p, .page-content > .hyxvvtr-band > h2, .page-content > .hyxvvtr-band > h3,
.page-content > .hyxvvtr-band > h4, .page-content > .hyxvvtr-band > ul:not(.hyxvvtr-signal-list),
.page-content > .hyxvvtr-band > ol:not(.hyxvvtr-steps), .page-content > .hyxvvtr-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(.hyxvvtr-signal-list), .page-content ol:not(.hyxvvtr-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(.hyxvvtr-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 .hyxvvtr-band { padding: 6px 0; }
.page-content .hyxvvtr-band:nth-of-type(even) { background: var(--bg-light); border-radius: 16px; padding: 20px 26px; margin: 16px 0; }
.page-content .hyxvvtr-band > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

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

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

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

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

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

/* Mid-page CTA strip */
.hyxvvtr-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; }
.hyxvvtr-cta-strip-text { display: flex; flex-direction: column; gap: 4px; }
.hyxvvtr-cta-strip-text strong { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; }
.hyxvvtr-cta-strip-text span { color: rgba(255,255,255,.82); font-size: .96rem; }
.hyxvvtr-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; }
.hyxvvtr-cta-strip-btn:hover { opacity: .92; transform: translateY(-1px); text-decoration: none !important; }
.hyxvvtr-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) ── */
.hyxvvtr-sal-section { background: #f1f5f9; border-top: 1px solid var(--border); padding: 40px 0; }
.hyxvvtr-sal-heading { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.hyxvvtr-sal-cloud { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; max-width: 1000px; margin: 0 auto; }
.hyxvvtr-sal-cloud a { font-size: .82rem; color: var(--primary); text-decoration: none; white-space: nowrap; line-height: 1.8; }
.hyxvvtr-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 ── */
.hyxvvtr-hero-conv { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hyxvvtr-hero-subhead { font-size: 1.05rem; opacity: .95; margin: 10px 0 0; max-width: 660px; line-height: 1.5; }
.hyxvvtr-hero-bullets { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hyxvvtr-hero-bullets li { position: relative; padding-left: 22px; font-weight: 600; }
.hyxvvtr-hero-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.hyxvvtr-cap-section { background: var(--bg-light, #f6f8fa); padding: 30px 0; }
.hyxvvtr-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.hyxvvtr-cap-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; min-height: 48px; }
.hyxvvtr-cap-icon { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.hyxvvtr-cap-label { font-weight: 700; font-size: .98rem; line-height: 1.25; max-width: 16ch; }
@media (max-width: 640px) { .hyxvvtr-cap-grid { grid-template-columns: repeat(2, 1fr); } }
.hyxvvtr-guarantee { padding: 48px 0; background: var(--secondary); color: #fff; text-align: center; }
.hyxvvtr-guarantee h2 { color: #fff; margin-bottom: 24px; }
.hyxvvtr-guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.hyxvvtr-guarantee-item { background: rgba(255,255,255,.08); border-radius: 10px; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.hyxvvtr-guarantee-item strong { font-size: 1.02rem; }
.hyxvvtr-guarantee-item span { opacity: .9; font-size: .92rem; line-height: 1.4; }
.hyxvvtr-guarantee-cta { display: inline-flex; }
@media (max-width: 760px) { .hyxvvtr-guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
.hyxvvtr-meet-owner { padding: 48px 0; }
.hyxvvtr-meet-owner .container { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hyxvvtr-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); }
.hyxvvtr-owner-text { flex: 1; min-width: 260px; }
.hyxvvtr-owner-text h2 { margin-bottom: 10px; }
.hyxvvtr-owner-text p { margin-bottom: 16px; max-width: 60ch; }
.hyxvvtr-stars { display: flex; align-items: center; gap: 8px; }
.hyxvvtr-stars-fill { color: #ffb400; letter-spacing: 1px; font-size: 1.05rem; }
.hyxvvtr-stars-meta { color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 600; }
.hyxvvtr-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hyxvvtr-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; }
.hyxvvtr-hero-call { margin-top: 4px; }
.hyxvvtr-trustbar { background: var(--bg-light); border-bottom: 1px solid var(--border); }
.hyxvvtr-trustbar .container { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 0; font-size: .85rem; font-weight: 600; color: var(--text-dark); }
.hyxvvtr-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); }
.hyxvvtr-mid-cta strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; }
.hyxvvtr-mid-cta span { color: var(--text-muted); font-size: .9rem; }
/* #14 — "What happens when you call" reassurance block (near the primary CTA). */
.hyxvvtr-reassure { margin: 40px 0; padding: 26px 28px; background: var(--primary-light); border: 1px solid var(--border); border-radius: var(--radius); }
.hyxvvtr-reassure h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.12rem; margin-bottom: 16px; }
.hyxvvtr-reassure-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.hyxvvtr-reassure-steps li { display: flex; gap: 12px; align-items: flex-start; }
.hyxvvtr-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; }
.hyxvvtr-reassure-steps strong { display: block; font-size: .96rem; color: var(--text-dark); line-height: 1.35; }
.hyxvvtr-reassure-steps span { display: block; color: var(--text-muted); font-size: .86rem; line-height: 1.5; margin-top: 2px; }
@media (max-width: 600px) { .hyxvvtr-reassure-steps { grid-template-columns: 1fr; } }
/* #15 — "Recent {service} jobs in {city}" proof strip (captioned AI work photos). */
.hyxvvtr-recent-jobs { margin: 44px 0; }
.hyxvvtr-recent-jobs h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 6px; }
.hyxvvtr-recent-jobs-sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 18px; }
.hyxvvtr-recent-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.hyxvvtr-recent-job { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); }
.hyxvvtr-recent-job img { width: 100%; height: 168px; object-fit: cover; display: block; }
.hyxvvtr-recent-job figcaption { padding: 10px 12px; font-size: .82rem; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
.hyxvvtr-contact-band { background: var(--bg-light); border-top: 1px solid var(--border); padding: 32px 0; }
.hyxvvtr-contact-band .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hyxvvtr-contact-band strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.15rem; }
.hyxvvtr-contact-band span { color: var(--text-muted); font-size: .92rem; }
.hyxvvtr-gallery-section { margin: 44px 0; }
.hyxvvtr-gallery-section h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 18px; }
.hyxvvtr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.hyxvvtr-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.hyxvvtr-reviews-block { margin: 44px 0; }
/* Consolidated city hub (Sep-2026): in-page service menu + anchored service sections */
.hyxvvtr-jumpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 28px; padding: 14px 16px; background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); }
.hyxvvtr-jumpbar-label { font-weight: 700; font-size: .9rem; color: var(--text-muted); margin-right: 4px; }
.hyxvvtr-jumpbar a { display: inline-block; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: .9rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.hyxvvtr-jumpbar a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
h2.hyxvvtr-hub-svc { scroll-margin-top: 96px; }
.hyxvvtr-hub-photo { margin: 14px 0 22px; }
.hyxvvtr-hub-photo img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--radius); display: block; }
.service-card-photo { display: block; margin: -28px -28px 18px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.service-card-photo img { width: 100%; height: 176px; object-fit: cover; display: block; }
.hyxvvtr-area-map-hoods, .hyxvvtr-area-map-nearby { font-size: .95rem; margin-top: 10px; }
.hyxvvtr-area-map-nearby a { font-weight: 600; }
.hyxvvtr-reviews-block h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; margin-bottom: 12px; }
.hyxvvtr-reviews-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hyxvvtr-reviews-rating strong { font-size: 1.2rem; }
.hyxvvtr-reviews-rating span { color: var(--text-muted); font-size: .9rem; }
.hyxvvtr-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hyxvvtr-review-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.hyxvvtr-review-card p { font-style: italic; color: var(--text-dark); margin-bottom: 10px; font-size: .92rem; }
.hyxvvtr-review-card span { color: var(--text-muted); font-size: .82rem; font-weight: 600; }
/* One floating call pill, lifted off the bottom edge (fleet directive Aug-25:
   a single colored button per surface — the estimate/book companion is gone). */
.hyxvvtr-stickybar { position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 1100; display: none; gap: 8px; }
.hyxvvtr-stickybar a { flex: 1; text-align: center; padding: 15px 8px; font-weight: 800; font-size: .95rem; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.32); }
.hyxvvtr-stickybar-call { background: #16a34a; color: #fff; } /* calls are the goal → green */
.hyxvvtr-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) {
  .hyxvvtr-stickybar { display: flex; }
  /* No .hyxvvtr-fab on mobile — the floating Call pill already carries the call CTA,
     and the corner is reserved for the chat bubble (raised above the pill). */
  body { padding-bottom: 84px; }
}
@media (min-width: 769px) {
  .hyxvvtr-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 ── */
.hyxvvtr-contact-form { background: #fff; border-radius: 16px; padding: 36px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.hyxvvtr-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.hyxvvtr-cf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.hyxvvtr-cf-field label { font-weight: 600; font-size: .88rem; color: var(--text-dark); margin-bottom: 6px; letter-spacing: .01em; }
.hyxvvtr-cf-req { color: var(--accent); }
.hyxvvtr-cf-field input, .hyxvvtr-cf-field select, .hyxvvtr-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; }
.hyxvvtr-cf-field input:focus, .hyxvvtr-cf-field select:focus, .hyxvvtr-cf-field textarea:focus { border-color: var(--primary); background: #fff; }
.hyxvvtr-cf-field textarea { resize: vertical; min-height: 100px; }
.hyxvvtr-cf-success { text-align: center; padding: 48px 24px; }
.hyxvvtr-cf-success h3 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 12px 0 8px; }
.hyxvvtr-cf-success p { color: var(--text-muted); }
.hyxvvtr-cf-text-row { text-align: center; margin-top: 14px; font-size: .92rem; color: var(--text-muted); }
.hyxvvtr-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; }
.hyxvvtr-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; }
}

/* ── Floating mobile call button (all pages) — one colored pill, lifted a bit
      above the bottom edge; the old full-width two-button bar is gone. ── */
.hyxvvtr-mobile-cta { display: none; position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 1200; background: transparent; padding: 0; gap: 8px; }
.hyxvvtr-mobile-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 12px; font-weight: 800; font-size: .95rem; transition: opacity .2s; box-shadow: 0 6px 22px rgba(0,0,0,.32); }
.hyxvvtr-mobile-cta a:hover { opacity: .92; }
.hyxvvtr-mcta-call { background: #16a34a; color: #fff; }
.hyxvvtr-mcta-call svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  .hyxvvtr-mobile-cta { display: flex; }
  body.hyxvvtr-has-mcta { padding-bottom: 84px; }
  /* 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; }
  /* Mobile = call-first: the header is just logo + menu; the call CTA lives in
     the floating bottom pill. */
  .header-phone { display: none; }
  .hyxvvtr-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; }
  .hyxvvtr-lightbox-prev, .hyxvvtr-lightbox-next { width: 40px; height: 40px; }
  .hyxvvtr-lightbox-prev { left: 10px; }
  .hyxvvtr-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 .hyxvvtr-band:nth-of-type(even) { padding: 16px; margin: 12px 0; }
  .hyxvvtr-feature-card { padding: 20px; }
  .hyxvvtr-price-callout, .hyxvvtr-cta-strip { padding: 20px; }
  .hyxvvtr-cta-strip { flex-direction: column; align-items: stretch; }
  .hyxvvtr-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; }
  .hyxvvtr-cf-row { grid-template-columns: 1fr; }
  .hyxvvtr-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; }

/* ══ Tier-0 Umbrella design system (umbrella-home only) ═══════════════════════
   Heritage-premium portfolio look: deep navy + warm gold, serif display type,
   generous whitespace, card system with soft navy shadows. Loads after the base
   sheet, so it deliberately re-skins base chrome (buttons, header, sections) —
   safe because only UMBRELLA_HOME sites ever receive this block. */
:root {
  --umb-navy: #0B0E11;
  --umb-navy-deep: #05070A;
  --umb-navy-2: #28313A;
  --umb-gold: #8A6A3A;
  --umb-gold-bright: #C2A16A;
  --umb-gold-deep: #6B5129;
  --umb-cream: #F6F4EF;
  --umb-cloud: #F1F2F4;
  --umb-ink: #12161A;
  --umb-slate: #5A626B;
  --umb-line: #E4E6E9;
  --umb-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --umb-shadow-sm: 0 2px 10px rgba(11,14,17,.07);
  --umb-shadow-md: 0 10px 30px rgba(11,14,17,.10);
  --umb-shadow-lg: 0 18px 44px rgba(11,14,17,.16);
}
body { color: var(--umb-ink); }
h1, h2, h3, h4 { font-family: var(--umb-display); color: var(--umb-navy); letter-spacing: -.01em; }
.section-header h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-header p { color: var(--umb-slate); }
.btn-primary { background: var(--umb-gold); color: var(--umb-navy-deep); border-radius: 9px; box-shadow: 0 4px 14px rgba(138,106,58,.35); }
.btn-primary:hover { background: var(--umb-gold-bright); color: var(--umb-navy-deep); opacity: 1; }
.btn-secondary { border-color: rgba(255,255,255,.55); }
a { color: var(--umb-navy-2); }

/* Gold section eyebrow */
.hyxvvtr-umb-eyebrow { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--umb-gold-deep); margin-bottom: 12px; }
.hyxvvtr-umb-center { text-align: center; }

/* ── Utility strip ── */
.hyxvvtr-mega-util { background: var(--umb-navy-deep); color: rgba(255,255,255,.72); font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.08); max-width: 100%; overflow-x: hidden; }
.hyxvvtr-mega-util-inner { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.hyxvvtr-mega-util-links { display: flex; gap: 22px; flex-wrap: wrap; }
.hyxvvtr-mega-util-links a { color: rgba(255,255,255,.72); font-weight: 600; letter-spacing: .01em; transition: color .15s; }
.hyxvvtr-mega-util-links a:hover { color: #fff; }
.hyxvvtr-mega-util-note { color: rgba(255,255,255,.5); font-weight: 600; white-space: nowrap; letter-spacing: .03em; }
.hyxvvtr-mega-util-phone { color: #fff !important; font-weight: 700; white-space: nowrap; }
.hyxvvtr-mega-util-phone:hover { color: var(--umb-gold-bright) !important; }

/* ── Header re-skin (LIGHT — the brand mark carries navy elements, so the bar is
   white with navy type; the utility strip above stays navy-deep for contrast) ── */
.site-header { background: #fff; box-shadow: 0 1px 0 var(--umb-line), 0 6px 22px rgba(11,14,17,.07); }
.site-header::after { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--umb-gold) 18%, var(--umb-gold) 82%, transparent 100%); opacity: .9; }
.site-header.hyxvvtr-scrolled, body.nav-open .site-header { background: #fff; }
.header-inner { height: 76px; }
.site-logo-name { font-family: var(--umb-display); text-transform: none; font-size: 1.34rem; letter-spacing: .01em; color: var(--umb-navy); }
.site-logo-tagline { color: var(--umb-slate); font-size: .73rem; }
.header-nav a { color: var(--umb-ink); font-size: .85rem; padding: 8px 9px; }
.header-nav a:hover { color: var(--umb-navy); background: var(--umb-cream); }
@media (max-width: 1280px) { .site-logo-tagline { display: none; } .header-nav a { font-size: .82rem; padding: 8px 7px; } }
.header-phone { background: transparent; padding: 6px 2px; font-size: 1.02rem; font-weight: 800; color: var(--umb-navy) !important; }
.header-phone:hover { color: var(--umb-gold-deep) !important; }
.hyxvvtr-nav-toggle span { background: var(--umb-navy); }
.hyxvvtr-mega-book { display: inline-flex; align-items: center; justify-content: center; background: var(--umb-gold); color: var(--umb-navy-deep) !important; padding: 11px 22px; border-radius: 9px; font-weight: 800; font-size: .93rem; flex-shrink: 0; box-shadow: 0 3px 12px rgba(138,106,58,.4); transition: transform .1s, background .2s; }
.hyxvvtr-mega-book:hover { background: var(--umb-gold-bright); transform: translateY(-1px); }
.hyxvvtr-mcta-book { background: var(--umb-gold); color: var(--umb-navy-deep); }

/* Wordmark-only header lockup (sf_umb_wordmark set): the mark carries the name. */
.hyxvvtr-umb-wordmark { display: block; height: 58px; width: auto; max-width: 300px; object-fit: contain; }
.hyxvvtr-umb-srname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Umbrella nav dropdown (Services) */
.hyxvvtr-umb-nav-item { position: relative; }
.hyxvvtr-umb-nav-item > a::after { content: '▾'; font-size: .68rem; margin-left: 5px; opacity: .7; }
.hyxvvtr-umb-nav-drop { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--umb-line); border-radius: 12px; box-shadow: var(--umb-shadow-lg); padding: 10px; display: none; z-index: 1200; }
.hyxvvtr-umb-nav-item:hover .hyxvvtr-umb-nav-drop, .hyxvvtr-umb-nav-item:focus-within .hyxvvtr-umb-nav-drop { display: block; }
.hyxvvtr-umb-nav-drop a { display: block; color: var(--umb-ink) !important; font-weight: 600; font-size: .9rem; padding: 9px 12px; border-radius: 8px; }
.hyxvvtr-umb-nav-drop a:hover { background: var(--umb-cream); color: var(--umb-navy) !important; }

/* ── Hero (photo under a navy scrim; gradient is the no-photo fallback) ── */
.hyxvvtr-umb-hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% -10%, var(--umb-navy-2) 0%, var(--umb-navy) 46%, var(--umb-navy-deep) 100%); color: #fff; padding: 92px 0 96px; text-align: center; }
.hyxvvtr-umb-hero .hyxvvtr-hero-scrim { background: linear-gradient(180deg, rgba(11,14,17,.84) 0%, rgba(11,14,17,.72) 50%, rgba(5,7,10,.9) 100%); }
.hyxvvtr-umb-arch { position: absolute; inset: auto -60px -140px auto; width: 560px; height: 560px; z-index: 1; color: #fff; opacity: .05; pointer-events: none; }
.hyxvvtr-umb-hero .container { position: relative; z-index: 2; }
.hyxvvtr-umb-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--umb-gold-bright); margin-bottom: 20px; }
.hyxvvtr-umb-hero-eyebrow::before, .hyxvvtr-umb-hero-eyebrow::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--umb-gold)); }
.hyxvvtr-umb-hero-eyebrow::after { background: linear-gradient(90deg, var(--umb-gold), transparent); }
.hyxvvtr-umb-hero h1 { font-size: clamp(2.25rem, 5vw, 3.7rem); line-height: 1.1; margin: 0 auto; max-width: 940px; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hyxvvtr-umb-hero h1 em { font-style: normal; color: var(--umb-gold-bright); }
.hyxvvtr-umb-hero-sub { font-size: 1.13rem; color: rgba(255,255,255,.85); max-width: 700px; margin: 20px auto 0; line-height: 1.7; }

/* Hero finder bar (compound widget) */
.hyxvvtr-umb-finder { max-width: 780px; margin: 34px auto 0; background: #fff; border-radius: 14px; box-shadow: var(--umb-shadow-lg); display: grid; grid-template-columns: 1.35fr .8fr auto; overflow: hidden; text-align: left; }
.hyxvvtr-umb-finder-cell { display: flex; flex-direction: column; gap: 2px; padding: 13px 18px; border-right: 1px solid var(--umb-line); }
.hyxvvtr-umb-finder-cell label { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--umb-slate); }
.hyxvvtr-umb-finder-cell select, .hyxvvtr-umb-finder-cell input { border: 0; outline: none; font-size: 1rem; font-weight: 600; color: var(--umb-ink); background: #fff; padding: 2px 0; width: 100%; }
.hyxvvtr-umb-finder-btn { border: 0; cursor: pointer; background: var(--umb-gold); color: var(--umb-navy-deep); font-weight: 800; font-size: 1rem; padding: 0 30px; display: inline-flex; align-items: center; gap: 9px; transition: background .2s; }
.hyxvvtr-umb-finder-btn:hover { background: var(--umb-gold-bright); }
.hyxvvtr-umb-finder-btn svg { width: 18px; height: 18px; }

/* Hero trust badges (moats) */
.hyxvvtr-umb-hero-badges { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; margin-top: 32px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.78); }
.hyxvvtr-umb-hero-badges span { display: inline-flex; align-items: center; gap: 8px; }
.hyxvvtr-umb-hero-badges svg { width: 16px; height: 16px; color: var(--umb-gold-bright); flex-shrink: 0; }

/* ── Popular services (vertical tiles) ── */
.hyxvvtr-umb-services { padding: 84px 0 76px; background: #fff; }
.hyxvvtr-umb-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 26px 14px; margin-top: 40px; }
.hyxvvtr-umb-service-tile { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.hyxvvtr-umb-service-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--umb-cream); border: 1px solid #E7E3D9; color: var(--umb-navy); display: flex; align-items: center; justify-content: center; transition: all .18s; }
.hyxvvtr-umb-service-ic svg { width: 38px; height: 38px; }
.hyxvvtr-umb-service-tile:hover .hyxvvtr-umb-service-ic { background: var(--umb-navy); color: var(--umb-gold-bright); transform: translateY(-4px); box-shadow: var(--umb-shadow-md); border-color: var(--umb-navy); }
.hyxvvtr-umb-service-tile span { font-weight: 700; font-size: .92rem; color: var(--umb-ink); line-height: 1.3; }
.hyxvvtr-umb-service-tile:hover span { color: var(--umb-navy); }

/* ── The family way (values) — compact horizontal cards ── */
.hyxvvtr-umb-values { padding: 66px 0; background: var(--umb-cream); border-top: 1px solid #EDEAE1; border-bottom: 1px solid #EDEAE1; }
.hyxvvtr-umb-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 32px; }
.hyxvvtr-umb-value-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--umb-line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--umb-shadow-sm); transition: transform .15s, box-shadow .15s; }
.hyxvvtr-umb-value-card:hover { transform: translateY(-2px); box-shadow: var(--umb-shadow-md); }
.hyxvvtr-umb-value-ic { display: block; flex-shrink: 0; width: 36px; height: 32px; margin-top: 3px; color: var(--umb-gold); }
.hyxvvtr-umb-value-ic svg { display: block; width: 100%; height: 100%; }
.hyxvvtr-umb-value-card h3 { font-size: 1.04rem; margin: 0 0 3px; }
.hyxvvtr-umb-value-card p { margin: 0; color: var(--umb-slate); font-size: .87rem; line-height: 1.55; }

/* ── Brands — interactive snap carousel (drag / scroll / swipe, dot nav).
   Wordmark sources are 1024-square renders with generous margins, so wide tiles
   COVER-crop the vertical white space: the mark keeps its width-bound size while
   the card stays short. ── */
.hyxvvtr-umb-brands { padding: 76px 0 80px; background: #fff; }
.hyxvvtr-umb-brandslider { position: relative; overflow: hidden; margin-top: 38px; }
.hyxvvtr-umb-brandslider::before, .hyxvvtr-umb-brandslider::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.hyxvvtr-umb-brandslider::before { left: 0; background: linear-gradient(90deg, #fff 12%, rgba(255,255,255,0)); }
.hyxvvtr-umb-brandslider::after { right: 0; background: linear-gradient(270deg, #fff 12%, rgba(255,255,255,0)); }
.hyxvvtr-umb-slidetrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 48px 14px; cursor: grab; }
.hyxvvtr-umb-slidetrack::-webkit-scrollbar { display: none; }
.hyxvvtr-umb-slidetrack.hyxvvtr-umb-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hyxvvtr-umb-slide { scroll-snap-align: center; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-right: 18px; padding: 16px 20px; min-width: 200px; background: #fff; border: 1px solid var(--umb-line); border-radius: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hyxvvtr-umb-slide:hover { border-color: rgba(138,106,58,.6); box-shadow: var(--umb-shadow-md); transform: translateY(-3px); }
.hyxvvtr-umb-slide img { width: 96px; height: 96px; object-fit: contain; display: block; }
.hyxvvtr-umb-slide img.hyxvvtr-umb-slide-wide { width: 248px; height: 150px; object-fit: cover; object-position: center; }
.hyxvvtr-umb-slide-fallback { width: 96px; height: 96px; border-radius: 18px; background: var(--umb-navy); color: var(--umb-gold-bright); font-family: var(--umb-display); font-weight: 700; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; }
.hyxvvtr-umb-slide span { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--umb-navy); text-align: center; line-height: 1.35; max-width: 190px; }
.hyxvvtr-umb-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.hyxvvtr-umb-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(11,14,17,.22); cursor: pointer; transition: transform .15s, background .15s; }
.hyxvvtr-umb-dot:hover { background: rgba(11,14,17,.45); }
.hyxvvtr-umb-dot-on { background: var(--umb-gold); transform: scale(1.3); }
.hyxvvtr-umb-brands-more { text-align: center; margin-top: 22px; }
.hyxvvtr-umb-brands-more a { font-weight: 700; color: var(--umb-navy); border-bottom: 2px solid var(--umb-gold); padding-bottom: 2px; }
/* /brands page — family directory cards */
.hyxvvtr-umb-bp-lead { max-width: 760px; margin: 6px 0 30px; color: var(--umb-slate); font-size: 1.08rem; line-height: 1.75; }
.hyxvvtr-umb-bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-bottom: 40px; }
.hyxvvtr-umb-bp-card { background: #fff; border: 1px solid var(--umb-line); border-radius: 18px; overflow: hidden; box-shadow: var(--umb-shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.hyxvvtr-umb-bp-card:hover { transform: translateY(-3px); box-shadow: var(--umb-shadow-md); border-color: rgba(138,106,58,.55); }
.hyxvvtr-umb-bp-logo { display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--umb-line); }
.hyxvvtr-umb-bp-logo img { width: 100%; max-width: 340px; height: 168px; object-fit: cover; object-position: center; display: block; }
.hyxvvtr-umb-bp-logo .hyxvvtr-umb-slide-fallback { margin: 28px 0; }
.hyxvvtr-umb-bp-body { padding: 20px 24px 24px; }
.hyxvvtr-umb-bp-body h2 { font-size: 1.3rem; margin: 0 0 6px; padding: 0; }
.hyxvvtr-umb-bp-body h2::after { display: none; }
.hyxvvtr-umb-bp-tag { font-family: var(--umb-display); font-style: italic; color: var(--umb-slate); margin: 10px 0 16px; }
.hyxvvtr-umb-bp-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; border-top: 1px solid var(--umb-line); padding-top: 14px; }

/* ── Guarantee band ── */
.hyxvvtr-umb-guarantee { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--umb-navy) 0%, var(--umb-navy-deep) 100%); color: #fff; padding: 84px 0; }
.hyxvvtr-umb-guarantee .hyxvvtr-umb-arch { inset: auto auto -180px -80px; opacity: .05; }
.hyxvvtr-umb-guarantee-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; }
.hyxvvtr-umb-guarantee-badge { display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; color: var(--umb-gold-bright); margin-bottom: 22px; filter: drop-shadow(0 6px 18px rgba(138,106,58,.35)); }
.hyxvvtr-umb-guarantee-badge svg { width: 92px; height: 92px; }
.hyxvvtr-umb-guarantee h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0 0 10px; color: #fff; }
.hyxvvtr-umb-guarantee-days { display: inline-block; font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--umb-navy-deep); background: var(--umb-gold); border-radius: 999px; padding: 7px 18px; margin-bottom: 20px; }
.hyxvvtr-umb-guarantee p { color: rgba(255,255,255,.87); font-size: 1.16rem; line-height: 1.75; max-width: 720px; margin: 0 auto 22px; font-family: var(--umb-display); }
.hyxvvtr-umb-guarantee a { display: inline-block; color: var(--umb-gold-bright); font-weight: 700; border-bottom: 1px solid rgba(194,161,106,.5); padding-bottom: 1px; }
.hyxvvtr-umb-guarantee a:hover { border-color: var(--umb-gold-bright); }

/* ── Story ── */
.hyxvvtr-umb-story { padding: 92px 0; background: #fff; }
.hyxvvtr-umb-story-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: start; }
.hyxvvtr-umb-story h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 22px; }
.hyxvvtr-umb-story-text { color: var(--umb-slate); font-size: 1.06rem; line-height: 1.85; }
.hyxvvtr-umb-story-text p { margin: 0 0 18px; }
.hyxvvtr-umb-story-text > p:first-of-type::first-letter { font-family: var(--umb-display); font-size: 3.6rem; line-height: .82; float: left; padding: 6px 10px 0 0; color: var(--umb-gold); font-weight: 700; }
.hyxvvtr-umb-story-sign { font-family: var(--umb-display); font-style: italic; color: var(--umb-navy); font-size: 1.05rem; margin-top: 6px; }
.hyxvvtr-umb-stats { background: var(--umb-cream); border: 1px solid #E7E3D9; border-top: 4px solid var(--umb-gold); border-radius: 16px; padding: 30px 28px; box-shadow: var(--umb-shadow-sm); }
.hyxvvtr-umb-stat { padding: 16px 0; border-bottom: 1px solid #DFDACC; display: flex; flex-direction: column; gap: 3px; }
.hyxvvtr-umb-stat:last-child { border-bottom: 0; }
.hyxvvtr-umb-stat-num { font-family: var(--umb-display); font-size: 2.1rem; font-weight: 700; color: var(--umb-navy); line-height: 1.1; }
.hyxvvtr-umb-stat-label { font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--umb-gold-deep); }

/* ── Offers (family coupons) ── */
.hyxvvtr-umb-offers { padding: 84px 0; background: var(--umb-cloud); border-top: 1px solid var(--umb-line); border-bottom: 1px solid var(--umb-line); }
.hyxvvtr-umb-offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px; }
.hyxvvtr-umb-offer { position: relative; background: #fff; border: 2px dashed rgba(138,106,58,.65); border-radius: 14px; padding: 26px 24px 22px; text-align: center; transition: transform .15s, box-shadow .15s; }
.hyxvvtr-umb-offer:hover { transform: translateY(-3px); box-shadow: var(--umb-shadow-md); }
.hyxvvtr-umb-offer-amt { font-family: var(--umb-display); font-size: 2rem; font-weight: 700; color: var(--umb-gold-deep); line-height: 1.1; margin-bottom: 8px; }
.hyxvvtr-umb-offer-title { font-weight: 700; color: var(--umb-ink); font-size: 1rem; line-height: 1.45; }
.hyxvvtr-umb-offer-note { margin-top: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--umb-slate); }

/* ── Tips feed ── */
.hyxvvtr-umb-tips { padding: 88px 0; background: #fff; }
.hyxvvtr-umb-tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; }
.hyxvvtr-umb-tip { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--umb-line); border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.hyxvvtr-umb-tip:hover { transform: translateY(-3px); box-shadow: var(--umb-shadow-md); }
.hyxvvtr-umb-tip-thumb { height: 172px; background: linear-gradient(140deg, var(--umb-navy) 0%, var(--umb-navy-2) 100%); display: flex; align-items: center; justify-content: center; color: var(--umb-gold-bright); }
.hyxvvtr-umb-tip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hyxvvtr-umb-tip-thumb svg { width: 44px; height: 44px; opacity: .8; }
.hyxvvtr-umb-tip-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hyxvvtr-umb-tip-date { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--umb-gold-deep); margin-bottom: 8px; }
.hyxvvtr-umb-tip h3 { font-size: 1.14rem; line-height: 1.35; margin: 0 0 10px; }
.hyxvvtr-umb-tip h3 a { color: var(--umb-navy); }
.hyxvvtr-umb-tip p { color: var(--umb-slate); font-size: .94rem; line-height: 1.6; margin: 0 0 16px; flex: 1; }
.hyxvvtr-umb-tip-more { font-weight: 700; font-size: .9rem; color: var(--umb-gold-deep); }
.hyxvvtr-umb-tip-more:hover { color: var(--umb-gold); }
.hyxvvtr-umb-tips-cta { text-align: center; margin-top: 36px; }
.hyxvvtr-umb-tips-cta a { font-weight: 700; color: var(--umb-navy); border-bottom: 2px solid var(--umb-gold); padding-bottom: 2px; }
/* Article featured images: single-post hero + blog-index card thumbnails */
.hyxvvtr-umb-post-img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 16px; box-shadow: var(--umb-shadow-md); margin: 16px 0 10px; }
.hyxvvtr-umb-blogthumb { display: block; margin-bottom: 18px; }
.hyxvvtr-umb-blogthumb img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; box-shadow: var(--umb-shadow-sm); }

/* ── Coverage band ── */
.hyxvvtr-umb-coverage { background: var(--umb-navy-2); color: #fff; padding: 56px 0; text-align: center; }
.hyxvvtr-umb-coverage h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 20px; }
.hyxvvtr-umb-coverage h2 em { font-style: normal; color: var(--umb-gold-bright); }
.hyxvvtr-umb-states { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 0 auto; }
.hyxvvtr-umb-states span { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; letter-spacing: .06em; border-radius: 8px; padding: 6px 11px; }

/* ── Find-a-Pro router ── */
.hyxvvtr-umb-router { background: var(--umb-cream); padding: 84px 0; border-top: 1px solid #EDEAE1; }
.hyxvvtr-umb-router-card { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--umb-line); border-top: 4px solid var(--umb-gold); border-radius: 18px; padding: 42px 40px; box-shadow: var(--umb-shadow-lg); }
.hyxvvtr-umb-router-card h2 { text-align: center; margin: 0 0 8px; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.hyxvvtr-umb-router-lead { text-align: center; color: var(--umb-slate); margin: 0 0 26px; font-size: 1.02rem; }
.hyxvvtr-umb-router-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hyxvvtr-umb-router-field { display: flex; flex-direction: column; gap: 6px; }
.hyxvvtr-umb-router-field.hyxvvtr-umb-router-wide { grid-column: 1 / -1; }
.hyxvvtr-umb-router-field label { font-size: .8rem; font-weight: 800; letter-spacing: .03em; color: var(--umb-navy); }
.hyxvvtr-umb-router-field input, .hyxvvtr-umb-router-field select { padding: 13px 15px; border: 1px solid var(--umb-line); border-radius: 10px; font-size: 1rem; background: #fff; color: var(--umb-ink); transition: border-color .15s, box-shadow .15s; }
.hyxvvtr-umb-router-field input:focus, .hyxvvtr-umb-router-field select:focus { border-color: var(--umb-gold); outline: none; box-shadow: 0 0 0 3px rgba(138,106,58,.18); }
.hyxvvtr-umb-router-phone { grid-column: 1 / -1; margin: 2px 0 0; padding: 13px 16px; border-radius: 10px; background: rgba(138,106,58,.09); border: 1px dashed rgba(138,106,58,.5); font-weight: 700; color: var(--umb-navy); text-align: center; }
.hyxvvtr-umb-router-phone a { color: var(--umb-gold-deep); }
.hyxvvtr-umb-router-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hyxvvtr-umb-router-submit { grid-column: 1 / -1; margin-top: 6px; }
.hyxvvtr-umb-router-submit button { width: 100%; padding: 16px; border: 0; border-radius: 11px; background: var(--umb-gold); color: var(--umb-navy-deep); font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 14px rgba(138,106,58,.35); transition: background .2s; }
.hyxvvtr-umb-router-submit button:hover { background: var(--umb-gold-bright); }
.hyxvvtr-umb-router-privacy { grid-column: 1 / -1; text-align: center; font-size: .8rem; color: var(--umb-slate); margin-top: 2px; }

/* ── Franchise band ── */
.hyxvvtr-umb-franchise { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--umb-navy) 0%, var(--umb-navy-deep) 100%); color: #fff; padding: 78px 0; }
.hyxvvtr-umb-franchise .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.hyxvvtr-umb-franchise h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 12px; color: #fff; }
.hyxvvtr-umb-franchise p { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 640px; margin: 0; line-height: 1.7; }
.hyxvvtr-umb-franchise-ctas { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.hyxvvtr-umb-franchise .btn-primary { justify-content: center; padding: 15px 30px; }
.hyxvvtr-umb-franchise .btn-secondary { justify-content: center; padding: 13px 28px; }

/* ── Moats bar (retained utility) ── */
.hyxvvtr-mega-moats { background: var(--umb-navy-deep); padding: 24px 0; }
.hyxvvtr-mega-moats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 26px; }
.hyxvvtr-mega-moat { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.hyxvvtr-mega-moat-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(138,106,58,.22); display: inline-flex; align-items: center; justify-content: center; color: var(--umb-gold-bright); }
.hyxvvtr-mega-moat-ic svg { width: 18px; height: 18px; }

/* ── Footer re-skin ── */
.site-footer { background: var(--umb-navy-deep); }
.site-footer::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--umb-gold) 20%, var(--umb-gold) 80%, transparent 100%); opacity: .8; }
.footer-col h4 { font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--umb-gold-bright); }
.hyxvvtr-umb-foot-name { font-family: var(--umb-display); font-size: 1.35rem; color: #fff; margin-bottom: 6px; }
.hyxvvtr-umb-foot-slogan { font-family: var(--umb-display); font-style: italic; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.hyxvvtr-umb-foot-trust { text-align: center; color: rgba(255,255,255,.55); font-size: .84rem; font-weight: 600; margin-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.hyxvvtr-umb-foot-trust span::after { content: '·'; margin-left: 10px; color: rgba(255,255,255,.3); }
.hyxvvtr-umb-foot-trust span:last-child::after { content: ''; }
.hyxvvtr-umb-foot-legal { max-width: 920px; margin: 0 auto 18px; text-align: center; font-size: .76rem; line-height: 1.7; color: rgba(255,255,255,.4); }

/* ── Interior hero PHOTO (service + city pages) ──
   The umbrella's homepage hero photograph behind the same navy scrim, so an
   interior title band is branded rather than a flat colour block. Only applies
   when sf_role_hero_bg() emitted an image; otherwise nothing here matches. */
.page-hero-section.hyxvvtr-hero-photo { position: relative; overflow: hidden; }
.page-hero-section .hyxvvtr-role-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.page-hero-section .hyxvvtr-hero-scrim--page { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,14,17,.86) 0%, rgba(11,14,17,.76) 55%, rgba(5,7,10,.93) 100%); }
.page-hero-section.hyxvvtr-hero-photo > .container { position: relative; z-index: 2; }
.page-hero-section.hyxvvtr-hero-photo h1,
.page-hero-section.hyxvvtr-hero-photo .hyxvvtr-hero-subhead,
.page-hero-section.hyxvvtr-hero-photo .hyxvvtr-hero-bullets li { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }

/* ── Interior page chrome (brands hub / equity / promise / service hubs) ── */
.page-content-wrapper { background: #fff; }
.page-content h2 { position: relative; font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 44px 0 18px; padding-bottom: 12px; }
.page-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--umb-gold); border-radius: 2px; }
.page-content h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.page-content p, .page-content li { color: var(--umb-slate); font-size: 1.02rem; line-height: 1.8; }
.page-content blockquote { border-left: 4px solid var(--umb-gold); background: var(--umb-cream); border-radius: 0 12px 12px 0; padding: 18px 24px; font-family: var(--umb-display); font-style: italic; color: var(--umb-navy); }
.hyxvvtr-brand-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 18px 0 26px; }
.hyxvvtr-brand-links li { margin: 0; }
.hyxvvtr-brand-links a { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--umb-line); border-radius: 11px; padding: 13px 16px; font-weight: 700; font-size: .95rem; color: var(--umb-navy); transition: border-color .15s, box-shadow .15s, transform .15s; }
.hyxvvtr-brand-links a::before { content: '→'; color: var(--umb-gold); font-weight: 800; }
.hyxvvtr-brand-links a:hover { border-color: rgba(138,106,58,.6); box-shadow: var(--umb-shadow-sm); transform: translateY(-1px); }
.hyxvvtr-visit-brand .hyxvvtr-btn, .hyxvvtr-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--umb-gold); color: var(--umb-navy-deep); padding: 13px 26px; border-radius: 10px; font-weight: 800; box-shadow: 0 4px 14px rgba(138,106,58,.3); transition: background .2s; }
.hyxvvtr-btn:hover { background: var(--umb-gold-bright); color: var(--umb-navy-deep); }
.hyxvvtr-brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 26px 0; }
.hyxvvtr-brands-grid .hyxvvtr-brand-card { background: #fff; border: 1px solid var(--umb-line); border-radius: 16px; padding: 26px; box-shadow: var(--umb-shadow-sm); transition: transform .15s, box-shadow .15s; }
.hyxvvtr-brands-grid .hyxvvtr-brand-card:hover { transform: translateY(-3px); box-shadow: var(--umb-shadow-md); }
.hyxvvtr-brands-grid .hyxvvtr-brand-card h3 { margin: 0 0 4px; font-size: 1.24rem; }
.hyxvvtr-brand-niche { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--umb-gold-deep); background: rgba(138,106,58,.12); border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; }
.hyxvvtr-brand-tagline { font-family: var(--umb-display); font-style: italic; color: var(--umb-slate); margin: 0 0 14px; }
.hyxvvtr-franchise-brands { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 18px 0 26px; }
.hyxvvtr-franchise-brands li { margin: 0; }
.hyxvvtr-franchise-brands a { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--umb-line); border-radius: 11px; padding: 13px 16px; font-weight: 700; font-size: .95rem; color: var(--umb-navy); transition: border-color .15s, box-shadow .15s; }
.hyxvvtr-franchise-brands a::before { content: '→'; color: var(--umb-gold); font-weight: 800; }
.hyxvvtr-franchise-brands a:hover { border-color: rgba(138,106,58,.6); box-shadow: var(--umb-shadow-sm); }
.hyxvvtr-vertical-cta { background: linear-gradient(140deg, var(--umb-navy) 0%, var(--umb-navy-deep) 100%); border-radius: 18px; color: #fff; text-align: center; padding: 40px 34px 34px; margin: 40px 0 26px; }
.hyxvvtr-vertical-cta h2 { color: #fff; margin: 0 0 10px; padding: 0; }
.hyxvvtr-vertical-cta h2::after { display: none; }
.hyxvvtr-vertical-cta .hyxvvtr-vertical-phone { color: rgba(255,255,255,.9); font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.hyxvvtr-vertical-cta .hyxvvtr-vertical-phone a { color: var(--umb-gold-bright); font-family: var(--umb-display); font-size: 1.5rem; }
.hyxvvtr-vertical-cta .hyxvvtr-vertical-note { color: rgba(255,255,255,.65); font-size: .9rem; margin: 0; }
.hyxvvtr-brand-state-cities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 16px 0 26px; }
.hyxvvtr-brand-state-cities li { margin: 0; }
.hyxvvtr-brand-state-cities a { display: block; background: var(--umb-cream); border: 1px solid #E7E3D9; border-radius: 9px; padding: 10px 14px; font-weight: 600; font-size: .92rem; color: var(--umb-navy); }
.hyxvvtr-brand-state-cities a:hover { border-color: var(--umb-gold); }

@media (max-width: 900px) {
  .hyxvvtr-umb-story-grid { grid-template-columns: 1fr; gap: 36px; }
  .hyxvvtr-umb-franchise .container { grid-template-columns: 1fr; text-align: center; }
  .hyxvvtr-umb-franchise p { margin: 0 auto; }
  .hyxvvtr-umb-franchise-ctas { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .hyxvvtr-mega-util-inner { justify-content: center; }
  .hyxvvtr-mega-util-phone { display: none; }
  .hyxvvtr-mega-util-note { display: none; }
  .hyxvvtr-mega-book { display: none; }
  .hyxvvtr-umb-finder { grid-template-columns: 1fr; }
  .hyxvvtr-umb-finder-cell { border-right: 0; border-bottom: 1px solid var(--umb-line); }
  .hyxvvtr-umb-finder-btn { padding: 16px; justify-content: center; }
  .hyxvvtr-umb-router-grid { grid-template-columns: 1fr; }
  .hyxvvtr-umb-router-card { padding: 30px 22px; }
  .hyxvvtr-umb-services-grid { grid-template-columns: repeat(3, 1fr); }
  .hyxvvtr-umb-hero { padding: 64px 0 70px; }
  .hyxvvtr-umb-wordmark { height: 42px; max-width: 210px; }
  .hyxvvtr-umb-slide img.hyxvvtr-umb-slide-wide { width: 224px; height: 138px; }
  /* Collapsed mobile nav (white panel): links navy, hairline separators. */
  .header-nav a { border-bottom-color: var(--umb-line); }
  .hyxvvtr-umb-nav-item > a::after { content: ''; }
  .hyxvvtr-umb-nav-drop { position: static; display: block; background: transparent; border: 0; box-shadow: none; padding: 0 0 4px 16px; min-width: 0; }
  .hyxvvtr-umb-nav-drop a { color: var(--umb-slate) !important; padding: 7px 10px; border-bottom: 0; }
  .hyxvvtr-umb-nav-drop a:hover { background: var(--umb-cream); color: var(--umb-navy) !important; }
}
/* ── Haven design pass ───────────────────────────────────────────────────────── */

/* Logos. logo-<id>-full.png is a 1024px SQUARE with the mark fitted into a 260px
   centre band (normalizeBrandWordmark), and the chassis shows it by cropping that
   band with object-fit:cover. So the crop is the mechanism, and "contain" is wrong
   here — it fits the whole square and shrinks the mark to nothing (tried it; the
   Servo mark all but vanished). The real problem was the slot: 230x64 shows a 285px
   band, leaving a 260px mark ~12px of air, so a stacked crest lost its last line.
   280x88 scales the mark up ~22% and shows a 322px band. */
.hyxvvtr-mgh-wordmark { height: 88px; width: 280px; max-width: 280px; object-fit: cover; object-position: center; }
@media (max-width: 980px) { .hyxvvtr-mgh-wordmark { height: 70px; width: 222px; max-width: 222px; } }
@media (max-width: 640px) { .hyxvvtr-mgh-wordmark { height: 58px; width: 184px; max-width: 184px; } }

/* Orphaned cards. H.A.V.E.N. is always five values; auto-fit laid them out 4 + 1.
   Five across on desktop, then 3 + 2 rather than ever leaving one alone. */
.hyxvvtr-mgh-values-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hyxvvtr-mgh-values-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hyxvvtr-mgh-values-grid > * { grid-column: span 2; }
  .hyxvvtr-mgh-values-grid > *:nth-child(4) { grid-column: 2 / span 2; } }
@media (max-width: 640px) { .hyxvvtr-mgh-values-grid { grid-template-columns: 1fr; }
  .hyxvvtr-mgh-values-grid > *, .hyxvvtr-mgh-values-grid > *:nth-child(4) { grid-column: auto; } }
.hyxvvtr-umb-values-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .hyxvvtr-umb-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* The financing band sets color:#fff on the wrapper, but the content typography
   re-colours <strong> to ink, so the headline rendered dark on the dark band. */
.hyxvvtr-cv-fin, .hyxvvtr-cv-fin strong, .hyxvvtr-cv-fin span { color: #fff !important; }
.hyxvvtr-cv-fin .hyxvvtr-cv-fn { opacity: .82; }

/* Photographs in long-form pages. */
.hyxvvtr-hv-fig { margin: 22px 0 28px; border-radius: 16px; overflow: hidden; background: #eef0f2; box-shadow: 0 1px 2px rgba(18,22,26,.06), 0 10px 28px -14px rgba(18,22,26,.28); }
.hyxvvtr-hv-fig img { display: block; width: 100%; height: clamp(220px, 34vw, 400px); object-fit: cover; }
.hyxvvtr-hv-fig figcaption { padding: 10px 16px; font-size: .84rem; color: #5a626b; background: #fff; border-top: 1px solid #e4e6e9; }
.hyxvvtr-hv-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 30px; }
.hyxvvtr-hv-duo figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #eef0f2; }
.hyxvvtr-hv-duo img { display: block; width: 100%; height: clamp(170px, 24vw, 290px); object-fit: cover; }
.hyxvvtr-hv-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(18,22,26,.78); }
.hyxvvtr-hv-tag.hyxvvtr-hv-after { background: var(--mg-cta, var(--primary)); }
@media (max-width: 560px) { .hyxvvtr-hv-duo { grid-template-columns: 1fr; } }

/* Sub-job structure. A DEEP hub is H2 service > H3 sub-job > H4 signs/cost/how, but
   all three levels rendered as near-identical bold lines, so the hierarchy the
   page is built on was invisible. Scoped to hub pages via the hyxvvtr-hub-svc sibling. */
.hyxvvtr-hub-svc ~ h3 { margin: 34px 0 12px; padding: 14px 0 0; border-top: 1px solid #e4e6e9; font-size: 1.18rem; }
.hyxvvtr-hub-svc ~ h4 { margin: 18px 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mg-cta, var(--primary)); }
.hyxvvtr-hub-svc ~ h4 + p { margin-top: 0; }

/* Mid-page call band — a 5,000-word hub had one CTA at the top and one at the end. */
.hyxvvtr-hv-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 34px 0; padding: 22px 26px; border-radius: 16px; color: #fff; background: #12161a; }
.hyxvvtr-hv-cta strong { display: block; font-size: 1.12rem; color: #fff !important; }
.hyxvvtr-hv-cta span { font-size: .92rem; color: rgba(255,255,255,.78) !important; }
.hyxvvtr-hv-cta a { flex-shrink: 0; padding: 13px 22px; border-radius: 10px; font-weight: 800; text-decoration: none; color: #fff !important; background: var(--mg-cta, var(--primary)); }

/* Homepage: recent work + styles. */
.hyxvvtr-hv-sec { padding: 78px 0; }
.hyxvvtr-hv-sec.hyxvvtr-hv-tint { background: #f6f4ef; }
.hyxvvtr-hv-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.hyxvvtr-hv-eyebrow { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mg-cta, var(--primary)); }
.hyxvvtr-hv-head h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); text-wrap: balance; }
.hyxvvtr-hv-head p { margin: 0; color: #5a626b; }
.hyxvvtr-hv-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.hyxvvtr-hv-work-card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e4e6e9; }
.hyxvvtr-hv-work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.hyxvvtr-hv-work-pair figure { margin: 0; position: relative; }
.hyxvvtr-hv-work-pair img { display: block; width: 100%; height: 210px; object-fit: cover; }
.hyxvvtr-hv-work-cap { padding: 14px 18px; font-weight: 700; font-size: .95rem; }
.hyxvvtr-hv-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 12px; }
.hyxvvtr-hv-mosaic figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #eef0f2; }
.hyxvvtr-hv-mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
.hyxvvtr-hv-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hyxvvtr-hv-mosaic figure:hover img { transform: scale(1.04); }
.hyxvvtr-hv-mosaic figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; font-size: .84rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(18,22,26,.82)); }
@media (max-width: 900px) { .hyxvvtr-hv-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } }
@media (prefers-reduced-motion: reduce) { .hyxvvtr-hv-mosaic img { transition: none; } }

/* ═══════════════════ APPOINTMENT BOOKING WIZARD ═══════════════════ */
.hyxvvtr-bk-hero { background: var(--secondary); color: #fff; padding: 46px 0 34px; text-align: center; }
.hyxvvtr-bk-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem); color: #fff; margin: 0 0 8px; }
.hyxvvtr-bk-hero p { color: rgba(255,255,255,.84); margin: 0; font-size: 1rem; }
.hyxvvtr-bk-hero a { color: #fff; font-weight: 800; }
.hyxvvtr-bk-noscript { padding: 48px 0 64px; background: var(--bg-light); border-top: 1px solid var(--border); }
/* /findmypro: the same hero finder as the home page, on the same dark hero band. */
.hyxvvtr-bk-findbar { margin-top: 22px; }
.hyxvvtr-bk-findbar .hyxvvtr-umb-finder { margin-left: auto; margin-right: auto; }

.hyxvvtr-bk { padding: 30px 0 64px; background: var(--bg-light); }
.hyxvvtr-bk .container { max-width: 760px; }
.hyxvvtr-bk-hide { display: none !important; }

/* ── Brand header (per-site logo + name; umbrella adds the family endorsement) ── */
.hyxvvtr-bk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hyxvvtr-bk-head img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: #fff; flex-shrink: 0; }
.hyxvvtr-bk-head-txt { min-width: 0; }
.hyxvvtr-bk-brandline { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--text-dark); line-height: 1.25; }
.hyxvvtr-bk-endorse { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-top: 3px; }

/* ── Numbered progress rail ── */
.hyxvvtr-bk-rail { list-style: none; display: flex; align-items: flex-start; margin: 0 0 18px; padding: 0; }
.hyxvvtr-bk-railitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; color: var(--text-muted); }
.hyxvvtr-bk-railitem::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.hyxvvtr-bk-railitem:first-child::before { display: none; }
.hyxvvtr-bk-railnum { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--border); color: var(--text-muted); font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
.hyxvvtr-bk-raillabel { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-align: center; }
.hyxvvtr-bk-railitem-on .hyxvvtr-bk-railnum { background: var(--accent); border-color: var(--accent); color: #fff; }
.hyxvvtr-bk-railitem-on { color: var(--text-dark); }
.hyxvvtr-bk-railitem-done .hyxvvtr-bk-railnum { background: var(--primary); border-color: var(--primary); color: #fff; }
.hyxvvtr-bk-railitem-done::before, .hyxvvtr-bk-railitem-on::before { background: var(--primary); }

/* ── The card ── */
.hyxvvtr-bk-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow-md); }
.hyxvvtr-bk-panel h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.22rem; color: var(--text-dark); margin: 0 0 4px; }
.hyxvvtr-bk-panel > p.hyxvvtr-bk-lead { color: var(--text-muted); margin: 0 0 18px; font-size: .95rem; }
.hyxvvtr-bk-sub { font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 20px 0 10px; }

/* ── Step 1: visual option cards ── */
.hyxvvtr-bk-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hyxvvtr-bk-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 14px 15px; cursor: pointer; font: inherit; color: var(--text-dark); transition: border-color .15s, box-shadow .15s, background .15s; }
.hyxvvtr-bk-opt:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.hyxvvtr-bk-opt-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.hyxvvtr-bk-opt-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.hyxvvtr-bk-opt-ic svg { width: 19px; height: 19px; }
.hyxvvtr-bk-opt-on .hyxvvtr-bk-opt-ic { background: var(--accent); color: #fff; }
.hyxvvtr-bk-opt-txt { min-width: 0; }
.hyxvvtr-bk-opt-label { display: block; font-weight: 800; font-size: .98rem; line-height: 1.3; }
.hyxvvtr-bk-opt-blurb { display: block; font-size: .84rem; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }

/* ── Chip rows (add-on question + been-here-before toggle) ── */
.hyxvvtr-bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hyxvvtr-bk-chip { background: #fff; border: 2px solid var(--border); border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--text-dark); cursor: pointer; transition: border-color .15s, background .15s; }
.hyxvvtr-bk-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.hyxvvtr-bk-chip-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }

/* ── Fields ── */
.hyxvvtr-bk-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hyxvvtr-bk-field { display: flex; flex-direction: column; gap: 5px; }
.hyxvvtr-bk-field label { font-size: .78rem; font-weight: 800; color: var(--text-dark); }
.hyxvvtr-bk-field input, .hyxvvtr-bk-field select, .hyxvvtr-bk-field textarea { border: 1px solid var(--border); border-radius: 9px; padding: 12px 13px; font-size: 1rem; font-family: inherit; color: var(--text-dark); background: #fff; width: 100%; }
.hyxvvtr-bk-field input:focus, .hyxvvtr-bk-field select:focus, .hyxvvtr-bk-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.hyxvvtr-bk-req { color: #dc2626; }

/* ── Step 2: date sections + 2-hour blocks ── */
.hyxvvtr-bk-day { margin-bottom: 18px; }
.hyxvvtr-bk-dayhead { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .98rem; color: var(--text-dark); margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.hyxvvtr-bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.hyxvvtr-bk-slot { background: #fff; border: 2px solid var(--border); border-radius: 10px; padding: 11px 8px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--text-dark); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.hyxvvtr-bk-slot:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.hyxvvtr-bk-slot-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.hyxvvtr-bk-noslots { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* ── Step 3: phone verification ── */
.hyxvvtr-bk-otp { border: 1px dashed var(--border); border-radius: 12px; padding: 14px 15px; margin-top: 16px; background: var(--bg-light); }
.hyxvvtr-bk-otp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hyxvvtr-bk-otp-row input { flex: 1; min-width: 120px; letter-spacing: .28em; text-align: center; font-weight: 800; }
.hyxvvtr-bk-btn-soft { background: #fff; border: 2px solid var(--primary); color: var(--primary); border-radius: 9px; padding: 11px 16px; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.hyxvvtr-bk-btn-soft:hover { background: color-mix(in srgb, var(--primary) 8%, #fff); }
.hyxvvtr-bk-otp-note { font-size: .84rem; color: var(--text-muted); margin: 8px 0 0; }
.hyxvvtr-bk-verified { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-weight: 800; font-size: .92rem; }

/* ── Step 4: summary ── */
.hyxvvtr-bk-review { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-light); padding: 15px 16px; margin-bottom: 16px; }
.hyxvvtr-bk-reviewrow { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .94rem; }
.hyxvvtr-bk-reviewrow:last-child { border-bottom: 0; }
.hyxvvtr-bk-reviewkey { color: var(--text-muted); font-weight: 700; flex-shrink: 0; }
.hyxvvtr-bk-reviewval { text-align: right; font-weight: 700; color: var(--text-dark); }
.hyxvvtr-bk-nofee { display: flex; align-items: flex-start; gap: 9px; background: color-mix(in srgb, #16a34a 9%, #fff); border: 1px solid color-mix(in srgb, #16a34a 32%, #fff); color: #14532d; border-radius: 10px; padding: 12px 14px; font-size: .92rem; font-weight: 700; margin: 14px 0; }
.hyxvvtr-bk-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; }
.hyxvvtr-bk-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.hyxvvtr-bk-consent span { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.hyxvvtr-bk-consent a { color: var(--primary); text-decoration: underline; }

/* ── Nav + errors ── */
.hyxvvtr-bk-nav { display: flex; gap: 10px; margin-top: 22px; }
.hyxvvtr-bk-nav button { flex: 1; border-radius: 10px; padding: 14px 18px; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; border: 0; }
.hyxvvtr-bk-back { background: #fff; border: 2px solid var(--border) !important; color: var(--text-dark); flex: 0 0 auto !important; min-width: 96px; }
.hyxvvtr-bk-next { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.hyxvvtr-bk-next:hover { opacity: .93; }
.hyxvvtr-bk-next[disabled] { opacity: .55; cursor: default; }
.hyxvvtr-bk-err { margin: 12px 0 0; color: #b91c1c; font-size: .9rem; font-weight: 700; }
.hyxvvtr-bk-err[hidden] { display: none; }

/* ── Confirmation ── */
.hyxvvtr-bk-done { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 22px; text-align: center; box-shadow: var(--shadow-md); }
.hyxvvtr-bk-donecheck { width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, #16a34a 14%, #fff); color: #15803d; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hyxvvtr-bk-donecheck svg { width: 30px; height: 30px; }
.hyxvvtr-bk-done h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.35rem; margin: 0 0 8px; color: var(--text-dark); }
.hyxvvtr-bk-done p { color: var(--text-muted); margin: 0 0 6px; }
.hyxvvtr-bk-donephone { display: inline-block; margin-top: 14px; font-weight: 800; font-size: 1.1rem; color: var(--primary); }

@media (min-width: 620px) {
  .hyxvvtr-bk-card { padding: 30px 30px; }
  .hyxvvtr-bk-opts { grid-template-columns: 1fr 1fr; }
  .hyxvvtr-bk-grid { grid-template-columns: 1fr 1fr; }
  .hyxvvtr-bk-wide { grid-column: 1 / -1; }
  .hyxvvtr-bk-raillabel { font-size: .8rem; }
}

/* ══ Umbrella: brand results + More-Info modal ══════════════════════════════ */
.hyxvvtr-bk-results { padding: 46px 0 10px; background: #fff; }
.hyxvvtr-bk-results-head { text-align: center; margin-bottom: 26px; }
.hyxvvtr-bk-results-head h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.95rem); margin: 0 0 6px; color: var(--text-dark); }
.hyxvvtr-bk-results-head p { color: var(--text-muted); margin: 0; }
.hyxvvtr-bk-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.hyxvvtr-bk-card2 { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.hyxvvtr-bk-card2[hidden] { display: none; }
.hyxvvtr-bk-card2-logo { height: 62px; display: flex; align-items: center; }
.hyxvvtr-bk-card2-logo img { max-height: 62px; max-width: 210px; width: auto; object-fit: contain; }
.hyxvvtr-bk-card2-mono { width: 54px; height: 54px; border-radius: 12px; background: var(--bg-light); color: var(--primary); font-weight: 800; font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; }
.hyxvvtr-bk-card2 h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.12rem; margin: 0; color: var(--text-dark); }
.hyxvvtr-bk-family { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.hyxvvtr-bk-rating { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text-dark); font-weight: 700; }
.hyxvvtr-bk-stars { color: #f59e0b; letter-spacing: .06em; }
.hyxvvtr-bk-rating-n { color: var(--text-muted); font-weight: 600; }
.hyxvvtr-bk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.hyxvvtr-bk-badge { background: var(--bg-light); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.hyxvvtr-bk-card2-btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.hyxvvtr-bk-btn-primary { flex: 1; min-width: 150px; text-align: center; background: var(--accent); color: #fff !important; border: 0; border-radius: 10px; padding: 12px 16px; font: inherit; font-weight: 800; font-size: .94rem; cursor: pointer; }
.hyxvvtr-bk-btn-primary:hover { opacity: .92; color: #fff !important; }
.hyxvvtr-bk-btn-ghost { flex: 1; min-width: 120px; text-align: center; background: #fff; border: 2px solid var(--border); border-radius: 10px; padding: 11px 16px; font: inherit; font-weight: 800; font-size: .94rem; color: var(--text-dark); cursor: pointer; }
.hyxvvtr-bk-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.hyxvvtr-bk-results-empty { text-align: center; color: var(--text-muted); padding: 18px 0; }
.hyxvvtr-bk-results-empty[hidden] { display: none; }

.hyxvvtr-bk-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.62); }
.hyxvvtr-bk-modal[hidden] { display: none; }
.hyxvvtr-bk-modal-box { background: #fff; border-radius: 16px; max-width: 620px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px 22px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.hyxvvtr-bk-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.hyxvvtr-bk-modal-box h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; margin: 4px 0 8px; color: var(--text-dark); }
.hyxvvtr-bk-modal-box p { color: var(--text-muted); font-size: .95rem; margin: 0 0 12px; line-height: 1.6; }
.hyxvvtr-bk-modal-photo { width: 100%; border-radius: 12px; margin: 4px 0 14px; display: block; }
.hyxvvtr-bk-svclist { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr; gap: 5px; }
.hyxvvtr-bk-svclist li { font-size: .92rem; color: var(--text-dark); padding-left: 20px; position: relative; }
.hyxvvtr-bk-svclist li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 900; }

@media (min-width: 720px) {
  .hyxvvtr-bk-cards { grid-template-columns: 1fr 1fr; }
  .hyxvvtr-bk-svclist { grid-template-columns: 1fr 1fr; }
}