/* ============================================
   JUNK RHINOS - Full Site Styles
   Accent: Lime Green (#9ACD32) | Dark: Charcoal (#1c1f1a)
   Mobile-first. Brand tokens drive the whole sheet.
   ============================================ */

:root {
  /* --- Junk Rhinos brand tokens --- */
  --accent: #9ACD32;        /* lime green - CTAs, highlights, active states */
  --accent-dark: #84b22a;   /* darker lime - hover */
  --dark: #1c1f1a;          /* charcoal - headers, footer, hero overlays */
  --light: #ffffff;
  --bg-soft: #f6f7f4;       /* soft off-white section bg */

  /* --- Legacy aliases mapped to brand (kept so the whole sheet recolors) --- */
  /* The accent (lime) fails contrast as text on white, so the legacy "primary"
     role (used widely as link/icon text on white) maps to dark, not lime. */
  --primary: var(--dark);
  --primary-dark: var(--dark);
  --primary-darker: #000000;
  --primary-light: var(--accent);
  --primary-lightest: var(--bg-soft);
  --accent-hover: var(--accent-dark);
  --accent-light: #eef5da;  /* pale lime tint for selected backgrounds */
  --dark-light: #2a2e26;
  --dark-medium: #23271f;
  --text: #2a2e26;
  --text-light: #555a51;
  --text-muted: #6b7066;
  --white: #ffffff;
  --off-white: var(--bg-soft);
  --gray-light: #f1f3ee;
  --gray: #e2e5dd;
  --gray-dark: #c7ccc0;
  --green: #4a7c2f;
  --red: #c0392b;
  --shadow-sm: 0 1px 2px rgba(28,31,26,0.06), 0 2px 8px rgba(28,31,26,0.05);
  --shadow: 0 2px 4px rgba(28,31,26,0.05), 0 8px 24px rgba(28,31,26,0.09);
  --shadow-lg: 0 4px 8px rgba(28,31,26,0.06), 0 16px 48px rgba(28,31,26,0.14);
  --hairline: #e1e5db;       /* crisp card hairline border */
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out, never bouncy */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Sticky nav height (used for scroll-margin so anchors/steps clear the navbar) */
  --nav-h: 160px;

  /* Semantic z-index scale (no 999/9999 magic numbers) */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 1000;
  --z-mobile-bar: 1100;
  --z-overlay: 1200;
  --z-toast: 1300;
}
@media (max-width: 768px) { :root { --nav-h: 60px; } }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body { font-family: 'Open Sans', sans-serif; color: var(--text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
/* Display headings: tight tracking floor at -0.04em (never tighter) for punch */
h1 { letter-spacing: -0.035em; font-weight: 800; }
h2 { letter-spacing: -0.03em; font-weight: 800; }
h3 { letter-spacing: -0.02em; font-weight: 700; }
p { text-wrap: pretty; }
a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1400px; }

/* Buttons */
.btn { display: inline-block; padding: 14px 32px; border-radius: var(--radius); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all var(--transition); border: none; text-align: center; line-height: 1.4; }
.btn-primary { background: var(--accent); color: var(--dark); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(132,178,42,0.40); }
.btn-secondary { background: var(--dark); color: var(--white); }
.btn-secondary:hover { background: var(--dark-light); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-outline:hover { background: var(--white); color: var(--dark); }
.btn-outline-dark { background: transparent; color: var(--dark); border: 2px solid var(--dark); }
.btn-outline-dark:hover { background: var(--dark); color: var(--white); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--dark-light); }
.btn-full { width: 100%; }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* Accessibility: visible keyboard focus across interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* ======= TOP BAR ======= */
.top-bar { background: var(--dark); color: var(--white); padding: 8px 0; font-size: 0.85rem; }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.phone-link { font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; }
.phone-link:hover { color: var(--primary-light); }
.top-bar-actions { display: flex; gap: 12px; }
.top-bar-btn { padding: 6px 18px; border-radius: var(--radius); font-weight: 600; font-size: 0.85rem; transition: all var(--transition); border: 2px solid transparent; }
.top-bar-btn--res { background: var(--accent); color: var(--dark); font-weight: 700; }
.top-bar-btn--res:hover { background: var(--accent-dark); color: var(--dark); }
.top-bar-btn--com { border-color: var(--white); color: var(--white); }
.top-bar-btn--com:hover { background: var(--white); color: var(--dark); }
.top-link:hover { color: var(--primary-light); }

/* ======= NAVBAR ======= */
.navbar { background: var(--white); position: sticky; top: 0; z-index: var(--z-nav); box-shadow: 0 1px 0 var(--hairline), 0 2px 10px rgba(0,0,0,0.05); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 160px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo-icon { font-size: 2rem; }
.logo-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--dark); letter-spacing: -0.5px; }
.logo-accent { color: var(--primary); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a { padding: 8px 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--dark); border-radius: var(--radius); transition: all var(--transition); display: block; }
.nav-links > li > a:hover { color: var(--dark); background: var(--bg-soft); }
.nav-cta { background: var(--accent) !important; color: var(--dark) !important; border-radius: var(--radius) !important; font-weight: 700 !important; }
.nav-cta:hover { background: var(--accent-dark) !important; color: var(--dark) !important; }
.nav-account { display: flex; align-items: center; gap: 6px; }
.nav-account svg { width: 20px; height: 20px; }

/* Mega Dropdown */
.has-dropdown { position: relative; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--white); min-width: 240px; box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: 8px 0; z-index: 100; }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li a { display: block; padding: 10px 20px; font-size: 0.9rem; color: var(--text); }
.dropdown li a:hover { background: var(--primary-lightest); color: var(--primary-dark); }
.dropdown-header { padding: 10px 20px 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

/* Mega Menu */
.mega-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 540px; padding: 24px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 100; display: none; }
.has-dropdown:hover > .mega-dropdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mega-col h4, .mega-col-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 12px; font-weight: 700; white-space: nowrap; display: block; }
.mega-col a { display: block; padding: 6px 0; font-size: 0.9rem; color: var(--text); }
.mega-col a:hover { color: var(--primary); }

/* Mobile Toggle */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.mobile-toggle span { display: block; width: 28px; height: 3px; background: var(--dark); border-radius: 2px; transition: var(--transition); }

/* ======= HERO ======= */
.hero { position: relative; min-height: 360px; display: flex; align-items: center; overflow: hidden; }
.hero--gradient { background: linear-gradient(135deg, #14160f 0%, var(--dark) 55%, #2a2e22 100%); }
.hero--gradient::before { background: rgba(154,205,50,0.10); }
.hero--gradient::after { background: rgba(154,205,50,0.06); }
.hero--dark { background: var(--dark); }
.hero--image { background-size: cover; background-position: center; }
.hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: rgba(255,255,255,0.06); border-radius: 50%; pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: rgba(255,255,255,0.04); border-radius: 50%; pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 1; }
.hero-content { position: relative; z-index: 2; padding: 80px 20px; color: var(--white); }
.hero-content--center { text-align: center; max-width: 800px; margin: 0 auto; }
.hero-content--left { max-width: 600px; }
.hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.hero-sub { font-size: 1.15rem; margin-bottom: 32px; opacity: 0.95; line-height: 1.7; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-content--center .hero-buttons { justify-content: center; }

/* Hero with inline zip quote */
.hero-zip-form { display: flex; gap: 12px; max-width: 480px; }
.hero-content--center .hero-zip-form { margin: 0 auto; }
.hero-zip-form input { flex: 1; padding: 14px 16px; border: none; border-radius: var(--radius); font-size: 0.95rem; }
.hero-zip-form input:focus { outline: 3px solid var(--accent); }
.hero-zip-form .btn { white-space: nowrap; }

/* Home Hero with image */
.hero--home { min-height: 560px; background: var(--gray-light); color: var(--text); }
.hero--home::before, .hero--home::after { display: none; }
.hero--home .hero-content { color: var(--text); text-shadow: none; }
.hero--home h1 { color: var(--dark); text-shadow: none; font-size: 2.6rem; }
.hero--home .hero-sub { color: var(--text-light); opacity: 1; }

/* ======= INSTANT QUOTE CALCULATOR (Home page) ======= */
.quote-calculator { background: var(--white); padding: 48px 0; border-bottom: 3px solid var(--primary); }
.quote-calc-inner { text-align: center; }
.quote-calc-inner h2 { font-size: 1.6rem; color: var(--dark); margin-bottom: 8px; }
.quote-calc-inner p { color: var(--text-light); margin-bottom: 24px; }
/* Residential / Commercial type cards */
.quote-type-cards { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; max-width: 680px; margin-left: auto; margin-right: auto; }
.quote-type-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 2px solid var(--gray); border-radius: var(--radius-lg); background: var(--white); transition: all var(--transition); flex: 1; text-align: left; }
.quote-type-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.quote-type-card--biz:hover { border-color: var(--accent); }
.quote-type-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-lightest); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quote-type-icon svg { width: 24px; height: 24px; }
.quote-type-card--biz .quote-type-icon { background: var(--accent-light); color: var(--accent); }
.quote-type-text { flex: 1; }
.quote-type-text strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1rem; color: var(--dark); margin-bottom: 2px; }
.quote-type-text span { font-size: 0.82rem; color: var(--text-muted); }
.quote-type-arrow { font-size: 1.4rem; color: var(--text-muted); font-weight: 700; }
.zip-quote-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 600px; margin: 0 auto; }
.zip-quote-form input { flex: 1; min-width: 0; padding: 10px 16px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 0.95rem; font-family: 'Open Sans', sans-serif; }
.zip-quote-form input:focus { outline: none; border-color: var(--primary); }
.zip-quote-form .btn { padding: 10px 24px; }

/* Progressive phone reveal on zip forms */
.zip-phone-reveal { flex-basis: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease; margin-top: 0; }
.zip-phone-reveal.visible { max-height: 200px; opacity: 1; margin-top: 10px; }
.zip-phone-reveal__check { font-size: 0.8rem; color: var(--primary); margin-bottom: 6px; font-weight: 600; }
.zip-phone-reveal input { width: 100%; padding: 10px 16px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 0.95rem; font-family: 'Open Sans', sans-serif; box-sizing: border-box; }
.zip-phone-reveal input:focus { outline: none; border-color: var(--primary); }
.zip-phone-reveal__disclaimer { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

/* ======= SERVICES TILES (Home page) ======= */
.services-section { padding: 80px 0; }
.section-title { text-align: center; font-size: 2.2rem; color: var(--dark); margin-bottom: 12px; }
.section-subtitle { text-align: center; color: var(--text-light); font-size: 1.1rem; margin-bottom: 48px; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; transition: transform var(--transition); }
.service-tile:hover { transform: translateY(-4px); }
.service-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.service-tile:hover .service-tile-img { transform: scale(1.05); }
.service-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%); z-index: 1; }
.service-tile-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--white); }
.service-tile h3 { font-size: 1.1rem; font-weight: 700; }
.service-tile p { font-size: 0.8rem; opacity: 0.85; margin-top: 4px; }
.browse-all { text-align: center; margin-top: 32px; }

/* ======= YOUR FIRST CHOICE / TRUST ======= */
.trust-section { padding: 80px 0; background: var(--off-white); }
.trust-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 40px; }
.trust-image { border-radius: var(--radius-lg); overflow: hidden; background: transparent; height: 360px; display: flex; align-items: center; justify-content: center; }
.trust-image img { max-height: 300px; object-fit: contain; }
.trust-image-placeholder { font-size: 6rem; opacity: 0.3; }
.trust-details { }
.trust-item { display: flex; gap: 20px; margin-bottom: 28px; }
.trust-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--white); flex-shrink: 0; }
.trust-icon svg { width: 26px; height: 26px; }
.trust-item h3 { font-size: 1.05rem; color: var(--dark); margin-bottom: 4px; }
.trust-item p { font-size: 0.9rem; color: var(--text-light); }

/* Trust Stats Bar */
.trust-stats { padding: 60px 0; background: var(--dark); color: var(--white); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.stat-number { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; font-weight: 800; color: var(--primary-light); }
.stat-label { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; opacity: 0.8; }
.trust-check { display: flex; justify-content: center; margin-bottom: 8px; }
.trust-check svg { width: 32px; height: 32px; color: var(--primary-light); }

/* ======= SCHEDULE CTA ======= */
.schedule-cta { padding: 80px 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); }
.schedule-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.schedule-text h2 { font-size: 2rem; margin-bottom: 12px; }
.schedule-text p { font-size: 1.05rem; opacity: 0.9; max-width: 560px; }

/* ======= NEWSLETTER SIGNUP ======= */
.newsletter { padding: 60px 0; background: var(--accent); color: var(--white); }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.newsletter h2 { font-size: 1.6rem; margin-bottom: 4px; }
.newsletter p { opacity: 0.9; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input { padding: 14px 20px; border: none; border-radius: var(--radius); font-size: 1rem; min-width: 280px; }
.newsletter-form input:focus { outline: 3px solid var(--white); }

/* ======= FAQ ======= */
.faq-section { padding: 80px 0; background: var(--gray-light); }
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.faq-filter { padding: 8px 20px; border: 2px solid var(--gray); border-radius: 50px; background: var(--white); font-size: 0.85rem; font-weight: 600; color: var(--text); transition: all var(--transition); }
.faq-filter.active, .faq-filter:hover { border-color: var(--primary); background: var(--primary); color: var(--white); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--white); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-question { width: 100%; padding: 18px 24px; background: none; border: none; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: var(--dark); text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color var(--transition); }
.faq-question::after { content: '+'; font-size: 1.4rem; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-left: 16px; }
.faq-item.active .faq-question::after { content: '\2212'; }
.faq-question:hover { color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-answer p { padding: 0 24px 20px; color: var(--text-light); line-height: 1.7; }
.faq-item.active .faq-answer { max-height: 400px; }

/* ======= BLOG CARDS ======= */
.blog-section { padding: 80px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.blog-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--transition); background: var(--white); }
.blog-card:hover { transform: translateY(-4px); }
.blog-card-image { height: 200px; background: var(--primary-lightest); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.blog-card-image svg { width: 48px; height: 48px; opacity: 0.4; }
.blog-card-body { padding: 24px; }
.blog-card-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); font-weight: 700; margin-bottom: 8px; }
.blog-card h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 8px; line-height: 1.4; }
.blog-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; }
.blog-card-link { display: inline-block; margin-top: 12px; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.blog-card-link:hover { color: var(--primary-dark); }

/* ======= FOOTER ======= */
.footer { background: var(--dark); color: var(--white); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.footer-logo img { border-radius: var(--radius); }
.footer-logo .logo-text { color: var(--white); }
.footer-tagline { font-size: 0.9rem; opacity: 0.7; margin-bottom: 20px; line-height: 1.6; }
.footer-newsletter { margin-bottom: 20px; }
.footer-newsletter p { font-size: 0.85rem; opacity: 0.7; margin-bottom: 12px; }
.footer-newsletter-form { display: flex; gap: 8px; }
.footer-newsletter-form input { flex: 1; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius); background: rgba(255,255,255,0.1); color: var(--white); font-size: 0.9rem; }
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,0.68); }
.footer-newsletter-form input:focus { outline: none; border-color: var(--primary); }
.footer-newsletter-form button { padding: 10px 18px; background: var(--accent); border: none; border-radius: var(--radius); color: var(--white); font-weight: 700; font-size: 0.85rem; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--white); transition: all var(--transition); }
.footer-social a:hover { background: var(--primary); transform: translateY(-2px); }
.footer-social a svg { width: 18px; height: 18px; }
.footer-col h4, .footer-heading { font-size: 0.85rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-light); display: block; font-weight: 700; }
.footer-col ul li { margin-bottom: 8px; font-size: 0.88rem; opacity: 0.8; }
.footer-col ul li a:hover { opacity: 1; color: var(--primary-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; opacity: 0.5; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: var(--primary-light); opacity: 1; }

/* ======= QUOTE PAGE ======= */
.quote-page { min-height: 100vh; background: var(--dark); color: var(--white); }
.quote-page-hero { text-align: center; padding: 80px 20px 40px; }
.quote-page-hero h1 { font-size: 2.4rem; margin-bottom: 12px; }
.quote-page-hero p { opacity: 0.8; font-size: 1.05rem; }
.quote-steps { max-width: 700px; margin: 0 auto; padding: 0 20px 60px; }
.quote-step { background: rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 40px; margin-bottom: 24px; }
.quote-step h2 { font-size: 1.4rem; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.quote-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 1rem; font-weight: 800; }
.quote-step input, .quote-step select { width: 100%; padding: 16px 20px; border: 2px solid rgba(255,255,255,0.15); border-radius: var(--radius); background: rgba(255,255,255,0.08); color: var(--white); font-size: 1.05rem; font-family: 'Open Sans', sans-serif; margin-bottom: 16px; }
.quote-step input::placeholder { color: rgba(255,255,255,0.68); }
.quote-step input:focus, .quote-step select:focus { outline: none; border-color: var(--primary); background: rgba(255,255,255,0.12); }
.quote-step select option { background: var(--dark); color: var(--white); }
.quote-step .form-row { display: flex; gap: 16px; }
.quote-step .form-row > * { flex: 1; }
.quote-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.quote-service-option { padding: 16px; border: 2px solid rgba(255,255,255,0.15); border-radius: var(--radius); cursor: pointer; text-align: center; transition: all var(--transition); }
.quote-service-option:hover { border-color: var(--primary); background: rgba(132,178,42,0.1); }
.quote-service-option.selected { border-color: var(--accent); background: rgba(154,205,50,0.15); }
.quote-service-option span { display: block; font-size: 1.8rem; margin-bottom: 6px; }
.quote-service-option strong { font-size: 0.9rem; }
.quote-rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.quote-room-option { padding: 16px; border: 2px solid rgba(255,255,255,0.15); border-radius: var(--radius); cursor: pointer; text-align: center; transition: all var(--transition); font-weight: 600; }
.quote-room-option:hover { border-color: var(--primary); }
.quote-room-option.selected { border-color: var(--accent); background: rgba(154,205,50,0.15); }
.quote-summary { background: rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 32px; margin-top: 24px; }
.quote-summary h3 { font-size: 1.2rem; margin-bottom: 16px; }
.quote-summary-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.quote-summary-total { display: flex; justify-content: space-between; padding: 16px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--accent); }
.quote-note { text-align: center; margin-top: 16px; font-size: 0.85rem; opacity: 0.6; }

/* ======= SERVICE PAGE ======= */
.service-hero { position: relative; min-height: 400px; display: flex; align-items: center; }
.service-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.service-hero .hero-overlay { background: rgba(0,0,0,0.2); }
.service-hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; width: 100%; }
.service-hero-text { color: var(--white); }
.service-hero-text h1 { font-size: 2.6rem; margin-bottom: 16px; }
.service-hero-text p { font-size: 1.05rem; opacity: 0.9; line-height: 1.7; }
.service-hero-quote { background: var(--white); border-radius: var(--radius-lg); padding: 32px; color: var(--text); box-shadow: var(--shadow-lg); }
.service-hero-quote h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 4px; text-align: center; }
.service-hero-quote p { text-align: center; font-size: 0.9rem; color: var(--text-light); margin-bottom: 16px; }
.service-hero-quote input { width: 100%; padding: 14px 16px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 1rem; margin-bottom: 12px; }
.service-hero-quote input:focus { outline: none; border-color: var(--primary); }

