/*
Theme Name: Green and Clean
Theme URI: https://greenandcleanhomeservices.com
Author: Marker Digital
Description: Custom theme for Green and Clean Home Services, Northeast Ohio.
Version: 2.0.0
Text Domain: greenclean
*/

/* ---------- Tokens ---------- */
:root {
  --night: #0a1710;
  --night-2: #0f2118;
  --night-3: #16301f;
  --green: #2e8200;
  --green-2: #256a00;
  --lime: #6fd13d;
  --lime-soft: #b9ecA2;
  --gray-50: #f4f6f3;
  --gray-100: #e9ede7;
  --gray-200: #d6ddd3;
  --white: #ffffff;
  --ink: #131c17;
  --ink-2: #3a4a41;
  --muted: #6b7a72;
  --ember: #e0521f;
  --gold: #f5b31b;
  --shadow: 0 24px 60px -30px rgba(10, 23, 16, .45);
  --shadow-sm: 0 8px 24px -14px rgba(10, 23, 16, .35);
  --r: 12px;
  --r-sm: 8px;
  --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Albert Sans", "Albert Sans Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.center h2, .center p { margin-inline: auto; }
.kicker { font-family: var(--font-display); font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0 0 .8rem; display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--green); }
.center .kicker { justify-content: center; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 64ch; line-height: 1.65; }
.section { padding-block: clamp(60px, 8vw, 110px); }
.section-tight { padding-block: clamp(36px, 5vw, 64px); }
.section-gray { background: var(--gray-50); }
.section-white { background: var(--white); }
.section-dark { background: var(--night); color: #cfdad2; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .kicker { color: var(--lime); }
.section-dark .kicker::before { background: var(--lime); }
.section-dark .lead { color: #a9b8ae; }
.muted { color: var(--muted); }
.sec-head { max-width: 760px; margin: 0 auto 44px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: var(--r-sm); font-weight: 600; font-family: var(--font-display); font-size: .98rem; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s; text-decoration: none !important; line-height: 1.1; white-space: nowrap; letter-spacing: -.005em; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 10px 22px -12px rgba(46, 130, 0, .9); }
.btn-primary:hover { background: var(--green-2); }
.btn-dark { background: var(--night); color: #fff; }
.btn-dark:hover { background: var(--night-3); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--gray-200); }
.btn-line:hover { border-color: var(--ink); }
.section-dark .btn-line, .hero .btn-line, .page-hero .btn-line, .cta-band .btn-line { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.section-dark .btn-line:hover, .hero .btn-line:hover, .page-hero .btn-line:hover, .cta-band .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-ember { background: var(--ember); color: #fff; }
.btn-sm { padding: 10px 16px; font-size: .9rem; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Top bar + header ---------- */
.ribbon { background: var(--night); color: #a9b8ae; font-size: .84rem; }
.ribbon .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; flex-wrap: wrap; padding-block: 4px; }
.ribbon a { color: #fff; font-weight: 600; }
.ribbon .em { display: inline-flex; align-items: center; gap: 6px; color: #ffd6c6; }
.ribbon .em b { color: #fff; }
.ribbon .r-left, .ribbon .r-right { display: flex; gap: 18px; align-items: center; }
.ribbon .r-left span:nth-child(even) { opacity: .4; }
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--gray-100); }
.site-head .container { display: flex; align-items: center; gap: 22px; min-height: 80px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; }
.logo img { height: 54px; width: auto; }
.logo-text { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.05; letter-spacing: -.01em; }
.logo-text small { display: block; font-weight: 500; color: var(--muted); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; white-space: nowrap; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav > li { position: relative; }
.nav > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 500; color: var(--ink); font-size: .95rem; white-space: nowrap; }
.nav > li > a:hover, .nav > li.open > a { background: var(--gray-50); text-decoration: none; }
.nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .6; }
.drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 280px; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s ease; }
.nav > li:hover .drop, .nav > li:focus-within .drop, .nav > li.open .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); font-weight: 500; font-size: .93rem; }
.drop a:hover { background: var(--gray-50); text-decoration: none; }
.head-phone { text-align: right; line-height: 1.1; margin-left: 8px; }
.head-phone small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.head-phone a { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.head-cta { margin-left: 4px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--gray-200); background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.burger span { width: 20px; height: 2px; background: var(--ink); transition: .2s; }
body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Home hero ---------- */
.hero { position: relative; background: var(--night); color: #fff; overflow: hidden; isolation: isolate; }
.hero .hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; animation: kenburns 28s ease-in-out infinite alternate; transform-origin: 65% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero .hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10,23,16,.96) 0%, rgba(10,23,16,.88) 38%, rgba(10,23,16,.55) 70%, rgba(10,23,16,.35) 100%),
  linear-gradient(180deg, rgba(10,23,16,.2) 0%, rgba(10,23,16,0) 40%, rgba(10,23,16,.7) 100%); }
.hero .hero-glow { position: absolute; right: -10%; top: -20%; width: 55vw; height: 55vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(111,209,61,.18), rgba(111,209,61,0)); z-index: -1; pointer-events: none; }
.hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 460px); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(64px, 8vw, 110px) clamp(70px, 8vw, 120px); }
.g-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: .86rem; font-weight: 600; color: #fff; backdrop-filter: blur(6px); margin-bottom: 26px; }
.g-pill .g { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #4285f4; font-size: .9rem; }
.g-pill .stars { color: var(--gold); letter-spacing: 1px; }
.page-hero .g-pill { margin-bottom: 18px; }
@media (max-width: 700px) { .page-hero .g-pill { font-size: .78rem; padding: 6px 12px 6px 7px; margin-bottom: 14px; } }
.hero h1 { color: #fff; margin-bottom: 20px; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { color: #c5d2c9; margin-bottom: 30px; max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; font-size: .92rem; color: #d7e0d9; font-weight: 500; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; flex: none; }
.hero-badges { display: flex; align-items: center; gap: 22px; margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.hero-badges span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #93a399; font-weight: 600; }
.hero-badges img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.hero-badges img.color { filter: none; opacity: 1; background: #fff; border-radius: 6px; padding: 4px; }
.review-float { position: absolute; left: 0; bottom: 34px; display: none; }

/* ---------- Quiz card ---------- */
.quiz { background: #fff; color: var(--ink); border-radius: 16px; padding: 28px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); position: relative; }
.quiz h3 { font-size: 1.35rem; margin-bottom: 4px; }
.quiz .q-sub { color: var(--ink-2); font-size: .92rem; margin-bottom: 16px; }
.quiz .q-sub b { color: var(--green); }
.q-bar { height: 5px; background: var(--gray-100); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.q-bar i { display: block; height: 100%; width: 33%; background: var(--green); border-radius: 99px; transition: width .3s ease; }
.q-step { display: none; }
.q-step.on { display: block; }
.q-step h4, .q-step .q-step-title { font-size: 1.08rem; margin: 0 0 2px; line-height: 1.25; letter-spacing: 0; }
.q-step .hint { font-size: .86rem; color: var(--muted); margin-bottom: 12px; }
.q-opts { display: grid; gap: 8px; }
.q-opts.two { grid-template-columns: 1fr 1fr; }
.q-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer; font-weight: 500; font-size: .95rem; color: var(--ink); transition: .15s; }
.q-opt:hover { border-color: var(--green); background: #f6fbf2; }
.q-opt.sel { border-color: var(--green); background: #eef8e6; }
.q-opt .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gray-200); flex: none; display: grid; place-items: center; }
.q-opt.sel .dot { border-color: var(--green); background: var(--green); }
.q-opt.sel .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.q-opt .oi { width: 34px; height: 34px; border-radius: 8px; background: var(--gray-50); display: grid; place-items: center; flex: none; }
.q-opt .oi svg { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-fields { display: grid; gap: 10px; }
.q-fields .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-fields input, .q-fields textarea, .lead-form input, .lead-form select, .lead-form textarea { width: 100%; border: 1.5px solid var(--gray-200); background: #fff; border-radius: var(--r-sm); padding: 13px 14px; color: var(--ink); font-size: .95rem; }
.q-fields input:focus, .q-fields textarea:focus, .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(46,130,0,.12); }
.q-nav { display: flex; gap: 10px; margin-top: 14px; }
.q-nav .btn { flex: 1; }
.q-nav .back { flex: 0 0 auto; }
.q-note { font-size: .78rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
.q-note b { color: var(--ink-2); font-weight: 600; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Service ribbon ---------- */
.svc-ribbon { background: var(--green); color: #fff; overflow: hidden; position: relative; }
.svc-ribbon .track { display: flex; gap: 0; width: max-content; animation: marquee 40s linear infinite; }
.svc-ribbon span { display: inline-flex; align-items: center; gap: 22px; padding: 13px 22px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.svc-ribbon span::after { content: ""; width: 6px; height: 6px; background: rgba(255,255,255,.7); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stat band ---------- */
.stat-band { background: var(--night-2); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); }
.stat-band .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band .stat { padding: 34px 20px; text-align: center; border-left: 1px solid rgba(255,255,255,.08); }
.stat-band .stat:first-child { border-left: 0; }
.stat-band b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-band b sup { font-size: .5em; color: var(--lime); vertical-align: super; margin-left: 2px; }
.stat-band span { display: block; margin-top: 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #93a399; font-weight: 600; }

/* ---------- Credential wall ---------- */
.creds { background: #fff; border-bottom: 1px solid var(--gray-100); padding-block: 22px; }
.creds .container { display: flex; align-items: center; gap: 26px; min-width: 0; }
.creds .label { flex: none; font-family: var(--font-display); font-weight: 600; font-size: .74rem; color: var(--ink); letter-spacing: .14em; text-transform: uppercase; max-width: 160px; line-height: 1.3; }
.creds .label small { display: block; font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 4px; font-size: .78rem; }
.marquee { overflow: hidden; flex: 1; min-width: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 48px; align-items: center; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee a { display: inline-flex; align-items: center; flex: none; filter: grayscale(1); opacity: .7; transition: .2s; }
.marquee a:hover { filter: none; opacity: 1; }
.marquee img { height: 50px; width: auto; max-width: 150px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .marquee .track, .svc-ribbon .track, .hero .hero-bg img { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.s-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.s-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.s-card .ph { aspect-ratio: 16/10; overflow: hidden; }
.s-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.s-card:hover .ph img { transform: scale(1.05); }
.s-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.s-card h3 { margin: 0; font-size: 1.15rem; }
.s-card p { color: var(--ink-2); font-size: .95rem; margin: 0; flex: 1; }
.s-card .more { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--green); display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.s-card .more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; }
.s-card:hover .more svg { transform: translateX(4px); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.chips a { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 999px; padding: 9px 16px; font-size: .9rem; font-weight: 500; color: var(--ink); }
.chips a:hover { border-color: var(--green); text-decoration: none; }
.chips a.more { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }

/* ---------- Icon cards (dark) ---------- */
.icards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.icard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 26px 24px; }
.icard .ico { width: 48px; height: 48px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--lime); display: grid; place-items: center; margin-bottom: 18px; }
.icard .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icard h3 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.icard p { color: #a9b8ae; font-size: .93rem; margin: 0; line-height: 1.6; }
.section-white .icard, .section-gray .icard { background: #fff; border-color: var(--gray-100); }
.section-white .icard h3, .section-gray .icard h3 { color: var(--ink); }
.section-white .icard p, .section-gray .icard p { color: var(--ink-2); }
.section-white .icard .ico, .section-gray .icard .ico { background: var(--gray-50); border-color: var(--gray-100); color: var(--green); }
.icards.three { grid-template-columns: repeat(3, 1fr); }
.shield { width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 0 0 10px rgba(46,130,0,.18); }
.shield svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--r); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-media .badge { position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: var(--r-sm); padding: 14px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.split-media .badge .g { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gray-100); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #4285f4; }
.split-media .badge b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); line-height: 1; }
.split-media .badge b i { font-style: normal; color: var(--gold); font-size: .95rem; letter-spacing: 1px; margin-left: 6px; }
.split-media .badge small { color: var(--muted); font-size: .78rem; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: 11px; color: var(--ink-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.section-dark .checklist li { color: #cfdad2; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 26px 22px 24px; }
.step .n { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--gray-200); line-height: 1; margin-bottom: 14px; letter-spacing: -.03em; }
.step h3 { font-size: 1.05rem; }
.step p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* ---------- Video ---------- */
.video-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.video-wrap > * { min-width: 0; }
.video-main { border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 16/9; box-shadow: var(--shadow); position: relative; }
.video-main iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-list { display: grid; gap: 8px; align-content: start; }
.video-list button { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); padding: 8px; cursor: pointer; color: #fff; transition: .15s; }
.video-list button:hover, .video-list button.on { border-color: var(--lime); background: rgba(111,209,61,.1); }
.video-list img { width: 92px; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; }
.video-list b { font-family: var(--font-display); font-size: .86rem; display: block; line-height: 1.3; font-weight: 600; }
.video-list small { color: #93a399; font-size: .76rem; }
.section-white .video-list button, .section-gray .video-list button { background: #fff; border-color: var(--gray-100); color: var(--ink); }
.section-white .video-list small, .section-gray .video-list small { color: var(--muted); }
.shorts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.short { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 9/14; background: #000; cursor: pointer; border: 0; padding: 0; text-align: left; }
.short img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: .3s; }
.short:hover img { transform: scale(1.04); opacity: 1; }
.short .play { position: absolute; inset: auto 14px 14px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .86rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); display: flex; gap: 8px; align-items: center; }
.short .play::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 15px no-repeat; flex: none; }
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(6, 14, 9, .88); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal .box { width: min(100%, 960px); aspect-ratio: 16/9; background: #000; border-radius: var(--r); overflow: hidden; position: relative; }
.modal .box.vert { width: min(100%, 420px); aspect-ratio: 9/16; }
.modal iframe { width: 100%; height: 100%; border: 0; }
.modal .close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; cursor: pointer; }
.yt-link { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.yt-link img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: .3s; }
.yt-link:hover img { opacity: 1; transform: scale(1.02); }
.yt-link .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--green); color: #fff; font-family: var(--font-display); font-weight: 600; padding: 12px 20px 12px 16px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; box-shadow: var(--shadow); font-size: .92rem; }
.yt-link .play::before { content: ""; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* ---------- Google reviews ---------- */
.reviews-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }
.reviews-wrap > * { min-width: 0; }
.g-card { background: #fff; color: var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.g-card .g-top { padding: 22px 22px 16px; display: flex; gap: 14px; align-items: center; }
.g-card .g-logo { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--gray-100); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #4285f4; }
.g-card .g-score { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.g-card .g-score small { font-size: .8rem; color: var(--muted); font-weight: 500; display: block; margin-top: 4px; font-family: var(--font-body); }
.g-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
.g-card iframe { width: 100%; height: 230px; border: 0; display: block; }
.g-card .g-foot { padding: 14px 22px 22px; display: grid; gap: 8px; }
.g-card .g-foot .btn { width: 100%; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--green); text-transform: uppercase; letter-spacing: .1em; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(111,209,61,.5); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(111,209,61,0);} 100% { box-shadow: 0 0 0 0 rgba(111,209,61,0);} }
.map-link { display: grid; gap: 4px; height: 230px; padding: 22px; background: var(--gray-50); color: var(--ink); align-content: center; text-align: center; justify-items: center; }
.map-link:hover { text-decoration: none; background: var(--gray-100); }
.map-link .pin { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.map-link .pin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.map-link b { font-family: var(--font-display); }
.map-link span { font-size: .9rem; color: var(--ink-2); }
.map-link em { font-style: normal; font-size: .78rem; color: var(--green); font-weight: 600; margin-top: 8px; }
.rev-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; min-width: 0; }
.rcard { scroll-snap-align: start; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.rcard .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; }
.rcard p { color: #d3ddd6; font-size: .95rem; margin: 0; flex: 1; }
.rcard .who { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; font-family: var(--font-display); font-size: .9rem; }
.rcard .who i { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.rcard .who small { display: block; font-family: var(--font-body); font-weight: 400; color: #93a399; font-size: .76rem; }
.rating-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.rating-strip a { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); padding: 14px 16px; color: #fff; display: block; }
.rating-strip a:hover { background: rgba(111,209,61,.1); text-decoration: none; border-color: var(--lime); }
.rating-strip b { font-family: var(--font-display); font-size: 1.4rem; display: block; }
.rating-strip span { font-size: .78rem; color: #93a399; display: block; }
.rating-strip em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--lime); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Awards ---------- */
.awards { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.award { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 16px 12px; text-align: center; }
.award img { height: 70px; width: auto; margin: 0 auto 10px; object-fit: contain; }
.award b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.award span { font-size: .74rem; color: var(--muted); display: block; line-height: 1.3; }

/* ---------- Before / after ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ba { position: relative; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; user-select: none; touch-action: pan-y; background: #000; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .after { clip-path: inset(0 0 0 var(--x, 50%)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.ba .handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-sm); }
.ba .lbl { position: absolute; top: 12px; font-family: var(--font-display); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(10,23,16,.75); padding: 4px 10px; border-radius: 4px; }
.ba .lbl.l { left: 12px; } .ba .lbl.r { right: 12px; }
.ba .cap { position: absolute; left: 12px; bottom: 12px; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: .78rem; padding: 6px 12px; border-radius: 4px; }
.ba-grid.two { grid-template-columns: 1fr 1fr; }
.ba-grid.two .ba { aspect-ratio: 5/4; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { position: absolute; inset: auto 0 0; padding: 10px 12px; font-size: .76rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(10,23,16,.9)); font-family: var(--font-display); }

/* ---------- Areas finder ---------- */
.finder { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 26px; }
.finder input { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); padding: 14px 20px 14px 48px; font-size: 1rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a72' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 18px center / 20px no-repeat; }
.finder input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(46,130,0,.12); }
.county-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.county-tabs button { border: 1px solid var(--gray-200); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 500; font-size: .88rem; cursor: pointer; color: var(--ink); }
.county-tabs button.on { background: var(--night); color: #fff; border-color: var(--night); }
.city-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; }
.city-list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); font-weight: 500; font-size: .93rem; }
.city-list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.city-list a:hover { background: var(--gray-50); text-decoration: none; }
.city-list a[hidden] { display: none; }
.county-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.county-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 24px; }
.county-card h3 { display: flex; justify-content: space-between; align-items: baseline; }
.county-card h3 small { font-size: .76rem; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.county-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.county-card li a { display: inline-block; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 999px; padding: 4px 11px; font-size: .82rem; color: var(--ink); }
.county-card li a:hover { border-color: var(--green); text-decoration: none; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chips a { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--gray-100); border-radius: 999px; padding: 9px 16px; font-weight: 500; font-size: .9rem; color: var(--ink); }
.svc-chips a svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2.2; }
.svc-chips a:hover { border-color: var(--green); text-decoration: none; }

/* ---------- Articles ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card .p-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card .cat { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.post-card h3 { font-size: 1.08rem; margin: 0; }
.post-card h3 a { color: var(--ink); }
.post-card p { color: var(--ink-2); font-size: .93rem; margin: 0; flex: 1; }
.post-card .meta { font-size: .78rem; color: var(--muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li a, .pill-list li { display: inline-block; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 999px; padding: 7px 14px; font-size: .88rem; font-weight: 500; color: var(--ink); }
.article { max-width: 760px; margin-inline: auto; }
.article h2 { font-size: 1.65rem; margin-top: 1.8em; }
.article h3 { margin-top: 1.4em; }
.article p, .article li { color: var(--ink-2); font-size: 1.05rem; }
.article ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.article img { border-radius: var(--r); margin: 1.5em 0; }
.article .callout { background: var(--gray-50); border-left: 3px solid var(--green); padding: 18px 22px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 1.6em 0; }
.article .callout p { margin: 0; color: var(--ink); }
.toc { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 18px 22px; margin: 1.5em 0; }
.toc b { font-family: var(--font-display); display: block; margin-bottom: 8px; }
.toc a { display: block; padding: 4px 0; font-size: .93rem; }
.post-hero { padding-block: 40px 20px; }
.post-hero .meta { color: var(--muted); font-size: .9rem; display: flex; gap: 14px; flex-wrap: wrap; }
.post-hero img { border-radius: var(--r); aspect-ratio: 16/8; object-fit: cover; width: 100%; margin-top: 26px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.sidebar { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 22px; }
.side-card.dark { background: var(--night); color: #cfdad2; border-color: var(--night); }
.side-card.dark h4 { color: #fff; }
.side-card ul a { display: block; padding: 6px 0; font-size: .92rem; border-bottom: 1px dashed var(--gray-100); }

/* ---------- FAQ ---------- */
.faq { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--gray-50); color: var(--green); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.faq[open] summary::after { content: "–"; background: var(--night); color: #fff; }
.faq p { padding: 0 22px 20px; margin: 0; color: var(--ink-2); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--night); color: #cfdad2; overflow: hidden; isolation: isolate; }
.page-hero .bg { position: absolute; inset: 0; z-index: -1; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,23,16,.97) 0%, rgba(10,23,16,.9) 45%, rgba(10,23,16,.6) 100%), linear-gradient(180deg, rgba(10,23,16,0), rgba(10,23,16,.6)); }
.page-hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 440px); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(56px, 7vw, 96px); }
.page-hero.no-form .container { grid-template-columns: 1fr; padding-block: clamp(48px, 6vw, 80px); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #c5d2c9; }
.crumb { font-size: .82rem; color: #93a399; margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a { color: #d7e0d9; }
.crumb span { opacity: .5; }
.page-hero .hero-ctas { margin-top: 26px; }
.lead-card { background: #fff; color: var(--ink); border-radius: 16px; padding: 26px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.lead-card h3 { margin-bottom: 4px; font-size: 1.25rem; }
.lead-card .form-sub { color: var(--muted); font-size: .9rem; margin-bottom: 16px; }
.lead-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.lead-form .f-full { margin-bottom: 10px; }
.lead-form textarea { min-height: 86px; resize: vertical; }
.lead-form .btn { width: 100%; margin-top: 4px; }
.lead-form .form-note { font-size: .78rem; color: var(--muted); margin: 10px 0 0; text-align: center; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--night); color: #fff; isolation: isolate; }
.cta-band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; z-index: -1; }
.cta-band .container { position: relative; padding-block: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #c5d2c9; margin: 0; max-width: 56ch; }
.cta-band .hero-ctas { margin: 0; }

/* ---------- Estimate section ---------- */
.estimate { background: var(--gray-50); border-top: 1px solid var(--gray-100); }
.estimate .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(60px, 8vw, 100px); }
.est-points li { position: relative; padding-left: 32px; margin-bottom: 10px; font-weight: 500; color: var(--ink-2); }
.est-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.est-phone { margin-top: 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.est-phone a { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.est-phone .wa { font-size: .92rem; font-weight: 600; color: var(--green); display: inline-flex; gap: 6px; align-items: center; }
.est-phone .wa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ---------- Footer ---------- */
.site-foot { background: var(--night); color: #a9b8ae; padding-block: 64px 110px; font-size: .93rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; }
.site-foot h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.site-foot a { color: #d7e0d9; }
.site-foot li { margin-bottom: 7px; }
.site-foot .logo img { height: 60px; background: #fff; border-radius: var(--r-sm); padding: 6px; }
.foot-about p { margin: 16px 0; max-width: 40ch; }
.nap { display: grid; gap: 6px; }
.nap a { font-weight: 600; color: #fff; }
.foot-dirs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foot-dirs a { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px; font-size: .78rem; }
.foot-dirs a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: #7f8f86; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; }
.social a:hover { background: var(--green); border-color: var(--green); }
.social svg { width: 18px; height: 18px; fill: #fff; }

/* ---------- Misc ---------- */
.mob-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--gray-100); }
.mob-bar .btn { padding: 13px 10px; font-size: .88rem; }
.eco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.eco a { display: block; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 16px; color: var(--ink); }
.eco a:hover { border-color: var(--green); text-decoration: none; }
.eco img { height: 90px; width: 100%; object-fit: contain; margin-bottom: 10px; }
.eco b { display: block; font-family: var(--font-display); font-size: .92rem; }
.eco span { font-size: .8rem; color: var(--muted); }
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.docs figure { margin: 0; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 12px; }
.docs img { border-radius: var(--r-sm); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.docs figcaption { font-weight: 600; font-family: var(--font-display); font-size: .9rem; padding: 12px 6px 4px; }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cert { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 22px; display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: center; color: var(--ink); }
.cert:hover { border-color: var(--green); text-decoration: none; box-shadow: var(--shadow-sm); }
.cert img { width: 90px; height: 70px; object-fit: contain; }
.cert b { display: block; font-family: var(--font-display); font-size: .98rem; line-height: 1.2; }
.cert span { font-size: .82rem; color: var(--muted); display: block; margin-top: 3px; }
.cert em { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--green); display: inline-block; margin-top: 8px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.contact-info { display: grid; gap: 12px; }
.ci { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 16px; }
.ci .ico { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--gray-50); color: var(--green); display: grid; place-items: center; }
.ci .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci b { display: block; font-family: var(--font-display); }
.ci a, .ci span { color: var(--ink-2); font-size: .94rem; }
.thanks { text-align: center; padding-block: 90px; }
.thanks .tick { width: 84px; height: 84px; border-radius: 50%; background: var(--green); margin: 0 auto 24px; display: grid; place-items: center; }
.thanks .tick svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.in) { opacity: 1; transform: none; } }
/* legacy class aliases kept for inner pages */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.features.two { grid-template-columns: 1fr 1fr; }
.feature { background: #fff; border-radius: var(--r); padding: 26px; border: 1px solid var(--gray-100); }
.feature .f-ico { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--gray-50); color: var(--green); display: grid; place-items: center; margin-bottom: 16px; }
.feature .f-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 1.08rem; margin-bottom: 6px; }
.feature p { color: var(--ink-2); font-size: .94rem; margin: 0; }
.feature a { font-weight: 600; font-size: .88rem; display: inline-block; margin-top: 10px; }
.section-mint { background: var(--gray-50); }
.section-forest { background: var(--night); color: #cfdad2; }
.section-forest h2, .section-forest h3, .section-forest h4 { color: #fff; }
.section-forest .kicker { color: var(--lime); } .section-forest .kicker::before { background: var(--lime); }
.section-forest .lead { color: #a9b8ae; }
.section-forest .btn-line { color: #fff; border-color: rgba(255,255,255,.35); }
.section-forest .checklist li { color: #cfdad2; }
.section-forest .video-list button { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #fff; }
.section-forest .stat, .section-forest .feature { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.section-forest .feature h3 { color: #fff; } .section-forest .feature p { color: #a9b8ae; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 22px 20px; }
.stat b { display: block; font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: .9rem; color: var(--green); vertical-align: super; }
.stat span { display: block; color: var(--muted); font-size: .9rem; margin-top: 8px; }
.section-forest .stat b { color: #fff; } .section-forest .stat span { color: #a9b8ae; } .section-forest .stat b sup { color: var(--lime); }
.split-media .tag { position: absolute; left: 18px; bottom: 18px; background: #fff; border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: .84rem; color: var(--ink); font-family: var(--font-display); box-shadow: var(--shadow-sm); }
.btn-leaf { background: var(--green); color: #fff; box-shadow: 0 10px 22px -12px rgba(46,130,0,.9); }
.btn-leaf:hover { background: var(--green-2); }
.btn-forest { background: var(--night); color: #fff; }
.btn-forest:hover { background: var(--night-3); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; grid-column: span 2; border-radius: var(--r); overflow: hidden; background: var(--night); min-height: 300px; display: flex; align-items: flex-end; color: #fff; text-decoration: none !important; isolation: isolate; }
.tile.big { grid-column: span 3; min-height: 380px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -1; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,23,16,0) 30%, rgba(10,23,16,.94) 100%); z-index: -1; }
.tile .t-body { padding: 22px; width: 100%; }
.tile .t-ico { width: 42px; height: 42px; border-radius: var(--r-sm); background: rgba(255,255,255,.12); backdrop-filter: blur(6px); display: grid; place-items: center; margin-bottom: 12px; }
.tile .t-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { color: #fff; margin-bottom: 6px; font-size: 1.3rem; }
.tile p { color: #c5d2c9; font-size: .92rem; margin: 0 0 12px; max-width: 46ch; }
.tile .t-link { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--lime); display: inline-flex; align-items: center; gap: 6px; }
.tile .t-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav, .head-cta, .head-phone { display: none; }
  .burger { display: flex; }
  body.nav-open .nav { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 0 0 0 auto; width: min(100%, 380px); background: #fff; padding: 100px 20px 30px; z-index: 55; overflow: auto; gap: 2px; box-shadow: var(--shadow); }
  body.nav-open .nav > li > a { display: flex; justify-content: space-between; padding: 12px 14px; }
  body.nav-open .drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 10px; display: none; min-width: 0; }
  body.nav-open .nav > li.open .drop { display: grid; }
  .cards, .icards, .steps { grid-template-columns: repeat(2, 1fr); }
  .icards.three { grid-template-columns: repeat(2, 1fr); }
  .stat-band .container { grid-template-columns: repeat(2, 1fr); }
  .stat-band .stat:nth-child(3) { border-left: 0; }
  .awards { grid-template-columns: repeat(4, 1fr); }
  .shorts { grid-template-columns: repeat(3, 1fr); }
  .reviews-wrap { grid-template-columns: minmax(0, 1fr); }
  .rating-strip { grid-template-columns: repeat(3, 1fr); }
  .city-list { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .cert-grid, .county-grid, .docs, .ba-grid, .eco, .features { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile.big { grid-column: span 1; min-height: 260px; }
}
@media (max-width: 820px) {
  body { font-size: 16px; padding-bottom: 74px; }
  .ribbon .r-left { display: none; }
  .ribbon .container { justify-content: center; }
  .site-head .container { min-height: 70px; }
  .logo img { height: 46px; }
  .hero .container, .page-hero .container, .split, .estimate .container, .video-wrap, .contact-grid, .cta-band .container { grid-template-columns: 1fr; }
  .hero .container { padding-block: 48px 56px; }
  .hero h1 { max-width: none; }
  .hero .hero-shade { background: linear-gradient(180deg, rgba(10,23,16,.92) 0%, rgba(10,23,16,.9) 100%); }
  .hero-badges { gap: 16px; }
  .split.rev .split-media { order: 0; }
  .creds .container { flex-direction: column; align-items: stretch; gap: 14px; }
  .creds .label { max-width: none; }
  .posts { grid-template-columns: 1fr; }
  .shorts { grid-template-columns: repeat(2, 1fr); }
  .awards { grid-template-columns: repeat(2, 1fr); }
  .city-list { grid-template-columns: repeat(2, 1fr); }
  .rating-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .mob-bar { display: grid; }
  .site-foot { padding-bottom: 130px; }
  .lead-form .f-row, .q-fields .f-row, .q-opts.two { grid-template-columns: 1fr; }
  .rev-scroll { grid-auto-columns: 86%; }
}
@media (max-width: 540px) {
  .cards, .icards, .icards.three, .steps, .cert-grid, .county-grid, .docs, .ba-grid, .eco, .features, .stats, .bento { grid-template-columns: 1fr; }
  .stat-band .container { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; white-space: normal; }
  .mob-bar .btn { white-space: normal; }
  .logo-text small { display: none; }
  .quiz, .lead-card { padding: 20px 16px; }
  .city-list { grid-template-columns: 1fr; }
}

/* ---------- v2.1 additions ---------- */
.split { align-items: stretch; }
.split-media { min-height: 380px; }
.split-media img { height: 100%; aspect-ratio: auto; position: absolute; inset: 0; }
.split > div:not(.split-media) { align-self: center; }
@media (max-width: 820px) { .split-media { min-height: 0; } .split-media img { position: static; aspect-ratio: 4/3; height: auto; } }

/* credential cards */
.cred-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.cred-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-sm); padding: 14px 10px 10px; color: var(--ink); text-align: center; text-decoration: none !important; transition: .18s; position: relative; }
.cred-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cred-card img { height: 46px; width: auto; max-width: 100%; object-fit: contain; }
.cred-card b { font-family: var(--font-display); font-size: .7rem; line-height: 1.2; font-weight: 600; color: var(--ink-2); }
.cred-card em { font-style: normal; font-size: .66rem; font-weight: 600; color: var(--green); letter-spacing: .06em; text-transform: uppercase; display: inline-flex; gap: 4px; align-items: center; }
.cred-card em::after { content: "↗"; }
.creds .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.creds .head b { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.creds .head span { font-size: .84rem; color: var(--muted); }
.creds { padding-block: 26px 28px; }
@media (max-width: 1100px) { .cred-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 600px) { .cred-grid { grid-template-columns: repeat(3, 1fr); } .cred-card b { display: none; } }

/* video dropdown */
.video-side { display: flex; flex-direction: column; gap: 14px; }
.video-select { position: relative; }
.video-select select { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); padding: 14px 44px 14px 14px; font-size: .95rem; font-weight: 500; cursor: pointer; }
.video-select select:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(111,209,61,.15); }
.video-select select option, .video-select select optgroup { color: var(--ink); background: #fff; }
.video-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.section-white .video-select select, .section-gray .video-select select { background: #fff; color: var(--ink); border-color: var(--gray-200); }
.section-white .video-select::after, .section-gray .video-select::after { border-color: var(--ink); }
.now-playing { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); padding: 10px; }
.now-playing img { width: 110px; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; }
.now-playing b { display: block; font-family: var(--font-display); font-size: .92rem; color: #fff; line-height: 1.3; }
.now-playing small { color: #93a399; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.video-count { font-size: .84rem; color: #93a399; }
.video-count b { color: #fff; }

/* review tabs */
.rtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.rtab { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 9px 16px 9px 10px; cursor: pointer; font-weight: 600; font-family: var(--font-display); font-size: .88rem; transition: .15s; }
.rtab:hover { border-color: rgba(255,255,255,.4); }
.rtab.on { background: #fff; color: var(--ink); border-color: #fff; }
.rtab .lg { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #fff; }
.rtab .lg.google { background: #fff; color: #4285f4; border: 1px solid var(--gray-200); }
.rtab .lg.homeadvisor { background: #f68b1f; }
.rtab .lg.angi { background: #ff6153; }
.rtab .lg.bbb { background: #005a78; }
.rtab .lg.nextdoor { background: #8ed500; }
.rtab .lg.facebook { background: #1877f2; }
.rtab small { font-weight: 500; opacity: .75; font-family: var(--font-body); }
.rpanel { display: none; }
.rpanel.on { display: block; }
.rsum { background: #fff; color: var(--ink); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.rsum .big { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.rsum .big small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.rsum .stars { color: var(--gold); font-size: 1.2rem; letter-spacing: 2px; }
.rsum p { color: var(--ink-2); font-size: .92rem; margin: 0; }
.rsum .btn { width: 100%; }
.rsum iframe { width: 100%; height: 200px; border: 0; border-radius: var(--r-sm); }
.rcard .who small.src { color: var(--lime); }
.rcard .rmeta { font-size: .78rem; color: #93a399; display: flex; gap: 10px; }
.rcard.low .stars { color: #93a399; }

/* consent + legal modal */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; color: var(--ink-2); line-height: 1.45; margin-top: 12px; text-align: left; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); flex: none; }
.consent a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.captcha-note { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--muted); margin-top: 10px; }
.captcha-note svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2; }
.field-err { border-color: var(--ember) !important; box-shadow: 0 0 0 4px rgba(224,82,31,.12) !important; }
.form-msg { display: none; font-size: .84rem; color: var(--ember); background: #fff2ee; border: 1px solid #f7cdbf; border-radius: var(--r-sm); padding: 10px 12px; margin-top: 10px; }
.form-msg.on { display: block; }
.legal-modal { position: fixed; inset: 0; z-index: 110; background: rgba(6,14,9,.7); display: none; align-items: center; justify-content: center; padding: 20px; }
.legal-modal.open { display: flex; }
.legal-modal .sheet { background: #fff; color: var(--ink); width: min(100%, 820px); max-height: 86vh; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.legal-modal .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--gray-100); }
.legal-modal .sheet-head h3 { margin: 0; font-size: 1.2rem; }
.legal-modal .tabs { display: flex; gap: 6px; }
.legal-modal .tabs button { border: 1px solid var(--gray-200); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .86rem; cursor: pointer; }
.legal-modal .tabs button.on { background: var(--night); color: #fff; border-color: var(--night); }
.legal-modal .sheet-body { padding: 8px 28px 28px; overflow: auto; }
.legal-modal .sheet-body h2 { font-size: 1.1rem; margin-top: 1.4em; }
.legal-modal .sheet-body p, .legal-modal .sheet-body li { font-size: .95rem; color: var(--ink-2); }
.legal-modal .sheet-body ul { list-style: disc; padding-left: 1.2em; }
.legal-modal .close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gray-200); background: #fff; font-size: 20px; cursor: pointer; }
.legal-modal [data-legal-panel] { display: none; }
.legal-modal [data-legal-panel].on { display: block; }

/* sample notice */
.sample-note { background: var(--gold); color: #3a2a00; font-size: .86rem; font-weight: 600; text-align: center; padding: 9px 16px; }

/* effects */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease, box-shadow .25s ease; }
.icard { position: relative; overflow: hidden; }
.icard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(111,209,61,.16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.icard:hover::before { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .tilt { transition: none; } }
.hero .hero-bg { will-change: transform; }
.hero-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: #93a399; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-scroll i { width: 1px; height: 34px; background: linear-gradient(#93a399, transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 820px) { .hero-scroll { display: none; } }
/* footer map */
.foot-map { display: grid; gap: 10px; }
.foot-map iframe { width: 100%; height: 170px; border: 0; border-radius: var(--r-sm); display: block; filter: saturate(.9); }
.foot-map .map-link { height: 170px; border-radius: var(--r-sm); padding: 14px; }
.foot-map .map-link b, .foot-map .map-link span { font-size: .84rem; }
.foot-map .map-link em { font-size: .72rem; }
.foot-map .btn-line { color: #fff; border-color: rgba(255,255,255,.3); }
.foot-bar span:last-child a { color: #fff; font-weight: 600; }
/* value section */
.value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vcard { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.vcard .vnum { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; color: var(--green); line-height: 1; }
.vcard .vnum small { font-size: .9rem; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.vcard h3 { font-size: 1.1rem; margin: 0; }
.vcard p { color: var(--ink-2); font-size: .94rem; margin: 0; flex: 1; }
.vcard .src { font-size: .74rem; color: var(--muted); }
.compare { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.compare th { font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--gray-50); }
.compare th.us { color: var(--green); }
.compare td.us { font-weight: 600; color: var(--ink); background: #f6fbf2; }
.compare td.them { color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }
.compare td.us::before { content: "✓ "; color: var(--green); }
.compare td.them::before { content: "✕ "; color: #c9b3aa; }
@media (max-width: 900px) { .value { grid-template-columns: 1fr; } .compare table { font-size: .88rem; } .compare th, .compare td { padding: 12px; } }
/* v2.2 fixes */
.page-hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.65rem); letter-spacing: -.02em; max-width: 20ch; }
.page-hero .lead { font-size: 1.04rem; }
.hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); }
.rsum .btn-line, .g-card .btn-line, .lead-card .btn-line, .quiz .btn-line { color: var(--ink); border-color: var(--gray-200); background: #fff; }
.rsum .btn-line:hover, .g-card .btn-line:hover, .quiz .btn-line:hover { border-color: var(--ink); background: var(--gray-50); }
.sec-head h2 { font-size: clamp(1.7rem, 2.7vw, 2.35rem); }
h2 { font-size: clamp(1.7rem, 2.7vw, 2.35rem); }
/* v2.3 fixes */
.head-phone a { white-space: nowrap; }
.nav { gap: 0; }
.nav > li > a { padding: 9px 10px; font-size: .92rem; }
.stat-band .stat { background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.08); border-radius: 0; }
.stat-band .stat:first-child { border-left: 0; }
.stat-band .stat b { color: #fff; }
.stat-band .stat b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; margin: 0; display: inline; }
.stat-band .stat > span { display: block; margin-top: 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #93a399; font-weight: 600; }
@media (max-width: 1240px) { .head-phone { display: none; } }
.video-copy { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.video-copy h3 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; }
.video-copy .checklist li { font-size: .92rem; margin-bottom: 8px; }
.video-copy .btn { margin-top: 8px; }
.section-white .video-copy, .section-gray .video-copy { border-top-color: var(--gray-100); }
.section-white .video-copy h3, .section-gray .video-copy h3 { color: var(--ink); }
.video-main video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.modal .box video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* cert band */
.cert-band { background: var(--green); color: #fff; padding-block: clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.cert-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(10,23,16,.25), transparent 60%); pointer-events: none; }
.cert-band .container { position: relative; }
.cert-band .kicker { color: #eaffdc; } .cert-band .kicker::before { background: #eaffdc; }
.cert-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cert-band .lead { color: #e2f5d6; margin: 0 auto 34px; }
.cert-band-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; }
.cert-tile { background: #fff; border-radius: var(--r); padding: 16px 10px 14px; text-align: center; color: var(--ink); text-decoration: none !important; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .2s, box-shadow .2s; }
.cert-tile:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(0,0,0,.5); }
.cert-tile .logo-box { width: 100%; height: 88px; display: grid; place-items: center; }
.cert-tile img { max-height: 84px; max-width: 100%; width: auto; object-fit: contain; }
.cert-tile b { font-family: var(--font-display); font-size: .74rem; line-height: 1.2; font-weight: 600; }
.cert-tile .org { font-size: .66rem; color: var(--muted); line-height: 1.25; }
.cert-tile em { font-style: normal; margin-top: auto; padding-top: 6px; font-size: .68rem; font-weight: 600; color: var(--green); letter-spacing: .06em; text-transform: uppercase; }
.cert-tile em::after { content: " ↗"; }
@media (max-width: 1100px) { .cert-band-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 700px) { .cert-band-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cert-tile .org { display: none; } .cert-tile .logo-box { height: 64px; } .cert-tile img { max-height: 60px; } }
@media (max-width: 420px) { .cert-band-grid { grid-template-columns: repeat(2, 1fr); } }

/* header logo only */
.site-head .logo img { height: 64px; }
@media (max-width: 820px) { .site-head .logo img { height: 52px; } }
/* cert band: clean, classic */
.cert-band { background: var(--gray-50); color: var(--ink); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.cert-band::before { background: radial-gradient(60% 80% at 100% 0%, rgba(46,130,0,.06), transparent 60%); }
.cert-band .kicker { color: var(--green); } .cert-band .kicker::before { background: var(--green); }
.cert-band h2 { color: var(--ink); }
.cert-band .lead { color: var(--ink-2); }
.cert-tile { border: 1px solid var(--gray-200); box-shadow: 0 1px 0 rgba(10,23,16,.03); }
.cert-tile:hover { border-color: var(--green); box-shadow: 0 18px 36px -22px rgba(10,23,16,.35); }

a.post-card { color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
a.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
a.post-card h3 { color: var(--ink); }
a.post-card:hover h3 { color: var(--green); }

/* header: balanced grid */
.site-head .container { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; }
.site-head .nav { margin: 0; justify-self: center; }
.site-head .head-phone { justify-self: end; }
.site-head .burger { justify-self: end; grid-column: 4; }
@media (max-width: 1100px) { .site-head .container { grid-template-columns: auto 1fr auto; } .site-head .burger { grid-column: 3; } }
.ribbon .r-right .em { background: none; border: 0; color: #a9b8ae; padding: 0; }
.ribbon .r-right .em::before { content: "·"; margin-right: 10px; opacity: .5; }
.drop.cols { min-width: 620px; grid-template-columns: 1fr 1.2fr; gap: 6px 16px; padding: 12px; }
.drop.cols a { padding: 7px 12px; font-size: .9rem; }
@media (max-width: 1100px) { body.nav-open .drop.cols { grid-template-columns: 1fr; } }
/* mega menu */
.drop.mega { left: 50%; transform: translate(-50%, 6px); min-width: 0; width: 780px; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 4px 18px; padding: 16px 18px 12px; }
.nav > li:hover .drop.mega, .nav > li:focus-within .drop.mega, .nav > li.open .drop.mega { transform: translate(-50%, 0); }
.drop.mega .mcol b { display: block; font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding: 4px 10px 6px; border-bottom: 1px solid var(--gray-100); margin-bottom: 4px; }
.drop.mega .mcol a { padding: 5px 10px; font-size: .86rem; line-height: 1.3; border-radius: 6px; }
.drop.mega .mall { grid-column: 1 / -1; margin-top: 8px; padding: 8px 10px; border-top: 1px solid var(--gray-100); border-radius: 0; font-weight: 600; color: var(--green); font-size: .86rem; }
@media (max-width: 1100px) {
  body.nav-open .drop.mega { width: auto; transform: none; left: auto; grid-template-columns: 1fr; padding: 0 0 6px 10px; }
  body.nav-open .drop.mega .mcol b { border: 0; margin: 8px 0 0; }
}
/* chimney sweeping overview */
.overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ocard { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 30px 30px 26px; }
.ocard.wide { grid-column: 1 / -1; }
.ocard .ico { width: 46px; height: 46px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-100); color: var(--green); display: grid; place-items: center; margin-bottom: 16px; }
.ocard .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ocard h3 { font-size: 1.22rem; margin-bottom: 12px; }
.ocard p { color: var(--ink-2); font-size: .98rem; margin-bottom: .8em; }
.ocard p:last-child { margin-bottom: 0; }
.thresh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 20px; }
.thresh li { background: var(--gray-50); border: 1px solid var(--gray-100); border-top: 4px solid var(--green); border-radius: var(--r-sm); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.thresh li.warn { border-top-color: var(--gold); }
.thresh li.hot { border-top-color: var(--ember); }
.thresh b { font-family: var(--font-display); font-size: .98rem; color: var(--ink); line-height: 1.25; }
.thresh span { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.ocard .qlabel { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ocard blockquote { margin: 0; padding: 18px 22px; background: #f6fbf2; border-left: 4px solid var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--ink); line-height: 1.5; }
.ocard.dark { background: var(--night); border-color: var(--night); display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: start; }
.ocard.dark .ico { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: var(--lime); grid-row: span 4; margin: 0; }
.ocard.dark h3 { color: #fff; }
.ocard.dark p { color: #c5d2c9; max-width: 80ch; }
.ocard.dark .hero-ctas { margin-top: 10px; }
.ocard.dark .btn-line { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
@media (max-width: 900px) { .overview { grid-template-columns: 1fr; } .thresh { grid-template-columns: 1fr 1fr; } .ocard.dark { grid-template-columns: 1fr; } .ocard.dark .ico { grid-row: auto; margin-bottom: 16px; } }
@media (max-width: 540px) { .thresh { grid-template-columns: 1fr; } .ocard { padding: 22px 18px; } }

/* v2.5 home hero = client fleet photo (both vans readable behind the copy) */
.hero .hero-bg img { object-position: 50% 78%; transform-origin: 50% 80%; }
.hero .hero-shade { background:
  linear-gradient(90deg, rgba(10,23,16,.95) 0%, rgba(10,23,16,.88) 40%, rgba(10,23,16,.56) 64%, rgba(10,23,16,.40) 100%),
  linear-gradient(180deg, rgba(10,23,16,.55) 0%, rgba(10,23,16,.05) 38%, rgba(10,23,16,.62) 100%); }
@media (max-width: 960px) {
  .hero .hero-bg img { object-position: 38% 100%; }
  .hero .hero-shade { background: linear-gradient(180deg, rgba(10,23,16,.90) 0%, rgba(10,23,16,.84) 55%, rgba(10,23,16,.70) 100%); }
}
.ocard.photo { position: relative; padding: 0; overflow: hidden; min-height: 300px; margin: 0; }
.ocard.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ocard.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; color: #fff; font-size: .9rem; font-weight: 500; background: linear-gradient(180deg, rgba(10,23,16,0), rgba(10,23,16,.82)); }
/* photo forward page hero (about): the fleet stays readable on the right */
.page-hero.photo-hero .bg img { opacity: .9; object-position: 50% 72%; }
.page-hero.photo-hero .bg::after { background: linear-gradient(90deg, rgba(10,23,16,.96) 0%, rgba(10,23,16,.86) 42%, rgba(10,23,16,.38) 72%, rgba(10,23,16,.28) 100%), linear-gradient(180deg, rgba(10,23,16,.35) 0%, rgba(10,23,16,0) 40%, rgba(10,23,16,.45) 100%); }
.page-hero.photo-hero .container { min-height: clamp(420px, 40vw, 560px); align-content: center; }
@media (max-width: 960px) { .page-hero.photo-hero .bg::after { background: linear-gradient(180deg, rgba(10,23,16,.9), rgba(10,23,16,.78)); } }

/* v2.6 Service Areas mega menu: county headings, main cities, link to the rest */
.drop.mega.areas { width: 900px; grid-template-columns: repeat(4, 1fr); gap: 14px 18px; }
.drop.mega .mcol a.mhead { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding: 4px 10px 6px; border-bottom: 1px solid var(--gray-100); border-radius: 0; margin-bottom: 4px; }
.drop.mega .mcol a.mhead:hover { background: none; color: var(--ink); }
.drop.mega .mcol a.mmore { color: var(--green); font-weight: 600; font-size: .8rem; }
.drop.mega .mfind { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-sm); padding: 12px 12px 14px; align-self: start; }
.drop.mega .mfind b { border: 0; padding: 0; margin-bottom: 6px; }
.drop.mega .mfind p { font-size: .82rem; color: var(--ink-2); margin: 0 0 10px; line-height: 1.45; }
.drop.mega .mfind a.btn { display: inline-flex; padding: 8px 14px; font-size: .82rem; color: #fff; }
.drop.mega .mfind a.btn:hover { background: var(--green-d, #256b00); }
@media (max-width: 1240px) and (min-width: 1101px) { .drop.mega.areas { width: 820px; } }
@media (max-width: 1100px) { body.nav-open .drop.mega.areas { grid-template-columns: 1fr; } body.nav-open .drop.mega .mfind { display: none; } body.nav-open .drop.mega .mcol a.mhead { border: 0; margin: 8px 0 0; } }

/* v2.7 blog index topic tabs + generated article pages */
.topic-tabs { list-style: none; padding: 0; justify-content: center; }
.topic-tabs li { background: none; border: 0; padding: 0; }
.topic-tabs button { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 999px; padding: 8px 16px; font: 500 .88rem var(--font-body); color: var(--ink); cursor: pointer; transition: .15s; }
.topic-tabs button:hover { border-color: var(--green); color: var(--green); }
.topic-tabs button.on { background: var(--night); border-color: var(--night); color: #fff; }
.post-card[hidden] { display: none; }
.article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.article th, .article td { border: 1px solid var(--gray-100); padding: 10px 12px; text-align: left; }
.article th { background: var(--gray-50); font-family: var(--font-display); }
.article ol { padding-left: 1.3em; margin-bottom: 1em; list-style: decimal; }
.article details.faq { margin-top: 10px; }
.article blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 3px solid var(--green); background: var(--gray-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose h2 { margin-bottom: .5em; } .prose p { color: var(--ink-2); } .prose ul:not(.checklist) { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; color: var(--ink-2); }
.split ul:not(.checklist):not(.hero-trust) { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; color: var(--ink-2); }
.split h3 { margin-top: 1em; font-size: 1.1rem; }

/* v2.8 full rows everywhere: four before/after sliders, two button mobile bar */
.ba-grid.four { grid-template-columns: repeat(4, 1fr); }
.ba-grid.four .ba { aspect-ratio: 1 / 1; }
@media (max-width: 1100px) { .ba-grid.four { grid-template-columns: repeat(2, 1fr); } .ba-grid.four .ba { aspect-ratio: 4 / 3; } }
@media (max-width: 540px) { .ba-grid.four { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ba-grid.four .ba { aspect-ratio: 1 / 1; } .ba-grid.four .ba .cap { font-size: .68rem; padding: 5px 8px; left: 8px; bottom: 8px; right: 8px; } .ba-grid.four .ba .lbl { font-size: .58rem; padding: 3px 6px; } }
.mob-bar.two { grid-template-columns: 1fr 1.25fr; }
.mob-bar.two .btn { font-size: .95rem; padding: 14px 10px; }

/* v2.9 responsive audit: rows always close, nothing wider than the phone */
.county-grid { grid-template-columns: repeat(2, 1fr); }
.county-card.county-cta { background: var(--night); border-color: var(--night); color: #c5d2c9; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-content: center; }
.county-card.county-cta h3 { color: #fff; }
.county-card.county-cta p { margin: 0; }
.county-card.county-cta .btn-line { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
@media (max-width: 1100px) {
  .icards.three { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .icards.three .icard { padding: 20px 16px; }
  .docs { grid-template-columns: repeat(3, 1fr); }
  .gallery, .shorts { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .icards.three { grid-template-columns: 1fr; }
  .icards.three:has(> :nth-child(6)) { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: 1fr; }
  .gallery, .shorts { grid-template-columns: repeat(2, 1fr); }
  .county-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .icards.three:has(> :nth-child(6)) { grid-template-columns: 1fr; } }
/* comparison table never pushes the page wider than the phone */
.compare { max-width: 100%; }
.compare table { table-layout: fixed; }
.compare th, .compare td { overflow-wrap: anywhere; }
@media (max-width: 540px) { .compare table { font-size: .8rem; } .compare th, .compare td { padding: 10px 8px; } .compare th { font-size: .62rem; letter-spacing: .06em; } }
/* long email and address lines wrap inside their cards */
.ci > div, .nap a, .nap span, .foot-about p { min-width: 0; overflow-wrap: anywhere; }
.split > *, .contact-grid > *, .two-col > *, .estimate .container > *, .hero .container > *, .page-hero .container > * { min-width: 0; }

/* v3.0 mobile menu: full sheet under the header, accordion groups, scroll locked behind it */
@media (max-width: 1100px) {
  body.nav-open { overflow: hidden; }
  body.nav-open .site-head { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.nav-open .nav { position: fixed; inset: var(--head-bottom, 70px) 0 0 0; width: auto; padding: 10px 16px calc(120px + env(safe-area-inset-bottom, 0px)); margin: 0; background: #fff; border-top: 1px solid var(--gray-100); box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 55; justify-self: stretch; animation: navIn .2s ease; }
  @keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  body.nav-open .nav > li { border-bottom: 1px solid var(--gray-100); }
  body.nav-open .nav > li > a { padding: 16px 6px; font-size: 1.06rem; font-weight: 600; font-family: var(--font-display); border-radius: 0; white-space: normal; }
  body.nav-open .nav > li > a:hover, body.nav-open .nav > li.open > a { background: none; color: var(--green); }
  body.nav-open .nav > li > a svg { width: 18px; height: 18px; transition: transform .2s; }
  body.nav-open .nav > li.open > a svg { transform: rotate(180deg); }
  body.nav-open .drop, body.nav-open .drop.mega, body.nav-open .drop.mega.areas { position: static; display: none; width: auto; min-width: 0; left: auto; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 14px 6px; gap: 2px; grid-template-columns: 1fr; }
  body.nav-open .nav > li.open > .drop { display: grid; }
  body.nav-open .drop a { padding: 11px 10px; font-size: .98rem; }
  body.nav-open .drop.mega .mcol { padding-bottom: 6px; }
  body.nav-open .drop.mega .mcol b, body.nav-open .drop.mega .mcol a.mhead { display: block; font-size: .72rem; padding: 12px 10px 4px; margin: 0; border: 0; color: var(--green); }
  body.nav-open .drop.mega .mcol a { padding: 10px 10px; font-size: .98rem; }
  body.nav-open .drop.mega .mall { margin: 4px 0 0; padding: 12px 10px; border-top: 1px solid var(--gray-100); }
  body.nav-open .drop.mega .mfind { display: none; }
  body.nav-open .drop.mega.areas { grid-template-columns: 1fr 1fr; column-gap: 10px; }
  body.nav-open .drop.mega.areas .mall { grid-column: 1 / -1; }
}
@media (max-width: 420px) { body.nav-open .drop.mega.areas { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  body.nav-open .nav > li .drop.mega, body.nav-open .nav > li.open .drop.mega, body.nav-open .nav > li:hover .drop.mega, body.nav-open .nav > li:focus-within .drop.mega { transform: none; left: auto; width: auto; }
  body.nav-open .nav > li:not(.open):hover > .drop, body.nav-open .nav > li:not(.open):focus-within > .drop { display: none; }
}

/* v3.1 videos everywhere: lite embeds, shorts rows, library, home feed */
.yt-lite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #000; cursor: pointer; border-radius: inherit; overflow: hidden; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: .3s; }
.yt-lite:hover img { opacity: 1; transform: scale(1.02); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% center / 30px no-repeat; box-shadow: 0 0 0 10px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.4); transition: .2s; }
.yt-lite:hover .yt-play { transform: scale(1.08); }
.video-main iframe, .video-main video { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
.section-dark .short { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.feed-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 34px; flex-wrap: wrap; }
.feed-head h2 { max-width: 20ch; margin-bottom: 10px; }
.feed-head .lead { max-width: 56ch; margin: 0; }
.feed-follow { display: flex; gap: 10px; flex-wrap: wrap; }
.feed-follow .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn-line-dark { border: 1.5px solid var(--gray-200); color: var(--ink); background: #fff; }
.btn-line-dark:hover { border-color: var(--ink); text-decoration: none; }
.vlib { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vtile { display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); overflow: hidden; padding: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; font: inherit; color: inherit; }
.vtile[hidden] { display: none; }
.vtile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vt-img { position: relative; display: block; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.vt-img img { width: 100%; height: 100%; object-fit: cover; }
.vt-img i { position: absolute; left: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% center / 16px no-repeat; }
.vt-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.vt-body small { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.vt-body b { font-family: var(--font-display); font-size: .95rem; line-height: 1.3; color: var(--ink); }
@media (max-width: 1100px) { .vlib { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vlib { grid-template-columns: 1fr 1fr; gap: 10px; } .vt-body { padding: 10px 10px 12px; } .vt-body b { font-size: .82rem; } .shorts { gap: 10px; } .short .play { font-size: .74rem; inset: auto 8px 10px; } .feed-follow .btn { flex: 1 1 100%; } }

/* v3.2 offers popup */
.r-offers { background: none; border: 1px solid rgba(255,255,255,.25); color: var(--lime); border-radius: 999px; padding: 3px 12px; font: 600 .78rem var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.r-offers svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.r-offers:hover { background: rgba(111,209,61,.12); }
.offer-modal { position: fixed; inset: 0; z-index: 120; background: rgba(6,14,10,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.offer-modal.open { opacity: 1; visibility: visible; }
.offer-sheet { position: relative; width: min(980px, 100%); max-height: min(92dvh, 760px); background: #fff; border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 38% 1fr; box-shadow: 0 40px 120px rgba(0,0,0,.5); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.offer-modal.open .offer-sheet { transform: none; }
.offer-sheet > .close { position: absolute; right: 14px; top: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gray-100); background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.offer-sheet > .close:hover { background: var(--gray-50); }
.offer-media { position: relative; background: var(--night); color: #fff; min-height: 100%; isolation: isolate; }
.offer-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 70%; z-index: -2; }
.offer-media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,23,16,.35) 0%, rgba(10,23,16,.55) 45%, rgba(10,23,16,.96) 100%); }
.om-body { position: absolute; inset: auto 0 0 0; padding: 26px 26px 28px; }
.om-body .g-pill { margin-bottom: 14px; font-size: .8rem; }
.om-body h3 { color: #fff; font-size: 1.45rem; line-height: 1.15; margin-bottom: 8px; }
.om-body p { color: #c5d2c9; font-size: .92rem; margin: 0 0 16px; }
.om-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.om-badges img { background: #fff; border-radius: 10px; padding: 6px; width: 100%; aspect-ratio: 1; object-fit: contain; }
.offer-body { padding: 30px 32px 24px; overflow-y: auto; max-height: min(92dvh, 760px); }
.offer-body .kicker { margin-bottom: 6px; }
.offer-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 18px; max-width: 22ch; }
.coupons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.coupon { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 12px; border: 1.5px dashed var(--gray-200); border-radius: 12px; cursor: pointer; background: var(--gray-50); transition: .15s; }
.coupon input { position: absolute; opacity: 0; pointer-events: none; }
.coupon .c-ico { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--gray-100); color: var(--green); display: grid; place-items: center; margin-bottom: 6px; }
.coupon .c-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coupon b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.coupon .c-name { font-weight: 600; font-size: .84rem; color: var(--ink); line-height: 1.25; margin-top: 4px; }
.coupon small { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.coupon:hover { border-color: var(--green); }
.coupon:has(input:checked) { border-style: solid; border-color: var(--green); background: #f3faee; box-shadow: 0 0 0 3px rgba(46,130,0,.12); }
.coupon:has(input:checked) b { color: var(--green); }
.coupon:has(input:checked)::after { content: "✓"; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.offer-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.offer-fields input { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); padding: 13px 14px; font: 500 .98rem var(--font-body); background: #fff; }
.offer-fields input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,130,0,.12); }
.offer-fields input.field-err { border-color: #d64545; }
.offer-cta { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; margin-bottom: 10px; }
.offer-cta .btn { justify-content: center; padding: 14px 12px; }
.offer-cta .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.offer-body .consent { font-size: .72rem; margin: 2px 0 8px; }
.offer-body .hp { position: absolute; left: -9999px; }
.offer-fine { font-size: .76rem; color: var(--muted); border-top: 1px solid var(--gray-100); padding-top: 10px; }
.offer-fine summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.offer-fine ul { list-style: disc; padding-left: 1.2em; margin-top: 8px; display: grid; gap: 3px; }
@media (max-width: 820px) {
  .offer-modal { padding: 0; place-items: end center; }
  .offer-sheet { grid-template-columns: 1fr; width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; overflow-y: auto; transform: translateY(40px); }
  .offer-media { min-height: 150px; }
  .offer-media > img { object-position: 20% 62%; }
  .om-body { position: relative; padding: 70px 18px 14px; }
  .om-body h3 { font-size: 1.12rem; margin: 0; }
  .om-body p, .om-badges { display: none; }
  .om-body .g-pill { margin-bottom: 8px; }
  .offer-body { padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: none; overflow: visible; }
  .offer-body h2 { font-size: 1.22rem; margin-bottom: 12px; }
  .coupons { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .coupon { padding: 10px 10px 9px; }
  .coupon .c-ico { display: none; }
  .coupon b { font-size: 1.18rem; }
  .coupon .c-name { font-size: .78rem; }
  .coupon small { font-size: .68rem; }
  .offer-fields, .offer-cta { grid-template-columns: 1fr; }
  .r-offers { display: none; }
}

/* v3.3 nine credentials always sit in full rows: 9 across, then 3 x 3 */
@media (max-width: 1100px) { .cert-band-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .cert-band-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .cert-tile { padding: 10px 6px 10px; } .cert-tile b { font-size: .64rem; } .cert-tile em { font-size: .56rem; letter-spacing: .02em; } .cert-tile .logo-box { height: 54px; } .cert-tile img { max-height: 50px; } }

/* v3.4 phone: long card stacks become swipe rows, the city finder scrolls inside its card */
@media (max-width: 700px) {
  .cards, .icards, .icards.three, .icards.three:has(> :nth-child(6)), .value, .features, .steps, .shorts, .awards, main .posts:not([data-postgrid] .posts), .overview, .ba-grid.four {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  .cards::-webkit-scrollbar, .icards::-webkit-scrollbar, .value::-webkit-scrollbar, .features::-webkit-scrollbar, .steps::-webkit-scrollbar, .shorts::-webkit-scrollbar, .awards::-webkit-scrollbar, .posts::-webkit-scrollbar, .overview::-webkit-scrollbar, .ba-grid.four::-webkit-scrollbar { display: none; }
  .cards > *, .icards > *, .value > *, .features > *, .steps > *, .shorts > *, .awards > *, main .posts:not([data-postgrid] .posts) > *, .overview > *, .ba-grid.four > * { scroll-snap-align: start; min-width: 0; }
  .shorts { grid-auto-columns: 46%; }
  .awards { grid-auto-columns: 42%; }
  .ba-grid.four { grid-auto-columns: 78%; }
  .ba-grid.four .ba { aspect-ratio: 4 / 3; }
  .overview > .ocard.wide { grid-column: auto; }
  .ocard.photo { min-height: 320px; }
  .thresh { grid-template-columns: 1fr 1fr; }
  /* swipe hint under every swipe row */
  .cards::after, .icards::after { content: none; }
  .finder .city-list { grid-template-columns: 1fr 1fr; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; border-top: 1px solid var(--gray-100); margin-top: 12px; padding-top: 8px; }
  .finder .city-list a { font-size: .86rem; padding: 8px 6px; }
  .finder { padding: 18px 14px; }
  .county-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .county-tabs::-webkit-scrollbar { display: none; }
  .county-tabs button { white-space: nowrap; flex: none; }
  .site-foot .foot-grid > div:nth-child(2) ul, .site-foot .foot-grid > div:nth-child(3) ul { columns: 2; column-gap: 18px; }
}
.offer-fields input.wide { grid-column: 1 / -1; }
.legal-modal { z-index: 140; }

/* v3.5 About mega menu: rich links + photo card */
.drop.mega.about { width: 640px; grid-template-columns: 1.25fr 1fr; gap: 6px 18px; left: 50%; }
.drop.mega .mcol a.mrich { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 9px 10px; border-radius: 10px; }
.drop.mega .mcol a.mrich .mi { width: 38px; height: 38px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--gray-100); color: var(--green); display: grid; place-items: center; }
.drop.mega .mcol a.mrich .mi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop.mega .mcol a.mrich strong { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.drop.mega .mcol a.mrich small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.drop.mega .mcol a.mrich:hover .mi { background: var(--green); color: #fff; border-color: var(--green); }
.drop.mega a.mcard { position: relative; display: block; padding: 0; border-radius: 12px; overflow: hidden; min-height: 210px; background: var(--night); color: #fff; }
.drop.mega a.mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 60%; transition: transform .4s; }
.drop.mega a.mcard:hover img { transform: scale(1.05); }
.drop.mega a.mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,23,16,.05) 20%, rgba(10,23,16,.92) 100%); }
.drop.mega a.mcard .mcard-body { position: absolute; inset: auto 14px 14px 14px; z-index: 1; display: grid; gap: 3px; }
.drop.mega a.mcard .stars { color: var(--gold); letter-spacing: 1px; font-size: .85rem; }
.drop.mega a.mcard strong { font-family: var(--font-display); font-size: .95rem; line-height: 1.25; color: #fff; }
.drop.mega a.mcard small { font-size: .78rem; color: var(--lime); font-weight: 600; }
@media (max-width: 1100px) { body.nav-open .drop.mega a.mcard { display: none; } body.nav-open .drop.mega .mcol a.mrich { grid-template-columns: 1fr; padding: 10px; } body.nav-open .drop.mega .mcol a.mrich .mi, body.nav-open .drop.mega .mcol a.mrich small { display: none; } body.nav-open .drop.mega .mcol a.mrich strong { font-weight: 500; font-size: .98rem; } }

/* v4.0 client review round: wordmark, emergency line + email in the top bar, trust video, linked awards, trade specific cert band, video grid, static before/after */
.site-head .logo { display: inline-flex; align-items: center; gap: 12px; }
.site-head .logo img { height: 74px; }
.site-head .wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.site-head .wordmark b { font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; color: var(--green); letter-spacing: -.01em; }
.site-head .wordmark small { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 1240px) { .site-head .wordmark b { font-size: 1.05rem; } .site-head .wordmark small { font-size: .68rem; } }
@media (max-width: 820px) { .site-head .logo img { height: 56px; } }
@media (max-width: 400px) { .site-head .wordmark { display: none; } }
.ribbon .r-right { flex-wrap: wrap; row-gap: 2px; }
.ribbon .em a { color: #fff; margin-left: 4px; }
.ribbon .r-mail { display: inline-flex; align-items: center; gap: 6px; color: #d9e6dc; font-weight: 500; }
.ribbon .r-mail svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 1100px) { .ribbon .r-mail { display: none; } }
@media (max-width: 600px) { .ribbon .r-right { justify-content: center; width: 100%; font-size: .8rem; gap: 10px; } .ribbon .em { display: inline-flex; } }
.svc-ribbon a { display: inline-flex; align-items: center; gap: 22px; padding: 13px 22px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.svc-ribbon a::after { content: ""; width: 6px; height: 6px; background: rgba(255,255,255,.7); transform: rotate(45deg); }
.svc-ribbon a:hover { text-decoration: none; background: rgba(255,255,255,.12); }
.svc-ribbon:hover .track { animation-play-state: paused; }
/* trust video under the hero */
.trust-video { background: var(--night); color: #fff; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,.06); }
.trust-video .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tv-video { border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); background: #000; aspect-ratio: 16 / 9; }
.tv-video .yt-lite, .tv-video .yt-frame, .tv-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.tv-side h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 12px; }
.tv-side > p { color: #c5d2c9; margin-bottom: 20px; }
.tv-side .btn { margin-top: 18px; }
.awards.compact { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.awards.compact .award { background: #fff; border-radius: 10px; padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); text-decoration: none !important; transition: transform .2s; }
.awards.compact .award:hover { transform: translateY(-3px); }
.awards.compact .award img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.awards.compact .award b { font-size: .68rem; font-family: var(--font-display); line-height: 1.1; }
.awards.compact .award span { display: none; }
a.award { text-decoration: none !important; color: inherit; }
a.award:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
@media (max-width: 1100px) { .trust-video .container { grid-template-columns: 1fr; } .awards.compact { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .awards.compact { grid-template-columns: repeat(4, 1fr); } }
/* cert band with fewer badges on a trade page */
.cert-band-grid.n1, .cert-band-grid.n2, .cert-band-grid.n3, .cert-band-grid.n4, .cert-band-grid.n5, .cert-band-grid.n6 { justify-content: center; }
.cert-band-grid.n1 { grid-template-columns: minmax(0, 340px); }
.cert-band-grid.n2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.cert-band-grid.n3 { grid-template-columns: repeat(3, minmax(0, 260px)); }
.cert-band-grid.n4 { grid-template-columns: repeat(4, minmax(0, 240px)); }
.cert-band-grid.n5 { grid-template-columns: repeat(5, minmax(0, 220px)); }
.cert-band-grid.n6 { grid-template-columns: repeat(6, minmax(0, 200px)); }
.cert-band-grid.n10 { grid-template-columns: repeat(5, 1fr); }
.cert-band-grid.n1 .cert-tile, .cert-band-grid.n2 .cert-tile { padding: 22px 18px 18px; }
.cert-band-grid.n1 .cert-tile .logo-box, .cert-band-grid.n2 .cert-tile .logo-box { height: 120px; }
.cert-band-grid.n1 .cert-tile img, .cert-band-grid.n2 .cert-tile img { max-height: 112px; }
.cert-band-grid.n1 .cert-tile b, .cert-band-grid.n2 .cert-tile b { font-size: .95rem; }
.cert-band-grid.n1 .cert-tile .org, .cert-band-grid.n2 .cert-tile .org { font-size: .8rem; }
@media (max-width: 1100px) { .cert-band-grid.n10 { grid-template-columns: repeat(5, 1fr); } .cert-band-grid.n4, .cert-band-grid.n5, .cert-band-grid.n6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cert-band-grid.n10 { grid-template-columns: repeat(2, 1fr); } .cert-band-grid.n2, .cert-band-grid.n3, .cert-band-grid.n4, .cert-band-grid.n5, .cert-band-grid.n6 { grid-template-columns: repeat(2, 1fr); } .cert-band-grid.n1 { grid-template-columns: 1fr; } }
/* video grid under the featured player */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.section-dark .vtile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section-dark .vt-body b { color: #fff; }
.section-dark .vt-body small { color: var(--lime); }
.vtile.playing .vt-img { aspect-ratio: 16 / 9; }
.vtile.playing iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-main .yt-frame { border-radius: inherit; overflow: hidden; }
@media (max-width: 1100px) { .vgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 700px) { .vgrid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scrollbar-width: none; } .vgrid > * { scroll-snap-align: start; } }
/* the client's own before and after composites keep their baked labels */
.ba.static { margin: 0; aspect-ratio: auto; background: var(--gray-50); border: 1px solid var(--gray-100); display: flex; flex-direction: column; }
.ba-grid.four .ba.static { aspect-ratio: 1 / 1; }
.ba.static img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba.static .cap { position: absolute; left: 10px; bottom: 10px; }
@media (max-width: 1100px) { .ba-grid.four .ba.static { aspect-ratio: 4 / 3; } }
/* photo framed with certification badges, food bank row, document lightbox */
.split-media.badge-frame { position: relative; }
.badge-strip { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; justify-content: center; background: rgba(255,255,255,.94); border-radius: 12px; padding: 8px 10px; }
.badge-strip img { height: 44px; width: auto; object-fit: contain; }
@media (max-width: 540px) { .badge-strip img { height: 32px; } }
.food-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.food-row img:first-child { height: 64px; width: auto; background: #fff; border: 1px solid var(--gray-100); border-radius: 10px; padding: 8px 12px; }
.food-row img:last-child { height: 80px; width: 120px; object-fit: cover; border-radius: 10px; }
.features.covers .feature { text-align: left; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.badge-row img { height: 56px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border: 1px solid var(--gray-100); border-radius: 10px; padding: 5px 7px; }
.docs.big { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.docs.big .doc { display: block; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r); padding: 12px; color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.docs.big .doc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.docs.big .doc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--r-sm); border: 1px solid var(--gray-100); }
.docs.big .doc span { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-family: var(--font-display); font-size: .92rem; padding: 12px 4px 2px; }
.docs.big .doc span em { font-style: normal; font-size: .72rem; color: var(--green); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 860px) { .docs.big { grid-template-columns: 1fr; } .docs.big .doc img { aspect-ratio: auto; } }
.modal .box.doc { background: #fff; width: min(96vw, 900px); max-height: 92vh; aspect-ratio: auto; overflow: auto; border-radius: var(--r); }
.modal .box.doc img { width: 100%; height: auto; display: block; }
.split-media .badge-strip img { position: static; height: 44px; width: auto; inset: auto; object-fit: contain; }
@media (max-width: 540px) { .split-media .badge-strip img { height: 30px; } }
/* full rows on the credentials page; before/after tiles keep the whole composite visible */
.cert-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cert-grid { grid-template-columns: 1fr; } }
.features.covers { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .features.covers { grid-template-columns: 1fr; } }
.ba-grid.four .ba { aspect-ratio: 4 / 3; }
.ba-grid.four .ba.static { aspect-ratio: 4 / 3; background: #0f1d15; }
.ba.static img { object-fit: contain; }
@media (max-width: 700px) { .ba-grid.four .ba, .ba-grid.four .ba.static { aspect-ratio: 4 / 3; } }
/* odd badge counts still end on a full row on phones */
@media (max-width: 700px) { .cert-band-grid.n3 .cert-tile:last-child, .cert-band-grid.n5 .cert-tile:last-child { grid-column: span 2; } .cert-band-grid.n3 .cert-tile:last-child .logo-box, .cert-band-grid.n5 .cert-tile:last-child .logo-box { height: 72px; } }

/* v4.1 home headline: all services named, but compact and clean */
.hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.7rem); max-width: 19ch; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.hero h1 em { display: inline; }
.hero .lead { font-size: 1.02rem; margin-bottom: 24px; }
@media (max-width: 820px) { .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); max-width: none; } }
/* top bar: everything centered, on one line when it fits and centered rows when it wraps */
.ribbon .container { justify-content: center; text-align: center; gap: 10px 34px; }
.ribbon .r-left, .ribbon .r-right { justify-content: center; flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 1240px) { .ribbon .r-left span:nth-child(5), .ribbon .r-left span:nth-child(4) { display: none; } }
/* awards under the hero on phones: a plain 4 by 3 grid, never a swipe row */
@media (max-width: 700px) {
  .trust-video .awards.compact { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
  .trust-video .awards.compact .award { min-width: 0; padding: 8px 4px 6px; }
  .trust-video .awards.compact .award img { height: 40px; }
  .trust-video .awards.compact .award b { font-size: .62rem; }
}

/* v4.2 phones: every card section stacks one under the other. Only the video and review rows stay horizontal, with arrows. */
@media (max-width: 700px) {
  .cards, .icards, .icards.three, .icards.three:has(> :nth-child(6)), .value, .features, .steps, main .posts:not([data-postgrid] .posts), .overview, .ba-grid.four, .awards:not(.compact) {
    display: grid; grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; gap: 14px;
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0;
  }
  .awards:not(.compact) { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .features.two { grid-template-columns: 1fr; }
  .ba-grid.four .ba, .ba-grid.four .ba.static { aspect-ratio: 4 / 3; }
  .overview > .ocard.wide { grid-column: auto; }
  .steps .step { padding: 22px 20px; }
}
/* arrows + hint under horizontal rows (videos, short clips, reviews) */
.swipe-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.swipe-bar span { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.section-dark .swipe-bar span { color: #a9b8ae; }
.swipe-bar button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gray-200); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: .15s; }
.swipe-bar button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.section-dark .swipe-bar button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff; }
.swipe-bar button:disabled { opacity: .3; cursor: default; }
.rev-scroll, .vgrid, .shorts { scroll-behavior: smooth; }
/* thank-you: chosen special */
.thanks .offer-held { display: inline-block; margin: 0 auto 22px; padding: 12px 18px; border-radius: 12px; background: #eaf6ea; color: #14532d; font-weight: 600; }
.thanks .offer-held b { color: #166534; }

/* v5.0 hero proof: video + certifications + awards inside every hero (client's top request), lighter overlays so the vans read */
.hero-proof { margin-top: 22px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: stretch; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.hero-proof.all { grid-template-columns: 320px minmax(0, 1fr); }
.hp-video .hp-yt { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; position: relative; padding: 0; border: 0; background: #0b1a12; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hp-video .hp-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-video .hp-yt .yt-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.hp-video .hp-yt .yt-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.hp-video .hp-yt:hover .yt-play { transform: scale(1.06); }
.hp-cap { display: block; margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cfe6d4; }
.hp-body { display: grid; gap: 12px; align-content: center; min-width: 0; }
.hp-label { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #a9d5b2; font-weight: 800; margin-bottom: 8px; }
.hp-certs, .hp-awards { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-cert { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #0f1f16; border-radius: 10px; padding: 5px 11px 5px 6px; font-size: .78rem; font-weight: 700; text-decoration: none; line-height: 1.1; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s; }
.hp-cert:hover { transform: translateY(-1px); } .hp-cert img { width: 30px; height: 30px; object-fit: contain; }
.hp-cert.eco { background: #e7f5ea; color: #14532d; } .hp-cert.eco svg { width: 22px; height: 22px; color: var(--green); }
.hp-award { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 10px; padding: 5px 12px 5px 6px; text-decoration: none; transition: background .15s; }
.hp-award:hover { background: rgba(255,255,255,.18); } .hp-award img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; }
.hp-award b { display: block; font-size: .82rem; line-height: 1.1; } .hp-award small { display: block; font-size: .68rem; color: #cfe6d4; line-height: 1.2; margin-top: 2px; }
.hero .hero-shade { background: linear-gradient(90deg, rgba(10,23,16,.9) 0%, rgba(10,23,16,.78) 48%, rgba(10,23,16,.42) 100%), linear-gradient(180deg, rgba(10,23,16,.15), rgba(10,23,16,.55)); }
.page-hero .bg img { opacity: .62; }
.page-hero .bg::after { background: linear-gradient(90deg, rgba(10,23,16,.9) 0%, rgba(10,23,16,.76) 45%, rgba(10,23,16,.38) 100%), linear-gradient(180deg, rgba(10,23,16,.05), rgba(10,23,16,.5)); }
@media (max-width: 1100px) { .hero-proof, .hero-proof.all { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 900px) { .hero-proof, .hero-proof.all { grid-template-columns: 1fr; } .hp-video .hp-yt { max-width: 460px; } }
@media (max-width: 700px) { .hero-proof { padding: 12px; margin-top: 16px; gap: 12px; border-radius: 14px; } .hp-cert { font-size: .74rem; padding: 4px 9px 4px 5px; } .hp-cert img { width: 26px; height: 26px; } .hp-award { padding: 4px 10px 4px 5px; } .hp-award img { width: 28px; height: 28px; } .hero .hero-shade { background: linear-gradient(180deg, rgba(10,23,16,.86) 0%, rgba(10,23,16,.8) 60%, rgba(10,23,16,.7) 100%); } }

/* v5.1: the proof strip spans the whole hero width under the copy and the form; awards grid balanced now that HomeAdvisor is gone (10 tiles) */
.hero .container > .hero-proof, .page-hero .container > .hero-proof { grid-column: 1 / -1; margin-top: 28px; }
.hero-proof, .hero-proof.all { grid-template-columns: 340px minmax(0, 1fr); }
.awards:not(.compact) { grid-template-columns: repeat(5, 1fr); }
.awards.compact { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .hero-proof, .hero-proof.all { grid-template-columns: 280px minmax(0, 1fr); } .awards:not(.compact), .awards.compact { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px) { .hero-proof, .hero-proof.all { grid-template-columns: 1fr; } .hp-video .hp-yt { max-width: 100%; } }
@media (max-width: 700px) { .hero .container > .hero-proof, .page-hero .container > .hero-proof { margin-top: 18px; } .awards:not(.compact), .awards.compact { grid-template-columns: repeat(2, 1fr); } }

/* v5.2 home hero: the full award wall (every Angi year, BBB, Nextdoor, Google) as small tiles */
.hp-awards.all { gap: 8px; }
.hp-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 66px; padding: 6px 8px 5px; background: #fff; color: #0f1f16; border-radius: 10px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s; }
.hp-badge:hover { transform: translateY(-1px); } .hp-badge img { width: 42px; height: 42px; object-fit: contain; } .hp-badge b { font-size: .64rem; font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
@media (max-width: 700px) { .hp-badge { min-width: 58px; padding: 5px 6px 4px; } .hp-badge img { width: 36px; height: 36px; } }

/* v5.3 first screen proof: the card sits in the hero's right column (video on top, licenses, awards); the estimate form moves to a band right under the hero; phones get a badge strip under the headline */
.hero .container > .hero-proof, .page-hero .container > .hero-proof { grid-column: auto; margin-top: 0; }
.hero-proof, .hero-proof.all { grid-template-columns: 1fr; gap: 12px; padding: 12px; align-content: start; align-self: center; }
.hero-proof .hp-video .hp-yt { max-width: none; }
.hero-proof .hp-body { gap: 10px; } .hero-proof .hp-label { margin-bottom: 6px; }
.hero .container, .page-hero .container { align-items: center; }
@media (min-width: 821px) {
  .hero .container { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px); }
  .page-hero .container { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 500px); }
}
@media (max-width: 820px) {
  .hero .container, .page-hero .container { grid-template-columns: 1fr; }
  .hero .container > .hero-proof, .page-hero .container > .hero-proof { max-width: 560px; }
}
.hero-proof .hp-cert { font-size: .74rem; padding: 4px 9px 4px 5px; } .hero-proof .hp-cert img { width: 26px; height: 26px; }
.hero-proof .hp-badge { min-width: 58px; padding: 5px 6px 4px; } .hero-proof .hp-badge img { width: 36px; height: 36px; }
.hero-proof .hp-award { padding: 4px 10px 4px 5px; } .hero-proof .hp-award img { width: 28px; height: 28px; }
.quiz-band { background: linear-gradient(180deg, #0a1710 0%, #0a1710 40%, var(--bg, #f4f7f4) 40%); padding: 0 0 8px; }
.quiz-band .container { display: flex; justify-content: center; }
.quiz-band .quiz, .quiz-band .lead-card { width: 100%; max-width: 760px; margin: 0 auto; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.hp-mini { display: none; }
@media (max-width: 700px) {
  .hero-proof, .hero-proof.all { padding: 10px; }
  .quiz-band { padding-bottom: 4px; }
}

/* v5.4 tighter hero so the whole proof card sits inside a 1440x900 first screen */
@media (min-width: 901px) {
  .hero .container, .page-hero .container { padding-block: 40px 44px; }
  .hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
  .page-hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
  .hero .lead, .page-hero .lead { font-size: 1rem; }
  .hero-proof .hp-badge { min-width: 54px; padding: 4px 5px 3px; } .hero-proof .hp-badge img { width: 32px; height: 32px; } .hero-proof .hp-badge b { font-size: .6rem; }
  .hero-proof .hp-label { font-size: .64rem; margin-bottom: 5px; } .hero-proof .hp-cap { font-size: .68rem; margin-top: 6px; }
}

/* v5.5 no-form heroes (Our work, About, Services, Service areas, License): two columns when the proof card is present, single column otherwise; phones keep the copy above the card */
@media (min-width: 821px) { .page-hero.no-form .container:has(> .hero-proof) { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 500px); padding-block: 40px 44px; } }

/* v5.6 phones: the video comes first, then the headline and copy, then the licenses and awards card (desktop unchanged) */
@media (max-width: 820px) {
  .hero .container, .page-hero .container { padding-top: 26px; row-gap: 22px; }
  .hero .container > .hero-proof, .page-hero .container > .hero-proof { display: contents; }
  .hero .container > .hero-proof > .hp-video, .page-hero .container > .hero-proof > .hp-video { order: -1; width: 100%; max-width: 560px; }
  .hero .container > .hero-proof > .hp-body, .page-hero .container > .hero-proof > .hp-body { width: 100%; max-width: 560px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hero .container > .hero-proof > .hp-video .hp-cap, .page-hero .container > .hero-proof > .hp-video .hp-cap { margin-top: 8px; }
  .page-hero .container .crumb { margin-bottom: 12px; }
}

/* v5.7 real logos in the hero card: white tiles with the full certification logos, awards BBB, Angi and Google large */
.hp-logos { display: grid; gap: 8px; }
.hp-logos.n1 { grid-template-columns: 1fr; } .hp-logos.n2 { grid-template-columns: repeat(2, 1fr); } .hp-logos.n3 { grid-template-columns: repeat(3, 1fr); } .hp-logos.n4 { grid-template-columns: repeat(4, 1fr); }
.hp-logos.n5, .hp-logos.n6, .hp-logos.n7, .hp-logos.n8, .hp-logos.n9, .hp-logos.n10 { grid-template-columns: repeat(5, 1fr); }
.hp-logo { display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 6px; height: 64px; box-shadow: 0 4px 14px rgba(0,0,0,.18); text-decoration: none; color: #14532d; transition: transform .15s ease, box-shadow .15s ease; min-width: 0; }
.hp-logo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.hp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hp-logos.n1 .hp-logo, .hp-logos.n2 .hp-logo, .hp-logos.n3 .hp-logo { height: 92px; }
.hp-logos.n4 .hp-logo { height: 76px; }
.hp-logo.eco { grid-auto-flow: column; gap: 8px; background: #e7f5ea; font-size: .8rem; font-weight: 800; line-height: 1.15; text-align: left; } .hp-logo.eco svg { width: 28px; height: 28px; color: var(--green); }
.hp-awards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hp-awards3 .hp-logo { height: 78px; padding: 8px; }
.hp-awcap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 0; text-align: center; font-size: .68rem; line-height: 1.3; color: #cfe6d4; font-weight: 600; }
.hero-proof .hp-body { gap: 12px; }
@media (max-width: 820px) {
  .hero .container > .hero-proof > .hp-body, .page-hero .container > .hero-proof > .hp-body { display: none; }
  .hp-mini { display: grid; gap: 12px; margin: 4px 0 18px; width: 100%; max-width: 560px; }
  .hp-mini .hp-label { font-size: .66rem; margin-bottom: 6px; }
  .hp-mini .hp-logo { width: auto; height: 64px; display: grid; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  .hp-mini .hp-logo img { width: 100%; height: 100%; }
  .hp-mini .hp-logos.n5, .hp-mini .hp-logos.n6, .hp-mini .hp-logos.n7, .hp-mini .hp-logos.n8, .hp-mini .hp-logos.n9, .hp-mini .hp-logos.n10 { grid-template-columns: repeat(4, 1fr); }
  .hp-mini .hp-logos.n1 .hp-logo, .hp-mini .hp-logos.n2 .hp-logo, .hp-mini .hp-logos.n3 .hp-logo { height: 88px; }
  .hp-mini .hp-awards3 .hp-logo { height: 74px; }
  .hp-mini .hp-awcap { font-size: .64rem; }
}
/* v5.7b explicit logo heights (a percentage height inside an auto sized grid row resolves to auto, so the logos spilled out of their tiles) */
.hp-logo img { height: 52px; }
.hp-logos.n1 .hp-logo img, .hp-logos.n2 .hp-logo img, .hp-logos.n3 .hp-logo img { height: 80px; }
.hp-logos.n4 .hp-logo img { height: 64px; }
.hp-awards3 .hp-logo img { height: 62px; }
@media (max-width: 820px) {
  .hp-mini .hp-logo img { height: 52px; }
  .hp-mini .hp-logos.n1 .hp-logo img, .hp-mini .hp-logos.n2 .hp-logo img, .hp-mini .hp-logos.n3 .hp-logo img { height: 76px; }
  .hp-mini .hp-awards3 .hp-logo img { height: 58px; }
}
@media (max-width: 820px) { .hp-mini .hp-label { display: block; } .hp-mini .hp-awcap span { display: block; } }

/* v5.8 question videos grid on service pages (old site habit: one video per question) */
.qvids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.qvids figure { margin: 0; }
.qvids .yt-lite { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; padding: 0; border: 0; background: #0b1a12; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.qvids .yt-lite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qvids .yt-lite .yt-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.qvids .yt-lite .yt-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.qvids figcaption { margin-top: 10px; font-weight: 600; font-size: .95rem; line-height: 1.35; }
@media (max-width: 900px) { .qvids { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 540px) { .qvids { grid-template-columns: 1fr; } }

/* v5.9 icards read as light cards on every non dark section (white, gray, mint), not only on gray */
.section:not(.section-dark) .icard { background: #fff; border-color: var(--gray-100); }
.section:not(.section-dark) .icard h3 { color: var(--ink); }
.section:not(.section-dark) .icard p { color: var(--ink-2); }
.section:not(.section-dark) .icard .ico { background: var(--gray-50); border-color: var(--gray-100); color: var(--green); }

/* v6.0 the estimate form lives inside the hero, full width under the copy and the proof card, on the same dark photo background (no white strip behind it) */
.hero .container > .quiz-row, .page-hero .container > .quiz-row { grid-column: 1 / -1; display: flex; justify-content: center; min-width: 0; }
.quiz-row .quiz, .quiz-row .lead-card { width: 100%; max-width: 760px; margin: 0 auto; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hero:has(.quiz-row) .container, .page-hero:has(.quiz-row) .container { row-gap: 32px; }
.hero:has(.quiz-row) .hero-scroll { display: none; }
@media (min-width: 901px) { .hero:has(.quiz-row) .container, .page-hero:has(.quiz-row) .container { padding-bottom: 64px; } }
@media (max-width: 820px) { .hero:has(.quiz-row) .container, .page-hero:has(.quiz-row) .container { row-gap: 22px; padding-bottom: 40px; } }

/* v6.1 client video 2026-09-30: bigger logos, a smaller video, a louder "Certified for every service" label, no Google pill on phones */
.hero-proof .hp-video .hp-yt { width: 84%; margin-inline: auto; }
.hero-proof .hp-video .hp-cap { display: block; text-align: center; }
.hp-label, .hero-proof .hp-label, .hp-mini .hp-label { font-size: .86rem; letter-spacing: .1em; color: #c9f7d0; font-weight: 800; margin-bottom: 8px; }
.hp-label::before { content: ""; display: inline-block; width: 18px; height: 3px; background: var(--green); border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.hp-logo { height: 78px; padding: 7px; }
.hp-logo img { height: 64px; }
.hp-logos.n4 .hp-logo { height: 92px; } .hp-logos.n4 .hp-logo img { height: 78px; }
.hp-logos.n1 .hp-logo, .hp-logos.n2 .hp-logo, .hp-logos.n3 .hp-logo { height: 104px; } .hp-logos.n1 .hp-logo img, .hp-logos.n2 .hp-logo img, .hp-logos.n3 .hp-logo img { height: 90px; }
.hp-awards3 .hp-logo { height: 84px; } .hp-awards3 .hp-logo img { height: 68px; }
@media (min-width: 901px) { .hero-proof .hp-label { font-size: .8rem; margin-bottom: 7px; } }
@media (max-width: 820px) {
  .hero .g-pill, .page-hero .g-pill { display: none; }
  .hero-proof .hp-video .hp-yt, .hero .container > .hero-proof > .hp-video .hp-yt { width: 100%; }
  .hp-mini .hp-logo { height: 72px; } .hp-mini .hp-logo img { height: 58px; }
  .hp-mini .hp-logos.n1 .hp-logo, .hp-mini .hp-logos.n2 .hp-logo, .hp-mini .hp-logos.n3 .hp-logo { height: 96px; } .hp-mini .hp-logos.n1 .hp-logo img, .hp-mini .hp-logos.n2 .hp-logo img, .hp-mini .hp-logos.n3 .hp-logo img { height: 82px; }
  .hp-mini .hp-awards3 .hp-logo { height: 78px; } .hp-mini .hp-awards3 .hp-logo img { height: 62px; }
}

/* v6.2 estimate band: one deep green field with a slow aurora, a faint dot grid and rising sparks behind the form (Eyal: "something cool behind the form") */
.quiz-band.fx { position: relative; overflow: hidden; background: #0a1710; padding: 72px 0 80px; isolation: isolate; }
.quiz-band.fx .container { position: relative; z-index: 2; }
.fx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 80%); opacity: .7; }
.fx-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.fx-bg i:nth-child(1) { width: 720px; height: 720px; left: -180px; top: -260px; background: radial-gradient(circle, #2e8b3d 0%, rgba(46,139,61,0) 70%); animation: fxA 26s ease-in-out infinite alternate; }
.fx-bg i:nth-child(2) { width: 640px; height: 640px; right: -160px; top: -120px; background: radial-gradient(circle, #7ed957 0%, rgba(126,217,87,0) 70%); opacity: .38; animation: fxB 32s ease-in-out infinite alternate; }
.fx-bg i:nth-child(3) { width: 560px; height: 560px; left: 30%; bottom: -320px; background: radial-gradient(circle, #1fa37a 0%, rgba(31,163,122,0) 70%); opacity: .45; animation: fxC 38s ease-in-out infinite alternate; }
.fx-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(126,217,87,.9) 1.2px, transparent 2.2px), radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 2px), radial-gradient(circle, rgba(126,217,87,.6) 1.6px, transparent 2.8px); background-size: 220px 300px, 340px 420px, 480px 560px; background-position: 0 0, 120px 80px, 60px 200px; opacity: .55; animation: fxRise 22s linear infinite; }
@keyframes fxA { from { transform: translate(0,0) scale(1); } to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes fxB { from { transform: translate(0,0) scale(1); } to { transform: translate(-160px, 120px) scale(1.2); } }
@keyframes fxC { from { transform: translate(0,0) scale(1); } to { transform: translate(120px, -140px) scale(1.1); } }
@keyframes fxRise { from { background-position: 0 0, 120px 80px, 60px 200px; } to { background-position: 0 -600px, 120px -760px, 60px -920px; } }
.quiz-band.fx .quiz, .quiz-band.fx .lead-card { box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
@media (max-width: 820px) { .quiz-band.fx { padding: 40px 0 48px; } .fx-bg i { filter: blur(50px); } }
@media (prefers-reduced-motion: reduce) { .fx-bg i, .fx-bg::after { animation: none; } }

/* v6.3 soft wave dividers above and below the estimate band instead of a straight cut (Eyal); the top wave is the band color rising into the hero, the bottom wave is the next section's color rising into the band */
.quiz-band.fx { overflow: visible; --next-bg: var(--bg, #fff); }
.quiz-band.fx:has(+ .cert-band) { --next-bg: var(--gray-50); }
.quiz-band.fx:has(+ .svc-ribbon) { --next-bg: var(--green); }
.quiz-band.fx:has(+ .section-dark) { --next-bg: #0f1f16; }
.quiz-band.fx:has(+ .section-gray) { --next-bg: var(--gray-50); }
.quiz-band.fx:has(+ .section-mint) { --next-bg: #eef7f0; }
.quiz-band.fx .fx-bg { overflow: hidden; }
.quiz-band.fx .fx-top, .quiz-band.fx .fx-bottom { position: absolute; left: 0; right: 0; height: 84px; pointer-events: none; z-index: 1; display: block;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C180,92 360,8 560,34 C760,60 880,88 1080,50 C1240,20 1340,26 1440,44 L1440,90 L0,90 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C180,92 360,8 560,34 C760,60 880,88 1080,50 C1240,20 1340,26 1440,44 L1440,90 L0,90 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; }
.quiz-band.fx .fx-top { top: -83px; background: #0a1710; }
.quiz-band.fx .fx-bottom { bottom: -1px; background: var(--next-bg); transform: scaleX(-1); }
.quiz-band.fx { padding-bottom: 150px; }
.hero:has(+ .quiz-band.fx) .hero-scroll { display: none; }
.hero:has(+ .quiz-band.fx) .container, .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 96px; }
.quiz-band.fx + .cert-band { border-top: 0; }
@media (max-width: 820px) {
  .quiz-band.fx .fx-top, .quiz-band.fx .fx-bottom { height: 44px; }
  .quiz-band.fx .fx-top { top: -43px; }
  .quiz-band.fx { padding-bottom: 96px; }
  .hero:has(+ .quiz-band.fx) .container, .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 64px; }
}
/* v6.3b the band paints above the hero so the top wave overlaps the photo */
.quiz-band.fx { z-index: 3; }
.hero:has(+ .quiz-band.fx), .page-hero:has(+ .quiz-band.fx) { z-index: 1; }

/* v6.4 clean top divider: a brand green ribbon follows the wave just above the dark band, so the hero to form edge reads crisp instead of dark on dark */
.quiz-band.fx .fx-top2 { position: absolute; left: 0; right: 0; height: 84px; top: -95px; pointer-events: none; z-index: 1; display: block; background: linear-gradient(90deg, #3c9a45, #7ed957 55%, #3c9a45); opacity: .95;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C180,92 360,8 560,34 C760,60 880,88 1080,50 C1240,20 1340,26 1440,44 L1440,90 L0,90 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,52 C180,92 360,8 560,34 C760,60 880,88 1080,50 C1240,20 1340,26 1440,44 L1440,90 L0,90 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; }
.quiz-band.fx .fx-top { top: -84px; }
.hero:has(+ .quiz-band.fx) .container, .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 108px; }
@media (max-width: 820px) {
  .quiz-band.fx .fx-top2 { height: 44px; top: -51px; }
  .quiz-band.fx .fx-top { top: -44px; }
  .hero:has(+ .quiz-band.fx) .container, .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 72px; }
}

/* v6.5 Eyal: the bottom wave goes (straight edge as before, everywhere); only the home page keeps a top divider between the hero and the form: a gentle arc with a thin brand green edge */
.quiz-band.fx .fx-bottom { display: none; }
.quiz-band.fx { padding-bottom: 80px; }
.quiz-band.fx + .cert-band { border-top: 1px solid var(--gray-100); }
.page-hero + .quiz-band.fx .fx-top, .page-hero + .quiz-band.fx .fx-top2 { display: none; }
.page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 44px; }
.hero + .quiz-band.fx .fx-top, .hero + .quiz-band.fx .fx-top2 { height: 96px; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; }
.hero + .quiz-band.fx .fx-top { top: -95px; background: #0a1710; }
.hero + .quiz-band.fx .fx-top2 { top: -98px; background: var(--green); opacity: 1; }
.hero:has(+ .quiz-band.fx) .container { padding-bottom: 120px; }
@media (max-width: 820px) {
  .quiz-band.fx { padding-bottom: 48px; }
  .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 40px; }
  .hero + .quiz-band.fx .fx-top, .hero + .quiz-band.fx .fx-top2 { height: 48px; }
  .hero + .quiz-band.fx .fx-top { top: -47px; }
  .hero + .quiz-band.fx .fx-top2 { top: -49px; }
  .hero:has(+ .quiz-band.fx) .container { padding-bottom: 76px; }
}

/* v6.5b the home divider blends both sections: the arc fades from the hero photo into the band green, with a thin light green rim instead of a black shape */
.hero + .quiz-band.fx .fx-top { background: linear-gradient(180deg, rgba(10,23,16,0) 0%, rgba(10,23,16,.45) 40%, #0a1710 100%); }
.hero + .quiz-band.fx .fx-top2 { background: linear-gradient(90deg, rgba(126,217,87,.55), #7ed957 50%, rgba(126,217,87,.55)); opacity: .9; }

/* v7.0 quiet shape dividers between sections: every section lifts a shallow arc of its own color into the section above it (Eyal: creative but professional, not childish). The first section after the estimate band stays straight. */
.section, .cert-band { position: relative; }
.section::before, .cert-band::before { content: ""; position: absolute; left: 0; right: 0; top: -35px; height: 36px; pointer-events: none; z-index: 2; background: var(--white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'><path d='M0,36 L0,27 Q720,-9 1440,27 L1440,36 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'><path d='M0,36 L0,27 Q720,-9 1440,27 L1440,36 Z' fill='%23000'/></svg>") center bottom / 100% 100% no-repeat; }
.section-gray::before, .section-mint::before, .cert-band::before { background: var(--gray-50); }
.section-dark::before { background: var(--night); }
.quiz-band.fx + .section::before, .quiz-band.fx + .cert-band::before, .hero + .section::before, .page-hero + .section::before, main > .section:first-child::before, .svc-ribbon + .section::before, .stat-band + .section::before { display: none; }
@media (max-width: 820px) { .section::before, .cert-band::before { height: 22px; top: -21px; } }
/* v7.0b softer home divider glow */
.hero + .quiz-band.fx .fx-top { background: linear-gradient(180deg, rgba(10,23,16,.3) 0%, rgba(10,23,16,.7) 45%, #0a1710 100%); }
.hero + .quiz-band.fx .fx-top2 { opacity: .6; }

/* v7.1 home divider is the band itself: the whole animated section is masked with the arc and overlaps the hero, so the aurora, dots and sparks run right up to the curved edge (no separate shape, no seam, no rim) */
.hero + .quiz-band.fx .fx-top, .hero + .quiz-band.fx .fx-top2 { display: none; }
.hero + .quiz-band.fx { margin-top: -96px; padding-top: calc(72px + 96px);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") top center / 100% 96px no-repeat, linear-gradient(#000, #000) 0 96px / 100% calc(100% - 96px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") top center / 100% 96px no-repeat, linear-gradient(#000, #000) 0 96px / 100% calc(100% - 96px) no-repeat; }
@media (max-width: 820px) {
  .hero + .quiz-band.fx { margin-top: -48px; padding-top: calc(40px + 48px);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") top center / 100% 48px no-repeat, linear-gradient(#000, #000) 0 48px / 100% calc(100% - 48px) no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,96 L0,74 Q720,-4 1440,74 L1440,96 Z' fill='%23000'/></svg>") top center / 100% 48px no-repeat, linear-gradient(#000, #000) 0 48px / 100% calc(100% - 48px) no-repeat; }
}
/* v7.1b the two mask layers overlap by a few pixels so no anti aliased seam shows where the arc meets the body */
.hero + .quiz-band.fx { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 100px no-repeat, linear-gradient(#000, #000) 0 90px / 100% calc(100% - 90px) no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 100px no-repeat, linear-gradient(#000, #000) 0 90px / 100% calc(100% - 90px) no-repeat; }
@media (max-width: 820px) { .hero + .quiz-band.fx { -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 50px no-repeat, linear-gradient(#000, #000) 0 44px / 100% calc(100% - 44px) no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 50px no-repeat, linear-gradient(#000, #000) 0 44px / 100% calc(100% - 44px) no-repeat; } }

/* v7.2 same seamless arc on every service, city and county page: the animated band overlaps the hero above and the next section below, masked with an arc at both ends (Eyal: "do it like this top and bottom on all the pages") */
.page-hero + .quiz-band.fx { margin-top: -96px; margin-bottom: -96px; padding-top: calc(72px + 96px); padding-bottom: calc(80px + 96px);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 100px no-repeat, linear-gradient(#000, #000) 0 90px / 100% calc(100% - 180px) no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,26 Q720,104 0,26 Z' fill='%23000'/></svg>") bottom center / 100% 100px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 100px no-repeat, linear-gradient(#000, #000) 0 90px / 100% calc(100% - 180px) no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,26 Q720,104 0,26 Z' fill='%23000'/></svg>") bottom center / 100% 100px no-repeat; }
.page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 120px; }
.page-hero + .quiz-band.fx + .cert-band { padding-top: calc(clamp(48px, 6vw, 80px) + 96px); border-top: 0; }
.page-hero + .quiz-band.fx + .section { padding-top: calc(clamp(60px, 8vw, 110px) + 96px); }
@media (max-width: 820px) {
  .page-hero + .quiz-band.fx { margin-top: -48px; margin-bottom: -48px; padding-top: calc(40px + 48px); padding-bottom: calc(48px + 48px);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 50px no-repeat, linear-gradient(#000, #000) 0 44px / 100% calc(100% - 88px) no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,26 Q720,104 0,26 Z' fill='%23000'/></svg>") bottom center / 100% 50px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,74 Q720,-4 1440,74 L1440,100 Z' fill='%23000'/></svg>") top center / 100% 50px no-repeat, linear-gradient(#000, #000) 0 44px / 100% calc(100% - 88px) no-repeat, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,0 L1440,0 L1440,26 Q720,104 0,26 Z' fill='%23000'/></svg>") bottom center / 100% 50px no-repeat; }
  .page-hero:has(+ .quiz-band.fx) .container { padding-bottom: 76px; }
  .page-hero + .quiz-band.fx + .cert-band { padding-top: calc(clamp(48px, 6vw, 80px) + 48px); }
  .page-hero + .quiz-band.fx + .section { padding-top: calc(clamp(60px, 8vw, 110px) + 48px); }
}

/* v7.3 client video 4 (phones): centered bigger logo in the header, a smaller hero video with BBB, Angi and Google beside it on the first screen, certification grid in two even rows */
.hp-top { display: contents; }
.hp-side { display: none; }
@media (max-width: 820px) {
  .site-head .container { grid-template-columns: 1fr auto 1fr; }
  .site-head .logo { grid-column: 2; justify-self: center; }
  .site-head .burger { grid-column: 3; justify-self: end; }
  .site-head .logo img { height: 66px; }
  .hero .container > .hero-proof > .hp-top, .page-hero .container > .hero-proof > .hp-top { display: grid; grid-template-columns: minmax(0, 1fr) 31%; gap: 10px; align-items: stretch; order: -1; width: 100%; max-width: 560px; }
  .hero .container > .hero-proof > .hp-top .hp-video, .page-hero .container > .hero-proof > .hp-top .hp-video { order: 0; min-width: 0; }
  .hp-top .hp-video .hp-yt { width: 100%; }
  .hp-top .hp-video .hp-yt .yt-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .hp-top .hp-video .hp-yt .yt-play::after { left: 25px; top: 19px; border-width: 12px 0 12px 20px; }
  .hp-top .hp-video .hp-cap { text-align: center; font-size: .66rem; margin-top: 6px; }
  .hp-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; align-self: start; height: calc((100vw - 32px) * .69 * .5625); max-height: 100%; }
  .hp-side .hp-logo { height: auto; min-height: 0; padding: 5px; }
  .hp-side .hp-logo img { height: 100%; max-height: 44px; width: 100%; object-fit: contain; }
}
@media (max-width: 400px) { .site-head .wordmark { display: none; } }
/* v7.3b phone header: logo centered, menu button pinned to the right on the same line */
@media (max-width: 820px) {
  .site-head .container { display: flex; justify-content: center; align-items: center; position: relative; min-height: 84px; }
  .site-head .logo { margin: 0 auto; }
  .site-head .burger { position: absolute; right: var(--gutter, 16px); top: 50%; transform: translateY(-50%); margin: 0; }
}
/* v7.4 phones: full width hero video, then BBB, Angi and Google in one row under it, then the headline (Eyal, 2026-09-30) */
@media (max-width: 820px) {
  .hero .container > .hero-proof > .hp-top, .page-hero .container > .hero-proof > .hp-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hp-top .hp-video .hp-yt .yt-play { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .hp-top .hp-video .hp-yt .yt-play::after { left: 28px; top: 22px; border-width: 13px 0 13px 22px; }
  .hp-top .hp-video .hp-cap { font-size: .7rem; margin-top: 8px; }
  .hp-side { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: auto; max-height: none; align-self: stretch; }
  .hp-side .hp-logo { padding: 8px 6px; min-height: 66px; display: flex; align-items: center; justify-content: center; }
  .hp-side .hp-logo img { height: 52px; max-height: 52px; width: 100%; object-fit: contain; }
}
/* v7.5 go live polish: kicker and phone link pass 4.5:1 on light backgrounds, quiz titles are h2 (heading order), screen reader only text for video tiles */
.kicker { color: #277000; }
.kicker::before { background: #277000; }
.est-phone .wa { color: #277000; }
.quiz .q-title { font-size: 1.35rem; margin: 0 0 4px; line-height: 1.2; letter-spacing: 0; }
.lead-card .q-title { font-size: 1.25rem; margin: 0 0 4px; line-height: 1.2; letter-spacing: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* v7.6 metric matched fallback fonts: Arial scaled to the width of Archivo / Albert Sans, so text does not jump when the web fonts arrive (fonts load non blocking since v7.5) */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 98.5%; }
@font-face { font-family: 'Albert Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 103.5%; }
/* v7.7 Turnstile box + captcha note */
.cf-turnstile { margin: 6px 0 10px; min-height: 0; }
.cf-turnstile iframe { max-width: 100%; }
.gc-captcha-note { margin: 8px 0 0; font-size: .9rem; color: #b42318; font-weight: 600; }
.quiz .gc-captcha-note, .offer-body .gc-captcha-note { color: #ffd5cf; }
/* v7.8 HTML sitemap page */
.sitemap-page h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.sitemap-page h2:first-child { margin-top: 0; }
.sm-list { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 32px; }
.sm-list li { break-inside: avoid; margin: 0 0 8px; font-size: .95rem; }
.sm-posts { columns: 2; }
.sm-note { color: var(--muted); font-size: .9rem; margin: 6px 0 14px; }
.sm-county { border: 1px solid var(--line, #e3e9e4); border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; background: #fff; }
.sm-county summary { cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sm-county summary span { font-weight: 500; color: var(--muted); font-size: .85rem; }
.sm-cities { list-style: none; padding: 12px 0 0; margin: 0; columns: 3; column-gap: 28px; }
.sm-cities > li { break-inside: avoid; margin-bottom: 10px; font-weight: 600; }
.sm-sub { list-style: none; padding: 4px 0 0 12px; margin: 0; font-weight: 400; font-size: .86rem; }
.sm-sub li { margin: 0 0 3px; }
@media (max-width: 820px) { .sm-list, .sm-posts, .sm-cities { columns: 1; } }
/* v7.9 phone fix (client video 2026-10-01): the aurora blobs of the estimate band leaked outside the viewport, so phones could pan sideways into white space and the coupon popup centered off screen. Clip the band, clip the page horizontally, size the popup to the dynamic viewport. */
.quiz-band.fx { overflow: hidden; }
html, body { overflow-x: clip; }
.offer-modal { width: 100vw; height: 100dvh; min-height: 100vh; }
.offer-sheet { max-height: min(92dvh, 760px); overflow: auto; }
@media (max-width: 820px) { .offer-modal { padding: 12px; align-items: end; } .offer-sheet { max-height: 88dvh; } }