/* Service Content */
.service-content { padding: 60px 0; }
.service-content h2 { font-size: 1.8rem; color: var(--dark); margin-bottom: 16px; }
.service-content p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.service-features { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 40px 0; }
.service-feature { display: flex; gap: 16px; }
.service-feature-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-lightest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.service-feature-icon svg { width: 22px; height: 22px; }
.service-feature h3 { font-size: 1rem; color: var(--dark); margin-bottom: 4px; }
.service-feature p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 0; }

/* Process Steps */
.process-section { padding: 60px 0; background: var(--gray-light); }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.process-step { text-align: center; }
.process-step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; margin: 0 auto 16px; }
.process-step h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 8px; }
.process-step p { font-size: 0.9rem; color: var(--text-light); }

/* Commercial Section on service pages */
.commercial-section { padding: 60px 0; background: var(--dark); color: var(--white); }
.commercial-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.commercial-inner h2 { font-size: 1.8rem; margin-bottom: 16px; }
.commercial-inner p { opacity: 0.85; line-height: 1.7; margin-bottom: 20px; }
.commercial-image { border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.1); height: 300px; display: flex; align-items: center; justify-content: center; color: var(--white); }
.commercial-image svg { width: 64px; height: 64px; opacity: 0.3; }

/* ======= PRODUCTS PAGE ======= */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.product-card { background: var(--white); border: 2px solid var(--gray); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); }
.product-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.product-image { height: 200px; background: var(--gray-light); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.product-image svg { width: 48px; height: 48px; opacity: 0.3; }
.product-body { padding: 20px; }
.product-body h3 { font-size: 1.05rem; color: var(--dark); margin-bottom: 8px; }
.product-body p { font-size: 0.88rem; color: var(--text-light); margin-bottom: 12px; line-height: 1.5; }
.product-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--primary-dark); }
.product-cart { margin-top: 12px; }

/* Order Summary sidebar */
.products-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; margin-top: 40px; }
.order-summary { background: var(--white); border: 2px solid var(--gray); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; }
.order-summary h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gray); }
.order-summary-empty { text-align: center; padding: 20px 0; color: var(--text-muted); font-size: 0.9rem; }
.order-item { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; }
.order-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--gray); margin-top: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* ======= ABOUT PAGE ======= */
/* Cap long prose measure ~68ch for comfortable reading (about/how-it-works/locations) */
.about-content .container--narrow,
.locations-section .container--narrow { max-width: 70ch; }
.about-content p, .locations-section p, .page-content p { max-width: 68ch; }
.hero-content--center .hero-sub { max-width: 60ch; margin-left: auto; margin-right: auto; }
.about-content { padding: 60px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px; }
.about-grid:nth-child(even) { direction: rtl; }
.about-grid:nth-child(even) > * { direction: ltr; }
.about-image { border-radius: var(--radius-lg); overflow: hidden; background: var(--primary-lightest); height: 320px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.about-image svg { width: 64px; height: 64px; opacity: 0.3; }
.about-text h2 { font-size: 1.8rem; color: var(--dark); margin-bottom: 16px; }
.about-text p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.about-text p:last-of-type { margin-bottom: 20px; }
.about-intro p { font-size: 1.1rem; line-height: 1.8; color: var(--text-light); margin-bottom: 16px; }
.about-intro p:last-child { margin-bottom: 0; }

/* ======= LEGAL PAGES (Privacy / Terms) ======= */
.legal-content { padding: 56px 0 72px; }
.legal-content .container--narrow { max-width: 74ch; }
.legal-content > .container--narrow > p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.legal-section { margin-top: 34px; }
.legal-section h2 { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; color: var(--dark); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-light); }
.legal-section p { color: var(--text-light); line-height: 1.8; margin-bottom: 14px; }
.legal-list { margin: 0 0 14px; padding-left: 1.35rem; }
.legal-list li { color: var(--text-light); line-height: 1.75; margin-bottom: 8px; }
.legal-list li::marker { color: var(--accent-dark); }
.legal-content a { color: var(--accent-dark); text-decoration: underline; word-break: break-word; }
.legal-content a:hover { color: var(--dark); }
.adm-reorder-btns { display: flex; flex-direction: column; gap: 2px; }
.adm-reorder-btns .adm-icon-btn { padding: 2px 6px; font-size: 0.7rem; line-height: 1; min-width: 24px; }
.adm-reorder-btns .adm-icon-btn:disabled { opacity: 0.25; cursor: default; }
/* About Stats Strip */
.about-stats-strip { background: var(--primary); padding: 52px 0; }
.about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.about-stat { color: #fff; }
.about-stat-number { display: block; font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.about-stat-label { font-size: 0.9rem; opacity: 0.85; letter-spacing: 0.02em; }

.timeline { max-width: 700px; margin: 60px auto 0; }
.timeline-item { display: flex; gap: 24px; margin-bottom: 32px; }
.timeline-year { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--primary); min-width: 80px; }
.timeline-content h3 { font-size: 1rem; color: var(--dark); margin-bottom: 4px; }
.timeline-content p { font-size: 0.9rem; color: var(--text-light); }

/* ======= LOCATIONS PAGE ======= */
.locations-hero { padding: 80px 0; background: var(--dark); color: var(--white); text-align: center; }
.locations-hero h1 { font-size: 2.4rem; margin-bottom: 12px; }
.locations-hero p { opacity: 0.8; margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
.locations-search { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; }
.locations-search input { flex: 1; padding: 16px 20px; border: none; border-radius: var(--radius); font-size: 1.05rem; }
.locations-search input:focus { outline: 3px solid var(--accent); }

/* ======= CONTACT PAGE ======= */
.contact-section { padding: 80px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; }
.contact-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--dark); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 1rem; font-family: 'Open Sans', sans-serif; margin-bottom: 16px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); }
.sms-consent-label { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 0.8rem !important; color: var(--text-muted) !important; line-height: 1.5; margin-bottom: 16px; cursor: pointer; }
.sms-consent-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; cursor: pointer; }
.sms-consent-label a { color: var(--primary); text-decoration: underline; }
.contact-form-row { display: flex; gap: 16px; }
.contact-form-group { flex: 0 0 auto; }
.contact-form-group label { display: block; }
.contact-form-group input { width: 100%; }
.contact-form-grow { flex: 1 1 0; }
.contact-form-sm { flex: 0 0 90px; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-info-card { background: var(--primary-lightest); border-radius: var(--radius-lg); padding: 32px; }
.contact-info-card h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 20px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 20px; }
.contact-info-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-item h4 { font-size: 0.95rem; color: var(--dark); margin-bottom: 2px; }
.contact-info-item p { font-size: 0.9rem; color: var(--text-light); }

/* ======= CONTACT SERVICE AREAS CTA ======= */
.contact-service-areas { padding: 64px 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); }
.service-areas-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.service-areas-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.service-areas-icon svg { width: 28px; height: 28px; }
.service-areas-inner h2 { font-size: 1.8rem; margin-bottom: 12px; }
.service-areas-inner p { font-size: 1.05rem; opacity: 0.9; margin-bottom: 28px; }
.service-areas-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ======= BREADCRUMB ======= */
.breadcrumb { padding: 12px 0; background: var(--gray-light); border-bottom: 1px solid var(--gray); font-size: 0.85rem; margin-bottom: 28px; }
/* Each crumb must fill the band's height. As bare inline text at 0.85rem the
   links were ~14px of target inside a ~38px bar, so on a phone most taps landed
   on the strip above/below them and registered as dead clicks (Clarity, the
   /locations/:state/:segment template). The negative margin keeps the bar the
   same height it was. text-decoration is restored because the global reset
   strips it and `--primary` is the same charcoal as ordinary text, so the
   crumbs did not read as links at all. */
.breadcrumb a { color: var(--primary); display: inline-block; padding: 10px 4px; margin: -10px 0; text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--primary-dark); }
.breadcrumb span { color: var(--text-muted); margin: 0 8px; }

/* ======= GENERIC PAGE CONTENT ======= */
.page-content { padding: 60px 0; }
.page-content h1 { font-size: 2.2rem; color: var(--dark); margin-bottom: 20px; }
.page-content h2 { font-size: 1.6rem; color: var(--dark); margin-bottom: 16px; margin-top: 32px; }
.page-content p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.page-content ul, .page-content ol { margin-left: 24px; margin-bottom: 16px; list-style: disc; }
.page-content ul li, .page-content ol li { margin-bottom: 8px; color: var(--text-light); line-height: 1.6; }

/* ======= QUOTE CALCULATOR ======= */
.calc-page { min-height: 100vh; background: var(--gray-light); }
.calc-header { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: var(--white); padding: 40px 20px 32px; text-align: center; position: relative; }
.calc-header h1 { font-size: 2rem; margin-bottom: 8px; }
.calc-header p { opacity: 0.9; font-size: 1.05rem; }
.calc-back { position: absolute; left: 20px; top: 20px; color: var(--primary-light); font-size: 0.9rem; }
.calc-switch-link { position: absolute; right: 20px; top: 20px; color: var(--white); border-color: rgba(255,255,255,0.5); }
.calc-switch-link:hover { background: var(--white); color: var(--primary-dark); }
.calc-header--biz { background: linear-gradient(135deg, var(--dark), var(--dark-light)); }

/* Zip Code Gate */
.zip-gate { display: flex; justify-content: center; align-items: center; min-height: 50vh; padding: 40px 20px; }
.zip-gate-card { background: var(--white); border-radius: var(--radius-lg, 12px); padding: 48px 40px; text-align: center; box-shadow: var(--shadow); max-width: 480px; width: 100%; }
.zip-gate-card h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 8px; }
.zip-gate-card p { color: var(--text-muted); margin-bottom: 24px; }
.zip-gate-form { display: flex; gap: 12px; justify-content: center; }
.zip-gate-form input { font-size: 0.95rem; padding: 12px 16px; border: 2px solid var(--gray-dark); border-radius: var(--radius); text-align: center; width: 200px; letter-spacing: 2px; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.zip-gate-form input:focus { border-color: var(--primary); outline: none; }
.zip-gate-error { color: #c0392b; font-size: 0.9rem; margin-top: 16px; }

/* Zip Banner */
.calc-zip-banner { background: var(--primary-lightest, #e8f5e9); color: var(--primary-dark); text-align: center; padding: 10px 20px; font-size: 0.95rem; }
.calc-zip-change { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: 0.9rem; margin-left: 12px; font-family: inherit; }
.calc-zip-change:hover { color: var(--primary-dark); }

.calc-layout { max-width: 1200px; margin: 0 auto; padding: 32px 20px; display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.calc-main { }
.calc-category { margin-bottom: 32px; }
.calc-category-title { font-size: 1.3rem; color: var(--dark); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); }
.calc-items { display: flex; flex-direction: column; gap: 12px; }
.calc-item { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.calc-item:hover { box-shadow: var(--shadow); }
.calc-item-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.calc-item-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; color: var(--dark); min-width: 160px; }
.calc-item-desc { font-size: 0.85rem; color: var(--text-muted); flex: 1; min-width: 120px; }
.calc-item-price { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--primary-dark); font-size: 1rem; min-width: 100px; text-align: right; }
.calc-item-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.calc-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--gray-dark); background: var(--white); font-size: 1.2rem; font-weight: 700; color: var(--dark); display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.calc-qty-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-lightest); }
.calc-qty { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem; min-width: 24px; text-align: center; }
.calc-item-addons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray); }
.calc-addon-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-light); cursor: pointer; padding: 4px 12px; border-radius: 20px; background: var(--gray-light); transition: background var(--transition); }
.calc-addon-label:hover { background: var(--primary-lightest); }
.calc-addon-label input[type=checkbox] { accent-color: var(--primary); }

/* Calculator Sidebar */
.calc-sidebar { position: sticky; top: 90px; }
.calc-sidebar-inner { background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.calc-sidebar-inner h3 { font-size: 1.1rem; color: var(--dark); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gray); }
.calc-summary-lines { margin-bottom: 16px; }
.calc-summary-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; color: var(--text); }
.calc-summary-addon { color: var(--text-muted); font-size: 0.82rem; }
.calc-summary-empty { text-align: center; padding: 20px 0; color: var(--text-muted); font-size: 0.9rem; }
.calc-summary-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--gray); margin-bottom: 16px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--primary-dark); }

/* Calculator Modal */
.calc-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.calc-modal-content { background: var(--white); border-radius: var(--radius-lg); padding: 40px; max-width: 560px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.calc-modal-content h2 { font-size: 1.4rem; color: var(--dark); margin-bottom: 8px; }
.calc-modal-content p { color: var(--text-light); margin-bottom: 20px; }
.calc-modal-content .form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.calc-modal-content .form-row > * { flex: 1; }
.calc-modal-content input, .calc-modal-content select { width: 100%; padding: 14px 16px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 1rem; font-family: inherit; }
.calc-modal-content input:focus, .calc-modal-content select:focus { outline: none; border-color: var(--primary); }
.calc-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.8rem; color: var(--text-muted); cursor: pointer; }
.calc-modal-close:hover { color: var(--dark); }

/* ======= ADMIN DASHBOARD ======= */
.admin-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 2px solid var(--gray); margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.admin-topbar-left { display: flex; align-items: center; gap: 16px; }
.admin-topbar-left h1 { font-size: 1.6rem; color: var(--dark); margin: 0; }
.admin-topbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-section { background: var(--white); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.admin-section h2 { font-size: 1.1rem; color: var(--dark); margin-bottom: 16px; }
/* ======= ADVANCED ADMIN PANEL ======= */
.adm { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.adm-sidebar { background: var(--dark); color: var(--white); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.adm-sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; }
.adm-logo { color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem; }
.adm-badge { background: var(--primary); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; }
.adm-nav { flex: 1; padding: 12px 0; }
.adm-nav-divider { padding: 16px 20px 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); font-weight: 600; }
.adm-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 20px; border: none; background: none; color: rgba(255,255,255,0.7); font-size: 0.9rem; cursor: pointer; transition: all 0.15s; text-align: left; font-family: inherit; }
.adm-nav-item:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.adm-nav-item.active { background: rgba(255,255,255,0.12); color: var(--white); border-left: 3px solid var(--primary); font-weight: 600; }
.adm-nav-icon { width: 20px; text-align: center; font-size: 0.95rem; }
.adm-nav-icon svg { width: 16px; height: 16px; }
.adm-sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.adm-main { background: #f0f2f5; overflow-y: auto; }
.adm-header { background: var(--white); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray); position: sticky; top: 0; z-index: 10; }
.adm-header h1 { font-size: 1.3rem; margin: 0; }
.adm-header-actions { display: flex; gap: 10px; align-items: center; }
.adm-save-status { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.adm-content { padding: 24px 32px; max-width: 900px; }

/* Admin cards */
.adm-card { background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; overflow: hidden; }
.adm-card-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-light); display: flex; justify-content: space-between; align-items: center; }
.adm-card-header h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.adm-card-hint { font-size: 0.8rem; color: var(--text-muted); }
.adm-card-body { padding: 20px; }
.adm-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.adm-count { background: var(--primary-lightest); color: var(--primary-dark); padding: 1px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }

/* Admin inputs */
.adm-input-group { margin-bottom: 14px; flex: 1; }
.adm-input-group label { display: block; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.adm-input-group input, .adm-input-group textarea, .adm-input-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--gray); border-radius: 6px; font-size: 0.9rem; font-family: inherit; transition: border 0.15s; box-sizing: border-box; }
.adm-input-group input:focus, .adm-input-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(89,170,213,0.15); }
.adm-input-group textarea { resize: vertical; min-height: 60px; }
.adm-input-inline { margin-bottom: 8px; }
.adm-inline-edit { background: none; border: none; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; padding: 4px 8px; border-radius: 4px; width: 100%; max-width: 350px; }
.adm-inline-edit:hover { background: var(--gray-light); }
.adm-inline-edit:focus { outline: none; background: var(--white); border: 1px solid var(--primary); }

/* Admin icon buttons */
.adm-icon-btn { width: 28px; height: 28px; border: 1px solid var(--gray); border-radius: 4px; background: var(--white); cursor: pointer; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.adm-icon-btn:hover { background: var(--gray-light); }
.adm-icon-btn--danger { color: #e74c3c; border-color: #fdd; }
.adm-icon-btn--danger:hover { background: #fee; }

/* Admin table (pricing) */
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th { text-align: left; padding: 8px 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 2px solid var(--gray); }
.adm-table td { padding: 6px 10px; border-bottom: 1px solid var(--gray-light); }
.adm-table input[type=text], .adm-table input[type=number] { width: 100%; padding: 8px; border: 1px solid var(--gray); border-radius: 4px; font-size: 0.85rem; }
.adm-table input:focus { outline: none; border-color: var(--primary); }
.adm-details summary { cursor: pointer; font-size: 0.8rem; color: var(--primary); font-weight: 600; padding: 4px 0; }

/* Admin array cards */
.adm-array-card { border: 1px solid var(--gray); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.adm-array-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid var(--gray-light); }
.adm-array-num { width: 24px; height: 24px; background: var(--primary-lightest); color: var(--primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.adm-array-title { flex: 1; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-array-actions { display: flex; gap: 4px; }
.adm-array-card-body { padding: 14px; }
.adm-nested-array { margin: 8px 0 16px; padding: 12px; background: #fafbfc; border-radius: 6px; border: 1px solid var(--gray-light); }
.adm-nested-array > label { font-weight: 700; font-size: 0.85rem; display: block; margin-bottom: 10px; }
.adm-nested-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; padding: 8px; background: var(--white); border-radius: 4px; border: 1px solid var(--gray-light); }
.adm-nested-item .adm-input-group { margin-bottom: 0; }

@media (max-width: 768px) {
  .adm { grid-template-columns: 1fr; }
  .adm-sidebar { display: none; }
  .adm-content { padding: 16px; }
  .adm-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
}

/* ======= CHECKOUT PAGE ======= */
.checkout-page { padding: 0 0 60px; }
.checkout-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-top: 32px; }
.checkout-header h1 { font-size: 1.8rem; color: var(--dark); display: flex; align-items: center; gap: 10px; }
.checkout-header h1 svg { width: 28px; height: 28px; color: var(--green); }
.checkout-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.checkout-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.checkout-card-header { padding: 20px 24px; border-bottom: 1px solid var(--gray); display: flex; align-items: center; justify-content: space-between; }
.checkout-card-header h2 { font-size: 1.1rem; color: var(--dark); margin: 0; }
.checkout-summary-toggle { cursor: pointer; user-select: none; }
.checkout-toggle-icon { font-size: 0.8rem; color: var(--text-muted); transition: transform var(--transition); }
.checkout-summary-toggle.collapsed .checkout-toggle-icon { transform: rotate(-90deg); }
.checkout-summary-body { padding: 0 24px 24px; }
.checkout-summary-body.collapsed { display: none; }
.checkout-zip-info { padding: 12px 0; font-size: 0.9rem; color: var(--text-light); border-bottom: 1px solid var(--gray-light); margin-bottom: 12px; }
.checkout-items { margin-bottom: 16px; }
.checkout-line-item { padding: 12px 0; border-bottom: 1px solid var(--gray-light); }
.checkout-line-item:last-child { border-bottom: none; }
.checkout-line-main { display: flex; justify-content: space-between; align-items: center; }
.checkout-line-name { font-weight: 600; color: var(--dark); font-size: 0.95rem; }
.checkout-line-qty { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }
.checkout-line-price { font-weight: 700; color: var(--dark); }
.checkout-line-unit { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.checkout-line-addon { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-light); margin-top: 4px; padding-left: 12px; }
.checkout-fee { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--gray); font-size: 0.9rem; color: var(--text-light); }
.checkout-total { display: flex; justify-content: space-between; padding: 16px 0 0; border-top: 2px solid var(--dark); font-size: 1.25rem; font-weight: 800; color: var(--dark); font-family: 'Montserrat', sans-serif; }

/* Promo Code */
.checkout-promo { border-top: 1px solid var(--gray-light); padding-top: 12px; margin-bottom: 12px; }
.checkout-promo-toggle { background: none; border: none; color: var(--primary); font-size: 0.9rem; cursor: pointer; padding: 0; font-family: inherit; }
.checkout-promo-toggle:hover { color: var(--primary-dark); text-decoration: underline; }
.checkout-promo-section { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.checkout-promo-section.open { max-height: 150px; margin-top: 10px; }
.checkout-promo-input { display: flex; gap: 8px; }
.checkout-promo-input input { flex: 1; padding: 10px 14px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 0.9rem; font-family: inherit; }
.checkout-promo-input input:focus { outline: none; border-color: var(--primary); }
.checkout-promo-message { font-size: 0.85rem; margin-top: 6px; font-weight: 600; }
.promo-success { color: #27ae60; }
.promo-error { color: #e74c3c; }
.checkout-promo-discount { display: flex; justify-content: space-between; color: #27ae60; font-weight: 600; font-size: 0.95rem; margin-top: 8px; }

/* Trust Signals */
.checkout-trust { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-trust-item { display: flex; align-items: center; gap: 8px; background: var(--gray-light); padding: 12px 14px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; color: var(--dark); }
.checkout-trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }
.checkout-stars { display: flex; gap: 1px; }
.checkout-stars svg { width: 14px; height: 14px; color: var(--accent); }

/* Checkout Form */
.checkout-form-section .checkout-card { margin-bottom: 0; }
.checkout-form-section form { padding: 24px; }
.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.checkout-field input, .checkout-field select { width: 100%; padding: 12px 14px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; transition: border-color var(--transition); }
.checkout-field input:focus, .checkout-field select:focus { outline: none; border-color: var(--primary); }
.checkout-field--full { grid-column: 1 / -1; }
.checkout-field--half { }
.checkout-field textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--gray); border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; transition: border-color var(--transition); resize: vertical; min-height: 80px; }
.checkout-field textarea:focus { outline: none; border-color: var(--primary); }
/* City / State / ZIP row */
.checkout-city-state-zip { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 16px; }
@media (max-width: 600px) {
  .checkout-city-state-zip { grid-template-columns: 1fr; }
}
.checkout-schedule { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gray-light); }
.checkout-schedule h3 { font-size: 1rem; margin-bottom: 16px; color: var(--dark); }
.checkout-schedule .checkout-field--full { grid-column: 1 / -1; }

/* Mock Stripe Payment */
.checkout-payment { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gray-light); }
.checkout-payment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.checkout-payment-header h3 { font-size: 1rem; color: var(--dark); display: flex; align-items: center; gap: 8px; margin: 0; }
.checkout-payment-header h3 svg { width: 20px; height: 20px; color: var(--green); }
.checkout-secure-badge { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--green); font-weight: 600; background: #e8f8f0; padding: 4px 10px; border-radius: 20px; }
.checkout-stripe-mock { background: var(--gray-light); border: 2px solid var(--gray); border-radius: var(--radius); padding: 20px; }
.checkout-stripe-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-dark); padding: 0; }
.checkout-stripe-field { padding: 12px 14px; border-bottom: 1px solid var(--gray); }
.checkout-stripe-field:last-child { border-bottom: none; }
.checkout-stripe-field label { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
.checkout-stripe-input { display: flex; align-items: center; justify-content: space-between; }
.checkout-stripe-placeholder { color: var(--text-muted); font-size: 0.95rem; }
.checkout-card-brands { display: flex; gap: 4px; align-items: center; }
.checkout-stripe-row { display: flex; }
.checkout-stripe-row .checkout-stripe-field { flex: 1; }
.checkout-stripe-row .checkout-stripe-field:first-child { border-right: 1px solid var(--gray); }
.checkout-stripe-field--half { }
.checkout-stripe-element { padding: 14px 16px; border: 2px solid var(--gray); border-radius: var(--radius); background: var(--white); transition: border-color var(--transition); }
.checkout-stripe-element:focus-within { border-color: var(--primary); }
.checkout-payment-header-right { display: flex; align-items: center; gap: 16px; }
.checkout-stripe-inline { font-size: 0.8rem; color: #888; display: flex; align-items: center; }
.checkout-stripe-badge-old { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); }
.checkout-stripe-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; font-style: italic; }

/* Checkout card errors */
.checkout-card-errors { color: var(--red); font-size: 0.85rem; margin-top: 8px; min-height: 20px; }

/* Checkout Submit */
.checkout-submit-btn { margin-top: 24px; font-size: 1.1rem; padding: 16px; }
.checkout-submit-btn:disabled { background: var(--gray-dark); color: var(--white); cursor: not-allowed; opacity: 0.6; }
.checkout-submit-btn:disabled:hover { background: var(--gray-dark); transform: none; box-shadow: none; }
.checkout-disclaimer { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 12px; }

/* Checkout Success */
.checkout-success-icon svg { width: 64px; height: 64px; color: var(--green); }

/* Checkout Responsive */
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary-body.collapsed { display: none; }
  .checkout-trust { grid-template-columns: 1fr; }
  .checkout-header h1 { font-size: 1.4rem; }
}
@media (max-width: 600px) {
  .checkout-form-grid { grid-template-columns: 1fr; }
  .checkout-field--half { }
  .checkout-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ======= RESPONSIVE ======= */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .schedule-inner, .newsletter-inner { flex-direction: column; text-align: center; }
  .service-hero-content { grid-template-columns: 1fr; }
  .service-hero-quote { max-width: 400px; }
  .about-grid, .commercial-inner, .contact-grid { grid-template-columns: 1fr; }
  .contact-form-row { flex-direction: column; gap: 0; }
  .contact-form-sm { flex: 1 1 0; }
  .about-grid:nth-child(even) { direction: ltr; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .products-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .trust-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-sidebar { position: static; }
}

@media (max-width: 768px) {
  .top-bar-actions { display: none; }
  .mobile-toggle { display: flex; z-index: calc(var(--z-nav) + 1); }
  /* Hamburger to X animation */
  .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
  .mobile-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
  .nav-inner { height: 60px; justify-content: space-between; }
  .logo { flex-shrink: 0; }
  .logo img { height: 60px !important; width: auto !important; }
  .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 20px; box-shadow: var(--shadow-lg); gap: 4px; z-index: var(--z-sticky); }
  .nav-links.active { display: flex; }
  .nav-links > li > a { display: block; padding: 12px 16px; }
  .mega-dropdown { position: static; min-width: 100%; transform: none; box-shadow: none; padding: 8px 0 8px 20px; }
  .has-dropdown:hover > .mega-dropdown { grid-template-columns: 1fr; }
  .dropdown, .mega-dropdown { display: none !important; }
  .has-dropdown.open > .dropdown { display: block !important; position: static; box-shadow: none; padding: 4px 0 4px 20px; min-width: 100%; }
  .has-dropdown.open > .mega-dropdown { display: grid !important; grid-template-columns: 1fr; }
  .mega-col { margin-bottom: 12px; }
  .mega-col:last-child { margin-bottom: 0; }
  .mega-col-title { display: block; padding: 8px 0 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
  .mega-col a { display: block; padding: 8px 0; font-size: 0.9rem; color: var(--text); }

  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-content { padding: 60px 20px; }
  .hero-zip-form { flex-direction: column; }

  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-features { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .about-stat-number { font-size: 2rem; }
  .products-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .quote-services-grid { grid-template-columns: 1fr; }
  .quote-rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-step .form-row { flex-direction: column; }

  .section-title { font-size: 1.7rem; }
  .quote-type-cards { flex-direction: column; }
  .zip-quote-form { flex-direction: column; }
  .zip-quote-form input { width: 100%; box-sizing: border-box; padding: 16px; font-size: 16px; }
  .zip-quote-form .btn { width: 100%; padding: 16px; font-size: 1rem; }
  .zip-phone-reveal input { padding: 16px; font-size: 16px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { min-width: auto; }

  /* Trust section - shrink logo, tighten layout */
  .trust-section { padding: 40px 0; }
  .trust-layout { gap: 24px; }
  .trust-image { height: auto; max-height: 160px; }
  .trust-image img { max-height: 120px; }
  .trust-icon { width: 44px; height: 44px; }
  .trust-icon svg { width: 20px; height: 20px; }
  .trust-item { gap: 14px; margin-bottom: 20px; }
  .trust-item h3 { font-size: 0.95rem; }
  .trust-item p { font-size: 0.85rem; }

  /* Stats bar */
  .stat-number { font-size: 2rem; }

  /* Schedule CTA */
  .schedule-inner { text-align: center; }
  .schedule-text h2 { font-size: 1.5rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .footer-grid > .footer-col:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ======= COMPARISON SECTION (Why Junk Rhinos) ======= */
.comparison-section { padding: 80px 0; background: var(--gray-light); }
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto repeat(5, 1fr);
  gap: 0;
  max-width: 1060px;
  margin: 48px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.comparison-divider { background: var(--gray-dark); grid-row: 1 / -1; }
.comparison-col {
  padding: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}
.comparison-col--us { background: var(--primary-lightest); }
.comparison-col--them { background: #fafafa; }
.comparison-col-header {
  padding: 24px 28px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
}
.comparison-col--us .comparison-col-header {
  background: var(--primary-dark);
  color: var(--white);
}
.comparison-col--them .comparison-col-header {
  background: #5a6474;
  color: var(--white);
}
.comparison-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 800;
  margin-top: 2px;
}
.comparison-col--us .comparison-icon {
  background: var(--primary-dark);
  color: var(--white);
}
.comparison-col--them .comparison-icon {
  background: #C0392B;
  color: var(--white);
}
.comparison-text strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: 2px;
}
.comparison-text span {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
}
.comparison-col--them .comparison-text strong { color: var(--text-light); }
.comparison-col--them .comparison-text span { color: var(--text-light); }
.comparison-social-proof {
  text-align: center;
  margin-top: 24px;
  font-size: 0.95rem;
  color: var(--text-light);
}
.comparison-stars { color: var(--accent); letter-spacing: 2px; font-size: 1.1rem; }
.comparison-cta { text-align: center; margin-top: 32px; }
.comparison-cta p {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* Comparison mobile stacked */
@media (max-width: 768px) {
  .comparison-section { padding: 48px 0; }
  .comparison-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 480px;
  }
  .comparison-col { grid-row: auto; grid-template-rows: none; display: block; }
  .comparison-divider { height: 3px; background: var(--gray-dark); grid-row: auto; }
  .comparison-col-header { padding: 18px 20px; font-size: 1.05rem; }
  .comparison-row { padding: 14px 20px; min-height: auto; }
}

/* Toast notification */

/* Cart lines */
.cart-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cart-line { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--gray); }
.cart-line span:last-child { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cart-qty-btn { width: 24px; height: 24px; border: 1px solid var(--gray); border-radius: 4px; background: var(--white); cursor: pointer; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.cart-qty-btn:hover { background: var(--primary-lightest); }

/* Product detail page */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0; }
.product-detail-image { background: var(--primary-lightest); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; min-height: 300px; }
.product-detail-image svg { width: 120px; height: 120px; color: var(--primary); }
.product-detail-info h1 { margin-bottom: 16px; }
.product-detail-desc { font-size: 1.1rem; line-height: 1.7; color: var(--text-light); margin-bottom: 20px; }
.product-detail-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 24px; }
@media (max-width: 768px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* Blog listing */
.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-filter { padding: 8px 18px; border: 1px solid var(--gray); border-radius: 50px; background: var(--white); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; }
.blog-filter:hover { border-color: var(--primary); color: var(--primary); }
.blog-filter.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.blog-list { display: flex; flex-direction: column; gap: 24px; }
.blog-list-item { display: flex; gap: 24px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 0.2s; }
.blog-list-item:hover { box-shadow: var(--shadow-md); }
.blog-list-image { width: 200px; min-height: 160px; background: var(--primary-lightest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-list-image svg { width: 60px; height: 60px; color: var(--primary); }
.blog-list-body { padding: 24px; flex: 1; }
.blog-list-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; flex-wrap: wrap; }
.blog-list-category { background: var(--primary-lightest); color: var(--primary-dark); padding: 2px 10px; border-radius: 10px; font-weight: 600; }
.blog-list-body h2 { font-size: 1.2rem; margin-bottom: 8px; }
.blog-list-body h2 a { color: var(--dark); }
.blog-list-body h2 a:hover { color: var(--primary); }
.blog-list-body p { color: var(--text-light); line-height: 1.6; margin-bottom: 12px; }
.blog-read-more { font-weight: 600; color: var(--primary); font-size: 0.9rem; }
.blog-read-more:hover { color: var(--primary-dark); }
.blog-card-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }

/* Blog post detail */
.blog-post { padding: 40px 0 60px; }
.blog-post-container { max-width: 760px; }
.blog-post-header { margin-bottom: 32px; }
.blog-post-category { display: inline-block; background: var(--primary-lightest); color: var(--primary-dark); padding: 4px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; }
.blog-post-header h1 { font-size: 2rem; line-height: 1.3; margin-bottom: 12px; }
.blog-post-meta { display: flex; gap: 20px; color: var(--text-muted); font-size: 0.9rem; }
.blog-post-content { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
.blog-post-content h2 { font-size: 1.4rem; margin: 32px 0 12px; color: var(--dark); }
.blog-post-content h3 { font-size: 1.2rem; margin: 24px 0 8px; color: var(--dark); }
.blog-post-content p { margin-bottom: 16px; }
.blog-post-content img { max-width: 100%; border-radius: var(--radius); margin: 20px 0; }
.blog-post-content blockquote { border-left: 4px solid var(--primary); padding: 12px 20px; margin: 20px 0; background: var(--primary-lightest); border-radius: 0 var(--radius) var(--radius) 0; }
.blog-post-content ul, .blog-post-content ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post-content ul { list-style: disc; }
.blog-post-content ol { list-style: decimal; }
.blog-post-content li { margin-bottom: 6px; }
.blog-post-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.blog-post-content a:hover { color: var(--dark); }
.blog-post-content figure { margin: 24px 0; }
.blog-post-content figure img { margin: 0; }
.blog-post-content figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }
.blog-post-content .quick-answer { background: var(--bg-soft); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; }
.blog-post-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.blog-post-content th { background: var(--bg-soft); color: var(--dark); font-family: 'Montserrat', sans-serif; font-weight: 700; text-align: left; padding: 12px 16px; border: 1px solid var(--hairline); }
.blog-post-content td { padding: 12px 16px; border: 1px solid var(--hairline); color: var(--text); }
.blog-post-content tbody tr:nth-child(even) { background: var(--gray-light); }
.blog-post-content .table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
.blog-post-content .table-wrap table { margin: 0; }
@media (max-width: 700px) {
  /* legacy posts whose tables were stored without a .table-wrap wrapper */
  .blog-post-content > table { display: block; overflow-x: auto; }
}
.blog-post-footer { margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--gray); display: flex; gap: 12px; }

/* Author box */
.author-box { display: flex; gap: 20px; margin-top: 48px; padding: 28px 32px; background: linear-gradient(135deg, #f8faf9 0%, #eef3f0 100%); border-radius: var(--radius-lg, 12px); border-left: 4px solid var(--primary); }
.author-box-left { flex-shrink: 0; }
.author-box-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.author-box-initials { display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--white); font-weight: 700; font-size: 1.3rem; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; }
.author-box-right { flex: 1; min-width: 0; }
.author-box-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary); font-weight: 700; margin-bottom: 4px; }
.author-box-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); font-family: 'Montserrat', sans-serif; }
.author-box-title { font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.author-box-bio { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 600px) {
  .author-box { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; gap: 12px; }
  .author-box-avatar { width: 64px; height: 64px; }
}
.author-box-name a { color: var(--dark); }
.author-box-name a:hover { color: var(--accent-dark); }
.author-box-more { font-size: 0.85rem; font-weight: 700; color: var(--accent-dark); display: inline-block; margin-top: 8px; }
.author-box-more:hover { color: var(--dark); }

/* Blog post byline */
.blog-post-byline { display: flex; align-items: center; gap: 10px; margin: -4px 0 28px; }
.byline-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.blog-post-byline a { color: var(--dark); font-weight: 700; }
.blog-post-byline a:hover { color: var(--accent-dark); }
.blog-card-meta a { color: var(--dark); font-weight: 600; }
.blog-card-meta a:hover { color: var(--accent-dark); }

/* Author page (E-E-A-T) */
.author-page > .container > .breadcrumb { margin: 16px 0; }
.author-hero { background: linear-gradient(135deg, #14160f 0%, #1c1f1a 55%, #2a2e22 100%); color: var(--white); }
.author-hero-inner { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; padding-top: 64px; padding-bottom: 64px; }
.author-hero-photo { width: 280px; height: 280px; border-radius: 16px; object-fit: cover; border: 4px solid var(--accent); box-shadow: 0 24px 60px rgba(0,0,0,0.45); flex-shrink: 0; }
.author-hero-text { flex: 1; min-width: 300px; }
.author-hero-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.author-hero h1 { font-size: 3rem; line-height: 1.12; letter-spacing: -0.035em; color: var(--white); margin-bottom: 10px; }
.author-hero-role { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--accent); margin-bottom: 18px; }
.author-hero-bio { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.75); max-width: 600px; margin-bottom: 26px; }
.author-creds { display: flex; gap: 24px; flex-wrap: wrap; }
.author-cred { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600; }
.author-cred-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(132,178,42,0.25); border: 1px solid rgba(132,178,42,0.5); color: var(--accent); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-stats { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%); display: flex; align-items: stretch; }
.author-stat { flex: 1; text-align: center; padding: 18px 12px; }
.author-stat + .author-stat { border-left: 1px solid rgba(255,255,255,0.30); }
.author-stat-value { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; color: var(--white); line-height: 1.2; }
.author-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 2px; }
.author-about { padding: 72px 0; background: var(--white); }
.author-about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.author-about h2 { font-size: 1.9rem; letter-spacing: -0.03em; margin-bottom: 18px; }
.author-about p { color: #555a51; line-height: 1.8; margin-bottom: 16px; max-width: 68ch; }
.author-topics { background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 12px; padding: 28px; }
.author-topics h3 { font-size: 1.05rem; margin-bottom: 20px; }
.author-topic { display: flex; gap: 14px; margin-bottom: 20px; }
.author-topic:last-child { margin-bottom: 0; }
.author-topic-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--dark); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.author-topic-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--dark); margin-bottom: 2px; }
.author-topic-blurb { font-size: 0.88rem; color: #555a51; line-height: 1.6; }
.author-posts { padding: 72px 0; background: var(--bg-soft); }
.author-posts h2 { text-align: center; font-size: 2.2rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.author-posts-sub { text-align: center; color: #555a51; font-size: 1.05rem; margin-bottom: 48px; }
.author-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.author-post-card { display: block; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(28,31,26,0.05), 0 8px 24px rgba(28,31,26,0.09); color: inherit; transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1); }
.author-post-card:hover { transform: translateY(-4px); }
.author-post-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.author-post-card-body { padding: 24px; }
.author-post-card h3 { font-size: 1.1rem; margin: 0 0 8px; line-height: 1.4; }
.author-post-card p { font-size: 0.9rem; color: #555a51; line-height: 1.5; margin-bottom: 12px; }
.author-post-card-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }
.author-post-card-read { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--dark); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
@media (max-width: 900px) {
  .author-about-grid { grid-template-columns: 1fr; }
  .author-hero h1 { font-size: 2.2rem; }
  .author-hero-inner { gap: 32px; }
}
@media (max-width: 640px) {
  .author-stats { flex-direction: column; }
  .author-stat + .author-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.3); }
  .author-hero-photo { width: 200px; height: 200px; }
}

/* Admin blog styles */
.adm-blog-table { width: 100%; border-collapse: collapse; }
.adm-blog-table th { text-align: left; padding: 10px 16px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 2px solid var(--gray); }
.adm-blog-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-light); font-size: 0.9rem; }
.adm-blog-table tr:hover { background: #fafbfc; }
.adm-blog-title-link { color: var(--primary-dark); font-weight: 600; }
.adm-blog-title-link:hover { color: var(--primary); }
.adm-status { padding: 3px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.adm-status--published { background: #e6f9ed; color: #1a7d3f; }
.adm-status--draft { background: #fff3e0; color: #e65100; }
.adm-editor-toggle { display: flex; gap: 4px; }
.adm-html-editor { width: 100%; min-height: 400px; padding: 20px; border: none; font-family: 'Courier New', monospace; font-size: 0.9rem; resize: vertical; box-sizing: border-box; }
#blogQuillEditor { min-height: 350px; }
#blogQuillEditor .ql-editor { min-height: 320px; font-size: 1rem; line-height: 1.7; }
.adm-seo-preview { background: var(--white); border: 1px solid var(--gray); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; }
.adm-seo-preview-title { color: #1a0dab; font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-seo-preview-url { color: #006621; font-size: 0.85rem; margin-bottom: 4px; }
.adm-seo-preview-desc { color: #545454; font-size: 0.85rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 768px) {
  .blog-list-item { flex-direction: column; }
  .blog-list-image { width: 100%; min-height: 120px; }
  .blog-post-header h1 { font-size: 1.5rem; }

  /* Quote page - stop Business Quote button overlapping heading */
  .calc-header { padding: 20px 16px 20px; text-align: center; }
  .calc-header h1 { font-size: 1.3rem; margin-top: 0; }
  .calc-header p { font-size: 0.9rem; }
  .calc-switch-link { position: static; display: inline-block; margin-top: 12px; }
  .calc-back { position: static; display: inline-block; margin-bottom: 8px; }
  .calc-layout { grid-template-columns: 1fr; }
  .zip-gate-card { padding: 32px 20px; }
  .zip-gate-form { flex-direction: column; align-items: center; }
  .zip-gate-form input { width: 100%; max-width: 240px; }
}

/* ======= QUOTE INFO SECTION (What to Expect) ======= */
/* ---- Quote Page Contact Form ---- */
.quote-contact-section {
  padding: 48px 0;
  background: var(--white, #fff);
}
.quote-contact-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-contact-form .form-row {
  display: flex;
  gap: 16px;
}
.quote-contact-form .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quote-contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
}
.quote-contact-form input,
.quote-contact-form select,
.quote-contact-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text, #1a1a2e);
  width: 100%;
}
.quote-contact-form input:focus,
.quote-contact-form select:focus,
.quote-contact-form textarea:focus {
  outline: none;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.quote-contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
@media (max-width: 600px) {
  .quote-contact-form .form-row {
    flex-direction: column;
    gap: 16px;
  }
}

.quote-info-section { padding: 60px 0; background: var(--off-white); }
.quote-expect-block { }
.quote-expect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.quote-expect-item { display: flex; gap: 16px; background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.quote-expect-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-lightest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.quote-expect-icon svg { width: 22px; height: 22px; }
.quote-expect-item h3 { font-size: 1rem; color: var(--dark); margin-bottom: 6px; }
.quote-expect-item p { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
  .quote-expect-grid { grid-template-columns: 1fr; }
}

/* ======= MOBILE FLOATING PRICE BAR ======= */
.calc-mobile-bar { display: none; }
@media (max-width: 1024px) {
  .calc-mobile-bar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--white); border-top: 2px solid var(--primary); box-shadow: 0 -4px 20px rgba(0,0,0,0.12); transform: translateY(100%); transition: transform 0.3s ease; }
  .calc-mobile-bar.visible { transform: translateY(0); }
  .calc-mobile-bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: 1200px; margin: 0 auto; }
  .calc-mobile-bar-price { display: flex; flex-direction: column; }
  .calc-mobile-bar-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
  .calc-mobile-bar-total { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--primary-dark); }
  .calc-mobile-bar-btn { padding: 12px 28px; font-size: 0.95rem; white-space: nowrap; }
  /* Add bottom padding to page so content isn't hidden behind bar */
  .calc-page { padding-bottom: 80px; }
}

/* Blog Images */
.blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}
.blog-post-hero-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin: 1.5rem 0;
  display: block;
}
@media (max-width: 768px) {
  .blog-card-img { height: 180px; }
  .blog-post-hero-img { max-height: 250px; }
}

/* ---- Area Rug Cleaning Calculator ---- */
.calc-rug-section .calc-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calc-rug-section .calc-category-title svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.calc-rug-item {
  position: relative;
  flex-wrap: wrap;
}

.calc-rug-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.calc-rug-dims {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-rug-input {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text, #1a1a2e);
  text-align: center;
}
.calc-rug-input:focus {
  outline: none;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
/* Hide number input spinners */
.calc-rug-input::-webkit-inner-spin-button,
.calc-rug-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-rug-input[type=number] { -moz-appearance: textfield; }

.calc-rug-x {
  font-size: 1.1rem;
  color: var(--text-muted, #71717a);
}

.calc-rug-unit {
  font-size: 0.85rem;
  color: var(--text-muted, #71717a);
  font-weight: 600;
  font-weight: 600;
}

.calc-rug-result {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-rug-sqft {
  font-size: 0.85rem;
  color: var(--text-muted, #71717a);
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

.calc-rug-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary, #0ea5e9);
  min-width: 70px;
  text-align: right;
}

.calc-rug-addons {
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.calc-rug-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted, #71717a);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.calc-rug-remove:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}

.calc-rug-add-btn,
.calc-tile-add-btn {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Mobile responsive for rug rows */
@media (max-width: 768px) {
  .calc-rug-item {
    flex-direction: column;
  }
  .calc-rug-controls {
    align-items: flex-start;
    width: 100%;
  }
  .calc-rug-result {
    width: 100%;
    justify-content: space-between;
  }
}

/* ======= PRICING UX OVERHAUL - NEW STYLES ======= */

/* --- Progress Steps (item 7) --- */
.calc-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 0;
}
.calc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.calc-step--active { opacity: 1; }
.calc-step--done { opacity: 0.7; }
.calc-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-light, #f3f4f6);
  border: 2px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-muted, #6b7280);
  transition: all 0.3s;
}
.calc-step--active .calc-step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.calc-step--done .calc-step-circle {
  background: var(--primary-light, #6ee7b7);
  border-color: var(--primary-light, #6ee7b7);
  color: var(--primary-dark);
}
.calc-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}
.calc-step--active .calc-step-label { color: var(--primary-dark); }
.calc-step-line {
  flex: 1;
  height: 2px;
  background: var(--border, #e5e7eb);
  min-width: 40px;
  max-width: 80px;
  margin: 0 8px;
  margin-bottom: 22px;
}

/* --- Soft Zip Bar (items 1 & 2 & 10) --- */
.calc-soft-zip-bar {
  background: var(--primary-lightest, #e8f5e9);
  border-bottom: 1px solid rgba(45,106,79,0.15);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.calc-zip-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.calc-zip-prompt-icon { font-size: 1.2rem; }
.calc-zip-prompt span { font-weight: 600; color: var(--primary-dark); }
.calc-soft-zip-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.calc-soft-zip-form input {
  padding: 8px 12px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  font-size: 0.9rem;
  width: 120px;
  outline: none;
}
.calc-soft-zip-form input:focus { box-shadow: 0 0 0 3px rgba(45,106,79,0.15); }
.calc-zip-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--primary-dark);
  font-weight: 600;
}
.calc-zip-change {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}
.calc-transparency-line {
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* --- Social Proof (item 11) --- */
.calc-social-proof {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  padding: 10px 24px;
  font-size: 0.9rem;
  color: var(--dark, #1a1a2e);
  text-align: center;
}
.calc-social-proof em { color: var(--text-light, #555); }

/* --- Minimum Visit Fee (item 3) --- */
.calc-min-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: #92400e;
  line-height: 1.5;
}
.calc-min-notice--met {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.calc-min-nudge {
  margin-top: 4px;
  font-weight: 600;
}

/* --- Bundle Badge (item 4) --- */
.calc-bundle-badge {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.2px;
}
.calc-bundle-suggestion {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #1e40af;
  margin-top: 12px;
  font-weight: 500;
}

/* --- Mobile Sticky Total Bar (item 5) --- */
.sticky-total-bar {
  display: none;
}
@media (max-width: 768px) {
  .sticky-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 56px;
    background: white;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
    padding: 0 16px;
    border-top: 2px solid var(--primary);
  }
  .sticky-total-amount {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary-dark);
  }
  .sticky-total-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-height: 44px;
  }
}

/* --- Price highlight transition --- */
@keyframes priceHighlight {
  0% { background-color: #fef9c3; }
  100% { background-color: transparent; }
}
.price-updated {
  animation: priceHighlight 0.5s ease forwards;
  border-radius: 4px;
}

/* --- Good/Better/Best Tier Cards (item 8) --- */
.calc-tier-cards {
  background: var(--white);
  border-radius: var(--radius-lg, 12px);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.calc-tier-title {
  font-size: 1.05rem;
  color: var(--dark);
  margin-bottom: 16px;
  text-align: center;
  font-weight: 700;
}
.calc-tier-row {
  display: flex;
  gap: 12px;
}
.calc-tier-card {
  flex: 1;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  background: white;
}
.calc-tier-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(45,106,79,0.12);
  transform: translateY(-2px);
}
.calc-tier-card--popular {
  border-color: var(--primary);
  background: var(--primary-lightest, #e8f5e9);
}
.calc-tier-card--selected {
  border-color: var(--primary-dark) !important;
  background: var(--primary-lightest, #e8f5e9) !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,0.25) !important;
}
/* Popular card resets to default when not selected */
.calc-tier-card--popular:not(.calc-tier-card--selected) {
  border-color: #ddd;
  background: white;
}
.calc-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.calc-tier-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  margin-top: 8px;
}
.calc-tier-desc {
  font-size: 0.8rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}
.calc-tier-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--primary-dark);
  margin-top: 4px;
}
.calc-tier-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}
.calc-tier-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
  margin-top: 12px;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .calc-tier-row { flex-direction: column; }
  .calc-tier-card { min-height: 44px; }
}

/* --- Homepage Quick Estimate Widget (item 6) --- */
.home-quick-estimate {
  background: linear-gradient(135deg, #1a472a, var(--primary-dark));
  color: white;
  padding: 48px 24px;
}
.home-quick-estimate-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.home-quick-estimate-text h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: white;
}
.home-quick-estimate-text p {
  color: rgba(255,255,255,0.8);
  margin: 0;
}
.home-quick-estimate-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.home-quick-estimate-form .btn { white-space: nowrap; padding: 12px 24px; }
.home-quick-estimate-text p { white-space: nowrap; }
.home-quick-estimate-form input {
  padding: 12px 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255,255,255,0.15);
  color: white;
  width: 150px;
  outline: none;
}
.home-quick-estimate-form input::placeholder { color: rgba(255,255,255,0.7); }
.home-quick-estimate-form input:focus {
  border-color: white;
  background: rgba(255,255,255,0.25);
}
@media (max-width: 768px) {
  .home-quick-estimate-inner { flex-direction: column; text-align: center; }
  .home-quick-estimate-form { flex-direction: column; width: 100%; }
  .home-quick-estimate-form input { width: 100%; max-width: 280px; }
}

/* --- /pricing Page (item 12) --- */
.pricing-page-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  padding: 80px 24px;
  text-align: center;
}
.pricing-page-hero h1 { font-size: 2.2rem; color: white; margin-bottom: 12px; }
.pricing-page-hero p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: 28px; }
.pricing-page-zip-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.pricing-page-zip-form input {
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  width: 180px;
  outline: none;
}
.pricing-page-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.95rem;
  color: #78350f;
  margin-bottom: 20px;
  text-align: center;
}
.pricing-page-disclaimer {
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 36px;
  text-align: center;
}
.pricing-page-category {
  background: var(--white);
  border-radius: var(--radius-lg, 12px);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.pricing-page-category h3 {
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border, #e5e7eb);
}
.pricing-page-items { display: flex; flex-direction: column; gap: 12px; }
.pricing-page-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 12px;
  flex-wrap: wrap;
}
.pricing-page-item:last-child { border-bottom: none; }
.pricing-page-item-name { font-weight: 600; color: var(--dark); }
.pricing-page-item-desc { font-size: 0.85rem; color: var(--text-muted, #6b7280); flex: 1; }
.pricing-page-item-price { color: var(--primary-dark); font-weight: 700; white-space: nowrap; }
.pricing-page-cta {
  text-align: center;
  padding: 48px 24px;
  background: var(--primary-lightest, #e8f5e9);
  border-radius: var(--radius-lg, 12px);
  margin-top: 32px;
}
.pricing-page-cta h2 { font-size: 1.8rem; margin-bottom: 10px; }
.pricing-page-cta p { color: var(--text-light, #555); margin-bottom: 24px; }

/* Legal Pages (Terms & Privacy) */
/* Legal Pages */
.legal-page { min-height: 100vh; }
.legal-hero { background: linear-gradient(135deg, #1a472a, var(--primary-dark, #1b4332)); color: white; padding: 100px 20px 48px; text-align: center; }
.legal-hero h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 8px; }
.legal-hero .legal-updated { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0; }
.legal-body { background: var(--bg-light, #f9fafb); padding: 0 20px 80px; }
.legal-container { max-width: 800px; margin: -32px auto 0; background: #fff; padding: 48px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; z-index: 1; }
.legal-container h2 { font-size: 1.2rem; color: var(--primary, #2d6a4f); margin-top: 36px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.legal-container h3 { font-size: 1.05rem; color: var(--text, #1a1a2e); margin-top: 20px; margin-bottom: 8px; }
.legal-container p, .legal-container li { font-size: 0.95rem; line-height: 1.75; color: #444; }
.legal-container ul { padding-left: 24px; margin: 12px 0; }
.legal-container li { margin-bottom: 8px; }
.legal-container a { color: var(--primary, #2d6a4f); }
.legal-back { display: inline-block; margin-top: 36px; padding: 12px 24px; background: var(--primary, #2d6a4f); color: white; border-radius: 8px; text-decoration: none; font-size: 0.95rem; }
.legal-back:hover { opacity: 0.9; }
.legal-notice { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 24px 28px; margin-bottom: 32px; }
.legal-notice p { color: #1a1a2e !important; }
.legal-caps-notice { font-size: 0.85rem !important; line-height: 1.6 !important; color: #b91c1c !important; margin-top: 12px; padding: 12px 16px; background: #fef2f2; border-left: 3px solid #ef4444; border-radius: 4px; }
.legal-caps-block { background: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 4px; padding: 16px 20px; margin: 12px 0 16px; }
.legal-caps-block p { font-size: 0.88rem !important; line-height: 1.7 !important; color: #334155 !important; }
.legal-acceptance { text-align: center; margin-top: 40px; padding: 24px; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0; border-radius: 8px; }
.legal-acceptance p { color: #1a472a !important; font-size: 0.9rem !important; }
.legal-container p strong { color: #1a1a2e; }
@media (max-width: 768px) {
  .legal-hero { padding: 80px 16px 36px; }
  .legal-hero h1 { font-size: 1.6rem; }
  .legal-container { padding: 28px 20px; margin-top: -24px; }
}

/* TOS Checkbox */
.checkout-tos-disclaimer { font-size: 0.82rem; color: #888; text-align: center; margin-top: 12px; line-height: 1.5; }
.checkout-tos-disclaimer a { color: var(--primary, #2d6a4f); text-decoration: underline; }
.checkout-tos-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-light, #555); margin: 16px 0 8px; cursor: pointer; line-height: 1.5; }
.checkout-tos-label input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primary, #2d6a4f); }
.checkout-tos-label a { color: var(--primary, #2d6a4f); text-decoration: underline; }

/* Pricing page item addons */
.pricing-page-item-addons { font-size: 0.85rem; color: var(--text-light, #777); margin-top: 4px; }

/* Quote Gate - Full Viewport Hero */
.quote-gate { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(150deg, #1a2332 0%, #243447 45%, #1a2e3d 100%); position: relative; overflow: hidden; }
.quote-gate::before { content: ''; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(132,178,42,0.12) 0%, transparent 70%); pointer-events: none; }
.quote-gate::after { content: ''; position: absolute; bottom: 60px; left: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(154,205,50,0.08) 0%, transparent 70%); pointer-events: none; }
.quote-gate__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 900px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.04); pointer-events: none; }
.quote-gate__ring::before { content: ''; position: absolute; inset: 120px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.04); }
.quote-gate__content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 80px 24px 60px; position: relative; z-index: 1; }
.quote-gate__container { max-width: 640px; width: 100%; text-align: center; }
.quote-gate__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #84b22a; margin-bottom: 16px; }
.quote-gate__headline { font-size: 52px; font-weight: 800; line-height: 1.15; color: #ffffff; margin-bottom: 16px; }
.quote-gate__sub { font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 auto 36px; }
.quote-gate__form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto 24px; }
/* Quote gate: zip + phone side by side */
.quote-gate__form--dual { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 12px; }
.quote-gate__form--dual .quote-input { flex: 1; }
.quote-gate__form--dual .quote-input--phone { flex: 1.3; letter-spacing: 0; }
.quote-gate__form--dual .quote-btn { width: 100%; }
.quote-gate__btn-row { max-width: 460px; margin: 0 auto 24px; }
.quote-gate__disclaimer { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 8px; }
/* Quote gate: phone-only mode */
.quote-gate__zip-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 8px 16px; margin: 0 auto 20px; font-size: 13px; color: #fff; }
.quote-gate__zip-badge-change { color: rgba(255,255,255,0.5); font-size: 11px; cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; }
.quote-gate__form--phone-only { max-width: 340px; margin: 0 auto 12px; }
.quote-gate__form--phone-only .quote-input { width: 100%; letter-spacing: 0; text-align: center; }
.quote-input { flex: 1; height: 56px; padding: 0 20px; font-size: 16px; font-weight: 500; color: #1a2332; background: #ffffff; border: 2px solid #dde3ea; border-radius: 8px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; letter-spacing: 2px; }
.quote-input::placeholder { color: #6c7480; letter-spacing: 0; }
.quote-input:focus { border-color: #9ACD32; box-shadow: 0 0 0 3px rgba(154,205,50,0.18); }
.quote-btn { height: 56px; padding: 0 28px; white-space: nowrap; background: linear-gradient(135deg, #9ACD32 0%, #84b22a 100%); color: #ffffff; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 4px 16px rgba(154,205,50,0.40), 0 2px 4px rgba(0,0,0,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.quote-btn:hover { background: linear-gradient(135deg, #a6d94a 0%, #9ACD32 100%); box-shadow: 0 6px 20px rgba(154,205,50,0.50), 0 2px 8px rgba(0,0,0,0.20); transform: translateY(-1px); }
.quote-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(154,205,50,0.30); }
.zip-gate-error { color: #ff6b6b; font-size: 0.9rem; margin-top: 8px; }
.quote-gate__stars { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.stars-icon { color: #9ACD32; font-size: 18px; letter-spacing: 2px; }
.stars-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.25); margin: 0 2px; }
.quote-gate__stars-text { font-size: 14px; color: rgba(255,255,255,0.85); }
.quote-gate__trust { display: flex; justify-content: center; gap: 28px; margin-top: 20px; }
.quote-gate__trust-item { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.70); font-size: 13px; font-weight: 500; }
.quote-gate__trust-item::before { content: '\2713'; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(132,178,42,0.25); border: 1px solid rgba(132,178,42,0.5); color: #84b22a; font-size: 10px; font-weight: 800; flex-shrink: 0; }
/* Stats Bar */
.quote-stats { background: linear-gradient(90deg, #9ACD32 0%, #84b22a 100%); display: flex; align-items: stretch; padding: 0; position: relative; z-index: 1; }
.quote-stats__item { flex: 1; text-align: center; padding: 18px 12px; position: relative; }
.quote-stats__item + .quote-stats__item::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,0.30); }
.quote-stats__number { font-size: 26px; font-weight: 800; color: #ffffff; line-height: 1.2; }
.quote-stats__label { font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 2px; }
@media (max-width: 768px) {
  .quote-gate__content { padding: 60px 20px 40px; }
  .quote-gate__headline { font-size: 30px; line-height: 1.2; }
  .quote-gate__sub { font-size: 15px; margin-bottom: 28px; }
  .quote-gate__form { gap: 8px; }
  .quote-input { height: 56px; font-size: 16px; min-width: 0; }
  .quote-btn { height: 56px; padding: 0 18px; font-size: 16px; }
  .quote-gate__stars { flex-wrap: wrap; gap: 6px; }
  .quote-gate__trust { gap: 14px; flex-wrap: wrap; }
  .quote-gate__trust-item { font-size: 12px; }
  .quote-stats { flex-wrap: wrap; }
  .quote-stats__item { flex: 0 0 50%; padding: 14px 8px; }
  .quote-stats__number { font-size: 20px; }
  .quote-stats__label { font-size: 10px; }
  .quote-gate__ring, .quote-gate::before, .quote-gate::after { display: none; }
  .quote-gate__form--dual { flex-direction: column; max-width: 100%; padding: 0 24px; box-sizing: border-box; gap: 12px; }
  .quote-gate__form--dual .quote-input { flex: none; width: 100%; box-sizing: border-box; height: 56px; font-size: 16px; }
  .quote-gate__form--dual .quote-input--phone { flex: none; width: 100%; }
  .quote-gate__btn-row { max-width: 100%; padding: 0 24px; box-sizing: border-box; }
  .quote-gate__btn-row .quote-btn { height: 56px; font-size: 16px; }
  .quote-gate__form--phone-only { max-width: 100%; padding: 0 24px; box-sizing: border-box; }
  .quote-gate__form--phone-only .quote-input { width: 100%; box-sizing: border-box; height: 56px; font-size: 16px; }
}

/* Service page contact form */
.service-hero-quote textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; font-family: inherit; resize: vertical; }
.service-hero-quote input[name="name"],
.service-hero-quote input[name="email"],
.service-hero-quote input[name="phone"],
.service-hero-quote input[name="zip"] { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; margin-bottom: 8px; box-sizing: border-box; }

/* Tile & grout section */
.calc-section-subtitle { color: #666; font-size: 0.9rem; margin: -8px 0 16px; }

/* CMS locked/read-only fields */
.adm-locked-field {
  background: #f5f5f5;
  color: #888;
  border: 1px solid #ddd;
  cursor: not-allowed;
  pointer-events: none;
}
.adm-locked-label {
  font-size: 0.7rem;
  color: #999;
  font-style: italic;
  margin-left: 6px;
}
.adm-preview-zip {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.adm-preview-zip input {
  width: 120px;
}
.adm-preview-result {
  font-size: 0.85rem;
  color: #666;
}

/* Online Discount Banner */
.discount-banner {
  background: #2e7d32;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .discount-banner {
    padding: 8px 12px;
    font-size: 12px;
    letter-spacing: 0.3px;
  }
}

/* Quote page discount callout banner */
.calc-discount-banner {
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  margin: 0 0 8px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.calc-discount-banner-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.calc-discount-banner-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
}
@media (max-width: 768px) {
  .calc-discount-banner {
    font-size: 13px;
    padding: 12px 16px;
    border-radius: 8px;
  }
}

/* Quote discount pricing */
.calc-original-price {
  color: #999;
  font-size: 0.85em;
  margin-right: 4px;
}
.calc-discount-price {
  color: #2e7d32;
  font-weight: 600;
}
.calc-savings-msg {
  text-align: right;
  font-size: 0.82rem;
  color: #2e7d32;
  font-weight: 600;
  margin-top: 4px;
}

/* ============================================ */
/* FREE QUOTE FUNNEL (/free-quote)              */
/* ============================================ */

.fq-hero {
  background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 50%, var(--primary-light) 100%);
  color: var(--white);
  text-align: center;
  padding: 80px 20px 60px;
  position: relative;
  overflow: hidden;
}
.fq-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  pointer-events: none;
}
.fq-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
.fq-hero-sub {
  font-size: 1.1rem;
  opacity: 0.95;
  margin-bottom: 32px;
  line-height: 1.7;
}
.fq-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.fq-form input {
  flex: 1;
  min-width: 140px;
  padding: 16px 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  background: rgba(255,255,255,0.95);
  transition: border-color 0.2s;
}
.fq-form input:focus {
  border-color: var(--accent);
  background: #fff;
}
.fq-form input::placeholder {
  color: #6c7480;
}
.fq-form button {
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(154,205,50,0.4);
  transition: background 0.2s, transform 0.2s;
}
.fq-form button:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
.fq-disclaimer {
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.7;
}
.fq-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: nowrap;
}
.fq-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
}
.fq-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Review Carousel */
.fq-reviews {
  margin-top: 40px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  padding-bottom: 8px;
}
.fq-reviews-track {
  overflow: hidden;
  padding: 8px 0;
}
.fq-reviews-slide {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: fqScrollLeft 40s linear infinite;
}
.fq-reviews-slide:hover {
  animation-play-state: paused;
}
.fq-reviews-track--right .fq-reviews-slide {
  animation: fqScrollRight 40s linear infinite;
}
.fq-reviews-track--right .fq-reviews-slide:hover {
  animation-play-state: paused;
}
.fq-review-card {
  flex-shrink: 0;
  width: 300px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: left;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.fq-review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  color: #9ACD32;
}
.fq-review-stars svg {
  width: 16px;
  height: 16px;
}
.fq-review-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0 0 10px;
  font-style: italic;
}
.fq-review-author {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
@keyframes fqScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes fqScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
/* Light background variant for Screen 3 */
.fq-reviews--light {
  margin-top: 32px;
}
.fq-reviews--light .fq-reviews {
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.fq-reviews--light .fq-review-card {
  background: var(--gray-light);
  border-color: var(--gray);
}
.fq-reviews--light .fq-review-card p {
  color: var(--text);
}
.fq-reviews--light .fq-review-author {
  color: var(--text-light);
}

.fq-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto 32px;
}
.fq-step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.fq-step--done { background: var(--primary); color: var(--white); }
.fq-step--active { background: var(--primary); color: var(--white); }
.fq-step--pending { background: var(--gray); color: #999; }
.fq-bar { flex: 1; height: 3px; }
.fq-bar--done { background: var(--primary); }
.fq-bar--pending { background: var(--gray); }
.fq-screen {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px;
}
.fq-screen h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  margin-bottom: 8px;
}
.fq-screen .fq-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 28px;
}
.fq-zip-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-lightest, #e6f4ef);
  border: 1px solid var(--primary-light, #9ad1bf);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  margin: 0 auto 20px;
  font-size: 0.85rem;
  color: var(--primary-dark, #0d6e54);
}
.fq-screen > .fq-zip-banner { display: flex; width: fit-content; }
.fq-zip-banner-info { display: inline-flex; align-items: center; gap: 6px; }
.fq-zip-banner-info svg { width: 14px; height: 14px; }
.fq-zip-change {
  background: transparent;
  border: none;
  color: var(--primary, #0e8a68);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
}
.fq-zip-change:hover { background: rgba(0,0,0,0.04); }
.fq-chat {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(27,42,61,0.08);
  overflow: hidden;
  margin-bottom: 28px;
}
.fq-chat-messages { padding: 20px 20px 0; }
.fq-chat-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.fq-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.fq-chat-text {
  background: var(--primary-lightest);
  border-radius: 12px 12px 12px 4px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  line-height: 1.5;
}
.fq-chat-input-wrap {
  padding: 0 20px 20px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.fq-chat-input {
  flex: 1;
  background: var(--gray-light);
  border: 1.5px solid var(--gray);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  resize: none;
  font-family: inherit;
  min-height: 48px;
}
.fq-chat-input:focus { border-color: var(--primary); }
.fq-chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--white);
  font-size: 18px;
  transition: background 0.2s;
}
.fq-chat-send:hover { background: var(--accent-hover); }
.fq-selections-card {
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: 14px;
  padding: 0;
  margin: 20px auto;
  max-width: 500px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
}
.fq-selections-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--primary);
  color: var(--white);
}
.fq-selections-title {
  font-size: 15px;
  font-weight: 700;
}
.fq-selections-count {
  font-size: 13px;
  opacity: 0.9;
}
.fq-sel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-light);
  font-size: 15px;
  color: var(--dark);
}
.fq-sel-item:last-child { border-bottom: none; }
.fq-sel-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fq-sel-check {
  color: var(--primary);
  font-weight: 700;
  font-size: 16px;
}
.fq-sel-qty {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--primary);
  border-radius: 12px;
  padding: 3px 12px;
}
/* Two-column layout for Screen 2 */
.fq-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.fq-layout-main {
  flex: 1;
  min-width: 0;
}
.fq-layout-sidebar {
  width: 280px;
  flex-shrink: 0;
}
.fq-sidebar-sticky {
  position: sticky;
  top: 90px;
}
.fq-sidebar-empty {
  text-align: center;
  padding: 32px 20px;
  color: #999;
  font-size: 14px;
  border: 2px dashed var(--gray);
  border-radius: 14px;
}
.fq-sidebar-empty p { margin: 0; }
.fq-sidebar-cta {
  margin-top: 16px;
}
.fq-sidebar-cta button {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  border: none;
  font-size: 17px;
  box-shadow: 0 4px 16px rgba(154,205,50,0.4);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  animation: fqPulse 2s ease-in-out infinite;
}
.fq-sidebar-cta button:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(154,205,50,0.5);
}
.fq-sidebar-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: #888;
}
.fq-sidebar-trust svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
}
@keyframes fqPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(154,205,50,0.4); }
  50% { box-shadow: 0 4px 24px rgba(154,205,50,0.6); }
}

/* Mobile sticky bottom bar */
.fq-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray);
  padding: 12px 20px;
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.fq-mobile-bar-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fq-mobile-bar-count {
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fq-mobile-bar-label {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}
.fq-mobile-bar-btn {
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(154,205,50,0.35);
}
.fq-mobile-bar-btn:hover {
  background: var(--accent-hover);
}

.fq-sidebar-cta #fqItemCount {
  font-weight: 400;
  opacity: 0.9;
}
.fq-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.fq-divider span {
  font-size: 13px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.fq-divider::before, .fq-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray);
}
.fq-cat-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-dark);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gray);
}
.fq-items { margin-bottom: 24px; }
.fq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-light);
  transition: background 0.2s;
}
.fq-item:last-child { border-bottom: none; }
.fq-item--active {
  background: #f0f7fd;
  margin: 0 -12px;
  padding: 12px;
  border-radius: 8px;
}
.fq-item-name { font-weight: 600; color: var(--dark); }
.fq-item-desc { font-size: 13px; color: #888; }
.fq-qty {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fq-qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 16px;
  transition: background 0.2s;
}
.fq-qty-minus { background: var(--gray); color: #666; }
.fq-qty-minus--active { background: var(--primary); color: var(--white); }
.fq-qty-plus { background: var(--primary); color: var(--white); }
.fq-qty-plus:hover { background: var(--primary-dark); }
.fq-qty-val {
  font-size: 18px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  color: var(--dark);
}
.fq-qty-val--active { color: var(--primary-dark); }
.fq-lead { max-width: 440px; margin: 0 auto; }
.fq-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.fq-pill--blue { background: var(--primary-lightest); color: var(--primary-dark); }
.fq-pill--orange { background: var(--accent-light); color: #92400e; }
.fq-lead input {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--gray);
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.fq-lead input:focus { border-color: var(--primary); }
.fq-lead button {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(154,205,50,0.3);
  transition: background 0.2s, transform 0.2s;
}
.fq-lead button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.fq-trust {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.fq-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #555;
}
.fq-quote-card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(27,42,61,0.08);
  max-width: 600px;
  margin: 0 auto 24px;
}
.fq-line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-light);
}
.fq-line:last-child { border-bottom: none; }
.fq-line-name { font-weight: 600; color: var(--dark); }
.fq-line-full { text-decoration: line-through; color: var(--gray-dark); margin-right: 8px; }
.fq-line-disc { color: var(--primary-dark); font-weight: 700; }
.fq-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--dark);
}
.fq-total-phone {
  display: flex;
  justify-content: space-between;
  color: var(--gray-dark);
  margin-bottom: 8px;
  font-size: 14px;
}
.fq-total-phone span:last-child { text-decoration: line-through; }
.fq-total-online {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-dark);
}
.fq-savings {
  text-align: right;
  font-size: 14px;
  color: #e74c3c;
  font-weight: 600;
  margin-top: 4px;
}
.fq-cta-primary {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 12px;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(154,205,50,0.4);
  transition: background 0.2s, transform 0.2s;
}
.fq-cta-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.fq-cta-secondary {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border: 1.5px solid var(--gray);
  color: #666;
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.fq-trust-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 12px;
  color: #888;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.fq-trust-row-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.fq-trust-row-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.fq-trust-row-icon svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 768px) {
  .fq-hero h1 { font-size: 1.8rem; }
  .fq-hero-sub { font-size: 1rem; }
  .fq-form { flex-direction: column; }
  .fq-form input, .fq-form button { width: 100%; }
  .fq-badges { gap: 6px; flex-wrap: wrap; }
  .fq-badge { font-size: 11px; padding: 6px 10px; }
  .fq-badge svg { width: 12px; height: 12px; }
  .fq-review-card { width: 250px; padding: 16px 18px; }
  .fq-review-card p { font-size: 13px; }
  .fq-total-online { font-size: 18px; }

  /* Mobile: single column, hide sidebar, show bottom bar */
  .fq-layout { flex-direction: column; }
  .fq-layout-sidebar { display: none; }
  .fq-screen { padding-bottom: 80px; } /* room for mobile bar */
}
@media (min-width: 769px) {
  /* Desktop: hide mobile bar, show sidebar */
  .fq-mobile-bar { display: none !important; }
  .fq-screen { max-width: 960px; }
}

/* ============================================
   PAY LANDING (/pay/:token)
   ============================================ */
.pay-page { background: #F4F6FA; min-height: 100vh; padding: 32px 0 80px; }
.pay-page .container--narrow { max-width: 1080px; }

.pay-loading { text-align: center; padding: 120px 20px; color: #5A6577; }
.pay-spinner {
  width: 38px; height: 38px; border: 3px solid #DDE2E8; border-top-color: #1c1f1a;
  border-radius: 50%; margin: 0 auto 16px; animation: pay-spin 0.9s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.pay-empty {
  background: #fff; max-width: 540px; margin: 60px auto; padding: 48px 32px;
  border-radius: 16px; text-align: center; box-shadow: 0 8px 32px rgba(15,23,42,0.06);
}
.pay-empty h1 { font-size: 28px; color: #1c1f1a; margin: 0 0 12px; }
.pay-empty p { color: #5A6577; margin: 0 0 24px; line-height: 1.6; }
.pay-empty-meta { font-size: 13px; color: #94a3b8; }
.pay-empty .btn { margin-top: 8px; }
.pay-empty--success .pay-paid-check {
  width: 72px; height: 72px; border-radius: 50%; background: #DCFCE7; color: #16A34A;
  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.pay-empty--success .pay-paid-check svg { width: 40px; height: 40px; stroke-width: 2.5; }

.pay-banner--expired {
  background: #FEF3C7; color: #78350F; padding: 16px 20px; border-radius: 12px;
  margin-bottom: 24px; border: 1px solid #FCD34D; font-size: 15px; line-height: 1.5;
}

.pay-hero { text-align: center; padding: 16px 16px 24px; }
.pay-hero h1 {
  font-size: 36px; font-weight: 800; color: #1c1f1a; margin: 8px 0 12px;
  letter-spacing: -0.5px; line-height: 1.15;
}
.pay-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: #16A34A; text-transform: uppercase; letter-spacing: 1.2px; margin: 0;
}
.pay-eyebrow svg { width: 16px; height: 16px; }
.pay-subtitle { color: #5A6577; font-size: 16px; line-height: 1.6; max-width: 600px; margin: 0 auto; }
.pay-urgency {
  display: inline-flex; align-items: center; gap: 8px; background: #FFF7ED; color: #C2410C;
  padding: 10px 18px; border-radius: 999px; margin-top: 18px; font-size: 14px; font-weight: 600;
  border: 1px solid #FED7AA;
}
.pay-urgency svg { width: 16px; height: 16px; }

.pay-trust-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 16px 0 32px;
}
.pay-trust-pill {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15,23,42,0.05);
  font-size: 13px; color: #1c1f1a; border: 1px solid #EEF1F5;
}
.pay-trust-pill svg { width: 16px; height: 16px; color: #1c1f1a; }
.pay-trust-pill strong { font-weight: 700; }

.pay-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: start;
}
.pay-grid--single { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }

.pay-card {
  background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px rgba(15,23,42,0.06);
  border: 1px solid #EEF1F5;
}
.pay-card h2 { font-size: 18px; font-weight: 700; color: #1c1f1a; margin: 0 0 16px; }
.pay-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pay-card-header h2 { margin: 0; }
.pay-locked-badge {
  display: inline-flex; align-items: center; gap: 6px; background: #DCFCE7; color: #15803D;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pay-locked-badge svg { width: 12px; height: 12px; }

.pay-quote-table { width: 100%; border-collapse: collapse; }
.pay-quote-table th {
  text-align: left; padding: 8px 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.7px; color: #94a3b8; font-weight: 600; border-bottom: 1px solid #EEF1F5;
}
.pay-quote-table th.pay-th-strike, .pay-quote-table th.pay-th-total { text-align: right; }
.pay-quote-table td { padding: 12px 0; font-size: 14px; color: #1c1f1a; border-bottom: 1px solid #F4F6FA; }
.pay-line-name { font-weight: 500; }
.pay-qty { color: #94a3b8; font-weight: 400; font-size: 13px; }
.pay-line-strike { text-align: right; color: #94a3b8; text-decoration: line-through; font-size: 13px; }
.pay-line-total { text-align: right; font-weight: 700; }

.pay-totals { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #DDE2E8; }
.pay-total-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 14px; color: #5A6577;
}
.pay-strike { color: #94a3b8; text-decoration: line-through; }
.pay-total-row--discount { color: #C2410C; font-weight: 600; }
.pay-total-row--final {
  font-size: 22px; font-weight: 800; color: #1c1f1a; padding-top: 12px;
  border-top: 2px solid #EEF1F5; margin-top: 8px;
}
.pay-total-row--final span:last-child { color: #1c1f1a; }

.pay-guarantee {
  background: #fff; border-radius: 16px; padding: 20px; margin-top: 16px;
  display: flex; gap: 16px; align-items: flex-start; border: 1px solid #EEF1F5;
}
.pay-guarantee-icon {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px;
  background: #DCFCE7; color: #16A34A; display: flex; align-items: center; justify-content: center;
}
.pay-guarantee-icon svg { width: 24px; height: 24px; }
.pay-guarantee h3 { font-size: 15px; font-weight: 700; color: #1c1f1a; margin: 0 0 4px; }
.pay-guarantee p { font-size: 13px; color: #5A6577; margin: 0; line-height: 1.55; }

.pay-card--form { position: sticky; top: 20px; }
.pay-form-sub { font-size: 13px; color: #94a3b8; margin: -8px 0 16px; }
.pay-section-h2 { margin-top: 24px !important; padding-top: 20px; border-top: 1px solid #EEF1F5; }
.pay-field { margin-bottom: 14px; }
.pay-field label { display: block; font-size: 12px; font-weight: 600; color: #5A6577; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.pay-field input {
  width: 100%; padding: 12px 14px; border: 1px solid #DDE2E8; border-radius: 10px;
  font-size: 15px; color: #1c1f1a; background: #fff; transition: border-color 0.15s;
  font-family: inherit;
}
.pay-field input:focus { outline: none; border-color: #1c1f1a; box-shadow: 0 0 0 3px rgba(132,178,42,0.12); }
.pay-field input:disabled { background: #F4F6FA; color: #94a3b8; cursor: not-allowed; }
.pay-field-row { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; }
.pay-field--small { min-width: 0; }
.pay-stripe-element {
  padding: 14px; border: 1px solid #DDE2E8; border-radius: 10px; background: #fff;
}
.pay-stripe-element.StripeElement--focus { border-color: #1c1f1a; box-shadow: 0 0 0 3px rgba(132,178,42,0.12); }
.pay-card-error { color: #e74c3c; font-size: 13px; margin-top: 6px; min-height: 16px; }

.pay-submit-btn {
  width: 100%; padding: 18px 24px; background: linear-gradient(135deg, #9ACD32, #84b22a);
  color: #fff; border: none; border-radius: 12px; font-size: 17px; font-weight: 800;
  letter-spacing: 0.3px; cursor: pointer; margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(154,205,50,0.4); transition: all 0.15s;
  font-family: inherit;
}
.pay-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(154,205,50,0.5); }
.pay-submit-btn:disabled { opacity: 0.6; cursor: wait; }
.pay-submit-btn svg { width: 18px; height: 18px; }

.pay-mini-trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
  margin-top: 14px; font-size: 12px; color: #94a3b8;
}
.pay-mini-trust span { display: inline-flex; align-items: center; gap: 5px; }
.pay-mini-trust svg { width: 13px; height: 13px; color: #16A34A; }

.pay-section { margin-top: 56px; }
.pay-section-title {
  text-align: center; font-size: 24px; font-weight: 700; color: #1c1f1a; margin: 0 0 24px;
}

.pay-faq { max-width: 720px; margin: 0 auto; }
.pay-faq-item {
  background: #fff; border-radius: 12px; margin-bottom: 10px; padding: 0;
  border: 1px solid #EEF1F5; overflow: hidden;
}
.pay-faq-item summary {
  padding: 18px 24px; font-size: 15px; font-weight: 600; color: #1c1f1a;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  list-style: none;
}
.pay-faq-item summary::-webkit-details-marker { display: none; }
.pay-faq-chevron { color: #94a3b8; font-size: 22px; font-weight: 300; transition: transform 0.2s; }
.pay-faq-item[open] .pay-faq-chevron { transform: rotate(45deg); }
.pay-faq-item p { padding: 0 24px 20px; margin: 0; color: #5A6577; font-size: 14px; line-height: 1.6; }

.pay-help { text-align: center; margin-top: 48px; padding: 24px; }
.pay-help p { color: #5A6577; margin: 0 0 8px; font-size: 14px; }
.pay-help-phone {
  display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700;
  color: #1c1f1a; text-decoration: none;
}
.pay-help-phone svg { width: 22px; height: 22px; }

.pay-cta-block { text-align: center; margin-top: 24px; padding: 20px; }
.pay-cta-sub { color: #94a3b8; font-size: 13px; margin-top: 10px; }

@media (max-width: 880px) {
  .pay-grid { grid-template-columns: 1fr; }
  .pay-card--form { position: static; }
  .pay-hero h1 { font-size: 28px; }
  .pay-card { padding: 22px; }
  .pay-field-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 540px) {
  .pay-field-row { grid-template-columns: 1fr; }
  .pay-trust-row { gap: 6px; }
  .pay-trust-pill { padding: 8px 12px; font-size: 12px; }
}

/* ---- Services index (/services) ---- */
.svc-index-section { padding: 80px 0; background: var(--white); }
.svc-index-group { margin-bottom: 56px; }
.svc-index-group:last-child { margin-bottom: 0; }
.svc-index-group .section-title { text-align: left; }
.svc-index-group .section-subtitle { text-align: left; max-width: 760px; margin-left: 0; margin-right: 0; }
.svc-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 28px; }
.svc-index-card { background: var(--white); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.svc-index-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gray-dark); }
.svc-index-card h3 { font-size: 1.15rem; color: var(--dark); margin-bottom: 10px; }
.svc-index-card p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.svc-index-link { align-self: flex-start; font-weight: 700; color: var(--primary-dark); text-decoration: none; }
.svc-index-link::after { content: ' \2192'; }
.svc-index-link:hover { color: var(--primary-darker); }
.cta-band { padding: 72px 0; background: var(--off-white); }
.cta-band .btn { margin-top: 8px; }
@media (max-width: 768px) {
  .svc-index-section { padding: 48px 0; }
  .svc-index-group { margin-bottom: 40px; }
  .svc-index-grid { grid-template-columns: 1fr; gap: 16px; }
  .cta-band { padding: 48px 0; }
}

/* ============================================
   QUOTE ESTIMATOR (Task 6) + TOAST
   ============================================ */
.qe-section { padding: clamp(2.5rem, 5vw, 4rem) 0 72px; background: var(--primary-lightest); scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Wizard host scroll target clears the sticky nav when steps repaint */
#qeApp { scroll-margin-top: calc(var(--nav-h) + 16px); }
.qe-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px 32px; border: 1px solid var(--hairline); }
.qe-h2 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; color: var(--dark); margin: 0 0 8px; }
.qe-lead { color: var(--text-light); margin: 0 0 24px; line-height: 1.5; }
.qe-label { display: block; font-weight: 600; color: var(--dark); margin: 16px 0 6px; font-size: 0.95rem; }
.qe-label:first-of-type { margin-top: 0; }
.qe-optional { font-weight: 400; color: var(--text-muted); }
.qe-input { width: 100%; padding: 14px 16px; border: 2px solid var(--gray, #d9dee4); border-radius: var(--radius); font-size: 1.05rem; font-family: 'Open Sans', sans-serif; color: var(--text); background: var(--white); }
.qe-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(132,178,42,0.18); }
textarea.qe-input { resize: vertical; min-height: 80px; }
.qe-zip-form .btn, .qe-contact-form .btn { margin-top: 24px; }
.qe-back { background: none; border: none; color: var(--primary-dark); font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 16px; font-size: 0.95rem; }
.qe-back:hover { text-decoration: underline; }

.qe-input--xl { padding: 18px 18px; font-size: 1.3rem; letter-spacing: 2px; }

.qe-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.qe-tier { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 20px 20px 18px; border: 2px solid var(--gray, #d9dee4); border-radius: var(--radius-lg); background: var(--white); cursor: pointer; transition: all var(--transition); }
.qe-tier:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.qe-tier:focus-visible { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px rgba(132,178,42,0.30); }
.qe-tier.selected { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 1px var(--accent) inset; }
.qe-tier-label { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--dark); }
.qe-tier-helper { font-size: 0.8rem; font-weight: 600; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.4px; }
.qe-tier-volume { font-size: 0.88rem; color: var(--text-light); }
.qe-tier-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--accent-hover); margin-top: 4px; }
.qe-tier-desc { font-size: 0.82rem; color: var(--text-muted); }
.qe-tier-tag { position: absolute; top: -11px; left: 16px; background: var(--accent); color: var(--dark); font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.qe-tier-check { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--dark); font-size: 0.85rem; font-weight: 800; display: none; align-items: center; justify-content: center; }
.qe-tier.selected .qe-tier-check { display: flex; }

.qe-disclaimer { margin-top: 20px; padding: 14px 16px; background: var(--primary-lightest); border-radius: var(--radius); font-size: 0.88rem; color: var(--text-light); line-height: 1.5; }

/* Progress indicator.
   NB: .qe-section is repainted charcoal further down ("Quote estimator polish"),
   and this block sits directly on that band - NOT inside a white card - so every
   colour here is the on-dark one. It used to inherit the on-light palette, which
   left "Step 2 of 3" and the step labels charcoal on charcoal: invisible, with
   only the lime bar and the <ol>'s own "1. 2. 3." markers showing through. */
.qe-progress { margin-bottom: 24px; }
.qe-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.qe-progress-step { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--white); font-size: 0.98rem; }
.qe-progress-count { font-weight: 700; color: rgba(255,255,255,0.62); font-size: 0.85rem; }
.qe-progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.16); overflow: hidden; }
.qe-progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.35s ease; }
.qe-progress-labels { display: flex; justify-content: space-between; margin-top: 8px; padding: 0; list-style: none; }
.qe-progress-labels li { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.qe-progress-labels li.is-active { color: var(--accent); }
.qe-progress-labels li.is-todo { color: rgba(255,255,255,0.42); }
/* Only completed steps are controls; the current and upcoming ones are plain
   text and must not look clickable (they used to, and collected dead clicks). */
.qe-progress-labels li > span { cursor: default; }
.qe-progress-link {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--white); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px; text-decoration-color: var(--accent);
  cursor: pointer;
}
.qe-progress-link:hover { color: var(--accent); }
.qe-progress-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Load-size cards painted before /api/pricing answers: same box, price pending.
   Font metrics must match the priced state exactly - anything that reflows the
   card when the real price arrives puts the shift straight back. */
.qe-tier--pending { cursor: progress; }
.qe-tier--pending .qe-tier-price { color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .qe-tier--pending .qe-tier-price { animation: qePulse 1.2s ease-in-out infinite; }
}
@keyframes qePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Trust pills inside the wizard */
.qe-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.qe-trust-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-light); color: var(--text); border: 1px solid rgba(132,178,42,0.45); font-weight: 600; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; line-height: 1.2; }
.qe-trust-pill::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--dark); font-size: 0.6rem; font-weight: 800; flex-shrink: 0; }

/* Step 3 layout: form + order summary */
.qe-step3 { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.qe-summary { background: var(--white); border: 1px solid var(--gray, #e2e5dd); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px 22px; }
.qe-summary-title { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: var(--dark); margin: 0 0 14px; }
.qe-summary-list { margin: 0; }
.qe-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-light, #f1f3ee); }
.qe-summary-row dt { color: var(--text-light); font-size: 0.92rem; }
.qe-summary-row dd { margin: 0; font-weight: 700; color: var(--dark); text-align: right; }
.qe-summary-row--total { border-bottom: none; }
.qe-summary-row--total dt { font-weight: 700; color: var(--dark); }
.qe-summary-row--total dd { color: var(--accent-hover); font-size: 1.15rem; font-family: 'Montserrat', sans-serif; }
.qe-summary-note { font-size: 0.82rem; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; }

.qe-confirm { text-align: center; }
.qe-confirm-check { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.qe-confirm-talk { margin: 8px 0 0; color: var(--text-light); }
.qe-confirm .qe-trust { justify-content: center; }

@media (min-width: 860px) {
  .qe-step3 { grid-template-columns: 1.5fr 1fr; }
  .qe-summary { position: sticky; top: 96px; }
}

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); max-width: 90vw; padding: 14px 22px; border-radius: var(--radius); color: #fff; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: var(--z-toast); }
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--success { background: #2e7d32; }
.toast--error { background: #c62828; }

@media (max-width: 640px) {
  .qe-tiers { grid-template-columns: 1fr; }
  .qe-card { padding: 28px 20px; }
}

/* ============================================================
   JUNK RHINOS THEME - components for the rebuilt SPA markup
   (mobile-first base; min-width queries enhance). These styles
   come last so they win over the base rules above.
   ============================================================ */

/* --- Section rhythm helpers --- */
.section-title { color: var(--dark); }
.section-subtitle { color: var(--text-light); }

/* --- Home hero CTA buttons stack on mobile --- */
.hero-buttons .btn { width: 100%; }
@media (min-width: 600px) {
  .hero-buttons .btn { width: auto; }
}

/* --- Trust pills band (7 trust phrases) --- */
.trust-pills { background: var(--dark); padding: 22px 0; }
.trust-pills-list {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  justify-content: center; align-items: stretch;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(154,205,50,0.35);
  color: #fff; font-weight: 600; font-size: 0.9rem;
  padding: 9px 16px; border-radius: 999px; line-height: 1.2;
}
.trust-pill::before {
  content: "\2713"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  font-size: 0.7rem; font-weight: 800; flex-shrink: 0;
}

/* --- How It Works: connected 1-2-3-4 step sequence --- */
/* Numbered lime badges joined by a connecting line; reads as one flow, not 4
   identical floating cards. The line lives behind the badges via a track. */
.steps-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--white); }
.steps-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px;
  position: relative;
}
@media (min-width: 600px) { .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

.step-card {
  position: relative; text-align: center; padding: 0 8px;
  background: none; border: none; border-radius: 0;
}
.step-number {
  position: relative; z-index: var(--z-base);
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  border: 4px solid var(--white); box-shadow: 0 6px 16px rgba(132,178,42,0.28);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
/* Connecting line between consecutive badges (horizontal on >=900px) */
@media (min-width: 900px) {
  .step-card::before {
    content: ''; position: absolute; top: 32px; left: calc(50% + 38px); right: calc(-50% + 38px);
    height: 3px; background: var(--gray);
    background-image: linear-gradient(to right, var(--accent) 0 60%, var(--gray) 60% 100%);
    z-index: 0;
  }
  .step-card:last-child::before { display: none; }
}
.step-card h3 { font-size: 1.12rem; color: var(--dark); margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; color: var(--text-light); line-height: 1.6; max-width: 28ch; margin-inline: auto; }

/* Full How-It-Works / location page: same connected flow, slightly larger */
.steps-grid--full { gap: 36px; }
@media (min-width: 900px) { .steps-grid--full .step-card p { max-width: 30ch; } }

/* --- Home services teaser: text tiles (override legacy image-tile rules) --- */
/* Hairline + soft shadow + hover lift; lime arrow cue on the title (no stripe). */
.services-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg-soft); }
.services-section .services-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 600px) { .services-section .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .services-section .services-grid { grid-template-columns: repeat(4, 1fr); } }
.services-section .service-tile {
  position: static; aspect-ratio: auto; overflow: visible; cursor: pointer;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.services-section .service-tile:hover {
  transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gray-dark);
}
.services-section .service-tile h3 {
  color: var(--dark); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.services-section .service-tile h3::after {
  content: '\2192'; color: var(--accent-dark); font-weight: 700;
  transform: translateX(-4px); opacity: 0; transition: transform var(--transition), opacity var(--transition);
}
.services-section .service-tile:hover h3::after { transform: translateX(0); opacity: 1; }
.services-section .service-tile p { color: var(--text-light); font-size: 0.9rem; opacity: 1; margin: 0; }

/* --- Why-us grid (also reused by About values) --- */
/* Charcoal-filled feature cards with a lime top keyline accent that grows on
   hover. Distinct from the light service tiles so the page is not one repeated
   card grid. Light text on charcoal clears AA. */
.why-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--white); }
.why-grid {
  display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px;
}
@media (min-width: 600px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-item {
  position: relative; overflow: hidden;
  background: var(--dark); color: #fff; border: 1px solid var(--dark);
  border-radius: var(--radius-lg); padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.why-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-item:hover::before { transform: scaleX(1); }
.why-item h3 { font-size: 1.12rem; color: #fff; margin-bottom: 8px; }
.why-item p { font-size: 0.92rem; color: rgba(255,255,255,0.82); line-height: 1.6; }

/* --- Home CTA band --- */
.cta-band { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--dark); color: var(--white); }
.cta-band .section-title { color: var(--white); }
.cta-band .section-subtitle { color: rgba(255,255,255,0.8); }
.cta-band .hero-buttons { justify-content: center; }

/* --- Service detail: bullets + pricing teaser --- */
.service-bullets {
  list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px;
  margin: 8px 0 0;
}
@media (min-width: 600px) { .service-bullets { grid-template-columns: 1fr 1fr; } }
.service-bullets li {
  position: relative; padding-left: 30px; color: var(--text-light); line-height: 1.5;
}
.service-bullets li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  font-size: 0.72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.pricing-teaser { padding: 48px 0; background: var(--bg-soft); }
.pricing-teaser h2 { color: var(--dark); font-size: 1.6rem; margin-bottom: 10px; }
.pricing-teaser p { color: var(--text-light); line-height: 1.7; margin-bottom: 22px; }
.pricing-teaser .hero-buttons { justify-content: center; }

/* --- Pricing page: tier cards --- */
.pricing-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--white); }
.pricing-table {
  display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1000px; margin: 0 auto;
}
@media (min-width: 600px) { .pricing-table { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pricing-table { grid-template-columns: repeat(3, 1fr); } }
.pricing-tier {
  background: var(--white); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: 28px 24px; text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pricing-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gray-dark); }
/* Cards are links into /quote?tier=<key> (they had the hover lift of a control
   and 15 dead clicks in Clarity while being plain divs). */
a.pricing-tier { display: block; color: inherit; text-decoration: none; }
.pricing-tier-cta { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 0.92rem; color: var(--dark); text-decoration: underline; text-underline-offset: 3px; }
/* Highlight a recommended/popular tier (3rd card) in lime */
.pricing-table .pricing-tier:nth-child(3) {
  border-color: var(--accent); background: var(--accent-light); position: relative;
}
.pricing-table .pricing-tier:nth-child(3)::before {
  content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--dark);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.pricing-tier-label { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--dark); }
.pricing-tier-volume { font-size: 0.9rem; color: var(--text-light); margin-top: 4px; }
.pricing-tier-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--dark); margin: 10px 0 6px; }
.pricing-tier-desc { font-size: 0.88rem; color: var(--text-light); line-height: 1.5; }
.pricing-disclaimer {
  max-width: 760px; margin: 28px auto 0; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 18px 22px;
  font-size: 0.92rem; color: var(--text-light); line-height: 1.6;
}
.pricing-disclaimer strong { color: var(--dark); }
.pricing-notes { max-width: 760px; margin: 18px auto 0; padding-left: 22px; list-style: disc; }
.pricing-notes li { color: var(--text-light); font-size: 0.9rem; margin-bottom: 6px; line-height: 1.5; }

/* --- FAQ accordion (app emits .faq-item / .faq-question / .faq-answer; toggled .open) --- */
.faq-section { background: var(--bg-soft); }
.faq-list { max-width: 820px; margin: 24px auto 0; }
.faq-item {
  background: var(--white); border: 1px solid var(--gray);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: var(--dark);
  padding: 18px 22px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-question::after { content: "+"; font-size: 1.5rem; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.faq-item.open .faq-question::after { content: "\2212"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer p { padding: 0 22px 18px; color: var(--text-light); line-height: 1.7; margin: 0; }
.faq-cta h2 { color: var(--dark); }

/* --- Contact page --- */
.contact-section h1 { color: var(--dark); }
.contact-section .hero-sub { color: var(--text-light); opacity: 1; }
.contact-info-item h3 { font-size: 0.95rem; color: var(--dark); margin-bottom: 2px; }
.contact-info-item p { font-size: 0.95rem; color: var(--text-light); }
.contact-info-item a { color: var(--dark); font-weight: 600; }
.contact-info-item a:hover { color: var(--accent-dark); }
.form-success { color: var(--green); font-weight: 600; margin-top: 12px; }

/* --- Locations / generic content sections --- */
.locations-section { padding: 56px 0; background: var(--white); }
.locations-section p { color: var(--text-light); line-height: 1.8; }

/* --- Published location pages (Drive-fed body copy) ---------------------- */
/* The imported fragment is sanitised down to p/h2/h3/ul/ol/li/table/a/strong,
   so this only has to style that set. Measure is capped for readability and the
   service tables scroll rather than overflow on narrow screens. */
.location-page { padding: 48px 0 64px; background: var(--white); }
.location-page .container--narrow { max-width: 74ch; }
.location-content { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
.location-content h2 { font-size: 1.4rem; margin: 36px 0 12px; color: var(--dark); }
.location-content h2:first-child { margin-top: 0; }
.location-content h3 { font-size: 1.15rem; margin: 26px 0 8px; color: var(--dark); }
.location-content p { margin-bottom: 16px; max-width: none; }
.location-content ul, .location-content ol { padding-left: 24px; margin-bottom: 20px; }
.location-content ul { list-style: disc; }
.location-content ol { list-style: decimal; }
.location-content li { margin-bottom: 6px; }
.location-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.location-content a:hover { color: var(--dark); }
.location-content table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 0.95rem; }
.location-content th { background: var(--bg-soft); color: var(--dark); font-family: 'Montserrat', sans-serif; font-weight: 700; text-align: left; padding: 12px 14px; border: 1px solid var(--hairline); }
.location-content td { padding: 12px 14px; border: 1px solid var(--hairline); color: var(--text); vertical-align: top; }
.location-content tbody tr:nth-child(even) { background: var(--gray-light); }
@media (max-width: 760px) {
  .location-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Service tables: the whole row is the target, not just the service name.
   The imported content links only the FIRST cell of each row, so ~96% of a
   row - 134-190px tall and full width on a phone, reading exactly like a card -
   was inert. Every tap on the description or the note died, which is what the
   dead/rage-click cluster on the location pages was. The <a> is promoted to a
   block so it fills its cell (a wrapped two-line link also left a dead band
   between its line boxes), and app.js arms the rest of the row. */
/* :only-child keeps this off the 9 rows corpus-wide whose first cell is a
   sentence with a link in it - promoting one of those to a block would break
   the line. All 252,192 service rows are the sole-anchor shape. */
.location-content td:first-child > a:only-child { display: block; }
.location-content table.loc-svc-table tbody tr { cursor: pointer; }
.location-content table.loc-svc-table tbody tr:hover { background: var(--bg-soft); }
.location-content table.loc-svc-table tbody tr:hover td:first-child a { color: var(--dark); }

/* Town lists carry a mix of linked and unlinked places: any town whose page is
   not published yet is unwrapped to plain text by pruneLinks. Sitting in a list
   beside real links, that plain text reads as a link that does nothing, so it is
   muted to say plainly that it is not one. Prose is left alone - a muted word in
   the middle of a sentence looks like a rendering fault. */
.location-content li .loc-unlinked { color: var(--text-muted); }

/* State list on /locations. The 70ch prose measure that suits the rest of the
   locations section squeezes 51 states into two columns, so this index opts out. */
.locations-index .container--narrow { max-width: 1000px; }
.locations-state-list { list-style: none; padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.locations-state-list li { border-bottom: 1px solid var(--hairline); }
.locations-state-list a { display: block; padding: 6px 0; font-weight: 600; color: var(--dark); }
.locations-state-list a:hover { color: var(--accent-dark); }
.locations-count { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }

/* --- Blog teaser cards --- */
.blog-section .blog-card {
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: 26px; margin-bottom: 18px; background: var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-section .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-section .blog-card h2 { font-size: 1.2rem; margin-bottom: 8px; }
.blog-section .blog-card h2 a { color: var(--dark); }
.blog-section .blog-card h2 a:hover { color: var(--accent-dark); }
.read-more { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--dark); }
.read-more:hover { color: var(--accent-dark); }
.blog-post-cta { margin-top: 40px; padding: 28px; background: var(--bg-soft); border-radius: var(--radius-lg); text-align: center; }
.blog-post-cta h3 { color: var(--dark); margin-bottom: 14px; }

/* --- Quote estimator polish (brand the selected/active states) --- */
.qe-section { background: var(--dark); }
.qe-tier.selected { border-color: var(--accent); background: var(--accent-light); box-shadow: 0 0 0 3px rgba(154,205,50,0.30); }
.qe-tier-helper { color: var(--accent-dark); }
.qe-tier-price { color: var(--dark); }
.qe-disclaimer { background: var(--bg-soft); }
.qe-back { color: var(--dark); }

/* ============================================================
   STICKY MOBILE CALL BAR (small screens only)
   Self-contained: shown via CSS, links to the site phone.
   ============================================================ */
.mobile-call-bar { display: none; }
@media (max-width: 768px) {
  .mobile-call-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar);
    background: var(--dark); box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    padding: 8px 10px; gap: 8px; align-items: stretch;
  }
  .mobile-call-bar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; border-radius: var(--radius);
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;
    text-align: center;
  }
  .mobile-call-bar__call { background: var(--accent); color: var(--dark); }
  .mobile-call-bar__call:active { background: var(--accent-dark); }
  .mobile-call-bar__quote { background: transparent; color: #fff; border: 2px solid var(--accent); }
  /* Keep page content clear of the fixed bar */
  body { padding-bottom: 66px; }
}

/* ============================================================
   PERSISTENT ESTIMATE CTA (/pricing only)
   Below 769px the mobile call bar above already owns the bottom
   of the screen, so this bar is desktop/tablet only. The body
   padding is keyed off the bar being in the markup (present from
   first paint), so the space is reserved before anything renders
   and untucking the bar never moves the page.
   ============================================================ */
.pricing-cta-bar { display: none; }
@media (min-width: 769px) {
  body:has(.pricing-cta-bar) { padding-bottom: 92px; }
  .pricing-cta-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-mobile-bar);
    background: var(--dark); color: #fff;
    border-top: 3px solid var(--accent);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.28);
    transition: transform 0.28s ease;
  }
  .pricing-cta-bar--tucked { transform: translateY(110%); }
  .pricing-cta-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding-top: 14px; padding-bottom: 14px;
  }
  .pricing-cta-bar__copy { margin: 0; font-size: 0.98rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
  .pricing-cta-bar__copy strong { color: #fff; display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; }
  .pricing-cta-bar__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
  .pricing-cta-bar__call { color: var(--accent); font-weight: 700; white-space: nowrap; }
  .pricing-cta-bar__call:hover { text-decoration: underline; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .pricing-cta-bar { transition: none; }
}

/* ============================================================
   HOMEPAGE SOCIAL PROOF + CONVERSION (rating badge, stats band,
   trust badges, testimonials). Lime stars. Mobile-first.
   ============================================================ */

/* Shared inline star icon */
.star-row { display: inline-flex; gap: 3px; }
.star-icon { width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0; }

/* Rating badge under hero CTAs */
.rating-badge { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; padding: 9px 16px; background: rgba(255,255,255,0.07); border: 1px solid rgba(154,205,50,0.4); border-radius: 999px; }
.rating-badge .star-icon { width: 17px; height: 17px; }
.rating-badge-text { color: #fff; font-weight: 600; font-size: 0.9rem; }

/* Stats band (charcoal, big numbers) */
.stats-band { background: var(--dark); padding: 36px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.stat-item { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.stat-value { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--accent); }
.stat-label { color: rgba(255,255,255,0.82); font-size: 0.85rem; font-weight: 600; }
@media (min-width: 768px) {
  .stats-band { padding: 48px 0; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-value { font-size: 2.5rem; }
  .stat-label { font-size: 0.95rem; }
}

/* Trust badges row */
.badges-section { padding: 48px 0 8px; background: var(--white); }
.badges-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.badge-card { display: flex; align-items: flex-start; gap: 14px; padding: 22px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition); }
.badge-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.badge-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.badge-icon svg { width: 26px; height: 26px; fill: var(--dark); }
.badge-text h3 { font-family: 'Montserrat', sans-serif; font-size: 1.02rem; color: var(--dark); margin: 0 0 4px; }
.badge-text p { color: var(--text-light); font-size: 0.9rem; margin: 0; line-height: 1.45; }
@media (min-width: 600px) { .badges-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .badges-grid { grid-template-columns: repeat(4, 1fr); } .badge-card { flex-direction: column; text-align: center; align-items: center; } }

/* Testimonials / reviews */
.reviews-section { padding: clamp(3.5rem, 6vw, 5rem) 0; background: var(--bg-soft); }
.reviews-section .section-title { text-align: center; margin-bottom: 36px; }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.review-card { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--hairline); transition: transform var(--transition), box-shadow var(--transition); }
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.review-card .star-row { margin-bottom: 2px; }
.review-quote { margin: 0; color: var(--text); font-size: 0.98rem; line-height: 1.6; font-style: normal; }
.review-quote::before { content: "\201C"; }
.review-quote::after { content: "\201D"; }
.review-author { display: flex; flex-direction: column; margin-top: auto; }
.review-name { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--dark); font-size: 0.95rem; }
.review-location { color: var(--text-muted); font-size: 0.85rem; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   ON-SCROLL REVEAL (subtle, intentional - enhances ALREADY-VISIBLE content)
   Content is visible by default. Only when JS marks <html class="js-reveal">
   do targets start translated/faded, then animate in once observed. Headless,
   no-JS, and hidden-tab renders always ship fully visible. Ease-out only.
   ============================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Light stagger for grids of cards */
.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js-reveal [data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}
.js-reveal [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.07s; }
.js-reveal [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.14s; }
.js-reveal [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.21s; }
.js-reveal [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.28s; }
.js-reveal [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.35s; }

/* prefers-reduced-motion: no transforms/animation anywhere; instant + visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   BLOG REDESIGN (2026-08) - hub `.bh-*` + article `.ba-*`
   Design handoff: dark resource-centre hero, category chips, featured card,
   card grid; article = wide head, promoted hero figure, 720px measure with a
   sticky TOC/CTA rail, callouts, styled FAQ block, keep-reading strip.
   Layout is intrinsic (auto-fit grids, flex-wrap), so there are only a couple
   of breakpoints - the rail collapse and the phone tune-up.
   ============================================ */
[hidden] { display: none !important; }

/* ---- Blog hub: hero ---- */
.bh-hero { background: var(--dark); position: relative; overflow: hidden; }
.bh-hero::before,
.bh-hero::after {
  content: ''; position: absolute; border-radius: 50%;
  background: #232720; pointer-events: none;
}
.bh-hero::before { left: -160px; top: -90px; width: 420px; height: 420px; }
.bh-hero::after { right: -140px; bottom: -220px; width: 520px; height: 520px; }
.bh-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 5vw, 60px); flex-wrap: wrap;
  padding-top: clamp(36px, 5vw, 52px); padding-bottom: clamp(40px, 5vw, 56px);
}
.bh-hero-text { max-width: 640px; }
.bh-eyebrow {
  color: var(--accent); font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 14px;
}
.bh-hero h1 {
  font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--white); margin: 0;
}
.bh-hero-sub {
  margin-top: 16px; font-size: 1.06rem; line-height: 1.65;
  color: #c2c6bc; max-width: 560px;
}
.bh-search { width: min(320px, 100%); flex: none; padding-bottom: 6px; }
.bh-search label {
  display: block; color: #9fa49a; font-size: 0.78rem; font-weight: 600; margin-bottom: 8px;
}
.bh-search-field {
  display: flex; align-items: center; gap: 10px;
  background: #141712; border: 1px solid #3a3f36; border-radius: 9px;
  padding: 0 14px; height: 48px;
}
.bh-search-icon { color: var(--accent); font-size: 0.95rem; font-weight: 700; }
.bh-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--white); font-family: inherit; font-size: 0.92rem; height: 46px;
}
.bh-search input::placeholder { color: #8f948a; }

/* ---- Blog hub: category chips ---- */
.bh-cats { background: var(--white); border-bottom: 1px solid var(--hairline); }
.bh-cats-inner {
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px; padding-bottom: 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bh-cats-inner::-webkit-scrollbar { display: none; }
.bh-chip {
  flex: none; background: var(--white); color: #3c4137;
  font-family: 'Montserrat', sans-serif; font-size: 0.84rem; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; border: 1px solid #dfe2db;
  cursor: pointer; transition: all var(--transition); min-height: 40px;
}
.bh-chip:hover { border-color: var(--accent); color: var(--dark); }
.bh-chip.is-active {
  background: var(--dark); color: var(--white); border-color: var(--dark); font-weight: 700;
}

/* ---- Blog hub: featured ---- */
.bh-featured { padding: clamp(34px, 5vw, 48px) 0 8px; }
.bh-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bh-kicker-rule { display: block; width: 26px; height: 3px; background: var(--accent); border-radius: 2px; }
.bh-kicker h2 {
  font-size: 0.81rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dark); margin: 0;
}
.bh-feature {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  background: var(--white); border: 1px solid var(--hairline); border-radius: 14px;
  overflow: hidden; color: inherit;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.bh-feature:hover { border-color: #c9d6a8; box-shadow: 0 14px 34px rgba(28,31,26,0.10); }
.bh-feature-img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.bh-feature-body {
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3.6vw, 46px);
  display: flex; flex-direction: column; justify-content: center;
}
.bh-cat {
  color: var(--accent-dark); font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin: 0;
}
.bh-feature-body h3 {
  margin: 14px 0 0; font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.22; letter-spacing: -0.01em; color: var(--dark);
}
.bh-feature-excerpt { margin: 16px 0 0; font-size: 1rem; line-height: 1.68; color: var(--text-muted); }
.bh-feature-cta {
  margin-top: 28px; align-self: flex-start;
  background: var(--accent); color: var(--dark);
  font-family: 'Montserrat', sans-serif; font-size: 0.94rem; font-weight: 700;
  padding: 13px 24px; border-radius: var(--radius);
  transition: background var(--transition);
}
.bh-feature:hover .bh-feature-cta { background: var(--accent-dark); }

/* ---- Blog hub: card grid ---- */
.bh-list { padding: clamp(32px, 5vw, 44px) 0 clamp(44px, 6vw, 64px); }
.bh-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline); margin-bottom: 32px;
}
.bh-list-head h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); letter-spacing: -0.01em; margin: 0; }
.bh-list-count { font-size: 0.88rem; color: var(--text-muted); }
.bh-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}
.bh-card {
  display: flex; flex-direction: column; color: inherit;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.bh-card:hover {
  border-color: #c9d6a8; box-shadow: 0 12px 28px rgba(28,31,26,0.09); transform: translateY(-3px);
}
.bh-card-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.bh-card-body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.bh-card-body h3 {
  margin: 10px 0 0; font-size: 1.09rem; line-height: 1.34; color: var(--dark);
}
.bh-card-excerpt { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.62; color: var(--text-muted); flex: 1; }
.bh-card-meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #eceee8;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted);
}
.bh-card-meta img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.bh-meta-name { color: #3c4137; font-weight: 600; }
.bh-feature .bh-card-meta { border-top: 0; padding-top: 0; margin-top: 24px; font-size: 0.84rem; }
.bh-feature .bh-card-meta img { width: 30px; height: 30px; }
.bh-empty-state { text-align: center; color: var(--text-muted); padding: 32px 0; }
.bh-reset {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-dark); font: inherit; font-weight: 700; text-decoration: underline;
}

/* ---- Blog hub: service shortcuts ---- */
.bh-services {
  background: var(--bg-soft);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: clamp(40px, 6vw, 52px) 0;
}
.bh-services-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.bh-services-head h2 { font-size: clamp(1.15rem, 2.4vw, 1.35rem); margin: 0; }
.bh-services-head p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.bh-services-grid {
  margin-top: 24px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px;
}
.bh-service-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 16px 18px; color: var(--dark);
  font-family: 'Montserrat', sans-serif; font-size: 0.94rem; font-weight: 600;
  transition: border-color var(--transition);
}
.bh-service-link:hover { border-color: var(--accent); color: var(--dark); }
.bh-service-link span { color: var(--accent-dark); font-weight: 700; }

/* ---- Blog CTA band (shared by hub + article) ---- */
.bh-cta {
  background: var(--dark); position: relative; overflow: hidden;
  padding: clamp(44px, 7vw, 64px) 0; text-align: center;
}
.bh-cta::before {
  content: ''; position: absolute; right: -120px; top: -160px;
  width: 420px; height: 420px; border-radius: 50%; background: #232720;
}
.bh-cta .container { position: relative; z-index: 1; }
.bh-cta h2 { font-size: clamp(1.6rem, 4vw, 2.15rem); color: var(--white); margin: 0; }
.bh-cta p {
  margin: 14px auto 0; max-width: 560px; font-size: 1.03rem; line-height: 1.65; color: #c2c6bc;
}
.bh-cta-buttons { margin-top: 28px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============================================
   ARTICLE PAGE
   ============================================ */
.ba-progress {
  position: fixed; left: 0; top: var(--nav-h); width: 100%; height: 3px;
  background: #f0f2ec; z-index: calc(var(--z-nav) - 1);
}
.ba-progress-fill { display: block; height: 100%; width: 0; background: var(--accent); }

.blog-article { padding-bottom: 8px; }
.blog-article .breadcrumb { padding-top: 22px; }
.ba-head { padding-top: 30px; }
.ba-head h1 {
  margin: 14px 0 0; max-width: 880px;
  font-size: clamp(1.85rem, 5.4vw, 2.95rem); line-height: 1.13;
  letter-spacing: -0.02em; color: var(--dark);
}
.ba-cat {
  color: var(--accent-dark); font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0;
}
.ba-dek {
  margin: 20px 0 0; max-width: 740px;
  font-size: clamp(1.06rem, 2.2vw, 1.25rem); line-height: 1.6; color: var(--text-muted);
}
.ba-byline {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ba-byline-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ba-byline-text p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.ba-byline-name { color: var(--dark); font-weight: 700; }
.ba-byline-name a { color: var(--dark); }
.ba-byline-name a:hover { color: var(--accent-dark); }
.ba-byline-name span { color: var(--text-muted); font-weight: 400; }
.ba-byline-meta { color: var(--text-muted); font-size: 0.84rem; }
.ba-hero-figure { margin-top: 32px; }
.ba-hero-figure figure { margin: 0; }
.ba-hero-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 14px;
}
.ba-hero-figure figcaption {
  margin-top: 12px; font-size: 0.82rem; color: #82877c; max-width: 680px;
}

/* ---- Two-column body + sticky rail ---- */
.ba-layout {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(30px, 5vw, 88px); flex-wrap: wrap;
  padding-bottom: 8px;
}
.ba-body { width: min(720px, 100%); flex: none; padding-top: 44px; }
.ba-side { width: min(328px, 100%); flex: none; padding-top: 44px; }
.ba-side-inner {
  position: sticky; top: calc(var(--nav-h) + 20px);
  display: flex; flex-direction: column; gap: 20px;
}
.ba-toc { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 22px 22px 20px; }
.ba-toc h2, .ba-side-related h2 {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.ba-toc ul { margin-top: 14px; list-style: none; padding: 0; border-left: 2px solid #eceee8; }
.ba-toc a {
  display: block; padding: 9px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.88rem; line-height: 1.45; color: var(--text-light); font-weight: 600;
}
.ba-toc a:hover { color: var(--dark); text-decoration: none; background: #f6f9ee; }
.ba-toc a.is-active { border-left-color: var(--accent); color: var(--dark); background: #f6f9ee; }
.ba-side-cta { background: var(--dark); border-radius: var(--radius-lg); padding: 24px; }
.ba-side-cta h2 { font-size: 1.1rem; color: var(--white); line-height: 1.35; margin: 0; }
.ba-side-cta p { margin: 9px 0 16px; font-size: 0.86rem; line-height: 1.6; color: #b6bab0; }
.ba-side-cta .btn { padding: 13px 16px; font-size: 0.92rem; }
.ba-side-call {
  display: block; margin-top: 10px; text-align: center;
  color: var(--white); font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem; font-weight: 700; padding: 11px 16px;
  border-radius: var(--radius); border: 1.5px solid #4d5348;
}
.ba-side-call:hover { border-color: var(--white); color: var(--white); text-decoration: none; }
.ba-side-related { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 22px; }
.ba-side-related ul { list-style: none; padding: 0; margin: 6px 0 0; }
.ba-side-related li { border-top: 1px solid #eceee8; }
.ba-side-related a {
  display: block; padding: 14px 0; font-size: 0.88rem; line-height: 1.45;
  font-weight: 600; color: var(--dark);
}
.ba-side-related a:hover { color: var(--accent-dark); text-decoration: none; }

/* ---- Article body blocks ---- */
.ba-callout {
  background: #f3f8e8; border: 1px solid #dbe9bd; border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 24px 28px;
}
.ba-callout-label {
  color: #3f6110; font-family: 'Montserrat', sans-serif;
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 10px;
}
.ba-callout-text { margin: 0; font-size: 1.02rem; line-height: 1.68; color: #2c3126; }
.ba-toc-mobile {
  display: none; margin-top: 26px;
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden;
}
.ba-toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; background: #fafbf7; cursor: pointer; list-style: none;
  font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--dark);
}
.ba-toc-mobile summary::-webkit-details-marker { display: none; }
.ba-toc-mobile-caret { color: var(--accent-dark); font-size: 0.8rem; font-weight: 700; }
.ba-toc-mobile ul { padding: 4px 18px 12px; margin: 0; list-style: none; }
.ba-toc-mobile li { border-top: 1px solid #eceee8; margin: 0; }
.ba-toc-mobile a {
  display: block; padding: 12px 0; font-size: 0.9rem; font-weight: 600; color: #3c4137;
}
.ba-lead { margin-top: 32px; }
.ba-lead p { font-size: 1.06rem; line-height: 1.78; color: #33372e; max-width: 680px; }
.ba-takeaways {
  margin-top: 30px; background: #fafbf7; border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 26px 28px;
}
.ba-takeaways h2 {
  font-size: 1rem; font-weight: 700; color: var(--dark); margin: 0 0 16px;
}
.ba-takeaways ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ba-takeaways li {
  display: flex; gap: 12px; margin: 0;
  font-size: 0.95rem; line-height: 1.6; color: #3c4137;
}
.ba-check { flex: none; color: var(--accent-dark); font-weight: 700; }
.ba-section { padding-top: 6px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.ba-rule {
  display: block; width: 34px; height: 3px; background: var(--accent);
  border-radius: 2px; margin-top: 64px;
}
.ba-body .ba-section h2 {
  margin: 20px 0 0;
  font-size: clamp(1.45rem, 3.4vw, 1.95rem); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--dark);
}
.ba-body .ba-section > p:first-of-type { margin-top: 20px; }

/* FAQ block: alternating rows inside one bordered card, per the design */
.ba-faq {
  margin-top: 24px; border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ba-faq-item { padding: 26px 28px; background: var(--white); }
.ba-faq-item:nth-child(even) { background: #fafbf7; }
.ba-faq-item + .ba-faq-item { border-top: 1px solid var(--hairline); }
.ba-body .ba-faq-item h3 { margin: 0; font-size: 1.09rem; line-height: 1.4; color: var(--dark); }
.ba-body .ba-faq-item p { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.72; color: var(--text-light); }
.ba-body .ba-faq-item p:last-child { margin-bottom: 0; }

/* ---- Keep reading ---- */
.ba-keep-reading {
  margin-top: 72px; background: var(--bg-soft); border-top: 1px solid var(--hairline);
  padding: clamp(38px, 5vw, 56px) 0 clamp(42px, 5vw, 60px);
}
.ba-keep-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.ba-keep-head h2 { font-size: clamp(1.3rem, 2.8vw, 1.6rem); letter-spacing: -0.01em; margin: 0; }
.ba-keep-head a { font-size: 0.9rem; font-weight: 700; color: var(--accent-dark); }

/* Author box: tuned to the redesign (tinted panel, lime edge, bigger avatar) */
.blog-article .author-box {
  background: var(--bg-soft); border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
  gap: clamp(16px, 2.4vw, 24px); align-items: flex-start; margin-top: 56px;
}
.blog-article .author-box-avatar { width: 86px; height: 86px; }
.blog-article .author-box-label { color: var(--text-muted); }
.blog-article .author-box-title { color: #3c4137; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .ba-side { display: none; }
  .ba-toc-mobile { display: block; }
  .ba-body { width: min(760px, 100%); }
  .ba-layout { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .bh-hero-inner { align-items: flex-start; }
  .bh-search { width: 100%; }
  .bh-feature-img { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
  .ba-progress { display: none; }
  .ba-hero-figure img { aspect-ratio: 16 / 10; }
  .ba-body { padding-top: 28px; }
  .ba-rule { margin-top: 44px; }
  .ba-callout { padding: 20px; }
  .ba-faq-item { padding: 20px; }
  .ba-takeaways { padding: 22px 20px; }
  .bh-feature-body { padding: 24px 22px 28px; }
  .ba-keep-reading { margin-top: 48px; }
  .blog-article .author-box { flex-direction: row; text-align: left; }
}
@media (max-width: 520px) {
  .blog-article .author-box { flex-direction: column; align-items: flex-start; }
  .bh-cta-buttons .btn { width: 100%; }
}

/* ---- Blog redesign: refinements ---- */
.bh-search-icon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round;
}

/* The site-wide breadcrumb is a tinted band; the article wants it plain and
   inline above the eyebrow, per the design. */
.blog-article .breadcrumb {
  background: transparent; border-bottom: 0; margin-bottom: 0;
  padding: 22px 0 0; font-size: 0.81rem; color: var(--text-muted);
}
.blog-article .breadcrumb a { color: var(--accent-dark); font-weight: 600; }
.blog-article .breadcrumb a:hover { color: var(--dark); }
.blog-article .breadcrumb span { margin: 0 6px; }

.ba-head h1 { text-wrap: balance; }
.ba-dek { text-wrap: pretty; }
.ba-byline { flex-wrap: nowrap; }
.ba-byline-text { min-width: 0; }

/* Article tables: dark header row, zebra body, hairline rows only (no grid). */
.ba-body .table-wrap {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: auto;
}
.ba-body .table-wrap table { margin: 0; font-size: 0.94rem; }
.ba-body table caption {
  text-align: left; padding: 16px 20px 0; font-size: 0.82rem; color: #82877c;
}
.ba-body thead tr { background: var(--dark); }
.ba-body thead th {
  background: transparent; border: 0; color: var(--white);
  font-family: 'Montserrat', sans-serif; font-size: 0.79rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: left; padding: 14px 20px;
}
.ba-body tbody tr { background: var(--white); border-top: 1px solid #ecede8; }
.ba-body tbody tr:nth-child(even) { background: #fafbf7; }
/* Row headers, if an article ever ships them. Scoped off `thead` above rather
   than [scope="row"] because normalizeArticleHtml() stamps scope="col" on every
   unscoped <th>, which would leave these white-on-white. */
.ba-body tbody th {
  background: transparent; border: 0; text-align: left;
  font-family: 'Montserrat', sans-serif; color: var(--dark);
  font-size: 0.94rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; padding: 16px 20px;
}
.ba-body td { border: 0; padding: 16px 20px; color: #3c4137; }

/* ============================================
   SERVICE PAGES (2026-08) - `.sv-*`, used by /services and /services/:key
   Design handoff anatomy: dark hero with photo, dark trust strip, sticky
   section nav, ordered content bands (white / tinted / dark cost / straight
   talk), FAQ accordion, related services, closing CTA.
   Every grid is auto-fit, so there are only two breakpoints.
   ============================================ */
.sv-hero { background: var(--dark); position: relative; overflow: hidden; }
.sv-hero::before,
.sv-hero::after {
  content: ''; position: absolute; border-radius: 50%; background: #232720; pointer-events: none;
}
.sv-hero::before { left: -180px; top: -120px; width: 460px; height: 460px; }
.sv-hero::after { right: -200px; bottom: -260px; width: 560px; height: 560px; }
.sv-hero > .container { position: relative; z-index: 1; padding-top: clamp(20px, 4vw, 34px); padding-bottom: clamp(44px, 6vw, 68px); }
.sv-hero .breadcrumb {
  background: transparent; border-bottom: 0; margin-bottom: 0; padding: 0;
  font-size: 0.81rem; color: #9fa49a;
}
.sv-hero .breadcrumb a { color: var(--accent); font-weight: 600; }
.sv-hero .breadcrumb a:hover { color: var(--white); }
.sv-hero .breadcrumb span { color: #c2c6bc; margin: 0 6px; }
.sv-hero-grid {
  margin-top: clamp(22px, 3vw, 34px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.sv-eyebrow {
  color: var(--accent); font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}
.sv-hero h1 {
  margin: 14px 0 0; font-size: clamp(1.95rem, 5.4vw, 3.25rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--white); text-wrap: balance;
}
.sv-hero-intro { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.sv-hero-intro p {
  margin: 0; font-size: clamp(1.03rem, 2vw, 1.19rem); line-height: 1.72; color: #c9cdc3; max-width: 62ch;
}
.sv-hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.sv-hero-figure { margin: 0; }
/* height:auto is load-bearing - the intrinsic height="..." attribute (there for
   CLS) otherwise wins over aspect-ratio and the photo renders full height. */
.sv-hero-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover;
  border-radius: 16px; background: #232720;
}

/* ---- trust strip ---- */
.sv-trust { background: #141712; border-top: 1px solid #2f332c; }
.sv-trust ul {
  list-style: none; margin: 0 auto; padding-top: 16px; padding-bottom: 16px;
  display: flex; gap: 10px 24px; flex-wrap: wrap; justify-content: center;
}
.sv-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.84rem; font-weight: 600; color: #d5d8d0; white-space: nowrap;
}
.sv-check {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.63rem; font-weight: 700; line-height: 1;
}

/* ---- sticky section nav ---- */
.sv-nav {
  position: sticky; top: var(--nav-h); z-index: calc(var(--z-nav) - 1);
  background: var(--white); border-bottom: 1px solid var(--hairline);
}
.sv-nav-inner {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sv-nav-inner::-webkit-scrollbar { display: none; }
.sv-nav a {
  flex: none; padding: 16px 14px; font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem; font-weight: 600; color: #3c4137;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.sv-nav a:hover { text-decoration: none; color: var(--dark); border-bottom-color: var(--accent); }
.sv-nav a.is-active { color: var(--dark); border-bottom-color: var(--accent); }

/* ---- content bands ---- */
.sv-section { background: var(--white); padding: clamp(44px, 6vw, 72px) 0; scroll-margin-top: calc(var(--nav-h) + 60px); }
.sv-section--tint { background: var(--bg-soft); }
.sv-rule { display: block; width: 34px; height: 3px; background: var(--accent); border-radius: 2px; }
.sv-section > .container > h2 {
  margin: 20px 0 0; font-size: clamp(1.55rem, 3.4vw, 2.05rem); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--dark);
}
.sv-section-body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.sv-section-body > p {
  margin: 0; font-size: 1.06rem; line-height: 1.78; color: #33372e; max-width: 74ch;
}

/* ---- blocks ---- */
.sv-checklist {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2px 32px;
}
.sv-checklist li {
  display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eceee8;
  font-size: 0.97rem; line-height: 1.6; color: #33372e;
}
.sv-checklist .sv-check { background: #eaf2d8; color: #3f6110; width: 22px; height: 22px; font-size: 0.73rem; margin-top: 1px; }

.sv-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); gap: 18px;
}
.sv-card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.sv-card h3 { font-size: 1.06rem; line-height: 1.35; color: var(--dark); margin: 0; }
.sv-card p { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.68; color: var(--text-light); }
.sv-card--link {
  display: flex; flex-direction: column; color: inherit; padding: 26px 26px 24px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.sv-card--link p { flex: 1; color: var(--text-muted); }
.sv-card--link:hover {
  text-decoration: none; border-color: #c9d6a8;
  box-shadow: 0 12px 28px rgba(28,31,26,0.09); transform: translateY(-3px);
}
.sv-card-more {
  margin-top: 18px; color: var(--accent-dark);
  font-family: 'Montserrat', sans-serif; font-size: 0.86rem; font-weight: 700;
}

.sv-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px;
}
.sv-step {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 24px 24px 26px; margin: 0;
}
.sv-step-n {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--accent); color: var(--dark);
  font-family: 'Montserrat', sans-serif; font-size: 1.06rem; font-weight: 800;
}
.sv-step h3 { margin: 16px 0 0; font-size: 1.06rem; line-height: 1.35; color: var(--dark); }
.sv-step p { margin: 9px 0 0; font-size: 0.95rem; line-height: 1.68; color: var(--text-light); }
.sv-step--plain p { margin-top: 16px; font-size: 1.02rem; font-weight: 600; color: #33372e; }

/* ---- "Straight talk" note band ---- */
.sv-section--note { background: var(--white); }
.sv-note {
  background: #f7f6ef; border: 1px solid #e6e3d3; border-left: 4px solid var(--accent);
  border-radius: 14px; padding: clamp(26px, 3.4vw, 40px);
}
.sv-note-label {
  margin: 0; color: #7a7861; font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.sv-note h2 {
  margin: 12px 0 0; font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.26; color: var(--dark);
}
.sv-note-body { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.sv-note-body p { margin: 0; font-size: 1.06rem; line-height: 1.78; color: #33372e; max-width: 74ch; }

/* ---- dark cost band ---- */
.sv-section--cost { background: var(--dark); position: relative; overflow: hidden; }
.sv-section--cost::before {
  content: ''; position: absolute; right: -140px; top: -180px;
  width: 460px; height: 460px; border-radius: 50%; background: #232720;
}
.sv-cost-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.sv-cost-grid h2 {
  margin: 20px 0 0; font-size: clamp(1.55rem, 3.4vw, 2.05rem); line-height: 1.22;
  letter-spacing: -0.015em; color: var(--white);
}
.sv-cost-body { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.sv-cost-body p { margin: 0; font-size: 1.03rem; line-height: 1.75; color: #c2c6bc; max-width: 70ch; }
.sv-cost-body a { color: #b9dd6a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sv-cost-body a:hover { color: var(--white); }
.sv-cost-side .sv-checklist { display: flex; flex-direction: column; gap: 14px; }
.sv-cost-side .sv-checklist li {
  background: #232720; border: 1px solid #343931; border-radius: 10px;
  padding: 18px 20px; border-bottom: 1px solid #343931;
  font-size: 0.97rem; line-height: 1.55; color: #e7eae2; font-weight: 600;
  align-items: flex-start;
}
.sv-cost-side .sv-checklist .sv-check { background: var(--accent); color: var(--dark); width: 22px; height: 22px; }
.sv-cost-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.sv-cost-cta .btn { padding: 14px 22px; font-size: 0.95rem; }
.btn-ghost-dark { background: transparent; color: var(--white); border: 1.5px solid #4d5348; }
.btn-ghost-dark:hover { border-color: var(--white); color: var(--white); }

/* ---- FAQ accordion ---- */
.sv-faq {
  margin-top: 26px; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden;
}
.sv-faq-item { background: var(--white); border-top: 1px solid var(--hairline); }
.sv-faq-item:first-child { border-top: 0; }
.sv-faq-item:nth-child(even) { background: #fafbf7; }
.sv-faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px clamp(20px, 3vw, 28px); cursor: pointer; list-style: none;
  font-family: 'Montserrat', sans-serif; font-size: clamp(1.03rem, 1.9vw, 1.19rem);
  line-height: 1.4; font-weight: 700; color: var(--dark);
}
.sv-faq-item > summary::-webkit-details-marker { display: none; }
.sv-faq-caret { flex: none; color: var(--accent-dark); font-size: 0.94rem; font-weight: 700; line-height: 1.5; transition: transform var(--transition); }
.sv-faq-item[open] .sv-faq-caret { transform: rotate(180deg); }
.sv-faq-answer {
  padding: 0 clamp(20px, 3vw, 28px) 24px; max-width: 80ch;
  display: flex; flex-direction: column; gap: 12px;
}
.sv-faq-answer p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--text-light); }

/* ---- related + closing CTA ---- */
.sv-related-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.sv-related-head h2 { margin: 0; font-size: clamp(1.3rem, 2.8vw, 1.6rem); letter-spacing: -0.01em; }
.sv-related-head a { font-size: 0.9rem; font-weight: 700; color: var(--accent-dark); }
.sv-related .sv-cards { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.sv-cta { background: var(--dark); position: relative; overflow: hidden; padding: clamp(48px, 7vw, 80px) 0; }
.sv-cta::before {
  content: ''; position: absolute; left: -160px; bottom: -220px;
  width: 520px; height: 520px; border-radius: 50%; background: #232720;
}
.sv-cta > .container { position: relative; z-index: 1; max-width: 920px; text-align: center; }
.sv-cta h2 {
  margin: 0; font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.18;
  letter-spacing: -0.01em; color: var(--white); text-wrap: balance;
}
.sv-cta p {
  margin: 16px auto 0; max-width: 64ch; font-size: 1.06rem; line-height: 1.7; color: #c2c6bc;
}
.sv-cta p a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sv-cta-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sv-hero-figure { order: -1; }
  .sv-hero-figure img { aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
  .sv-nav { top: var(--nav-h); }
  .sv-section { padding: 40px 0; scroll-margin-top: calc(var(--nav-h) + 56px); }
  .sv-note { padding: 22px 20px; }
  .sv-card { padding: 20px 20px; }
  .sv-hero-cta .btn, .sv-cta-buttons .btn { flex: 1 1 100%; }
  /* Five nowrap items stack into five rows on a phone. Scroll them sideways
     instead, matching the section nav directly below. */
  .sv-trust ul {
    justify-content: flex-start; flex-wrap: nowrap; gap: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sv-trust ul::-webkit-scrollbar { display: none; }
}

/* ============================================================
   LOCATION PRICE LINE (LOCATION_PRICE_STATES rollout)
   Sits on the dark location hero between the intro and the CTAs.
   ============================================================ */
.loc-price-strip {
  margin: 0 auto 22px; max-width: 40rem; color: #fff;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem); line-height: 1.35;
}
.loc-price-strip strong { color: var(--accent); font-weight: 800; }
.loc-price-strip__note {
  display: block; margin-top: 4px;
  font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}