/* DirectoryForge public theme v2 — modern layer over Bootstrap 5.
   Brand colors come from CSS variables set per-site (--brand, --brand-accent). */

:root {
  --brand: #0e7490;
  --brand-accent: #f59e0b;
  --ink: #0f172a;
  --radius: 16px;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif; color: #334155; }
h1, h2, h3, .navbar-brand { letter-spacing: -.02em; }

/* ---------- brand utilities ---------- */
.btn { border-radius: 50rem; font-weight: 700; padding-inline: 1.3rem; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn-brand:hover { filter: brightness(1.1); color: #fff; transform: translateY(-1px); }
.btn-brand-accent { background: var(--brand-accent); border-color: var(--brand-accent); color: #1f2937; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-accent) 40%, transparent); }
.btn-brand-accent:hover { filter: brightness(1.05); color: #1f2937; transform: translateY(-1px); }
.text-brand { color: var(--brand) !important; }
a { color: var(--brand); }

/* ---------- header ---------- */
header.sticky-top { backdrop-filter: blur(10px); background: rgba(255,255,255,.92) !important; }
.navbar-brand { font-size: 1.35rem; }
.nav-link { font-weight: 500; }
.nav-link:hover { color: var(--brand); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(900px 380px at 85% -10%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 60%),
    linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #0f172a));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero .badge-pill { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 50rem; padding: .45rem 1.1rem; font-size: .85rem; font-weight: 600; display: inline-block; margin-bottom: 1rem; }
.hero .quote-box { box-shadow: 0 24px 60px rgba(2,6,23,.35); border-radius: var(--radius); }
.quote-box .form-select { flex: 1 1 0; width: auto; border-radius: 12px; padding: .8rem 2.2rem .8rem 1rem; }

/* ---------- section heads (eyebrow + title + sub) ---------- */
.eyebrow { display: inline-block; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; border-radius: 50rem; padding: .35rem 1rem; margin-bottom: .9rem; }
.sec-title { font-weight: 800; color: var(--ink); }
.sec-sub { color: #64748b; max-width: 620px; margin-inline: auto; }

/* ---------- page head (breadcrumb banner) ---------- */
.page-head { background: linear-gradient(180deg, #f8fafc, #fff); border-bottom: 1px solid #e2e8f0; }
.glance { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.glance .g-chip { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; color: var(--ink); box-shadow: 0 2px 8px rgba(2,6,23,.05); }
.glance .g-chip span { color: var(--brand); }

/* ---------- cards ---------- */
.card { border-radius: var(--radius); border-color: #e8eef5; }
.svc-card { transition: .2s; height: 100%; }
.svc-card:hover { box-shadow: 0 16px 40px rgba(2,6,23,.12); transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 35%, #e8eef5); }

/* ---------- chips ---------- */
.chip { display: inline-block; background: #fff; border: 1px solid #e2e8f0; border-radius: 50rem; padding: .5rem 1.1rem; margin: .25rem; font-size: .9rem; font-weight: 500; color: #334155; text-decoration: none; transition: .15s; }
.chip:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); }

/* ---------- steps ---------- */
.step-num { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #0f172a)); color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent); }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid #e8eef5; border-radius: 14px; margin-bottom: 10px; background: #fff; transition: .15s; }
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 35%, #e8eef5); box-shadow: 0 8px 24px rgba(2,6,23,.06); }
.faq summary { padding: 17px 20px; font-weight: 650; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: var(--brand); font-weight: 800; font-size: 1.15rem; }
.faq details[open] summary::after { content: '\2013'; }
.faq .faq-a { padding: 0 20px 17px; color: #64748b; font-size: .95rem; }

/* ---------- prose (article content) ---------- */
.prose { max-width: 760px; margin: 0 auto; font-size: 1.02rem; line-height: 1.75; }
.prose h2 { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 30px 0 12px; }
.prose ul li { margin-bottom: .5rem; }

/* ---------- price band ---------- */
.price-band { background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 8%, #fff), color-mix(in srgb, var(--brand-accent) 10%, #fff)); border: 1px solid color-mix(in srgb, var(--brand) 18%, #fff); border-radius: var(--radius); }
.price-band .amount { font-size: 1.9rem; font-weight: 800; color: var(--brand); }

/* ---------- homepage v2 (reference design) ---------- */
.serif { font-family: Georgia, 'Times New Roman', 'Playfair Display', serif; letter-spacing: -.01em; }
.hero-light { background: #f5f6f4; }
.badge-soft { background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand); border-radius: 50rem; padding: .45rem 1.1rem; font-size: .9rem; font-weight: 600; display: inline-block; }
.hero-media { position: relative; border-radius: 20px; min-height: 380px; background-size: cover; background-position: center; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 80%, #000), var(--brand)); box-shadow: 0 24px 60px rgba(2,6,23,.18); }
.hero-media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7rem; opacity: .9; }
.float-chip { position: absolute; border-radius: 14px; padding: .8rem 1.2rem; background: var(--brand); color: #fff; text-align: center; box-shadow: 0 12px 30px rgba(2,6,23,.25); }
.float-chip.top-end { top: 18px; right: 18px; }
.float-chip.bottom-start { bottom: 18px; left: 18px; }
.float-chip.light { background: #fff; color: var(--ink); text-align: left; }
.icon-tile .icon-circle { transition: .15s; }
.icon-tile:hover .icon-circle { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(2,6,23,.12); }
.icon-circle { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 9%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 15%, #fff); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.stats-band { background: #1c2a24; color: #fff; }
.num-circle { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; }
.banner-strip { min-height: 320px; background: linear-gradient(rgba(10,15,12,.55), rgba(10,15,12,.55)), linear-gradient(140deg, #334155, #0f172a); background-size: cover; background-position: center; }
.services-banner { border-radius: 18px; min-height: 240px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-image: linear-gradient(90deg, rgba(10,15,12,.72), rgba(10,15,12,.25)), linear-gradient(140deg, color-mix(in srgb, var(--brand) 75%, #000), var(--brand)); }
.services-banner-copy { padding: 2rem 2.2rem; }
.services-banner-copy h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.25; }
.step-dot { width: 26px; height: 8px; border-radius: 50rem; background: #d5dbe3; display: inline-block; }
.step-dot.active { background: var(--brand); }
.urgency-chips input:checked + span, .urgency-chips label:has(input:checked) { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, #fff); }
.col-lg-1-5 { flex: 0 0 auto; width: 50%; }
@media (min-width: 992px) { .col-lg-1-5 { width: 20%; } }

/* ---------- service page v2 ---------- */
.svc-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand) 55%, #0b1a33)); color: #fff; }
.svc-crumbs, .svc-crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.svc-crumbs a:hover { color: #fff; }
.svc-hero h1 { letter-spacing: -.02em; }
.svc-search { display: flex; align-items: stretch; background: #fff; border-radius: 50rem; padding: 6px; gap: 6px; max-width: 720px; box-shadow: 0 16px 40px rgba(2,6,23,.25); flex-wrap: wrap; }
.svc-search-fixed { display: flex; align-items: center; gap: 6px; padding: .7rem 1.1rem; color: #334155; font-weight: 600; border-right: 1px solid #e2e8f0; white-space: nowrap; }
.svc-search select { flex: 1 1 200px; border: 0; outline: none; padding: .7rem .8rem; color: #334155; background: transparent; min-width: 180px; }
.svc-search .btn { border-radius: 50rem; }
.text-brand-dark { color: color-mix(in srgb, var(--brand) 60%, #0b1220); }
.svc-photo { border-radius: 14px; min-height: 420px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--brand) 12%, #fff); border: 1px solid #e8eef5; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.svc-photo > div { font-size: 1rem; }
.svc-photo > span { line-height: 1; }
.svc-photo-alt { background-image: linear-gradient(150deg, #7c5c3e, #4a3728); }
.svc-photo-cta { min-height: 330px; background-image: linear-gradient(150deg, color-mix(in srgb, var(--brand) 85%, #000), #1e293b); }
.svc-cta { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 90%, #000), var(--brand)); }
.num-list { list-style: none; counter-reset: n; padding-left: 0; margin: 0 0 1rem; }
.num-list li { counter-increment: n; position: relative; padding: .45rem 0 .45rem 2.4rem; }
.num-list li::before { content: counter(n); position: absolute; left: 0; top: .35rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.listing-card { transition: .15s; }
.listing-card:hover { box-shadow: 0 12px 30px rgba(2,6,23,.1); border-color: color-mix(in srgb, var(--brand) 30%, #e8eef5); }
.listing-logo { width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 8%, #fff); border: 1px solid #e8eef5; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.check-tile { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* ---------- CTA band & footer ---------- */
.cta-band { background: radial-gradient(700px 300px at 20% 0%, color-mix(in srgb, #fff 25%, transparent), transparent 60%), var(--brand-accent); }
footer { background: linear-gradient(180deg, #0f172a, #0b1220); }
footer h6 { font-size: .78rem; letter-spacing: .1em; }
footer a { transition: .15s; }
footer a:hover { color: #fff !important; }

/* =====================================================================
   LANDING PAGES (location + service×location) — the money pages.
   Modern, high-contrast, conversion-first. All sections are optional.
   ===================================================================== */
.lp-hero { background: linear-gradient(180deg, #f7faf8, #fff); border-bottom: 1px solid #e6ebe8; }
.lp-crumb { padding-top: 1rem; font-size: .85rem; color: #64748b; }
.lp-crumb a { color: #64748b; text-decoration: none; }
.lp-crumb a:hover { color: var(--brand); }
.lp-crumb i { font-style: normal; margin: 0 .45rem; color: #cbd5e1; }
.lp-crumb span { color: var(--ink); font-weight: 600; }
.lp-h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.06; color: var(--ink); margin-bottom: 1rem; }
.lp-sub { font-size: 1.12rem; color: #475569; max-width: 60ch; margin-bottom: 1.25rem; }
.lp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.lp-chip { background: color-mix(in srgb, var(--brand) 9%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, #fff);
  color: color-mix(in srgb, var(--brand) 80%, #000); border-radius: 50rem; padding: .4rem .85rem; font-size: .85rem; font-weight: 600; }
.lp-chip.gold { background: #fef8e7; border-color: #f5e2ad; color: #92651a; }
.lp-cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lp-link { font-weight: 600; text-decoration: none; color: #475569; }
.lp-link:hover { color: var(--brand); }
.lp-form-card { background: #f1f5f3; border: 1px solid #e2e8f0; border-radius: 20px; padding: 1.5rem; box-shadow: 0 18px 45px rgba(2,6,23,.07); }

.lp-stats { background: #101914; color: #fff; }
.lp-stat { display: flex; flex-direction: column; padding: 1.4rem 1rem; border-right: 1px solid rgba(255,255,255,.1); }
.lp-stat:last-child { border-right: 0; }
.lp-stat b { font-size: 1.5rem; line-height: 1.1; }
.lp-stat span { font-size: .85rem; color: #9db3a6; }

.lp-band { background: #f4f7f5; }
.lp-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--ink); }
.lp-lead { font-size: 1.03rem; color: #475569; max-width: 82ch; }
.lp-body { font-size: 1.02rem; line-height: 1.75; color: #3f4a5a; }
.lp-fine { font-size: .8rem; color: #94a3b8; margin-top: .6rem; }

.lp-step-card { background: #fff; border: 1px solid #e6ebe8; border-radius: var(--radius); padding: 1.6rem; }
.lp-num { color: var(--brand-accent); font-size: 1.05rem; font-weight: 700; }

.lp-table-wrap { border: 1px solid #e6ebe8; border-radius: var(--radius); overflow: hidden; background: #fff; }
.lp-table { width: 100%; margin: 0; border-collapse: collapse; }
.lp-table th { background: #eef3ef; font-size: .82rem; font-weight: 600; color: #475569; padding: .9rem 1.1rem; text-align: left; }
.lp-table td { padding: 1rem 1.1rem; border-top: 1px solid #eef2f0; }
.lp-table .num { text-align: right; }
.lp-table .strong { font-weight: 700; color: var(--ink); }

.lp-panel { background: #eef3ef; border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.lp-dots { list-style: none; padding: 0; margin: 0; }
.lp-dots li { position: relative; padding-left: 1.2rem; margin-bottom: .5rem; color: #475569; }
.lp-dots li::before { content: '•'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.lp-note { background: color-mix(in srgb, var(--brand) 6%, #fff); border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; padding: 1rem 1.25rem; }
.lp-note a { text-decoration: none; }

.lp-incl { background: color-mix(in srgb, var(--brand) 8%, #fff); border-radius: var(--radius); padding: 1.6rem; }
.lp-excl { background: #fff; border: 1px solid #e6ebe8; border-radius: var(--radius); padding: 1.6rem; }
.lp-ticks, .lp-crosses, .lp-arrows { list-style: none; padding: 0; margin: 0; }
.lp-ticks li, .lp-crosses li, .lp-arrows li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; color: #3f4a5a; }
.lp-ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.lp-crosses li::before { content: '✕'; position: absolute; left: 0; color: #94a3b8; }
.lp-arrows li::before { content: '›'; position: absolute; left: .2rem; color: var(--brand); font-weight: 700; }
.lp-warn { background: #fdf6e3; border-left: 4px solid var(--brand-accent); border-radius: 0 12px 12px 0; padding: 1rem 1.25rem; }
.lp-warn p { font-size: .92rem; color: #6b5a2e; margin-top: .35rem; }

.lp-side { background: #fff; border: 1px solid #e6ebe8; border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.lp-glance { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid #f1f5f3; font-size: .92rem; }
.lp-glance:first-of-type { border-top: 0; }
.lp-glance span { color: #64748b; }

.lp-rule-card { background: #fff; border: 1px solid #e6ebe8; border-radius: var(--radius); padding: 1.5rem; }
.lp-choose { display: flex; gap: 1.1rem; padding: 1.1rem 0; border-top: 1px solid #e6ebe8; }
.lp-choose:first-of-type { border-top: 0; }
.lp-flags { background: color-mix(in srgb, var(--brand) 7%, #fff); border-radius: var(--radius); padding: 1.2rem 1.5rem; }
.lp-flags ul { list-style: none; padding: 0; margin-top: .6rem; }
.lp-flags li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; font-size: .9rem; color: #475569; }
.lp-flags li::before { content: '⚠'; position: absolute; left: 0; color: var(--brand); }

.lp-months { display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-month { flex: 1 1 60px; text-align: center; border-radius: 50rem; padding: .4rem .2rem; font-size: .8rem; font-weight: 600; }
.lv-low { background: #eef2f0; color: #64748b; }
.lv-medium { background: #fdeeb8; color: #7a5b12; }
.lv-high { background: color-mix(in srgb, var(--brand) 35%, #fff); color: #123; }
.lv-peak { background: var(--brand); color: #fff; }
.lp-legend { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .78rem; color: #94a3b8; }
.lp-legend span { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: .8rem; }
.lp-season { background: #fff; border: 1px solid #e6ebe8; border-radius: 12px; padding: 1rem 1.1rem; font-size: .88rem; }
.lp-season p { color: #64748b; margin-top: .4rem; }
.lp-tip { background: color-mix(in srgb, var(--brand) 8%, #fff); border-left: 4px solid var(--brand); border-radius: 0 12px 12px 0; padding: 1rem 1.25rem; }

.lp-final { background: var(--brand); color: #fff; padding: 4.5rem 0; }
.lp-final h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; max-width: 22ch; margin: 0 auto 1rem; }
.lp-final p { color: rgba(255,255,255,.9); }
.lp-final .btn-light { margin-top: .6rem; font-weight: 700; }
.lp-final-fine { font-size: .82rem; color: rgba(255,255,255,.75); margin-top: 1.2rem; }

.lp-related { background: #eef3ef; padding: 3rem 0; }
.lp-related h3 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin: 1.4rem 0 .8rem; }
.lp-pill { display: inline-block; background: #fff; border: 1px solid #e2e8f0; border-radius: 50rem; padding: .45rem 1rem;
  margin: 0 .4rem .5rem 0; font-size: .88rem; color: #334155; text-decoration: none; }
.lp-pill:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- landing quote card (step 1 of the two-step form) ---------- */
.qc-title { font-size: 1.45rem; font-weight: 700; color: var(--ink); margin-bottom: .25rem; }
.qc-sub { font-size: .9rem; color: #64748b; margin-bottom: 1rem; }
.qc-steps { display: flex; align-items: center; gap: .35rem; margin-bottom: 1.1rem; }
.qc-steps i { width: 26px; height: 6px; border-radius: 50rem; background: #dbe3de; display: inline-block; }
.qc-steps i.on { background: var(--brand); width: 34px; }
.qc-steps span { font-size: .8rem; color: #64748b; margin-left: .5rem; }
.qc-label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin: .9rem 0 .35rem; }
.qc-pill { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem .9rem; font-weight: 600; color: var(--ink); }
.qc-input { width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem .9rem; font-size: .95rem; color: var(--ink); }
.qc-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.qc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qc-opt input { position: absolute; opacity: 0; }
.qc-opt span { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .65rem .8rem; font-size: .9rem; cursor: pointer; }
.qc-opt input:checked + span { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); color: color-mix(in srgb, var(--brand) 85%, #000); font-weight: 600; }
.qc-fine { font-size: .75rem; color: #94a3b8; text-align: center; margin-top: .7rem; margin-bottom: 0; }
/* the navbar is sticky — stop it covering a heading when a section is jumped to */
.lp-hero, section[class*="lp-"], section.py-5 { scroll-margin-top: 90px; }

/* ---------- provider cards (service page) ---------- */
.listing-logo { width: 56px; height: 56px; border-radius: 12px; background: #f1f5f9; display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; overflow: hidden; }
.listing-logo img { width: 100%; height: 100%; object-fit: contain; }
.listing-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: #64748b; }
.listing-meta .lm b { color: var(--ink); }
.listing-meta .ok { color: #15803d; font-weight: 600; }
.listing-meta .gold { color: #b45309; font-weight: 600; }
.min-w-0 { min-width: 0; }

/* ---------- why-choose cards ---------- */
.whychoose { background: #fafbfc; }
.wc-card { background: #fff; border: 1px solid #e6ebe8; border-radius: var(--radius); padding: 1.5rem; }
.wc-tick { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-weight: 700; }

/* ---------- editorial palette (spec: cream #f4f6f1, white rounded-2xl cards) ---------- */
.lp-hero { background: linear-gradient(180deg, #f7f8f4, #fff); border-bottom: 1px solid #e8ebe3; }
.lp-band { background: #f4f6f1; }
.lp-step-card, .lp-side, .lp-excl, .lp-rule-card, .lp-season, .lp-table-wrap, .lp-review { border-radius: 20px; }
.lp-form-card { background: #eef1ea; border-color: #e2e6dc; border-radius: 24px; }

/* stats band with icons */
.lp-stat { flex-direction: row; align-items: center; gap: .8rem; }
.lp-stat i { font-style: normal; font-size: 1.25rem; opacity: .8; }
.lp-stat div { display: flex; flex-direction: column; }

/* map placeholder / embed */
.lp-map { width: 100%; height: 220px; border: 0; display: block; }
.lp-map-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  height: 200px; border-radius: 20px; background: #e9ede4; color: #64748b; text-align: center; }
.lp-map-ph span { font-size: 1.5rem; }
.lp-map-ph small { font-size: .78rem; opacity: .8; }

/* real reviews only */
.lp-review { background: #fff; border: 1px solid #e8ebe3; padding: 1.5rem; }
.lp-review p { font-style: italic; color: #3f4a5a; }

/* unresolved tokens: visible to editors in preview, never to visitors */
.tok-missing { background: #fef08a; color: #713f12; border-radius: 4px; padding: 0 .2rem; font-style: normal; }
.lp-editor-note { background: #1f2937; color: #fde68a; font-size: .85rem; padding: .6rem 1rem; text-align: center; }

/* ---------- how to choose: numbered steps + sticky image rail ---------- */
.lp-steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.lp-step { display: flex; gap: 1.15rem; padding: 1.15rem 0; border-top: 1px solid #e2e8e2; }
.lp-step:first-child { border-top: 0; padding-top: 0; }
.lp-step-n { flex: 0 0 auto; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--brand); opacity: .35; min-width: 2.4rem; }
.lp-step-t { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; }
.lp-step-p { font-size: .93rem; color: #5b6b7c; margin: 0; }
.lp-choose-cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.8rem; }

.lp-choose-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1.25rem; }
.lp-choose-fig { position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  box-shadow: 0 22px 45px rgba(15,23,42,.14); }
.lp-choose-fig img { width: 100%; height: 380px; object-fit: cover; display: block; }
.lp-choose-badge { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-radius: 16px; padding: .7rem 1rem; margin: 0; }
.lp-choose-badge b { font-size: 1.7rem; line-height: 1; color: var(--brand); }
.lp-choose-badge span { font-size: .74rem; line-height: 1.15; color: #64748b; font-weight: 600; }
.lp-choose-ph { border-radius: 22px; padding: 2.4rem 1.8rem; text-align: center;
  background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #0f172a)); color: #fff; }
.lp-choose-ph-n { display: block; font-size: 3.4rem; font-weight: 700; line-height: 1; }
.lp-choose-ph p { margin: .6rem 0 0; font-size: .92rem; color: rgba(255,255,255,.85); }
@media (max-width: 991.98px) {
  .lp-choose-aside { position: static; margin-top: 2rem; }
  .lp-choose-fig img { height: 260px; }
}

/* ---------- footer: get-started band ---------- */
.ft-cta { background: #101a17; color: #fff; padding: 4.5rem 0 4rem; }
.ft-eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-accent); font-weight: 700; margin-bottom: .9rem; }
.ft-cta-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem); max-width: 20ch; margin: 0 auto .8rem; line-height: 1.15; }
.ft-cta-sub { color: rgba(255,255,255,.68); max-width: 52ch; margin: 0 auto 1.8rem; font-size: .98rem; }
.ft-cta-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.ft-btn-call { background: #fff; color: #101a17; border: 0; padding: .8rem 1.6rem; }
.ft-btn-call:hover { background: #f1f5f3; color: #101a17; }
.ft-btn-quote { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .8rem 1.6rem; }
.ft-btn-quote:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* ---------- footer: columns ---------- */
.ft { background: #0b1310; color: rgba(255,255,255,.62); padding: 3.5rem 0 2rem; font-size: .9rem; }
.ft a { color: rgba(255,255,255,.62); text-decoration: none; }
.ft a:hover { color: #fff; }
.ft-brand { display: flex; align-items: center; gap: .6rem; color: #fff !important;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .9rem; }
.ft-brand img { height: 34px; width: auto; max-width: 170px; object-fit: contain; }
.ft-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.ft-about { color: rgba(255,255,255,.55); line-height: 1.65; max-width: 42ch; margin-bottom: 1.2rem; }
.ft-contact { list-style: none; padding: 0; margin: 0; }
.ft-contact li { margin-bottom: .45rem; }
.ft-head { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 1.1rem; }
.ft-links { list-style: none; padding: 0; margin: 0; }
.ft-links li { margin-bottom: .55rem; }
.ft-muted { color: rgba(255,255,255,.38); }
.ft-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem;
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-top: 1.4rem; font-size: .84rem; }
.ft-legal a { margin: 0 .1rem; }
.ft-social { display: flex; gap: 1.2rem; flex-wrap: wrap; padding-top: .9rem; font-size: .84rem; }
.ft-disclaimer { color: rgba(255,255,255,.38); font-size: .78rem; line-height: 1.6; margin: 1rem 0 0; max-width: 90ch; }

/* ---------- floating tap-to-call ---------- */
.float-call { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 1040;
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  background: var(--brand); color: #fff !important; border-radius: 50rem; padding: .65rem 1.4rem .65rem .8rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.3); }
.float-call:hover { filter: brightness(1.08); color: #fff; }
.float-call .fc-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.float-call .fc-text { display: flex; flex-direction: column; line-height: 1.15; }
.float-call .fc-text small { font-size: .68rem; opacity: .8; }
.float-call .fc-text b { font-size: 1rem; letter-spacing: .01em; }
@media (min-width: 992px) { .float-call { left: auto; right: 24px; bottom: 24px; transform: none; } }

/* uploaded logo in the header */
.nav-logo { padding: 0; display: inline-flex; align-items: center; }
.nav-logo img { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: block; }
@media (max-width: 575.98px) { .nav-logo img { height: 32px; max-width: 150px; } }

/* ============================================================================
   WHY CHOOSE US — the house design, shared by service / state / location /
   service×location pages. Two columns: benefit grid left, image + real-count
   badge right.
   ========================================================================== */
.wcu { padding: 5.5rem 0; background: #fff; }
.wcu-eyebrow { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; }
.wcu-title { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.08; color: #0d1b2a; margin: 0 0 1.3rem; }
.wcu-intro { font-size: 1.15rem; line-height: 1.65; color: #4a5568; max-width: 34ch; margin-bottom: 2.4rem; }
.wcu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.wcu-card { display: flex; gap: .9rem; background: #f7f8f8; border-radius: 12px; padding: 1.25rem 1.3rem; }
.wcu-tick { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 16%, #fff); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 800; }
.wcu-card-t { font-size: .97rem; font-weight: 700; color: #0d1b2a; margin: .35rem 0 .35rem; line-height: 1.3; }
.wcu-card-p { font-size: .89rem; line-height: 1.55; color: #6b7280; margin: 0; }

.wcu-media { position: relative; border-radius: 20px; }
.wcu-media img { width: 100%; aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover;
  border-radius: 20px; display: block; box-shadow: 0 24px 48px rgba(15,23,42,.15); }
.wcu-media-ph { aspect-ratio: 4 / 5; max-height: 620px; border-radius: 20px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: #fff;
  text-align: center; padding: 2rem;
  background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #0f172a));
  box-shadow: 0 24px 48px rgba(15,23,42,.15); }
.wcu-media-ph .wcu-ph-icon { font-size: 3.2rem; }
.wcu-media-ph b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.wcu-media-ph .wcu-ph-sub { font-size: 1rem; opacity: .82; }
.wcu-badge { position: absolute; left: -28px; bottom: 30px; display: flex; align-items: center; gap: .85rem;
  background: #fff; border-radius: 16px; padding: 1rem 1.6rem 1rem 1.1rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.16); }
.wcu-badge-tick { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #d9f7e4;
  color: #16a34a; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; }
.wcu-badge span { display: flex; flex-direction: column; line-height: 1.3; }
.wcu-badge small { font-size: .87rem; color: #6b7280; }
.wcu-badge b { font-size: 1.12rem; font-weight: 800; color: #0d1b2a; letter-spacing: -.01em; }
@media (max-width: 991.98px) {
  .wcu { padding: 3.5rem 0; }
  .wcu-intro { max-width: none; }
  .wcu-media { margin-top: 2rem; }
  .wcu-media img, .wcu-media-ph { aspect-ratio: 16 / 10; max-height: 340px; }
  .wcu-badge { left: 14px; bottom: -18px; }
}
@media (max-width: 575.98px) { .wcu-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   INDUSTRIES & SECTORS WE SERVE
   ========================================================================== */
.ind-band { padding: 5rem 0; background: #fff; }
.ind-pill { display: inline-block; background: #e9f2ec; color: #14532d; border-radius: 50rem;
  padding: .4rem 1.1rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ind-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); margin: 1rem 0 .7rem; }
.ind-sub { color: #64748b; max-width: 62ch; margin: 0 auto; }
.ind-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8ecea;
  border-radius: 18px; padding: 1.6rem; text-decoration: none; height: 100%;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.ind-card:hover { box-shadow: 0 16px 34px rgba(15,23,42,.09); transform: translateY(-2px); border-color: #dbe4df; }
.ind-icon { width: 46px; height: 46px; border-radius: 12px; background: #eef3f0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 1.1rem; }
.ind-card-t { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.ind-card-p { font-size: .9rem; line-height: 1.6; color: #64748b; flex-grow: 1; margin: 0 0 1rem; }
.ind-more { font-size: .88rem; font-weight: 700; color: #14653c; }
.ind-more i { font-style: normal; }

/* ============================================================================
   CHOOSE YOUR STATE / PROVINCE / REGION
   ========================================================================== */
.sp-band { padding: 5rem 0; background: #f7f9f9; }
.sp-eyebrow { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; }
.sp-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 .7rem; }
.sp-sub { color: #64748b; max-width: 60ch; margin: 0 auto; }
.sp-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  background: #fff; border: 1px solid #eceff0; border-radius: 18px; padding: 2rem 1rem 1.6rem;
  text-decoration: none; height: 100%; transition: box-shadow .15s ease, transform .15s ease; }
.sp-card:hover { box-shadow: 0 16px 34px rgba(15,23,42,.09); transform: translateY(-2px); }
.sp-abbr { width: 76px; height: 76px; border-radius: 20px; display: inline-flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand);
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .7rem; }
.sp-name { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.sp-count { font-size: .9rem; font-weight: 600; color: var(--brand); }

/* ============================================================================
   OTHER SERVICES HERE / NEARBY AREAS — plain, scannable link tiles
   ========================================================================== */
.os-eyebrow { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .6rem; }
.os-item { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid #eceff0;
  border-radius: 14px; padding: .95rem 1.1rem; text-decoration: none; height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease; }
.os-item:hover { border-color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 10px 22px rgba(15,23,42,.07); }
.os-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: #f1f5f3;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.os-name { font-weight: 600; color: var(--ink); flex-grow: 1; }
.os-pc { font-size: .85rem; color: #94a3b8; }
.os-count { display: inline-block; margin-left: .5rem; font-size: .8rem; font-weight: 700;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff);
  border-radius: 50rem; padding: .15rem .7rem; vertical-align: middle; }

/* ============================================================================
   WHAT IT IS & WHAT IT SOLVES — intro + image rail, problem cards, CTA band
   ========================================================================== */
.xp { padding: 4.5rem 0; background: #f6f8f8; }
.xp-pill { display: inline-block; background: #e9f2ec; color: #14532d; border-radius: 50rem;
  padding: .4rem 1.1rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.xp-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); margin: 1.1rem 0 1.4rem; max-width: 24ch; }
.xp-callout { background: #fff; border-left: 4px solid var(--brand); border-radius: 0 14px 14px 0;
  padding: 1.1rem 1.4rem; font-weight: 600; color: #26424f; margin-bottom: 2rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.05); }
.xp-h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; }
.xp-p { color: #5b6b7c; line-height: 1.75; margin-bottom: 1.1rem; }
.xp-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.xp-inline-link { font-weight: 700; color: var(--brand); text-decoration: none; }
.xp-inline-link:hover { text-decoration: underline; }

.xp-fig { position: relative; margin: 0; border-radius: 22px; overflow: visible; }
.xp-fig img { width: 100%; height: 420px; object-fit: cover; border-radius: 22px; display: block;
  box-shadow: 0 22px 45px rgba(15,23,42,.15); }
.xp-fig-ph { height: 420px; border-radius: 22px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .3rem; color: #fff; text-align: center;
  background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #0f172a));
  box-shadow: 0 22px 45px rgba(15,23,42,.15); }
.xp-fig-icon { font-size: 3rem; }
.xp-fig-ph b { font-size: 1.4rem; }
.xp-fig-ph span:last-child { opacity: .8; }
.xp-fig-badge { position: absolute; left: -14px; bottom: -14px; display: flex; align-items: center; gap: .7rem;
  background: #fff; border-radius: 16px; padding: .8rem 1.2rem; margin: 0;
  box-shadow: 0 14px 30px rgba(15,23,42,.15); }
.xp-fig-badge b { font-size: 1.7rem; line-height: 1; color: var(--brand); }
.xp-fig-badge span { font-size: .74rem; line-height: 1.2; color: #64748b; font-weight: 600; }

.xp-probs { margin-top: 3.5rem; }
.xp-card { background: #fff; border: 1px solid #e9edee; border-radius: 16px; padding: 1.4rem;
  transition: box-shadow .15s ease, transform .15s ease; }
.xp-card:hover { box-shadow: 0 14px 30px rgba(15,23,42,.08); transform: translateY(-2px); }
.xp-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: #fdeceb; color: #b4404f; font-weight: 800; margin-bottom: .9rem; }
.xp-card-t { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.xp-card-p { font-size: .89rem; line-height: 1.6; color: #64748b; margin: 0; }

.xp-cta { background: #0b1a14; color: #fff; border-radius: 20px; padding: 2rem 2.4rem; margin-top: 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.xp-cta-t { font-size: 1.3rem; font-weight: 700; margin: 0 0 .35rem; }
.xp-cta-s { color: rgba(255,255,255,.6); font-size: .92rem; margin: 0; }
.xp-cta-btns { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.xp-btn-call { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); padding: .7rem 1.4rem; }
.xp-btn-call:hover { background: rgba(255,255,255,.2); color: #fff; }
.xp-btn-quote { background: var(--brand-accent); color: #1f2937; border: 0; padding: .7rem 1.4rem; }
.xp-btn-quote:hover { filter: brightness(1.06); color: #1f2937; }
@media (max-width: 991.98px) {
  .xp-fig { margin-top: 1.5rem; }
  .xp-fig img, .xp-fig-ph { height: 280px; }
  .xp-fig-badge { left: 12px; bottom: -12px; }
}
@media (max-width: 575.98px) { .xp-cta { padding: 1.6rem 1.4rem; } }

/* state picker: honest note when the tile list is capped */
.sp-more { text-align: center; margin: 2rem 0 0; font-size: .9rem; color: #94a3b8; }
.sp-more a { font-weight: 700; }

/* ============================================================================
   CORE PAGES — shared page header
   ========================================================================== */
.ph-head { background: linear-gradient(180deg, #f4f7f6 0%, #fff 100%); padding: 3.2rem 0 3rem;
  border-bottom: 1px solid #eef2f0; }
.ph-crumb { font-size: .85rem; color: #94a3b8; margin-bottom: 1.1rem; }
.ph-crumb a { color: #64748b; text-decoration: none; }
.ph-crumb a:hover { color: var(--brand); }
.ph-crumb i { font-style: normal; margin: 0 .45rem; color: #cbd5e1; }
.ph-eyebrow { display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; }
.ph-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; color: var(--ink); margin: 0 0 1rem; max-width: 20ch; }
.ph-sub { font-size: 1.12rem; line-height: 1.65; color: #5b6b7c; max-width: 62ch; margin: 0; }
.ph-meta { font-size: .85rem; color: #94a3b8; margin: .9rem 0 0; }
.ph-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.ph-btn-ghost { background: #fff; border: 1px solid #dbe3de; color: var(--ink); }
.ph-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- core page body ---------- */
.cp-body { padding: 4rem 0; }
.cp-prose p { color: #4a5568; line-height: 1.8; margin-bottom: 1.2rem; }
.cp-lead { font-size: 1.06rem; }
.cp-side { position: sticky; top: 92px; background: #f7f9f8; border: 1px solid #eaefec;
  border-radius: 18px; padding: 1.6rem; }
.cp-side-h { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
.cp-facts { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.cp-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  border-top: 1px solid #e7ecea; font-size: .92rem; }
.cp-facts li:first-child { border-top: 0; }
.cp-facts span { color: #64748b; }
.cp-facts b { color: var(--ink); text-align: right; }
.cp-facts a { color: var(--brand); text-decoration: none; }
.cp-side-fine { font-size: .78rem; color: #94a3b8; line-height: 1.6; margin: 1rem 0 0; }
.cp-empty { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 12px; padding: 1rem 1.3rem; }
.cp-review { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px;
  padding: 1rem 1.3rem; margin-top: 1.6rem; font-size: .92rem; line-height: 1.6; }

/* ---------- legal pages ---------- */
.cp-legal { padding: 3.5rem 0 4.5rem; }
.cp-toc { position: sticky; top: 92px; background: #f7f9f8; border: 1px solid #eaefec;
  border-radius: 18px; padding: 1.5rem 1.6rem; }
.cp-toc-h { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; margin: 0 0 .9rem; }
.cp-toc ol { margin: 0; padding-left: 1.1rem; }
.cp-toc li { margin-bottom: .55rem; font-size: .92rem; }
.cp-toc a { color: #475569; text-decoration: none; }
.cp-toc a:hover { color: var(--brand); }
.cp-contact-card { background: #fff; border: 1px solid #eaefec; border-radius: 18px;
  padding: 1.4rem 1.6rem; margin-top: 1.2rem; }
.cp-contact-card h3 { font-size: .98rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.cp-contact-card p { font-size: .9rem; color: #64748b; margin: 0 0 .9rem; }
.cp-sec { scroll-margin-top: 90px; margin-top: 2.6rem; }
.cp-sec h2 { display: flex; align-items: baseline; gap: .7rem; font-size: 1.25rem; font-weight: 700;
  color: var(--ink); margin: 0 0 .9rem; }
.cp-sec-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; font-size: .85rem;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

/* ============================================================================
   CONTACT
   ========================================================================== */
.ct-body { padding: 4rem 0 4.5rem; }
.ct-cards { display: flex; flex-direction: column; gap: .8rem; }
.ct-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid #eaefec;
  border-radius: 14px; padding: 1.1rem 1.25rem; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
a.ct-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 10px 24px rgba(15,23,42,.07); }
.ct-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #f1f5f3;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.ct-card span:last-child { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ct-card small { font-size: .78rem; color: #94a3b8; }
.ct-card b { color: var(--ink); word-break: break-word; }
.ct-card-cta { background: color-mix(in srgb, var(--brand) 7%, #fff); border-color: color-mix(in srgb, var(--brand) 22%, #fff); }
.ct-card-cta b { color: var(--brand); }
.ct-note { background: #f7f9f8; border-radius: 14px; padding: 1.1rem 1.3rem; margin-top: 1.2rem;
  font-size: .9rem; line-height: 1.6; color: #64748b; }
.ct-form { background: #fff; border: 1px solid #eaefec; border-radius: 20px; padding: 2rem 2.2rem 2.2rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.06); }
.ct-form-h { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 1.4rem; }
.ct-label { display: block; font-size: .86rem; font-weight: 700; color: #475569; margin-bottom: .4rem; }
.ct-form .form-control, .ct-form .form-select { border-radius: 11px; border-color: #dfe6e3; padding: .7rem .9rem; }
.ct-form .form-control:focus, .ct-form .form-select:focus { border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.ct-fine { font-size: .8rem; color: #94a3b8; text-align: center; margin: 1rem 0 0; }
.ct-done { text-align: center; padding: 3rem 2rem; }
.ct-done-ic { font-size: 3rem; }
.ct-done h2 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 1rem 0 .5rem; }
.ct-done p { color: #64748b; margin-bottom: 1.6rem; }
@media (max-width: 575.98px) { .ct-form { padding: 1.5rem 1.3rem; } }

/* ============================================================================
   HOW IT WORKS
   ========================================================================== */
.hw-steps { padding: 4rem 0 1rem; }
.hw-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; position: relative; }
.hw-rail::before { content: ''; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, #d8e2dd 0 8px, transparent 8px 16px); z-index: 0; }
.hw-step { position: relative; z-index: 1; }
.hw-n { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 0 0 8px #fff, 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent); }
.hw-t { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 1.3rem 0 .5rem; }
.hw-p { color: #64748b; line-height: 1.7; margin: 0; }
.hw-detail { padding: 3.5rem 0 4rem; }
.hw-h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 1.2rem; }
.hw-points { background: #f7f9f8; border: 1px solid #eaefec; border-radius: 20px; padding: 1.8rem; }
.hw-points-h { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; }
.hw-points ul { list-style: none; padding: 0; margin: 0; }
.hw-points li { display: flex; gap: .8rem; padding: .7rem 0; border-top: 1px solid #e7ecea;
  font-size: .93rem; color: #4a5568; line-height: 1.6; }
.hw-points li:first-child { border-top: 0; }
.hw-points li span { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem;
  background: #dcfce7; color: #16a34a; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; margin-top: .15rem; }
@media (max-width: 767.98px) {
  .hw-rail { grid-template-columns: 1fr; gap: 2.2rem; }
  .hw-rail::before { display: none; }
}

/* ============================================================================
   THANK YOU
   ========================================================================== */
.tk { padding: 4rem 0 5rem; background: #f6f8f8; }
.tk-card { background: #fff; border: 1px solid #eaefec; border-radius: 24px; padding: 3rem 2.5rem;
  text-align: center; box-shadow: 0 20px 46px rgba(15,23,42,.07); max-width: 880px; margin: 0 auto; }
.tk-tick { width: 68px; height: 68px; border-radius: 50%; background: #dcfce7; color: #16a34a;
  font-size: 2rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tk-eyebrow { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand); margin: 1.3rem 0 .7rem; }
.tk-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); margin: 0 0 .8rem; }
.tk-sub { font-size: 1.05rem; color: #5b6b7c; max-width: 54ch; margin: 0 auto; line-height: 1.7; }
.tk-ref { font-size: .88rem; color: #94a3b8; margin: 1rem 0 0; }
.tk-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
  text-align: left; margin: 2.4rem 0 2rem; }
.tk-step { background: #f7f9f8; border-radius: 16px; padding: 1.3rem; }
.tk-ic { font-size: 1.5rem; }
.tk-step h2 { font-size: .98rem; font-weight: 700; color: var(--ink); margin: .7rem 0 .35rem; }
.tk-step p { font-size: .88rem; color: #64748b; line-height: 1.6; margin: 0; }
.tk-actions { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.tk-link { color: #64748b; text-decoration: none; font-weight: 600; font-size: .93rem; }
.tk-link:hover { color: var(--brand); }
.tk-more { max-width: 880px; margin: 3rem auto 0; }
.tk-more-h { font-size: 1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 1rem; text-align: center; }
.tk-more-card { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 1px solid #eaefec;
  border-radius: 16px; padding: 1.2rem 1.3rem; text-decoration: none; height: 100%; }
.tk-more-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, #fff); }
.tk-more-card b { color: var(--ink); }
.tk-more-card span { font-size: .87rem; color: #64748b; line-height: 1.55; }
@media (max-width: 575.98px) { .tk-card { padding: 2rem 1.3rem; } }

/* ============================================================================
   404
   ========================================================================== */
.nf { padding: 4.5rem 0 5rem; }
.nf-code { display: inline-block; font-size: 4.5rem; font-weight: 900; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(120deg, var(--brand), var(--brand-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); margin: 1rem 0 .8rem; max-width: 18ch; }
.nf-sub { color: #64748b; line-height: 1.7; max-width: 48ch; }
.nf-search { display: flex; gap: .6rem; margin: 1.8rem 0; max-width: 460px; }
.nf-search input { flex: 1 1 auto; border: 1px solid #dfe6e3; border-radius: 50rem; padding: .75rem 1.2rem; }
.nf-search input:focus { outline: 0; border-color: var(--brand); }
.nf-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nf-link { color: #64748b; text-decoration: none; font-weight: 600; }
.nf-link:hover { color: var(--brand); }
.nf-panel { background: #f7f9f8; border: 1px solid #eaefec; border-radius: 22px; padding: 1.8rem; }
.nf-panel-h { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 .9rem; }
.nf-panel-h + .nf-pills { margin-bottom: 1.6rem; }
.nf-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.nf-pills a { background: #fff; border: 1px solid #e4eae7; border-radius: 50rem; padding: .45rem 1rem;
  font-size: .88rem; color: #334155; text-decoration: none; }
.nf-pills a:hover { border-color: var(--brand); color: var(--brand); }
.nf-more { font-weight: 700; color: var(--brand) !important; }
.nf-links { display: flex; flex-wrap: wrap; gap: 1.1rem; border-top: 1px solid #e7ecea;
  padding-top: 1.1rem; margin-top: .4rem; font-size: .9rem; }
.nf-links a { color: #64748b; text-decoration: none; }
.nf-links a:hover { color: var(--brand); }

/* ============================================================================
   BUSINESS PORTAL — login + provider dashboard
   ========================================================================== */
.bl { padding: 3.5rem 0 5rem; }
.bl-card { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid #eaefec;
  border-radius: 20px; padding: 2.2rem; box-shadow: 0 18px 40px rgba(15,23,42,.06); }
.bl-card .form-control { border-radius: 12px; border-color: #dfe6e3; }
.bl-card .form-control:focus { border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.bl-fine { font-size: .82rem; color: #94a3b8; text-align: center; margin: 1rem 0 0; }
.bl-alt { border-top: 1px solid #eef2f0; margin-top: 1.4rem; padding-top: 1.2rem;
  text-align: center; font-size: .92rem; color: #64748b; }
.bl-done { text-align: center; }
.bl-ic { font-size: 2.6rem; }
.bl-done h2 { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: .8rem 0 .5rem; }
.bl-done p { color: #64748b; line-height: 1.65; margin-bottom: 1.6rem; }
.bl-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: 1.2rem; font-size: .9rem; }
.bl-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .85rem; text-align: left; }

.bd { padding: 3rem 0 4.5rem; }
.bd-side { position: sticky; top: 92px; background: #f7f9f8; border: 1px solid #eaefec;
  border-radius: 20px; padding: 1.6rem; }
.bd-side-h { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
.bd-signout { display: block; text-align: center; margin-top: .8rem; font-size: .9rem;
  color: #64748b; text-decoration: none; }
.bd-signout:hover { color: var(--brand); }
.bd-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.3rem; }
.bd-h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.bd-count { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand);
  border-radius: 50rem; padding: .15rem .8rem; font-size: .85rem; font-weight: 800; }
.bd-empty { background: #f7f9f8; border: 1px dashed #d8e2dd; border-radius: 20px;
  padding: 3rem 2rem; text-align: center; }
.bd-empty span { font-size: 2.4rem; }
.bd-empty b { display: block; margin: .8rem 0 .4rem; color: var(--ink); font-size: 1.05rem; }
.bd-empty p { color: #64748b; margin: 0; }
.bd-leads { display: flex; flex-direction: column; gap: 1rem; }
.bd-lead { background: #fff; border: 1px solid #eaefec; border-radius: 16px; padding: 1.3rem 1.4rem; }
.bd-lead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bd-lead h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 .45rem; }
.bd-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .84rem; color: #64748b; }
.bd-badge { flex: 0 0 auto; font-size: .74rem; font-weight: 700; border-radius: 50rem;
  padding: .25rem .8rem; background: #f1f5f3; color: #64748b; }
.bd-badge.on { background: #dcfce7; color: #166534; }
.bd-msg { margin: 1rem 0 0; padding: .9rem 1.1rem; background: #f7f9f8; border-radius: 12px;
  font-size: .92rem; line-height: 1.65; color: #4a5568; white-space: pre-wrap; }
.bd-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.bd-btn-ghost { background: #fff; border: 1px solid #dbe3de; color: var(--ink); }
.bd-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ============================================================================
   FREE TOOLS + CALCULATORS
   ========================================================================== */
.tl { padding: 3.5rem 0 4rem; }
.tl-card { display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid #eaefec; border-radius: 18px; padding: 1.7rem; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.tl-card:hover { box-shadow: 0 16px 34px rgba(15,23,42,.09); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 35%, #fff); }
.tl-ic { width: 50px; height: 50px; border-radius: 14px; background: #f1f5f3; font-size: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.tl-card h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.tl-card p { font-size: .9rem; line-height: 1.6; color: #64748b; flex-grow: 1; margin: 0 0 1rem; }
.tl-go { font-size: .88rem; font-weight: 700; color: var(--brand); }
.tl-fine { font-size: .85rem; color: #94a3b8; text-align: center; margin: 2.5rem 0 0; }

.cl { padding: 3.5rem 0 4.5rem; }
.cl-form { background: #fff; border: 1px solid #eaefec; border-radius: 20px; padding: 2rem;
  box-shadow: 0 16px 36px rgba(15,23,42,.06); }
.cl-form-h { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 1.3rem; }
.cl-field { margin-bottom: 1rem; }
.cl-form .form-control, .cl-form .form-select { border-radius: 11px; border-color: #dfe6e3; padding: .65rem .9rem; }
.cl-form .form-control:focus, .cl-form .form-select:focus { border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.cl-fine { font-size: .8rem; color: #94a3b8; text-align: center; margin: .9rem 0 0; }
.cl-result { background: linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #0f172a));
  color: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 20px 44px rgba(15,23,42,.16); }
.cl-result-lbl { font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.7); }
.cl-headline { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; margin: .5rem 0 .2rem; }
.cl-subline { color: rgba(255,255,255,.8); margin: 0 0 1.3rem; }
.cl-rows { list-style: none; padding: 0; margin: 0; }
.cl-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  border-top: 1px solid rgba(255,255,255,.16); font-size: .92rem; }
.cl-rows span { color: rgba(255,255,255,.72); }
.cl-note { background: rgba(255,255,255,.12); border-radius: 12px; padding: .9rem 1.1rem;
  font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.9); margin-top: 1.2rem; }
.cl-note-warn { background: rgba(253,224,71,.18); border: 1px solid rgba(253,224,71,.4); }
.cl-result .btn-brand { background: #fff; border-color: #fff; color: var(--ink); box-shadow: none; }
.cl-result .btn-brand:hover { background: #f1f5f3; color: var(--ink); }
.cl-empty { background: #f7f9f8; border: 1px dashed #d8e2dd; border-radius: 20px;
  padding: 3rem 2rem; text-align: center; }
.cl-empty span { font-size: 2.6rem; }
.cl-empty b { display: block; margin: .8rem 0 .4rem; color: var(--ink); font-size: 1.05rem; }
.cl-empty p { color: #64748b; margin: 0; font-size: .92rem; line-height: 1.6; }
.cl-others { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cl-others h3 { width: 100%; font-size: .74rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #94a3b8; margin: 0 0 .3rem; }
.cl-others a { background: #fff; border: 1px solid #e4eae7; border-radius: 50rem; padding: .4rem 1rem;
  font-size: .87rem; color: #334155; text-decoration: none; }
.cl-others a:hover { border-color: var(--brand); color: var(--brand); }

/* page header with a background photo (Site Settings → Images → Page headers) */
.ph-head.has-bg { background-size: cover; background-position: center; border-bottom: 0; }
.ph-head.has-bg .ph-title, .ph-head.has-bg .ph-sub { color: #fff; }
.ph-head.has-bg .ph-crumb, .ph-head.has-bg .ph-meta { color: rgba(255,255,255,.7); }
.ph-head.has-bg .ph-crumb a { color: rgba(255,255,255,.85); }
.ph-head.has-bg .ph-eyebrow { color: #fff; opacity: .9; }
.ph-head.has-bg .ph-btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.ph-head.has-bg .ph-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- tools hub + calculator pages (v33) ---------- */
.tl-h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 1.6rem; }
.tl-card { position: relative; }
.tl-badge { position: absolute; top: 1rem; right: 1rem; background: var(--brand-accent); color: #1f2937;
  border-radius: 50rem; padding: .2rem .7rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; }
.tl-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.tl-why { padding: 4rem 0 4.5rem; background: #f6f8f8; }
.tl-why-h { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 1.6rem; text-align: center; }
.tl-why-card { background: #fff; border: 1px solid #eaefec; border-radius: 18px; padding: 1.6rem; height: 100%; }
.tl-why-card span { font-size: 1.7rem; }
.tl-why-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: .7rem 0 .4rem; }
.tl-why-card p { font-size: .9rem; line-height: 1.65; color: #64748b; margin: 0; }

.cl-hint { font-style: normal; font-weight: 500; color: #94a3b8; font-size: .8rem; margin-left: .4rem; }
.cl-explain { padding: 3.5rem 0; }
.cl-ex { max-width: 74ch; margin: 0 auto 2rem; }
.cl-ex h2 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 .7rem; }
.cl-ex p { color: #5b6b7c; line-height: 1.8; margin: 0; }
.cl-related { padding: 3.5rem 0 4rem; background: #f6f8f8; }
.cl-related-h { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .4rem; }
.cl-related-sub { color: #64748b; margin: 0 0 1.4rem; }

/* ---------- about page (v33) ---------- */
.ab-facts { background: #0b1a14; color: #fff; padding: 2rem 0; }
.ab-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.ab-fact b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.ab-fact span { font-size: .85rem; color: rgba(255,255,255,.65); }
.ab-story { padding: 4rem 0 1rem; }
.ab-story .container { max-width: 76ch; }
.ab-eyebrow { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; }
.ab-lead { font-size: 1.18rem; line-height: 1.75; color: #334155; margin-bottom: 1.3rem; }
.ab-p { font-size: 1.02rem; line-height: 1.8; color: #5b6b7c; margin-bottom: 1.2rem; }
.ab-truth { padding: 3rem 0 4rem; }
.ab-card { border-radius: 20px; padding: 1.8rem; height: 100%; border: 1px solid #eaefec; background: #fff; }
.ab-card h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
.ab-card ul { list-style: none; padding: 0; margin: 0; }
.ab-card li { padding: .55rem 0; border-top: 1px solid #eef2f0; font-size: .95rem; color: #4a5568; line-height: 1.6; }
.ab-card li:first-child { border-top: 0; }
.ab-card-yes { background: #f2faf5; border-color: #d6efe0; }
.ab-card-no { background: #fbf6f6; border-color: #f0dede; }
.ab-detail { padding: 1rem 0 4rem; }
.ab-h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 1.2rem; }
.ab-qa { max-width: 80ch; }
.ab-item { border: 1px solid #eaefec; border-radius: 14px; margin-bottom: .7rem; background: #fff; }
.ab-item > summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; color: var(--ink); list-style: none; }
.ab-item > summary::-webkit-details-marker { display: none; }
.ab-item > summary::after { content: '+'; float: right; color: var(--brand); font-weight: 800; }
.ab-item[open] > summary::after { content: '–'; }
.ab-item > div { padding: 0 1.3rem 1.2rem; }
.ab-item p { color: #5b6b7c; line-height: 1.75; margin: 0 0 .9rem; }
.ab-item ul { color: #5b6b7c; margin: 0; padding-left: 1.1rem; }
.ab-contact { padding: 0 0 4rem; }
.ab-contact-box { background: #f7f9f8; border: 1px solid #eaefec; border-radius: 20px; padding: 1.8rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ab-contact-box h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; }
.ab-contact-box p { color: #64748b; margin: 0; font-size: .95rem; }
.ab-contact-links { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ab-contact-links a:not(.btn) { color: var(--brand); font-weight: 600; text-decoration: none; }

/* ---------- generic custom page sections (v33) ---------- */
.cp-narrow { max-width: 76ch; }
.cp-sections { padding: 0 0 3rem; }
.cp-block { max-width: 80ch; padding: 2rem 0; border-top: 1px solid #eef2f0; }
.cp-block:first-child { border-top: 0; padding-top: 0; }
.cp-block h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .5rem; }
.cp-block-sub { color: #64748b; margin: 0 0 1rem; }
.cp-points { list-style: none; padding: 0; margin: 1rem 0 0; }
.cp-points li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; color: #4a5568; line-height: 1.65; }
.cp-points li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 800; }

/* ============================================================================
   INDUSTRIES — index tiles + the vertical landing page
   ========================================================================== */
.ind-index { padding: 3.5rem 0 4rem; }
.ind-tile { display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid #eaefec; border-radius: 18px; padding: 1.7rem; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.ind-tile:hover { box-shadow: 0 16px 34px rgba(15,23,42,.09); transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 35%, #fff); }
.ind-tile-ic { width: 46px; height: 46px; border-radius: 12px; background: #eef3f0; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.ind-tile h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.ind-tile p { font-size: .9rem; line-height: 1.6; color: #64748b; flex-grow: 1; margin: 0 0 1rem; }
.ind-tile-go { font-size: .88rem; font-weight: 700; color: var(--brand); }

.ind-eyebrow { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; }
.ind-h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); margin: 0 0 1.1rem; max-width: 26ch; }
.ind-lead { font-size: 1.08rem; line-height: 1.75; color: #4a5568; margin-bottom: 1.1rem; }
.ind-p { color: #5b6b7c; line-height: 1.75; margin-bottom: 1.1rem; }
.ind-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ind-link { color: var(--brand); font-weight: 700; text-decoration: none; }
.ind-fine { font-size: .85rem; color: #94a3b8; margin-top: 1.4rem; }
.ind-fine a { color: var(--brand); font-weight: 600; }

.ind-ps { padding: 4rem 0; }
.ind-benefits { display: flex; flex-direction: column; gap: .8rem; }
.ind-benefit { display: flex; gap: .9rem; background: #f7f9f8; border: 1px solid #eaefec;
  border-radius: 14px; padding: 1.1rem 1.2rem; }
.ind-benefit span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; font-size: .8rem;
  background: color-mix(in srgb, var(--brand) 15%, #fff); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.ind-benefit b { display: block; color: var(--ink); font-size: .96rem; margin-bottom: .2rem; }
.ind-benefit p { font-size: .87rem; color: #64748b; line-height: 1.55; margin: 0; }

.ind-diff { padding: 3.5rem 0 4rem; background: #f6f8f8; }
.ind-numbered { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.ind-numbered li { display: flex; gap: 1rem; }
.ind-n { flex: 0 0 auto; font-size: 1.4rem; font-weight: 800; color: var(--brand); opacity: .38; }
.ind-numbered h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 .35rem; }
.ind-numbered p { font-size: .92rem; color: #64748b; line-height: 1.65; margin: 0; }

.ind-reality { padding: 3.5rem 0 4rem; }
.ind-reality-h { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin: 0; }
.ind-real-card { border-radius: 18px; padding: 1.6rem 1.8rem; height: 100%; }
.ind-real-card h3 { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 .7rem; }
.ind-real-card p { line-height: 1.75; margin: 0; }
.ind-real-card.bad { background: #fbf6f6; border: 1px solid #f0dede; }
.ind-real-card.bad h3 { color: #b4404f; }
.ind-real-card.bad p { color: #6b5157; }
.ind-real-card.good { background: #f2faf5; border: 1px solid #d6efe0; }
.ind-real-card.good h3 { color: #14653c; }
.ind-real-card.good p { color: #40614f; }

.ind-services { padding: 3.5rem 0 4rem; background: #f6f8f8; }
.ind-svc { background: #fff; border: 1px solid #eaefec; border-radius: 18px; padding: 1.7rem; height: 100%; }
.ind-svc h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.ind-svc p { font-size: .93rem; color: #64748b; line-height: 1.65; margin: 0 0 .9rem; }
.ind-svc ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.ind-svc li { position: relative; padding-left: 1.4rem; font-size: .89rem; color: #4a5568;
  line-height: 1.6; margin-bottom: .4rem; }
.ind-svc li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 800; }
.ind-svc-link { font-size: .88rem; font-weight: 700; color: var(--brand); text-decoration: none; }

.ind-cards { padding: 3.5rem 0 4rem; }
.ind-cards.alt { background: #f6f8f8; }
.ind-card { background: #fff; border: 1px solid #eaefec; border-radius: 16px; padding: 1.4rem; height: 100%; }
.ind-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.ind-card p { font-size: .9rem; color: #64748b; line-height: 1.6; margin: 0; }
.ind-card.prob { display: flex; gap: .9rem; }
.ind-card.prob > span { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #fdeceb;
  color: #b4404f; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.ind-comply { padding: 3.5rem 0 4rem; }
.ind-comply-card { background: #f7f9f8; border: 1px solid #eaefec; border-radius: 16px; padding: 1.4rem; height: 100%; }
.ind-comply-card h3 { font-size: .98rem; font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.ind-comply-card p { font-size: .89rem; color: #64748b; line-height: 1.6; margin: 0; }

.ind-process { padding: 3.5rem 0 4rem; background: #f6f8f8; }
.ind-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.ind-step { display: flex; gap: 1rem; }
.ind-step-n { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--brand);
  color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ind-step h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: .3rem 0 .35rem; }
.ind-step h3 em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff);
  border-radius: 50rem; padding: .1rem .55rem; margin-left: .4rem; }
.ind-step p { font-size: .9rem; color: #64748b; line-height: 1.65; margin: 0; }

.ind-pricing { padding: 3.5rem 0 4rem; }
.ind-tier { background: #fff; border: 1px solid #eaefec; border-radius: 20px; padding: 1.7rem; height: 100%;
  display: flex; flex-direction: column; position: relative; }
.ind-tier.feat { border-color: var(--brand); box-shadow: 0 18px 40px rgba(15,23,42,.09); }
.ind-tier-tag { position: absolute; top: -11px; left: 1.7rem; background: var(--brand); color: #fff;
  border-radius: 50rem; padding: .2rem .8rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; }
.ind-tier h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; }
.ind-tier-for { font-size: .88rem; color: #64748b; margin: 0 0 .8rem; }
.ind-tier-price { font-size: .82rem; font-weight: 700; color: var(--brand); margin-bottom: 1rem; }
.ind-tier ul { list-style: none; padding: 0; margin: 0 0 1.2rem; flex-grow: 1; }
.ind-tier li { position: relative; padding-left: 1.4rem; font-size: .89rem; color: #4a5568;
  line-height: 1.6; margin-bottom: .45rem; }
.ind-tier li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 800; }
.ind-factors { background: #f7f9f8; border-radius: 18px; padding: 1.5rem 1.8rem; margin-top: 2rem; }
.ind-factors h3 { font-size: .98rem; font-weight: 700; color: var(--ink); margin: 0 0 .8rem; }
.ind-factors ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1.4rem; }
.ind-factors li { position: relative; padding-left: 1.3rem; font-size: .9rem; color: #4a5568; }
.ind-factors li::before { content: '•'; position: absolute; left: .2rem; color: var(--brand); font-weight: 800; }

.ind-areas { padding: 3.5rem 0 4rem; background: #f6f8f8; }
.ind-explore { padding: 3.5rem 0 4rem; }
.ind-explore h3 { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 .9rem; }
.ind-explore a { display: block; padding: .45rem 0; font-size: .93rem; color: #475569; text-decoration: none;
  border-top: 1px solid #eef2f0; }
.ind-explore a:first-of-type { border-top: 0; }
.ind-explore a:hover { color: var(--brand); }
.ind-final-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }

/* ===================================================================
   SITE HEADER — contact strip + floating pill navbar (v36)
   Sticky rather than fixed: a fixed bar has to be paid for with body
   padding on every template, and one template forgetting it is a header
   sitting on top of an H1. Sticky costs nothing and never overlaps.
   =================================================================== */
.sh { position: sticky; top: 0; z-index: 1030; }
.sh-strip { background: #0f172a; color: rgba(255,255,255,.82); font-size: .84rem; }
.sh-strip .container { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.sh-strip-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.sh-strip-item { display: flex; flex-direction: column; line-height: 1.25; }
.sh-strip-lbl { font-size: .72rem; opacity: .6; }
.sh-strip a { color: #fff; text-decoration: none; font-weight: 600; }
.sh-strip a:hover { text-decoration: underline; }
.sh-strip-right .sh-strip-item + .sh-strip-item { border-left: 1px solid rgba(255,255,255,.18); padding-left: 28px; }

.sh-bar { padding: 12px 0; background: transparent; }
.sh-pill {
  background: #fff; border-radius: 999px; padding: 10px 14px 10px 22px;
  box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06);
  gap: 10px;
}
.sh-nostrip .sh-bar { padding-top: 16px; }
.sh-word { font-weight: 800; font-size: 1.3rem; color: #0f172a; text-decoration: none; }
.sh-nav { margin-left: 20px; gap: 0; flex-wrap: nowrap; }
/* One line, always. A nav that wraps inside a pill looks broken, so the links shrink
   before they are allowed to fold onto a second row. */
.sh-nav .nav-link { font-weight: 600; color: #0f172a; padding: .45rem .62rem; border-radius: 999px; white-space: nowrap; font-size: .95rem; }
@media (min-width: 992px) and (max-width: 1299.98px) {
  .sh-nav .nav-link { font-size: .88rem; padding: .4rem .45rem; }
  .sh-pill { padding-left: 16px; }
  .sh-cta { padding: .55rem 1rem; font-size: .9rem; }
}
.sh-nav .nav-link:hover, .sh-nav .show > .nav-link { background: rgba(15,23,42,.06); }
.sh-nav .dropdown-menu { border: 0; border-radius: 16px; box-shadow: 0 18px 44px rgba(15,23,42,.16); padding: 8px; margin-top: 10px; }
.sh-nav .dropdown-item { border-radius: 10px; padding: .5rem .7rem; font-weight: 500; }
.sh-mega { columns: 2; column-gap: 6px; min-width: 420px; }
.sh-mega li { break-inside: avoid; }
.sh-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-icon {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; text-decoration: none;
  background: rgba(15,23,42,.05); font-size: 1rem; line-height: 1;
}
.sh-icon:hover { background: rgba(15,23,42,.1); }
.sh-cta { border-radius: 999px; padding: .6rem 1.35rem; font-weight: 700; white-space: nowrap; }

/* Scrolled state — set by public.js. Tightens the pill so it stops competing with
   the page once the reader is past the hero. */
.sh.is-stuck .sh-strip { display: none; }
.sh.is-stuck .sh-bar { padding: 8px 0; }
.sh.is-stuck .sh-pill { box-shadow: 0 6px 18px rgba(15,23,42,.12); }

@media (max-width: 991.98px) {
  .sh-pill { border-radius: 20px; padding: 10px 14px; }
  .sh-nav { margin-left: 0; padding: 8px 0; }
  .sh-nav .nav-link { padding: .55rem .4rem; }
  .sh-actions { margin: 8px 0 4px; }
  .sh-mega { columns: 1; min-width: 0; }
  .sh-strip .container { justify-content: center; text-align: center; }
  .sh-strip-right { margin-left: 0; }
  .sh-strip-right .sh-strip-item + .sh-strip-item { border-left: 0; padding-left: 0; }
}

/* ===================================================================
   LOCATIONS WE SERVE — state tabs + area chips (v37)
   Tabs are CSS-only (radio + general sibling), so switching states does
   not depend on JavaScript. The panel colours come from --brand, so the
   section matches whatever palette the site was set up with.
   =================================================================== */
.lw { padding: 72px 0; background: #fff; }
.lw-head { text-align: center; max-width: 680px; margin: 0 auto 26px; }
.lw-eyebrow {
  display: inline-block; font-weight: 700; letter-spacing: .04em; font-size: .82rem;
  text-transform: uppercase; color: var(--brand); background: rgba(0,0,0,.04);
  padding: .3rem .7rem; border-radius: 6px;
}
.lw-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 14px 0 0; color: #14261c; }
.lw-rule { display: block; width: 74px; height: 4px; border-radius: 4px; margin: 14px auto 18px;
  background: linear-gradient(90deg, var(--brand), var(--brand-accent, #f59e0b)); }
.lw-sub { color: #6b7280; margin: 0; }

.lw-radio { position: absolute; opacity: 0; pointer-events: none; }
.lw-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-bottom: 26px; }
.lw-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lw-tab {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; cursor: pointer;
  padding: .7rem 1.5rem; font-weight: 700; color: #14261c; display: inline-flex; gap: 8px; align-items: center;
}
.lw-tab:hover { border-color: var(--brand); }
.lw-tab:focus-visible { outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; }
.lw-search { display: flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 4px 4px 16px; background: #fff; }
.lw-search input { border: 0; outline: 0; padding: .45rem 0; min-width: 190px; background: transparent; font-size: .95rem; }
.lw-search button { border: 0; background: var(--brand); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }

.lw-panel { display: none; }
.lw-panels { position: relative; }
/* radio i checked → panel i shown */
#lwtab-0:checked ~ .lw-panels .lw-panel[data-panel="0"],
#lwtab-1:checked ~ .lw-panels .lw-panel[data-panel="1"],
#lwtab-2:checked ~ .lw-panels .lw-panel[data-panel="2"],
#lwtab-3:checked ~ .lw-panels .lw-panel[data-panel="3"],
#lwtab-4:checked ~ .lw-panels .lw-panel[data-panel="4"],
#lwtab-5:checked ~ .lw-panels .lw-panel[data-panel="5"] { display: grid; }
/* v101 — keyboard focus must be VISIBLE. The radios are the real controls (opacity:0,
   so still focusable and still arrow-navigable); without this the focus ring landed on an
   invisible input and the page looked unresponsive to a keyboard. Same shape as the
   :checked rules below — the radio is a preceding sibling of .lw-controls, so the ring is
   drawn on its matching label. */
#lwtab-0:focus-visible ~ .lw-controls .lw-tab:nth-of-type(1),
#lwtab-1:focus-visible ~ .lw-controls .lw-tab:nth-of-type(2),
#lwtab-2:focus-visible ~ .lw-controls .lw-tab:nth-of-type(3),
#lwtab-3:focus-visible ~ .lw-controls .lw-tab:nth-of-type(4),
#lwtab-4:focus-visible ~ .lw-controls .lw-tab:nth-of-type(5),
#lwtab-5:focus-visible ~ .lw-controls .lw-tab:nth-of-type(6) {
  outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px;
}
#lwtab-0:checked ~ .lw-controls .lw-tab:nth-of-type(1),
#lwtab-1:checked ~ .lw-controls .lw-tab:nth-of-type(2),
#lwtab-2:checked ~ .lw-controls .lw-tab:nth-of-type(3),
#lwtab-3:checked ~ .lw-controls .lw-tab:nth-of-type(4),
#lwtab-4:checked ~ .lw-controls .lw-tab:nth-of-type(5),
#lwtab-5:checked ~ .lw-controls .lw-tab:nth-of-type(6) { background: var(--brand); color: #fff; border-color: var(--brand); }

.lw-panel {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0;
  border-radius: 24px; overflow: hidden; box-shadow: 0 10px 40px rgba(15,23,42,.09); background: #fff;
}
/* The side panel is white text, so it MUST carry its own dark background — without one
   the heading, blurb and icon are white-on-white and simply vanish. The gradient is the
   default; an optional photo (Settings → Images → "Where we cover") sits behind it and
   the overlay keeps the text readable either way. */
.lw-side { color: #fff; padding: 38px 34px; display: flex; flex-direction: column;
  position: relative; background-size: cover; background-position: center;
  background-image: linear-gradient(150deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand) 55%, #0b1a33)); }
/* Three layers, top to bottom: readability overlay → the photo → the same gradient again.
   The gradient underneath is what keeps the text readable if the photo 404s, instead of
   leaving a translucent overlay sitting on white. */
.lw-side.has-photo {
  background-image:
    linear-gradient(150deg, color-mix(in srgb, var(--brand) 88%, #000) 10%, rgba(11,26,51,.7)),
    var(--lw-photo),
    linear-gradient(150deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand) 55%, #0b1a33)); }
.lw-side-ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 26px; }
.lw-side h3 { font-size: 2rem; font-weight: 800; line-height: 1.12; margin: 0 0 14px; }
.lw-side p { color: rgba(255,255,255,.82); margin: 0 0 22px; }
.lw-count { margin-top: auto; display: flex; align-items: baseline; gap: 10px; }
.lw-count b { font-size: 2.4rem; color: var(--brand-accent, #f59e0b); line-height: 1; }
.lw-count span { color: rgba(255,255,255,.8); }
.lw-side-cta {
  margin-top: 20px; display: inline-flex; justify-content: center; gap: 10px; text-decoration: none;
  background: var(--brand-accent, #f59e0b); color: #14261c; font-weight: 800;
  padding: .95rem 1.2rem; border-radius: 12px;
}
.lw-side-cta:hover { filter: brightness(1.06); color: #14261c; }

.lw-main { padding: 32px 34px; min-width: 0; }
.lw-main-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.lw-main-head h4 { font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--brand); margin: 0; }
.lw-more { margin-left: auto; font-weight: 700; font-size: .92rem; color: var(--brand); text-decoration: none; }
.lw-more:hover { text-decoration: underline; }
.lw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lw-chip {
  border: 1px solid #e8efe9; background: #f6faf7; border-radius: 10px; padding: .55rem 1rem;
  color: #374151; text-decoration: none; font-size: .95rem; display: inline-flex; gap: 8px; align-items: center;
}
.lw-chip span { color: var(--brand); }
.lw-chip:hover { border-color: var(--brand); color: #111827; }
.lw-chip[hidden] { display: none; }
.lw-note { margin: 22px 0 0; color: #6b7280; font-size: .92rem; }
.lw-note a { font-weight: 700; }
.lw-empty { text-align: center; color: #6b7280; padding: 26px 0 0; }

@media (max-width: 991.98px) {
  .lw { padding: 52px 0; }
  .lw-panel { grid-template-columns: minmax(0, 1fr); }
  .lw-side { padding: 30px 26px; }
  .lw-main { padding: 26px; }
  .lw-search { width: 100%; justify-content: space-between; }
  .lw-search input { min-width: 0; flex: 1; }
}

/* ===================================================================
   HOMEPAGE v40 — listings + services marketplace
   Every class is `hx-` prefixed and every rule is class-scoped: this
   file is shared with every other page, so an element selector here
   (h2, table, section) would silently restyle the whole site.
   The exceptions are the `lw-` coverage classes, which are unchanged
   from v37 and already scoped.
   =================================================================== */
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ic-lg{width:26px;height:26px}
.ic-xl{width:46px;height:46px}

.hx-sec{padding:84px 0}
.hx-sec-head{max-width:680px; margin:0 auto 44px; text-align:center}
.hx-sec-head p{color:#42546a; margin:12px 0 0}
.hx-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
  background:rgba(0,0,0,.045); padding:.42rem .85rem; border-radius:999px;
}
.hx-eyebrow-light{background:rgba(255,255,255,.16); color:#fff}
.hx-h1{font-size:clamp(2.2rem,3.8vw,3.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:20px 0 18px; max-width:16ch}
.hx-h2{font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.14; margin:16px 0 0}
.hx-lead{color:#42546a; margin:16px 0 0; max-width:52ch}
.hx-center{text-align:center}
.hx-mt{margin-top:26px}
.hx-link{color:var(--brand); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.hx-link:hover{text-decoration:underline}
.hx-link-light{color:#fff}
.hx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer;
  text-decoration:none; font-weight:700; font-size:.98rem; padding:.9rem 1.5rem; border-radius:999px;
  transition:background .16s ease, box-shadow .16s ease, color .16s ease;
}
.hx-btn-p{background:var(--brand); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.16)}
.hx-btn-p:hover{filter:brightness(1.08); color:#fff}
.hx-btn-a{background:var(--brand-accent,#f59e0b); color:#1b1300}
.hx-btn-a:hover{filter:brightness(1.06); color:#1b1300}
.hx-btn-g{background:#fff; color:#0d1b2a; border:1px solid #e7ecf1}
.hx-btn-g:hover{border-color:var(--brand); color:var(--brand)}
.hx-btn-lg{padding:1.02rem 1.8rem; font-size:1.02rem}
.hx-btn-sm{padding:.55rem 1rem; font-size:.9rem}
.hx-w100{width:100%}
.hx-grow{flex:1}
.hx-2col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
/* Keyboard users must be able to see where they are. */
.hx-sec a:focus-visible,.hx-btn:focus-visible,.lw-tab:focus-visible,.hx-in:focus-visible{
  outline:3px solid rgba(0,0,0,.28); outline-offset:2px;
}

/* hero */
.hx-hero{background:linear-gradient(180deg,#f7fbfc 0%,#fff 72%); padding:60px 0 76px; position:relative; overflow:hidden}
.hx-hero:after{content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.05),transparent 62%)}
.hx-hero .container{position:relative; z-index:1}
.hx-hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hx-hero-sub{font-size:1.1rem; color:#42546a; max-width:36ch}
.hx-search{
  margin-top:30px; background:#fff; border:1px solid #e7ecf1; border-radius:22px; box-shadow:0 8px 26px rgba(13,27,42,.08);
  padding:10px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) auto; gap:14px; align-items:center;
}
.hx-sfield{display:flex; align-items:center; gap:10px; padding:.65rem .85rem; min-width:0}
.hx-sfield + .hx-sfield{border-left:1px solid #e7ecf1}
.hx-sfield > div{min-width:0; flex:1}
.hx-sfield .ic{color:var(--brand)}
.hx-sfield label{display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7c8ba1}
.hx-sfield select{border:0; outline:0; font:inherit; font-weight:600; width:100%; background:transparent; padding:2px 0 0}
.hx-search .hx-btn{white-space:nowrap}
.hx-trust{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; color:#42546a; font-size:.93rem}
.hx-trust li{display:inline-flex; align-items:center; gap:7px}
.hx-trust .ic{color:#0f9d58}
.hx-trust-wrap{margin-top:26px}
.hx-hero-card{position:relative}
.hx-hero-photo{
  border-radius:24px; aspect-ratio:4/3.4; box-shadow:0 18px 46px rgba(13,27,42,.16);
  background-color:var(--brand); background-size:cover; background-position:center;
  display:grid; place-items:center; color:rgba(255,255,255,.45);
}
.hx-ph{opacity:.6}
.hx-chip{position:absolute; background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(13,27,42,.18); padding:13px 18px; display:flex; align-items:center; gap:12px}
.hx-chip-a{top:26px; right:-14px}
.hx-chip-b{bottom:26px; left:-18px}
.hx-chip b{display:block; font-size:1.15rem; line-height:1.15}
.hx-chip small{color:#7c8ba1; font-size:.8rem}
.hx-chip-ic{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center}

/* stats */
.hx-stats{background:#0d1b2a; color:#fff; padding:34px 0}
.hx-stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.hx-stats b{display:block; font-size:2rem; font-weight:800; letter-spacing:-.04em}
.hx-stats span{opacity:.62; font-size:.9rem}

/* quote */
.hx-quote{background:#f6f8fa}
.hx-pas{display:grid; gap:16px; margin-top:26px}
.hx-pas-row{display:flex; gap:14px; align-items:flex-start}
.hx-pas-row b{display:block; margin-bottom:2px}
.hx-pas-row p{color:#42546a; margin:0}
.hx-n{width:30px;height:30px;border-radius:9px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.hx-form{background:#fff; border:1px solid #e7ecf1; border-radius:24px; padding:30px; box-shadow:0 8px 26px rgba(13,27,42,.06)}
.hx-steps{display:flex; align-items:center; gap:8px; margin-bottom:16px; color:#7c8ba1; font-size:.85rem}
/* One field = label + control + its error line, so spacing lives in one place instead of
   being a margin on every label (which left the buttons with none at all). */
.hx-f{margin-bottom:16px}
.hx-f:last-of-type{margin-bottom:0}
.hx-lab{display:block; font-weight:700; font-size:.88rem; margin:0 0 6px}
.hx-opt{font-weight:500; color:#8a99ad; font-size:.8rem}
.hx-in{width:100%; border:1px solid #e7ecf1; border-radius:12px; padding:.8rem .9rem; font:inherit; outline:0; background:#fff}
.hx-in:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,0,0,.06)}
/* Bootstrap's .is-invalid only styles .form-control, so these custom inputs showed NO
   feedback at all — pressing Continue with an empty field looked like a dead button. */
.hx-in.is-invalid{border-color:#dc2626; background:#fff7f7}
.hx-in.is-invalid:focus{border-color:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.hx-err{display:flex; gap:6px; align-items:flex-start; color:#b91c1c; font-size:.82rem;
  font-weight:600; margin:6px 0 0; line-height:1.4}
.hx-err::before{content:"!"; flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:#dc2626; color:#fff; font-size:.68rem; font-weight:800; display:grid;
  place-items:center; margin-top:1px}
.hx-urg{display:flex; gap:8px; flex-wrap:wrap}
/* The Continue button sat flush against the urgency chips — they read as one control. */
.hx-next{margin-top:22px}
/* Step chrome and the step buttons only make sense once JS has taken over. */
.hx-form .hx-steps{display:none}
.hx-form.stepped .hx-steps{display:flex}
.hx-form.stepped [data-step="2"]{display:none}
.hx-form.stepped.at-2 [data-step="1"]{display:none}
.hx-form.stepped.at-2 [data-step="2"]{display:block}
/* With no JS the two steps run together, so step 2 needs the gap the Continue button
   would otherwise have provided. */
.hx-form:not(.stepped) [data-step="2"]{margin-top:16px}
.hx-urg-chip input{position:absolute; opacity:0; width:0; height:0}
.hx-urg-chip span{display:inline-block; border:1px solid #e7ecf1; border-radius:999px; padding:.45rem .95rem; font-size:.88rem; font-weight:600; color:#42546a; cursor:pointer}
.hx-urg-chip input:checked + span{background:var(--brand); border-color:var(--brand); color:#fff}
.hx-urg-chip input:focus-visible + span{outline:3px solid rgba(0,0,0,.28); outline-offset:2px}
/* SMS consent (v69). Deliberately quiet — a consent box styled like a call to action is
   nudging, and the checkbox is 20px so it stays a real tap target on a phone. */
.hx-consent{margin-top:4px}
.hx-chk{display:flex; align-items:flex-start; gap:10px; cursor:pointer; color:#5b6b80; font-size:.86rem; line-height:1.45}
.hx-chk input{width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:var(--brand); cursor:pointer}
.hx-form-btns{display:flex; gap:10px; margin-top:22px}
.hx-fine{text-align:center; color:#7c8ba1; font-size:.82rem; margin-top:12px}

/* popular searches — grouped by service (v43) */
.hx-pop{background:#fff}
.hx-pop-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.hx-pop-group{
  border:1px solid #e7ecf1; border-radius:20px; padding:22px 24px 20px; background:#fff;
  transition:box-shadow .16s ease, border-color .16s ease;
}
.hx-pop-group:hover{box-shadow:0 14px 34px rgba(13,27,42,.1); border-color:transparent}
.hx-pop-head{display:flex; align-items:center; gap:12px; text-decoration:none; color:#0d1b2a; margin-bottom:16px}
.hx-pop-ic{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(0,0,0,.05); color:var(--brand);
}
.hx-pop-ic .ic{width:21px;height:21px}
.hx-pop-name{font-weight:800; font-size:1.05rem; letter-spacing:-.02em; line-height:1.2}
.hx-pop-head:hover .hx-pop-name{color:var(--brand)}
.hx-pop-go{margin-left:auto; color:var(--brand); opacity:0; transform:translateX(-4px); transition:.16s ease}
.hx-pop-group:hover .hx-pop-go{opacity:1; transform:none}
.hx-pop-areas{display:flex; flex-wrap:wrap; gap:8px}
.hx-pop-area{
  border:1px solid #e7ecf1; border-radius:999px; padding:.42rem .95rem; font-size:.9rem;
  color:#42546a; text-decoration:none; background:#f6f8fa;
}
.hx-pop-area:hover{background:var(--brand); border-color:var(--brand); color:#fff}

/* services grid */
.hx-svcs{background:#f6f8fa; background-image:radial-gradient(rgba(13,27,42,.07) 1px,transparent 1px); background-size:22px 22px}
.hx-svc-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.hx-svc-tile{background:#fff; border-radius:16px; padding:24px 12px; text-align:center; text-decoration:none;
  box-shadow:0 1px 3px rgba(13,27,42,.06); border:1px solid transparent; transition:.16s ease; display:block}
.hx-svc-tile:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(13,27,42,.12); border-color:var(--brand)}
.hx-svc-ic{width:46px;height:46px;margin:0 auto 12px;border-radius:13px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center}
.hx-svc-name{font-weight:650; font-size:.93rem; color:#42546a}

/* featured providers */
.hx-feat{background:#fff}
.hx-feat-top{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:30px}
.hx-feat-all{margin-left:auto}
.hx-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.hx-card{background:#fff; border:1px solid #e7ecf1; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; transition:.18s ease}
.hx-card:hover{transform:translateY(-4px); box-shadow:0 18px 46px rgba(13,27,42,.14); border-color:transparent}
.hx-card-img{aspect-ratio:16/10; position:relative; display:grid; place-items:center; background:var(--brand); color:rgba(255,255,255,.5)}
.hx-card-img img{width:100%; height:100%; object-fit:cover}
.hx-card-ph{opacity:.7}
.hx-card-badge{position:absolute; top:14px; left:14px; background:#fff; color:#0d1b2a; border-radius:999px;
  padding:.34rem .8rem; font-size:.78rem; font-weight:800; display:inline-flex; gap:6px; align-items:center}
.hx-card-badge .ic{color:#0f9d58; width:14px; height:14px}
.hx-card-b{padding:22px; display:flex; flex-direction:column; flex:1}
.hx-card-b h3{font-size:1.18rem; margin:0 0 12px}
.hx-card-b h3 a{text-decoration:none; color:#0d1b2a}
.hx-card-b h3 a:hover{color:var(--brand)}
.hx-meta{list-style:none; margin:0; padding:0; display:grid; gap:9px; color:#42546a; font-size:.93rem}
.hx-meta li{display:flex; gap:9px; align-items:center}
.hx-meta .ic{color:#7c8ba1; width:16px; height:16px}
.hx-card-f{margin-top:auto; padding-top:18px; display:flex; gap:8px; flex-wrap:wrap}

/* industries */
.hx-inds{background:#f6f8fa}
.hx-ind-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.hx-ind-card{background:#fff; border:1px solid #e7ecf1; border-radius:20px; padding:28px; text-decoration:none; display:flex; flex-direction:column; transition:.16s ease}
.hx-ind-card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(13,27,42,.1); border-color:transparent}
.hx-ind-ic{width:48px;height:48px;border-radius:14px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.hx-ind-card h3{font-size:1.15rem; color:#0d1b2a; margin-bottom:10px}
.hx-ind-card p{color:#42546a; font-size:.95rem; margin:0 0 16px}
.hx-ind-go{margin-top:auto; color:var(--brand); font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:7px}

/* cost */
.hx-cost{background:#fff}
.hx-cost-grid{align-items:center}
.hx-cost .hx-btn{margin-top:26px}
.hx-cost-card{background:#f6f8fa; border-radius:24px; padding:12px 26px 26px; border:1px solid #e7ecf1}
.hx-cost-table{width:100%; border-collapse:collapse}
.hx-cost-table caption{caption-side:top; text-align:left; padding:14px 0; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#7c8ba1}
.hx-cost-table th{text-align:left; font-weight:650; padding:.85rem 0; border-top:1px solid #e7ecf1}
.hx-cost-table th a{color:#0d1b2a; text-decoration:none}
.hx-cost-table th a:hover{color:var(--brand)}
.hx-cost-table td{text-align:right; padding:.85rem 0; border-top:1px solid #e7ecf1; font-weight:800; color:var(--brand); white-space:nowrap}

/* credentials */
.hx-cred{background:#f6f8fa; background-image:radial-gradient(rgba(13,27,42,.07) 1px,transparent 1px); background-size:22px 22px}
.hx-cred .hx-2col{align-items:center}
.hx-cred-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px}
.hx-cred-card{background:#fff; border-radius:14px; padding:17px 18px; display:flex; gap:13px; align-items:center;
  box-shadow:0 1px 3px rgba(13,27,42,.06); text-decoration:none; font-weight:650; font-size:.95rem; color:#0d1b2a}
a.hx-cred-card:hover{box-shadow:0 10px 24px rgba(13,27,42,.12); color:var(--brand)}
.hx-cred-ic{width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center;flex:none}
.hx-cred-media{position:relative}
.hx-cred-photo{border-radius:24px; aspect-ratio:4/3; background-color:var(--brand); background-size:cover; background-position:center;
  box-shadow:0 18px 46px rgba(13,27,42,.16); display:grid; place-items:center; color:rgba(255,255,255,.5)}
.hx-cred-badge{position:absolute; left:-14px; bottom:24px; background:#fff; border-radius:14px; padding:13px 20px 13px 13px;
  display:flex; gap:12px; align-items:center; box-shadow:0 12px 30px rgba(13,27,42,.18); max-width:92%}
.hx-cred-tick{width:34px;height:34px;border-radius:50%;background:#0f9d58;color:#fff;display:grid;place-items:center;flex:none}
.hx-cred-badge b{display:block; font-size:.95rem; line-height:1.2}
.hx-cred-badge span{font-size:.84rem; color:#7c8ba1}

/* how it works */
.hx-how{background:#fff}
.hx-how-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.hx-how-step{background:#f6f8fa; border-radius:24px; padding:32px 28px}
.hx-how-n{width:44px;height:44px;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem;margin-bottom:18px}
.hx-how-step h3{font-size:1.18rem; margin-bottom:10px}
.hx-how-step p{color:#42546a; font-size:.96rem}

/* banner */
.hx-banner{background:linear-gradient(120deg,#0d1b2a,#12455a); background-size:cover; background-position:center; color:#fff; padding:70px 0; text-align:center}
.hx-banner h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.03em; margin-bottom:12px}
.hx-banner p{color:rgba(255,255,255,.74); max-width:62ch; margin:0 auto}

/* guides */
.hx-reads{background:#f6f8fa}
.hx-read-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.hx-read{background:#fff; border:1px solid #e7ecf1; border-radius:20px; padding:28px; text-decoration:none; display:flex; flex-direction:column; transition:.16s ease}
.hx-read:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(13,27,42,.1); border-color:transparent}
.hx-read-ic{width:48px;height:48px;border-radius:14px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.hx-read-kind{font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7c8ba1; margin-bottom:8px}
.hx-read h3{font-size:1.12rem; color:#0d1b2a; margin-bottom:16px}

/* testimonials */
.hx-tst{background:#fff}
.hx-tst-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.hx-tst-card{background:#f6f8fa; border-radius:24px; padding:28px; margin:0}
.hx-tst-card blockquote{margin:0 0 18px; color:#42546a}
.hx-tst-card figcaption{display:flex; gap:12px; align-items:center}
.hx-av{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.06);color:var(--brand);display:grid;place-items:center;font-weight:800;flex:none}
.hx-tst-card b{display:block; font-size:.95rem}
.hx-tst-card small{color:#7c8ba1}

/* why us (v43) — a coloured top rule, a meaningful icon and a step number, so the three
   cards read as a sequence rather than three identical boxes */
.hx-why{background:#f6f8fa}
.hx-why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.hx-why-card{
  background:#fff; border:1px solid #e7ecf1; border-radius:24px; padding:32px 30px 34px;
  position:relative; overflow:hidden; transition:box-shadow .16s ease, transform .16s ease;
}
.hx-why-card:before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--brand), var(--brand-accent,#f59e0b));
}
.hx-why-card:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(13,27,42,.12)}
.hx-why-top{display:flex; align-items:center; margin-bottom:18px}
.hx-why-ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:var(--brand); color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.hx-why-n{
  margin-left:auto; font-size:1.9rem; font-weight:800; letter-spacing:-.04em;
  color:#0d1b2a; opacity:.08; line-height:1;
}
.hx-why-card h3{font-size:1.22rem; font-weight:800; margin-bottom:10px}
.hx-why-card p{color:#42546a; font-size:.96rem}

/* for providers */
.hx-pros{background:linear-gradient(120deg,#0d1b2a,#12455a); color:#fff; padding:64px 0}
.hx-pros-inner{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; align-items:center}
.hx-pros p{color:rgba(255,255,255,.76); margin-top:14px; max-width:60ch}
.hx-pros-cta{display:flex; flex-direction:column; gap:14px; align-items:flex-start}

@media (max-width:1199.98px){
  .hx-svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hx-pop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .hx-sec{padding:56px 0}
  .hx-hero-grid,.hx-2col,.hx-pros-inner{grid-template-columns:minmax(0,1fr); gap:36px}
  .hx-search{grid-template-columns:minmax(0,1fr)}
  .hx-sfield + .hx-sfield{border-left:0; border-top:1px solid #e7ecf1}
  .hx-stats .container{grid-template-columns:repeat(2,1fr); gap:26px}
  .hx-cards,.hx-ind-grid,.hx-how-grid,.hx-read-grid,.hx-tst-grid,.hx-why-grid{grid-template-columns:minmax(0,1fr)}
  .hx-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-pop-grid{grid-template-columns:minmax(0,1fr)}
  .hx-cred-badge{left:12px}
  .hx-chip-a{right:8px} .hx-chip-b{left:8px}
}

/* free tools band (v41) — same card shape as industries and guides, so the page keeps
   one vocabulary rather than inventing a third card style. */
.hx-tools{background:#fff}
.hx-tool-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.hx-tool{background:#f6f8fa; border:1px solid #e7ecf1; border-radius:20px; padding:28px; text-decoration:none; display:flex; flex-direction:column; transition:.16s ease}
.hx-tool:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(13,27,42,.1); border-color:transparent; background:#fff}
.hx-tool-ic{width:48px;height:48px;border-radius:14px;background:rgba(0,0,0,.05);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.hx-tool h3{font-size:1.12rem; color:#0d1b2a; margin-bottom:10px}
.hx-tool p{color:#42546a; font-size:.95rem; margin:0 0 16px}
@media (max-width:991.98px){ .hx-tool-grid{grid-template-columns:minmax(0,1fr)} }

/* featured flag + owner-only preview note (v42) */
.hx-card-flag{
  position:absolute; top:14px; right:14px; background:var(--brand-accent,#f59e0b); color:#1b1300;
  border-radius:999px; padding:.3rem .75rem; font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.hx-owner-note{
  border:1px dashed #c9d4de; border-radius:16px; background:#fff; padding:18px 22px;
  color:#42546a; font-size:.93rem; text-align:center; max-width:820px; margin:0 auto;
}
.hx-owner-note b{color:#0d1b2a}

/* ══════════════════════════════════════════════════════════════════════════
   RICH BLOCKS — location + service×location pages (v51)
   Added, not replacing: every existing section on those pages is untouched.
   Colours come from the site's brand vars so this adapts per site.
   ══════════════════════════════════════════════════════════════════════════ */
.pv-sec,.fp-sec,.nb-sec,.gd-sec,.jb-sec{padding:64px 0}
.pv-sec,.nb-sec{background:#f4f8fb}
.jb-sec{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,#fff),color-mix(in srgb,var(--brand) 3%,#fff))}
.pv-head{margin-bottom:30px}
.pv-head-c{text-align:center}
.pv-h2{font-size:2.1rem;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
.pv-lead{color:#64748b;font-size:1rem;max-width:64ch;margin:0}
.pv-head-c .pv-lead{margin:0 auto}
.pv-eyebrow{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--brand) 10%,#fff);
  color:var(--brand);font-weight:800;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;margin-bottom:12px}
.pv-eyebrow svg{width:14px;height:14px}

/* provider cards */
.pv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pv-card{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:18px;display:flex;flex-direction:column}
.pv-top{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.pv-av{width:58px;height:58px;border-radius:50%;flex:0 0 auto;object-fit:cover;display:block}
.pv-av-i{background:linear-gradient(140deg,#cbd5e1,#94a3b8);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.05rem}
.pv-id{min-width:0}
.pv-name{font-size:1.02rem;font-weight:800;color:var(--ink);margin:0}
.pv-where{font-size:.83rem;color:#64748b;margin:1px 0 4px}
.pv-rate{display:flex;align-items:center;gap:5px;font-size:.86rem;font-weight:800;color:var(--ink);margin:0}
.pv-rate svg{width:14px;height:14px;fill:var(--brand-accent);stroke:var(--brand-accent)}
.pv-rate i{color:#8fa0b5;font-weight:600;font-style:normal}
.pv-lab{font-size:.78rem;font-weight:800;color:var(--ink);margin:0 0 6px}
.pv-quote{font-size:.9rem;color:#48586c;line-height:1.5;margin:0}
/* badges + CTA share a baseline across a row however long the review runs */
.pv-lab.pv-vlab{margin-top:auto;padding-top:16px}
.pv-badges{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.pv-b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef4fb;color:#5b7899}
.pv-b svg{width:15px;height:15px}
.pv-b.on{background:var(--brand);color:#fff}
.pv-foot{margin-top:auto}
.pv-cta{display:block;text-align:center;background:color-mix(in srgb,var(--brand) 10%,#fff);
  color:color-mix(in srgb,var(--brand) 80%,#000);border-radius:99px;padding:.72rem;font-weight:700;font-size:.92rem}
.pv-cta:hover{background:color-mix(in srgb,var(--brand) 16%,#fff);text-decoration:none}

/* featured rail */
.fp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fp-card{background:#fff;border:1px solid #e7ecf1;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 22px rgba(15,23,42,.06);display:flex;flex-direction:column}
.fp-photo{position:relative;height:190px;background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,rgba(8,20,35,0) 34%,rgba(8,20,35,.84)),
    linear-gradient(140deg,color-mix(in srgb,var(--brand) 70%,#000),#33455c)}
/* three layers so a photo that 404s still lands on the gradient, never on white */
.fp-photo.has-photo{background-image:linear-gradient(180deg,rgba(8,20,35,0) 30%,rgba(8,20,35,.84)),
  var(--fp-photo),linear-gradient(140deg,color-mix(in srgb,var(--brand) 70%,#000),#33455c)}
.fp-tags{position:absolute;top:11px;left:11px;display:grid;gap:6px;justify-items:start}
.fp-tag{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;
  font-size:.68rem;font-weight:800;color:#fff;background:rgba(15,23,42,.62)}
.fp-tag svg{width:11px;height:11px;fill:currentColor}
.fp-tag.elite{background:var(--brand-accent);color:#2a1f04}
.fp-tag.ver{background:#12a37a}
.fp-rate{position:absolute;top:11px;right:11px;background:#fff;border-radius:99px;padding:4px 11px;
  font-size:.82rem;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:5px}
.fp-rate svg{width:13px;height:13px;fill:var(--brand-accent);stroke:var(--brand-accent)}
.fp-id{position:absolute;left:16px;right:16px;bottom:13px;color:#fff}
.fp-id b{display:block;font-size:1.12rem;font-weight:800}
.fp-id span{font-size:.86rem;color:rgba(255,255,255,.86)}
.fp-id em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:.8rem;
  color:rgba(255,255,255,.8);margin-top:3px}
.fp-id em svg{width:13px;height:13px}
.fp-body{padding:16px;display:flex;flex-direction:column;flex:1}
.fp-stats{display:flex;gap:6px;text-align:center;margin-bottom:14px}
.fp-stats div{flex:1}
.fp-stats b{display:block;font-size:1.24rem;font-weight:800;color:var(--brand)}
.fp-stats span{font-size:.72rem;color:#8fa0b5}
.fp-resp{display:flex;align-items:center;justify-content:center;gap:7px;
  background:color-mix(in srgb,var(--brand) 8%,#fff);color:color-mix(in srgb,var(--brand) 80%,#000);
  border-radius:10px;padding:.6rem;font-size:.85rem;font-weight:700;margin:0 0 12px}
.fp-resp svg{width:14px;height:14px}
.fp-pills{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.fp-pill{background:color-mix(in srgb,var(--brand-accent) 16%,#fff);color:#8a5209;border-radius:99px;
  padding:3px 10px;font-size:.72rem;font-weight:700;white-space:nowrap}
.fp-spec{font-size:.82rem;font-weight:800;color:var(--ink);margin:0 0 6px}
.fp-list{list-style:none;display:grid;gap:5px;margin:0 0 14px;padding:0}
.fp-list li{display:flex;gap:7px;align-items:flex-start;font-size:.86rem;color:#48586c}
.fp-list svg{width:14px;height:14px;color:#12a37a;margin-top:3px;flex:0 0 auto}
.fp-about{font-size:.86rem;color:#48586c;margin:0 0 14px}
.fp-btns{margin-top:auto;display:grid;gap:8px}
.fp-btns .btn{border-radius:10px;font-size:.9rem;padding:.6rem}

/* nearby grid */
.nb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.nb-all{font-weight:800;color:var(--brand);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nb-all svg{width:16px;height:16px}
.nb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nb-card{border:1px solid #e7ecf1;border-radius:14px;overflow:hidden;background:#fff}
.nb-c-h{background:var(--brand);color:#fff;padding:13px 16px;display:flex;justify-content:space-between;align-items:center}
.nb-c-h b{font-size:.92rem;font-weight:800}
.nb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid #f1f5f9;font-size:.92rem;color:var(--ink)}
.nb-row:last-child{border-bottom:0}
.nb-row:hover{background:#f8fbfd;text-decoration:none}
.nb-row span{font-size:.78rem;color:#8fa0b5;display:flex;align-items:center;gap:4px;white-space:nowrap}
.nb-row span svg{width:13px;height:13px}

/* guides band */
.gd-hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.gd-card{background:#fff;border:1px solid #e7ecf1;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;color:inherit}
.gd-card:hover{text-decoration:none;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.gd-img{display:block;height:200px;position:relative;background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,color-mix(in srgb,var(--brand) 55%,#8ba6bd),#42586f)}
.gd-img.has-photo{background-image:var(--gd-photo),linear-gradient(140deg,color-mix(in srgb,var(--brand) 55%,#8ba6bd),#42586f)}
.gd-tag{position:absolute;top:12px;left:12px;border-radius:99px;padding:4px 11px;font-size:.72rem;
  font-weight:800;background:#fff;color:var(--brand)}
.gd-body{display:block;padding:18px;display:flex;flex-direction:column;flex:1}
.gd-body h3{font-size:1.1rem;font-weight:800;margin:0 0 8px;color:var(--ink)}
.gd-body p{font-size:.92rem;color:#64748b;line-height:1.55;margin:0}
.gd-foot{margin-top:auto;padding-top:14px;border-top:1px solid #eef2f6;display:flex;
  justify-content:space-between;align-items:center;font-size:.84rem;color:#8fa0b5}
.gd-foot .rd{color:var(--brand);font-weight:700;display:flex;align-items:center;gap:6px}
.gd-foot .rt,.gd-sm .rt{display:flex;align-items:center;gap:6px}
.gd-foot svg,.gd-sm svg{width:13px;height:13px}
.gd-small{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gd-sm{display:flex;gap:13px;border:1px solid #e7ecf1;border-radius:14px;padding:14px;background:#fff;color:inherit}
.gd-sm:hover{text-decoration:none;border-color:color-mix(in srgb,var(--brand) 30%,#fff)}
.gd-sm-img{width:66px;height:66px;border-radius:10px;flex:0 0 auto;background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,color-mix(in srgb,var(--brand) 45%,#9fb3c6),#5a7288)}
.gd-sm-img.has-photo{background-image:var(--gd-photo),linear-gradient(140deg,#9fb3c6,#5a7288)}
.gd-sm-cat{font-size:.74rem;font-weight:700;color:var(--brand);display:block;margin-bottom:3px}
.gd-sm h4{font-size:.94rem;font-weight:750;line-height:1.35;margin:0 0 6px;color:var(--ink)}
.gd-sm .rt{font-size:.78rem;color:#8fa0b5}
.gd-cta{margin-top:22px;background:var(--brand);color:#fff;border-radius:14px;padding:22px 26px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gd-cta b{display:block;font-size:1.15rem;font-weight:800}
.gd-cta span{font-size:.92rem;color:rgba(255,255,255,.86)}
.gd-cta .acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* provider testimonials */
.pq-wrap{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,#fff),#fff);
  border-radius:20px;padding:34px 26px;margin-top:34px}
.pq-h3{text-align:center;font-size:1.3rem;font-weight:800;margin:0 0 22px;color:var(--ink)}
.pq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pq-card{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:20px}
.pq-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pq-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,#cbd5e1,#94a3b8);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;flex:0 0 auto}
.pq-top b{display:block;font-size:.98rem;color:var(--ink)}
.pq-top span{font-size:.82rem;color:#64748b}
.pq-card p{font-size:.92rem;color:#48586c;line-height:1.55;margin:0}
.pq-meta{border-top:1px solid #eef2f6;margin-top:14px;padding-top:11px;display:flex;
  justify-content:space-between;font-size:.84rem;color:#64748b}
.pq-meta b{color:var(--brand);font-weight:800}
.pq-cta{text-align:center;margin-top:24px}

/* join band */
.jb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.jb-h2{font-size:2.2rem;font-weight:850;line-height:1.12;color:var(--ink);margin:0 0 16px}
.jb-h2 .g{color:var(--brand);display:block}
.jb-feats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 28px}
.jb-f{display:flex;gap:12px}
.jb-ic{width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--brand) 12%,#fff);
  color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.jb-ic svg{width:17px;height:17px}
.jb-ic-lg{width:44px;height:44px}
.jb-f b{display:block;font-size:.96rem;color:var(--ink);margin-bottom:3px}
.jb-f span{font-size:.87rem;color:#64748b;line-height:1.5}
.jb-btns{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.jb-btns .btn{display:inline-flex;align-items:center;gap:8px}
.jb-link{font-weight:800;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.jb-link svg{width:16px;height:16px}
.jb-ticks{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px}
.jb-ticks div{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#42546a}
.jb-tick{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--brand) 12%,#fff);
  color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.jb-tick svg{width:14px;height:14px}
.jb-panel{background:#fff;border:1px solid color-mix(in srgb,var(--brand) 18%,#fff);border-radius:20px;
  padding:26px;box-shadow:0 18px 48px color-mix(in srgb,var(--brand) 12%,transparent)}
.jb-p-top{display:flex;gap:13px;align-items:center;padding-bottom:16px;border-bottom:1px solid #eef2f6}
.jb-p-top b{display:block;font-size:1rem;color:var(--ink)}
.jb-p-top span{font-size:.86rem;color:#64748b}
.jb-rows{display:grid;gap:2px;padding-top:8px}
.jb-row{display:flex;gap:13px;align-items:center;padding:11px 0;font-size:.95rem;color:#3d4f64}

/* dual CTA */
.dl-sec{padding:0 0 64px}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dl-card{border-radius:14px;padding:22px 26px;display:flex;align-items:center;gap:16px;color:#fff}
.dl-card:hover{text-decoration:none;filter:brightness(1.06)}
.dl-card.a{background:var(--brand)}
.dl-card.b{background:#182338}
.dl-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.16);
  display:grid;place-items:center;flex:0 0 auto}
.dl-t b{display:block;font-size:1.05rem;font-weight:800}
.dl-t span{font-size:.9rem;color:rgba(255,255,255,.8)}
.dl-ar{margin-left:auto}

@media(max-width:1060px){
  .pv-grid,.fp-grid,.nb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd-small,.pq-grid{grid-template-columns:1fr}
  .gd-hero,.jb-grid,.dl-grid,.jb-feats{grid-template-columns:1fr}
}
@media(max-width:620px){
  .pv-grid,.fp-grid,.nb-grid{grid-template-columns:1fr}
  .pv-h2,.jb-h2{font-size:1.7rem}
}
/* Bootstrap underlines every <a>; these blocks are cards and rows, not body links. */
.pv-cta,.nb-row,.nb-all,.gd-card,.gd-sm,.dl-card,.jb-link,.gd-foot .rd{text-decoration:none}
.pv-cta:hover,.nb-row:hover,.gd-card:hover,.gd-sm:hover,.dl-card:hover{text-decoration:none}
.nb-all:hover,.jb-link:hover{text-decoration:underline}
/* Most locations will have two or three listings, not four. A fixed 4-column grid strands
   them against the left edge with a hole beside them, so these wrap and centre instead —
   still 4-up when there are four, tidy when there are two. */
.fp-grid,.pv-grid{display:flex;flex-wrap:wrap;justify-content:center}
.fp-card{flex:0 1 calc(25% - 15px);min-width:250px}
.pv-card{flex:0 1 calc(25% - 13.5px);min-width:240px}
@media(max-width:1060px){
  .fp-card{flex:0 1 calc(50% - 10px)}
  .pv-card{flex:0 1 calc(50% - 9px)}
}
@media(max-width:620px){ .fp-card,.pv-card{flex:1 1 100%} }

/* Community block (homeowners + providers) on location / service×location pages. */
.cm-sec{padding:64px 0;background:#f4f8fb}
.cm-h3{text-align:center;font-size:1.3rem;font-weight:800;margin:0 0 22px;color:var(--ink)}
.cm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.cm-card{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:20px;
  flex:0 1 calc(33.333% - 12px);min-width:260px}
.cm-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cm-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,#cbd5e1,#94a3b8);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;flex:0 0 auto}
.cm-top b{display:block;font-size:.98rem;color:var(--ink)}
.cm-top span{font-size:.82rem;color:#64748b}
.cm-ok{margin-left:auto;color:#12a37a;display:flex}
.cm-ok svg{width:18px;height:18px}
.cm-stars{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.cm-stars .st{color:var(--brand-accent);letter-spacing:1px;font-size:.9rem}
.cm-job{color:var(--brand);font-weight:700;font-size:.86rem}
.cm-card p{font-size:.92rem;color:#48586c;line-height:1.55;margin:0}
@media(max-width:1060px){ .cm-card{flex:0 1 calc(50% - 9px)} }
@media(max-width:620px){ .cm-card{flex:1 1 100%} }

/* ── Featured providers rail: horizontal scroller + View all (v55) ───────────────────── */
.fp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.fp-head-txt{text-align:center;flex:1 1 100%}
.fp-head-txt .pv-lead{margin:0 auto}
.fp-all{font-weight:800;color:var(--brand);display:none;align-items:center;gap:8px;white-space:nowrap}
.fp-all svg{width:16px;height:16px}
.fp-all:hover{text-decoration:underline}

.fp-demo-note{display:flex;gap:10px;align-items:flex-start;background:#fff8ec;
  border:1px solid #f6dcae;border-left:3px solid var(--brand-accent);border-radius:0 10px 10px 0;
  padding:12px 15px;font-size:.86rem;color:#7c4a03;line-height:1.5;margin:0 0 22px}
.fp-demo-note svg{width:16px;height:16px;color:var(--brand-accent);margin-top:2px;flex:0 0 auto}
.fp-demo-note b{color:#5b3503}

/* The rail. Flex, never grid: a percentage grid column inside a scroll container
   resolves against the VISIBLE width, so 8 cards get crushed into the space of 4. */
.fp-rail{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 18px;
  scroll-snap-type:x mandatory;scroll-padding-left:4px;-webkit-overflow-scrolling:touch}
.fp-rail > .fp-card{flex:0 0 calc(25% - 15px);min-width:262px;scroll-snap-align:start}
.fp-rail::-webkit-scrollbar{height:8px}
.fp-rail::-webkit-scrollbar-track{background:#e8eef4;border-radius:8px}
.fp-rail::-webkit-scrollbar-thumb{background:#c2ceda;border-radius:8px}
.fp-rail::-webkit-scrollbar-thumb:hover{background:#a9b8c7}

.fp-photo{background-image:linear-gradient(180deg,rgba(8,20,35,0) 34%,rgba(8,20,35,.84)),
  var(--fp-grad,linear-gradient(140deg,color-mix(in srgb,var(--brand) 70%,#000),#33455c))}
.fp-photo.has-photo{background-image:linear-gradient(180deg,rgba(8,20,35,0) 30%,rgba(8,20,35,.84)),
  var(--fp-photo),var(--fp-grad,linear-gradient(140deg,color-mix(in srgb,var(--brand) 70%,#000),#33455c))}
.fp-tag.demo{background:#fff;color:#7c4a03;border:1px solid #f6dcae}

.fp-foot{text-align:center;margin:6px 0 0}

@media(max-width:1060px){ .fp-rail > .fp-card{flex:0 0 calc(50% - 10px)} }
@media(max-width:620px){ .fp-rail > .fp-card{flex:0 0 86%} }
@media(min-width:1061px){
  /* once the row is wide enough to hold four, put View all beside the heading */
  .fp-head{align-items:flex-end}
  .fp-head-txt{flex:1 1 auto}
  .fp-all{display:inline-flex}
  .fp-foot{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   COST GUIDE (v56) — .cq-
   A price table is read for ONE number: the typical. So that column gets a
   tinted lane and the largest type, and a range bar under each row shows how
   wide the spread is. On mobile the whole table becomes stacked cards — a
   4-column money table at 390px either scrolls sideways or shrinks to nothing.
   ══════════════════════════════════════════════════════════════════════════ */
.cq-sec{padding:64px 0;background:#fff}
.cq-head{margin-bottom:28px}
.cq-head .pv-h2{margin:0 0 10px}
.cq-intro{color:#4b5c70;font-size:1rem;line-height:1.65;max-width:74ch;margin:0}

.cq-table{border:1px solid #e7ecf1;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 4px 18px rgba(15,23,42,.05)}
.cq-thead,.cq-row{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(90px,1fr));
  align-items:center;gap:8px}
.cq-thead{background:#f6f9fb;border-bottom:1px solid #e7ecf1;padding:13px 20px;
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7a8ba0}
.cq-thead span:not(:first-child){text-align:right}
.cq-thead .is-typ{color:var(--brand)}
.cq-row{padding:16px 20px 14px;border-bottom:1px solid #f1f5f9;position:relative}
.cq-row:last-child{border-bottom:0}
.cq-row:hover{background:#fbfdfe}
.cq-job{font-size:1rem;font-weight:650;color:var(--ink);min-width:0}
.cq-cell{text-align:right;font-size:.98rem;color:#4b5c70;font-variant-numeric:tabular-nums}
.cq-cell.is-typ{font-size:1.16rem;font-weight:800;color:var(--ink)}

/* the range bar sits on its own grid line under the four cells */
.cq-bar{grid-column:1/-1;position:relative;height:6px;margin-top:12px}
.cq-bar-track{position:absolute;inset:0;background:#eef2f6;border-radius:99px}
.cq-bar-fill{position:absolute;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 35%,#fff),var(--brand))}
.cq-bar-dot{position:absolute;top:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);transform:translateY(-50%);
  box-shadow:0 1px 4px rgba(15,23,42,.25)}

.cq-fine{font-size:.82rem;color:#8494a8;line-height:1.55;margin:14px 2px 0;max-width:90ch}

.cq-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;margin-top:28px;
  align-items:start}
.cq-factors{background:#f6f9fb;border:1px solid #e7ecf1;border-radius:16px;padding:22px 24px}
.cq-h3{display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:800;color:var(--ink);margin:0 0 16px}
.cq-h3 svg{width:17px;height:17px;color:var(--brand)}
.cq-facts{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cq-fact{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:#4b5c70;line-height:1.5}
.cq-fact-ic{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand);margin-top:1px}
.cq-fact-ic svg{width:13px;height:13px}

.cq-cta{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 96%,#000),
  color-mix(in srgb,var(--brand) 62%,#0b1a33));color:#fff;border-radius:16px;padding:24px;
  position:sticky;top:88px}
.cq-cta h3{color:#fff;font-size:1.15rem;font-weight:800;margin:0 0 8px}
.cq-cta p{color:rgba(255,255,255,.84);font-size:.92rem;line-height:1.55;margin:0 0 18px}
.cq-cta .btn{border-radius:99px}
.cq-cta-fine{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.8rem !important;color:rgba(255,255,255,.72) !important;margin:12px 0 0 !important}
.cq-cta-fine svg{width:13px;height:13px}

@media(max-width:900px){
  .cq-grid{grid-template-columns:1fr}
  .cq-cta{position:static}
  .cq-facts{grid-template-columns:1fr}
}
@media(max-width:680px){
  /* stacked cards: each row becomes its own block with labelled money lines */
  .cq-thead{display:none}
  .cq-table{border:0;box-shadow:none;background:transparent;border-radius:0}
  .cq-row{display:block;border:1px solid #e7ecf1;border-radius:14px;background:#fff;
    padding:16px;margin-bottom:12px}
  .cq-row:last-child{margin-bottom:0}
  .cq-job{font-size:1.02rem;margin-bottom:10px}
  .cq-cell{display:flex;justify-content:space-between;align-items:baseline;text-align:left;
    padding:6px 0;border-bottom:1px solid #f4f7fa}
  .cq-cell:last-of-type{border-bottom:0}
  .cq-cell::before{content:attr(data-lab);font-size:.8rem;color:#8494a8;font-weight:600}
  .cq-cell.is-typ{background:color-mix(in srgb,var(--brand) 6%,#fff);margin:4px -8px;
    padding:8px;border-radius:8px;border-bottom:0}
  .cq-cell.is-typ::before{color:var(--brand);font-weight:800}
}

/* ══════════════════════════════════════════════════════════════════════════
   DIRECTORY — comparison rows (v57) — .dr-
   Rows, not a card grid: the page exists so someone can compare and then
   enquire, and rows keep the same fact in the same place on every line.
   ══════════════════════════════════════════════════════════════════════════ */
.dr-head{background:#fff;border-bottom:1px solid #e7ecf1;padding:22px 0 20px}
.dr-crumb{font-size:.8rem;color:#8fa0b5;margin-bottom:12px}
.dr-crumb span{margin:0 5px}
.dr-head-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.dr-h1{font-size:1.95rem;font-weight:800;margin:0}
.dr-sub{color:#64748b;font-size:.95rem;margin:6px 0 0}
.dr-sub b{color:var(--ink)}
.dr-head-right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dr-avg{display:inline-flex;align-items:center;gap:8px;background:#fff8ec;border:1px solid #f6dcae;
  border-radius:12px;padding:8px 13px}
.dr-avg > svg{fill:var(--brand-accent);stroke:var(--brand-accent);width:16px;height:16px}
.dr-avg b{display:block;font-size:1.15rem;color:var(--ink);line-height:1.1}
.dr-avg span span{font-size:.7rem;color:#8a6224;display:block}
.dr-live{display:inline-flex;align-items:center;gap:6px;background:#eafaf4;color:#0b7a5c;
  border:1px solid #bfe9da;border-radius:99px;padding:5px 12px;font-size:.78rem;font-weight:700}
.dr-live i{width:6px;height:6px;border-radius:50%;background:#12a37a}

/* filter bar — a real GET form, so it works with JS off and is bookmarkable */
.dr-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid #e7ecf1;padding:11px 0}
.dr-bar-in{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dr-search{position:relative;flex:1 1 230px;min-width:190px}
.dr-search svg{position:absolute;left:10px;top:10px;color:#8fa0b5;width:15px;height:15px}
.dr-search input{width:100%;border:1px solid #d8e1ea;border-radius:10px;padding:.55rem .8rem .55rem 2.05rem;
  font:inherit;font-size:.88rem;background:#fff}
.dr-search input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.dr-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8e1ea;background:#fff;
  border-radius:99px;padding:.48rem .85rem;font-size:.83rem;font-weight:650;color:#43546a;
  white-space:nowrap;text-decoration:none;margin:0}
.dr-chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.dr-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dr-chip svg{width:14px;height:14px}
.dr-chip .n{font-size:.72rem;opacity:.7}
.dr-sel select{border:0;background:transparent;font:inherit;font-size:.83rem;font-weight:650;
  color:inherit;cursor:pointer;padding:0;width:auto}
.dr-sel select:focus{outline:0}
.dr-clear{font-size:.82rem;font-weight:700;color:var(--brand);margin-left:2px}

.dr-body{padding:22px 0 64px;background:#f4f8fb}
.dr-count{font-size:.88rem;color:#64748b;margin:0 0 14px}
.dr-count b{color:var(--ink)}
.dr-rows{display:grid;gap:14px}
.dr-row{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:16px;
  display:grid;grid-template-columns:150px minmax(0,1fr) 200px;gap:18px;align-items:center;transition:.15s}
.dr-row:hover{box-shadow:0 8px 26px rgba(15,23,42,.08);border-color:#d8e1ea}
.dr-photo{height:118px;border-radius:11px;position:relative;background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,color-mix(in srgb,var(--brand) 60%,#000),#33455c);
  display:grid;place-items:center}
.dr-photo.has-photo{background-image:var(--dr-photo),
  linear-gradient(140deg,color-mix(in srgb,var(--brand) 60%,#000),#33455c)}
.dr-ini{color:rgba(255,255,255,.9);font-weight:850;font-size:1.5rem;letter-spacing:.02em}
.dr-rank{position:absolute;top:8px;left:8px;background:#fff;color:var(--ink);border-radius:8px;
  width:25px;height:25px;display:grid;place-items:center;font-size:.76rem;font-weight:850;
  box-shadow:0 2px 8px rgba(2,6,23,.2)}
.dr-main{min-width:0}
.dr-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.dr-name{font-size:1.12rem;font-weight:800;margin:0}
.dr-name a{color:var(--ink);text-decoration:none}
.dr-name a:hover{color:var(--brand)}
.dr-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;
  border-radius:99px;padding:2px 9px}
.dr-badge svg{width:11px;height:11px}
.dr-badge.ver{background:#eafaf4;color:#0b7a5c;border:1px solid #bfe9da}
.dr-badge.feat{background:#fff4e3;color:#8a5209;border:1px solid #f6dcae}
.dr-badge.feat svg{fill:currentColor}
.dr-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.81rem;color:#64748b;margin-bottom:8px}
.dr-meta span{display:flex;align-items:center;gap:5px}
.dr-meta svg{width:13px;height:13px}
.dr-desc{font-size:.88rem;color:#64748b;line-height:1.5;margin:0 0 9px}
.dr-tags{display:flex;flex-wrap:wrap;gap:6px}
.dr-tag{background:color-mix(in srgb,var(--brand) 8%,#fff);color:color-mix(in srgb,var(--brand) 85%,#000);
  border:1px solid color-mix(in srgb,var(--brand) 18%,#fff);border-radius:6px;padding:3px 8px;
  font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.dr-tag.more{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.dr-side{display:grid;gap:8px;align-content:center}
.dr-side .btn{border-radius:10px;font-size:.88rem;padding:.55rem}
.dr-score{text-align:center;background:#f4f8fb;border:1px solid #e7ecf1;border-radius:11px;padding:9px}
.dr-score b{display:block;font-size:1.5rem;font-weight:850;color:var(--ink);line-height:1}
.dr-score .stars{color:var(--brand-accent);font-size:.78rem;letter-spacing:1px;display:block;margin:2px 0}
.dr-score span:last-child{font-size:.7rem;color:#8fa0b5}
/* A business that gave no rating says so. It is never shown as 0.0 or as five grey stars,
   both of which read as "rated badly" rather than "not rated". */
.dr-noscore{text-align:center;font-size:.74rem;color:#8fa0b5;background:#f8fafc;
  border:1px dashed #d8e1ea;border-radius:11px;padding:12px 9px;line-height:1.4}

.dr-empty{background:#fff;border:1px dashed #d8e1ea;border-radius:16px;padding:48px 24px;text-align:center}
.dr-empty svg{color:#c2ceda;margin-bottom:12px}
.dr-empty h2{font-size:1.2rem;font-weight:800;margin:0 0 6px}
.dr-empty p{color:#64748b;font-size:.92rem;margin:0 0 18px}
.dr-empty-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  .dr-row{grid-template-columns:110px minmax(0,1fr)}
  .dr-photo{height:96px}
  .dr-side{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr;display:grid;align-items:stretch}
  .dr-score,.dr-noscore{display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:560px){
  .dr-row{grid-template-columns:1fr}
  .dr-photo{height:150px}
  .dr-side{grid-template-columns:1fr}
  .dr-bar{position:static}
}

/* ══════════════════════════════════════════════════════════════════════════
   BUSINESS PROFILE — enquiry-first (v58) — .bp- / .rv-
   No hero photo: most listings have none, so a 400px hero would be a gradient
   on the majority of these pages. Facts + both CTAs above the fold instead.
   ══════════════════════════════════════════════════════════════════════════ */
.bp-top{background:#fff;border-bottom:1px solid #e7ecf1;padding:22px 0}
.bp-id{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.bp-av{width:70px;height:70px;border-radius:16px;flex:0 0 auto;object-fit:cover;display:block}
.bp-av-i{background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 62%,#000),#33455c);
  display:grid;place-items:center;color:#fff;font-weight:850;font-size:1.3rem}
.bp-idtxt{min-width:0;flex:1 1 260px}
.bp-h1{font-size:1.7rem;font-weight:850;margin:0}
.bp-tag{font-size:.92rem;color:#64748b;margin:3px 0 0}
.bp-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:#64748b;margin-top:8px}
.bp-meta > span{display:flex;align-items:center;gap:5px}
.bp-meta svg{width:13px;height:13px}
.bp-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.bp-actions .btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px}

.bp-body{background:#f4f8fb;padding:24px 0 64px}
.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.bp-main{display:grid;gap:16px}
.bp-side{display:grid;gap:14px;position:sticky;top:20px}
.bp-about{color:#4b5c70;line-height:1.7;margin:0}
.bp-svc{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid #f1f5f9}
.bp-svc:last-of-type{border-bottom:0}
.bp-svc b{font-weight:650;color:var(--ink);font-size:.94rem}
.bp-svc span{font-size:.86rem;color:#64748b;white-space:nowrap}
.kvbox{background:#f6f9fb;border:1px solid #e7ecf1;border-radius:11px;padding:12px 14px}
.kvl{display:block;font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#8fa0b5;margin-bottom:4px}
.kvv{font-size:.92rem;color:var(--ink);font-weight:600}
.bp-enq-h{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 4px}
.bp-klist{display:grid;gap:9px}
.bp-k{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:#43546a;text-decoration:none;
  padding:9px 11px;border-radius:10px;background:#f6f9fb;border:1px solid #e7ecf1}
.bp-k:hover{border-color:var(--brand);text-decoration:none}
.bp-k.static{background:transparent;border-color:transparent;padding:4px 0}
.bp-k svg{color:var(--brand);margin-top:2px;width:16px;height:16px}
.bp-k b{display:block;color:var(--ink);font-size:.82rem}

/* ── reviews ─────────────────────────────────────────────── */
.rv-sum{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;
  background:#f6f9fb;border:1px solid #e7ecf1;border-radius:13px;padding:16px 18px}
.rv-avg{text-align:center}
.rv-avg b{display:block;font-size:2.4rem;font-weight:850;color:var(--ink);line-height:1}
.rv-stars{color:var(--brand-accent);font-size:1rem;letter-spacing:2px;display:block;margin:4px 0 2px}
.rv-of{font-size:.78rem;color:#8fa0b5}
.rv-bars{display:grid;gap:5px}
.rv-bar{display:flex;align-items:center;gap:10px;font-size:.8rem;color:#64748b}
.rv-bn{width:26px;flex:0 0 auto}
.rv-bt{flex:1;height:7px;background:#e6edf4;border-radius:99px;overflow:hidden}
.rv-bt i{display:block;height:100%;background:var(--brand-accent);border-radius:99px}
.rv-bc{width:22px;text-align:right;flex:0 0 auto}
.rv-list{display:grid;gap:14px;margin-top:18px}
.rv-item{border:1px solid #e7ecf1;border-radius:12px;padding:15px 16px;background:#fff}
.rv-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.rv-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,#cbd5e1,#94a3b8);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;flex:0 0 auto}
.rv-top b{display:block;font-size:.94rem;color:var(--ink)}
.rv-date{font-size:.78rem;color:#8fa0b5}
.rv-rate{margin-left:auto;color:var(--brand-accent);font-size:.92rem;letter-spacing:1px;white-space:nowrap}
.rv-title{font-size:.98rem;font-weight:750;color:var(--ink);margin:0 0 5px}
.rv-body{font-size:.9rem;color:#4b5c70;line-height:1.6;margin:0;white-space:pre-line}
.rv-empty{text-align:center;padding:26px 16px;color:#8fa0b5}
.rv-empty svg{color:#c2ceda;margin-bottom:8px}
.rv-empty p{margin:0;font-size:.9rem}

.rv-form{margin-top:22px;padding-top:20px;border-top:1px solid #e7ecf1}
.rv-form h3{font-size:1.05rem;font-weight:800;margin:0 0 3px}
.rv-ok,.rv-err{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:11px 14px;
  font-size:.88rem;font-weight:600;margin-bottom:14px;line-height:1.5}
.rv-ok{background:#eafaf4;color:#0b7a5c;border:1px solid #bfe9da}
.rv-err{background:#fff1f1;color:#b91c1c;border:1px solid #f5c9c9}
.rv-ok svg,.rv-err svg{width:16px;height:16px;margin-top:1px;flex:0 0 auto}
/* Off-screen, not display:none — some bots skip hidden fields but fill positioned ones. */
.rv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rv-pick{display:inline-flex;flex-direction:row-reverse;gap:3px}
.rv-star input{position:absolute;opacity:0;width:0;height:0}
.rv-star span{font-size:1.9rem;line-height:1;color:#dbe3ec;cursor:pointer;transition:color .1s}
/* row-reverse + the sibling selector lights every star up to the hovered one */
.rv-star:hover span,.rv-star:hover ~ .rv-star span,
.rv-star input:checked ~ span,
.rv-star:has(input:checked) span,
.rv-star:has(input:checked) ~ .rv-star span{color:var(--brand-accent)}
.rv-star input:focus-visible ~ span{outline:2px solid var(--brand);outline-offset:2px}

@media(max-width:960px){
  .bp-grid{grid-template-columns:1fr}
  .bp-side{position:static}
  .rv-sum{grid-template-columns:1fr}
}

/* Owner dashboard: tabs + profile editor (v58) */
.bd-tabs{background:#fff;border-bottom:1px solid #e7ecf1}
.bd-tabs .container{display:flex;gap:4px;flex-wrap:wrap}
.bd-tab{display:inline-flex;align-items:center;gap:8px;padding:14px 16px;font-size:.92rem;
  font-weight:650;color:#64748b;border-bottom:3px solid transparent;text-decoration:none}
.bd-tab:hover{color:var(--ink);text-decoration:none}
.bd-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.bd-tab svg{width:16px;height:16px}
.bd-tab span{font-size:.72rem;font-weight:800;background:#f1f5f9;border-radius:99px;padding:1px 7px;color:#64748b}
.bd-tab.on span{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand)}
.bd-svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.bd-svc{display:flex;align-items:center;gap:9px;border:1px solid #e7ecf1;border-radius:9px;
  padding:9px 11px;font-size:.9rem;cursor:pointer;margin:0}
.bd-svc input{width:auto;accent-color:var(--brand)}
.bd-svc:has(input:checked){border-color:color-mix(in srgb,var(--brand) 45%,#fff);
  background:color-mix(in srgb,var(--brand) 6%,#fff)}
.bd-save{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}

/* ══════════════════════════════════════════════════════════════════════════
   Public-site card + form primitives (v58).
   business.ejs and business-dashboard.ejs reuse the same NAMES as the admin
   stylesheet (.scard/.f/.hint/.note) — but admin.css is not loaded on the
   public site, so without these the profile forms render unstyled. Kept
   visually identical to their admin counterparts so the two stay recognisable.
   ══════════════════════════════════════════════════════════════════════════ */
.scard{background:#fff;border:1px solid #e7ecf1;border-radius:16px;overflow:hidden}
.scard-h{padding:15px 18px 13px;border-bottom:1px solid #e7ecf1;display:flex;align-items:flex-start;gap:11px}
.scard-h svg{width:17px;height:17px;color:var(--brand);margin-top:2px;flex:0 0 auto}
.scard-h h2{font-size:1.05rem;font-weight:800;margin:0;color:var(--ink)}
.scard-h p{font-size:.85rem;color:#64748b;margin:3px 0 0;line-height:1.45}
.scard-b{padding:18px}
.fgrid{display:grid;gap:14px}
/* Explicit column counts. auto-fit made .c2 render FOUR columns on a 1400px page —
   "c2" has to mean two, or the name is a lie and every form using it drifts. */
.fgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:680px){.fgrid.c2,.fgrid.c3{grid-template-columns:1fr}}
.f{min-width:0}
.f > label,.f > .lab{display:block;font-size:.8rem;font-weight:700;color:#43546a;margin:0 0 5px}
.f .opt{font-weight:500;color:#8fa0b5;font-size:.75rem}
.f input,.f select,.f textarea{width:100%;border:1px solid #e7ecf1;border-radius:10px;
  padding:.62rem .78rem;font:inherit;font-size:.92rem;background:#fff;color:#334155}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.f textarea{resize:vertical;line-height:1.55}
.hint{font-size:.79rem;color:#8fa0b5;margin-top:5px;line-height:1.5}
.hint b{color:#43546a}
.note{display:flex;gap:10px;background:#f8fafc;border:1px solid #e7ecf1;border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;padding:11px 13px;font-size:.85rem;color:#64748b;line-height:1.55}
.note svg{width:16px;height:16px;color:var(--brand);margin-top:2px;flex:0 0 auto}
.note b{color:#43546a}
.note.amber{border-left-color:var(--brand-accent);background:#fffaf2;border-color:#f6e6cd}
.note.amber svg{color:var(--brand-accent)}
.note.red{border-left-color:#dc2626;background:#fff7f7;border-color:#f5d3d3}
.note.red svg{color:#dc2626}

/* ── Customer accounts + provider extras (v59) ─────────────────────────────── */
.sh-acct{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:650;
  color:#43546a;padding:.45rem .7rem;border-radius:9px;white-space:nowrap}
.sh-acct:hover{background:#f1f5f9;color:var(--brand);text-decoration:none}
.sh-acct svg{width:16px;height:16px}
@media(max-width:640px){ .sh-acct span{display:none} }

.ac-auth{background:#f4f8fb;padding:56px 0 72px;min-height:60vh}
.ac-authbox{max-width:440px;margin:0 auto;background:#fff;border:1px solid #e7ecf1;
  border-radius:18px;padding:32px 28px;text-align:center}
.ac-auth-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px;
  background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}
.ac-auth-ic.ok{background:#eafaf4;color:#0b7a5c}
.ac-authbox h1{font-size:1.4rem;font-weight:800;margin:0 0 8px}
.ac-authbox p{color:#64748b;font-size:.94rem;line-height:1.6;margin:0 0 4px}
.ac-authbox form{text-align:left;margin-top:20px}
.ac-authbox .rv-err{text-align:left;margin-top:16px}
.ac-auth-alt{margin-top:20px;padding-top:16px;border-top:1px solid #eef2f6;font-size:.86rem}

.ac-top{background:#fff;border-bottom:1px solid #e7ecf1;padding:22px 0}
.ac-id{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ac-av{width:60px;height:60px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 62%,#000),#33455c);
  color:#fff;font-weight:850;font-size:1.15rem}
.ac-h1{font-size:1.6rem;font-weight:850;margin:0}
.ac-sub{color:#64748b;font-size:.9rem;margin:3px 0 0}
.ac-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.ac-actions .btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px}
.ac-body{background:#f4f8fb;padding:24px 0 64px}
.ac-body > .container > .rv-ok,.ac-body > .container > .rv-err{margin-bottom:18px}

.ac-empty{background:#fff;border:1px dashed #d8e1ea;border-radius:16px;padding:48px 24px;text-align:center}
.ac-empty svg{color:#c2ceda;margin-bottom:12px}
.ac-empty h2{font-size:1.15rem;font-weight:800;margin:0 0 6px}
.ac-empty p{color:#64748b;font-size:.92rem;margin:0 auto 18px;max-width:52ch}

.ac-jobs{display:grid;gap:13px}
.ac-job{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:16px 18px}
.ac-job-top{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ac-job-h{font-size:1.05rem;font-weight:750;margin:0}
.ac-job-meta{display:flex;gap:13px;flex-wrap:wrap;font-size:.8rem;color:#8fa0b5;margin-top:5px}
.ac-job-meta span{display:flex;align-items:center;gap:5px}
.ac-job-meta svg{width:12px;height:12px}
.ac-ref{font-family:ui-monospace,Menlo,monospace}
.ac-status{margin-left:auto;font-size:.74rem;font-weight:800;border-radius:99px;padding:4px 11px;white-space:nowrap}
.ac-status.go{background:#eafaf4;color:#0b7a5c;border:1px solid #bfe9da}
.ac-status.mut{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.ac-status.warn{background:#fff7ed;color:#9a5b06;border:1px solid #fbdcb4}
.ac-job-msg{font-size:.9rem;color:#4b5c70;line-height:1.6;margin:11px 0 0;
  background:#f8fafc;border-radius:9px;padding:10px 12px}
.ac-job-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid #f1f5f9}
.ac-job-foot .hint{margin:0}
.ac-job-link{margin-left:auto;font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.ac-job-link svg{width:14px;height:14px}

.ac-saved{display:grid;gap:12px}
.ac-sv{background:#fff;border:1px solid #e7ecf1;border-radius:13px;padding:14px 16px;
  display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.ac-sv-av{width:44px;height:44px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,#cbd5e1,#94a3b8);color:#fff;font-weight:800;font-size:.88rem}
.ac-sv-txt{flex:1 1 200px;min-width:0}
.ac-sv-txt b{display:block;font-size:1rem}
.ac-sv-txt span{font-size:.85rem;color:#64748b}
.ac-sv-acts{display:flex;gap:8px;flex-wrap:wrap}
.ac-check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin:0}
.ac-check input{width:auto;margin-top:3px;accent-color:var(--brand)}
.ac-check b{display:block;font-size:.94rem;color:var(--ink)}
.ac-check span span{font-size:.85rem;color:#64748b;line-height:1.5;display:block;margin-top:2px}

/* provider extras */
.bd-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.bd-pipe div{background:#fff;border:1px solid #e7ecf1;border-radius:12px;padding:12px;text-align:center}
.bd-pipe b{display:block;font-size:1.5rem;font-weight:850;color:var(--ink);line-height:1}
.bd-pipe span{font-size:.72rem;color:#8fa0b5}
.bd-pipe .win b{color:#0b7a5c}
.bd-lead-mark{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid #f1f5f9}
.bd-lead-mark label{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#64748b;margin:0}
.bd-lead-mark select{border:1px solid #e7ecf1;border-radius:8px;padding:.35rem .5rem;font:inherit;font-size:.84rem;width:auto}
.bd-lead-mark input{flex:1 1 180px;border:1px solid #e7ecf1;border-radius:8px;padding:.4rem .6rem;
  font:inherit;font-size:.84rem}
.rv-vc{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:750;color:#0b7a5c;
  background:#eafaf4;border:1px solid #bfe9da;border-radius:99px;padding:3px 10px;margin-top:10px}
.rv-vc svg{width:12px;height:12px}
.rv-reply{margin-top:12px;padding:11px 13px;background:#f6f9fb;border-left:3px solid var(--brand);
  border-radius:0 9px 9px 0}
.rv-reply b{font-size:.84rem;color:var(--ink);display:block;margin-bottom:4px}
.rv-reply p{font-size:.88rem;color:#4b5c70;line-height:1.55;margin:0}
.rv-replyform{margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9}
.rv-replyform label{display:block;font-size:.8rem;font-weight:700;color:#43546a;margin-bottom:5px}
.rv-replyform textarea{width:100%;border:1px solid #e7ecf1;border-radius:9px;padding:.55rem .7rem;
  font:inherit;font-size:.88rem;resize:vertical;margin-bottom:8px}
.note.green{border-left-color:#12a37a;background:#f2fdf9;border-color:#cdeee2}
.note.green svg{color:#0b7a5c}
@media(max-width:640px){ .bd-pipe{grid-template-columns:1fr 1fr} }

/* ---- v60: provider dashboard extras + customer job controls -------------- */
.bd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.bd-stats div{background:#f6f9fb;border:1px solid #eaf0f5;border-radius:12px;padding:10px 12px}
.bd-stats b{display:block;font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.2}
.bd-stats span{font-size:.72rem;color:#8fa0b5}
.bd-comp{background:#fff;border:1px solid #e7ecf1;border-radius:14px;padding:15px 17px;margin-bottom:16px}
.bd-comp-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bd-comp-h b{display:block;font-size:.98rem;color:var(--ink)}
.bd-comp-h span{font-size:.8rem;color:#8fa0b5}
.bd-comp-h .btn{margin-left:auto}
.bd-comp-bar{height:8px;background:#eef3f7;border-radius:99px;overflow:hidden;margin:11px 0 10px}
.bd-comp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-accent));border-radius:99px}
.bd-comp-list{margin:0;padding-left:18px;font-size:.85rem;color:#64748b;line-height:1.7}
.bd-comp-list b{color:var(--ink);font-weight:700}
.bd-new{display:inline-block;vertical-align:middle;margin-left:8px;font-size:.68rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#0b7a5c;background:#eafaf4;
  border:1px solid #bfe9da;border-radius:99px;padding:2px 8px}
.bd-lead.shut{opacity:.72}
.bd-shut{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#64748b;margin:10px 0 0}
.bd-shut svg{width:14px;height:14px;flex:0 0 auto}
.bd-flag{background:none;border:0;padding:0 4px;font:inherit;font-size:.8rem;color:#8fa0b5;
  text-decoration:underline;cursor:pointer}
.bd-flag:hover{color:#b45309}
.bd-export{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid #e7ecf1}
.bd-export a{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:700}
.bd-export svg{width:15px;height:15px}
.bd-export .hint{margin:0}
.ac-aud{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#64748b;margin:10px 0 0}
.ac-aud svg{width:14px;height:14px;flex:0 0 auto;color:#8fa0b5}
.ac-job-act{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid #f1f5f9}
.ac-job-act .hint{margin:0}
.ac-again{margin-left:auto;font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.ac-again svg{width:14px;height:14px}
.ac-close summary{cursor:pointer;font-size:.86rem;font-weight:700;color:var(--brand);list-style:none}
.ac-close summary::-webkit-details-marker{display:none}
.ac-close summary::before{content:'+\00a0';font-weight:800}
.ac-close[open] summary::before{content:'\2212\00a0'}
.ac-close form{margin-top:11px;padding:13px 15px;background:#f6f9fb;border:1px solid #e7ecf1;border-radius:11px;max-width:520px}
.ac-close .hint{margin:0 0 10px}
.ac-radio{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#43546a;margin-bottom:7px;cursor:pointer}
.ac-radio input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand)}
@media(max-width:760px){ .bd-stats{grid-template-columns:1fr 1fr} }

/* Owner-only dev sign-in panel. Deliberately loud and unbranded: it must never be mistaken
   for part of the customer-facing design, and it disappears the moment email is configured. */
.dev-link{margin:18px 0;text-align:left;border:2px dashed #f0b429;background:#fffbeb;
  border-radius:12px;padding:14px 16px}
.dev-link > b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#92620a;margin-bottom:7px}
.dev-link p{font-size:.86rem;color:#6b5326;line-height:1.55;margin:0 0 10px}
.dev-link code{display:block;font-size:.72rem;color:#7a6534;background:#fff6df;
  border:1px solid #f6e2b4;border-radius:8px;padding:7px 9px;margin-top:9px;word-break:break-all}
.dev-link-go{display:inline-block;background:#92620a;color:#fff;font-weight:750;font-size:.9rem;
  border-radius:9px;padding:9px 16px;text-decoration:none}
.dev-link-go:hover{background:#7a5108;color:#fff}
.dev-link-fine{font-size:.76rem !important;color:#8a7440 !important;margin:10px 0 0 !important}
.dev-link-fine code{display:inline;padding:1px 5px;font-size:.74rem;white-space:nowrap}
.dev-pick{display:grid;gap:7px;margin:4px 0 10px}
.dev-pick form{margin:0}
.dev-pick-btn{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:#fff;border:1px solid #f0d9a2;border-radius:9px;padding:9px 12px;cursor:pointer;
  font:inherit;color:#6b5326}
.dev-pick-btn:hover{background:#92620a;border-color:#92620a;color:#fff}
.dev-pick-btn span{font-weight:750;font-size:.9rem}
.dev-pick-btn em{font-style:normal;font-size:.78rem;opacity:.75;margin-left:auto}

/* ---- v67: service-page answer box (.gl-) and symptom triage (.sg-) -------- */
.gl{padding:52px 0 8px;background:#fff}
.gl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
.gl-main{position:relative;padding-top:14px}
.gl-tag{position:absolute;top:-6px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border-radius:99px;padding:7px 16px;font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.gl-dot{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.85}
.gl-card{background:#f6f8fb;border:1px solid #e9eef4;border-radius:20px;padding:34px 30px 28px}
.gl-h{font-size:1.5rem;font-weight:800;color:var(--ink);margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid #e2e9f1}
.gl-lead{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.55;margin:0 0 18px}
.gl-body{display:flex;gap:12px;align-items:flex-start;padding-top:16px;border-top:1px solid #e2e9f1}
.gl-body svg{width:18px;height:18px;flex:0 0 auto;color:var(--brand);margin-top:3px}
.gl-body p{margin:0;font-size:.95rem;line-height:1.7;color:#4b5c70}
.gl-facts{border:1px solid #e9eef4;border-radius:18px;overflow:hidden;background:#fff}
.gl-facts-h{display:flex;align-items:center;gap:8px;background:#eef3f7;padding:12px 18px;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5d7186}
.gl-facts-h svg{width:13px;height:13px}
.gl-facts-grid{display:grid;grid-template-columns:1fr 1fr}
.gl-fact{padding:16px 18px;border-top:1px solid #eef2f6}
.gl-fact:nth-child(odd){border-right:1px solid #eef2f6}
.gl-fact:nth-child(1),.gl-fact:nth-child(2){border-top:0}
.gl-fk{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fa0b5}
.gl-fv{display:block;font-size:1.22rem;font-weight:800;color:var(--ink);line-height:1.25;margin:5px 0 2px}
.gl-fs{display:block;font-size:.8rem;color:#7b8ca0;line-height:1.4}

.sg{padding:46px 0 56px;background:#fff}
.sg-head{max-width:720px;margin-bottom:26px}
.sg-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#5d7186}
.sg-eyebrow i{display:block;width:34px;height:2px;background:var(--brand)}
.sg-h{font-size:2.1rem;font-weight:850;color:var(--ink);margin:12px 0 10px;line-height:1.15}
.sg-sub{font-size:1rem;color:#5d7186;margin:0;line-height:1.6}
.sg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.sg-col{border:1px solid #e7ecf1;border-radius:16px;overflow:hidden;background:#fbfcfd}
.sg-col.now{border-color:#f3c9c4;box-shadow:0 0 0 3px rgba(220,120,105,.08)}
.sg-col-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px}
.sg-col.early .sg-col-h{background:#e6f2ef}
.sg-col.soon  .sg-col-h{background:#f8ecd8}
.sg-col.now   .sg-col-h{background:#fbe2de}
.sg-lab{display:inline-flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#3d5163}
.sg-bullet{width:7px;height:7px;border-radius:50%;background:#12866a}
.sg-col.soon .sg-bullet{background:#b5761a}
.sg-col.now  .sg-bullet{background:#c0432f}
.sg-when{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#7b8ca0}
.sg-items{padding:4px 16px 14px}
.sg-item{padding:14px 0;border-bottom:1px solid #eef2f6}
.sg-item:last-child{border-bottom:0}
.sg-item h3{font-size:1rem;font-weight:800;color:var(--ink);margin:0 0 6px}
.sg-item p{font-size:.9rem;line-height:1.6;color:#5d7186;margin:0}
.sg-note{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;color:#8fa0b5;margin:8px 4px 0}
.sg-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px;
  background:#16211d;color:#fff;border-radius:18px;padding:26px 30px}
.sg-cta h3{font-size:1.35rem;font-weight:800;margin:0 0 6px}
.sg-cta p{margin:0;color:#c2cfc9;font-size:.94rem;line-height:1.6;max-width:56ch}
.sg-cta-btns{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.sg-call{border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:99px;padding:.7rem 1.4rem;font-weight:700}
.sg-call:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:900px){
  .gl-grid{grid-template-columns:1fr}
  .sg-cols{grid-template-columns:1fr}
  .sg-cta-btns{margin-left:0;width:100%}
  .sg-h{font-size:1.7rem}
}
@media(max-width:420px){ .gl-facts-grid{grid-template-columns:1fr}
  .gl-fact:nth-child(odd){border-right:0} .gl-fact:nth-child(2){border-top:1px solid #eef2f6} }

/* ---- v68: searchable "Where?" picker. The <select> stays in the DOM and keeps
   submitting; .apx is only a skin over it, so a JS failure costs search, not the form. */
.apx-hidden{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.apx{position:relative;flex:1 1 auto;min-width:170px}
.apx-in{width:100%}
.apx-list{display:none;position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:320px;
  overflow:auto;background:#fff;border:1px solid #e2e9f1;border-radius:14px;
  box-shadow:0 18px 46px rgba(15,23,42,.16);padding:6px}
.apx.on .apx-list{display:block}
.apx-grp{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fa0b5;
  padding:10px 12px 5px}
.apx-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  border-radius:9px;padding:9px 12px;font:inherit;font-size:.94rem;color:var(--ink);cursor:pointer}
.apx-opt span{margin-left:auto;font-size:.78rem;color:#8fa0b5}
.apx-opt:hover,.apx-opt.on{background:#eef4f8}
.apx-none{padding:14px 12px;font-size:.88rem;color:#64748b;line-height:1.55}
/* Host layouts. The .apx wrapper has to inherit the sizing the bare <select> had, or the
   pill hero wraps and the button falls onto a second line. */
/* 180px was too greedy: in a 526px pill the button wrapped to its own line — which it
   also did before this picker existed. 120px keeps all three on one row down to a phone. */
.svc-search .apx{flex:1 1 110px;min-width:96px;display:flex;align-items:stretch}
/* The service label can be long ("Leak Detection & Repair") — let it shrink with an
   ellipsis rather than shoving the button onto its own line. */
.svc-search-fixed{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.svc-search .btn{flex:0 0 auto}
@media(max-width:560px){ .svc-search{border-radius:22px} .svc-search .btn{width:100%} }
.svc-search .apx-in{border:0;outline:none;padding:.7rem .8rem;color:#334155;background:transparent;
  border-radius:50rem;box-shadow:none}
.svc-search .apx-in:focus{background:#f6f9fb}
.svc-search .apx-list{top:calc(100% + 10px)}
.hx-sfield .apx{min-width:0}
.hx-sfield .apx-in{border:0;background:transparent;padding:0;font:inherit;color:inherit;width:100%}
.hx-sfield .apx-list{left:-14px;right:-14px;top:calc(100% + 14px)}
.quote-box .apx{flex:1 1 auto;min-width:170px}







/* ---- v91: Blog Prompt Guide article blocks. Colours lean on --brand via color-mix so
   every site's palette carries through without per-site CSS. The geo-answer-block is
   also a speakable target (seo.js) and the unit AI systems extract — keep it a plain
   bordered card, no decoration that would read as chrome in an extract. */
.geo-answer-block{background:color-mix(in srgb, var(--brand) 7%, #fff);
  border-left:4px solid var(--brand);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:14px 0 20px;font-size:1.02rem;line-height:1.7}
.gab-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.pro-tip{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  padding:14px 18px;margin:16px 0;font-size:.98rem;line-height:1.65;color:#57430a}
.pt-label{font-weight:800;color:#92600a;margin-right:4px}
.unique-insight{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;
  padding:14px 18px;margin:16px 0;font-size:.98rem;line-height:1.65;color:#3b3167}
.ui-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6d5bd0;margin-bottom:4px}
.comparison-table{font-size:.95rem}
.comparison-table caption{caption-side:top;font-weight:700;color:var(--ink);
  font-size:.9rem;padding:0 0 8px}
.comparison-table thead th{background:color-mix(in srgb, var(--brand) 10%, #fff);
  color:var(--ink);font-weight:700;border-bottom:2px solid var(--brand)}
.comparison-table tbody tr:nth-child(even){background:#f8fafc}
.prose h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin:24px 0 10px}
.prose h4{font-size:1.02rem;font-weight:700;color:var(--ink);margin:18px 0 8px}

/* ---- v92: blog post byline, share row, AI-summarize box, sidebar. */
.post-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:14px 0 10px}
.pb-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb, var(--brand) 40%, #fff)}
.pb-ini{display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--brand) 14%, #fff);
  color:var(--brand);font-weight:800;font-size:1.15rem}
.pb-who{display:flex;flex-direction:column;line-height:1.25;margin-right:6px}
.pb-role{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8fa0b5;font-weight:700}
.pb-meta{font-size:.86rem;color:#64748b}
.pb-meta b{color:var(--ink)}
.post-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ps-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  border-radius:50rem;border:1px solid #e2e9f1;background:#fff;color:var(--ink);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;transition:all .15s}
.ps-btn:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb, var(--brand) 6%, #fff)}
.ai-sum{background:#f4f4f2;border:1px solid #e6e6e2;border-radius:16px;padding:18px 20px;margin:20px 0}
.ai-sum-h{font-weight:800;font-size:1.05rem;margin-bottom:6px}
.ai-sum-btns{display:flex;gap:8px;flex-wrap:wrap}
.ai-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e2e2de;border-radius:50rem;
  padding:8px 16px;font-weight:700;font-size:.88rem;color:var(--brand);text-decoration:none;transition:all .15s}
.ai-chip:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(15,23,42,.08)}
.post-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.side-card{border-radius:14px}
.side-h{letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:#64748b;margin-bottom:10px}
.side-toc{padding-left:18px}
.side-toc li{margin-bottom:7px;border-bottom:1px dashed #e2e9f1;padding-bottom:7px}
.side-toc li:last-child{border-bottom:0}
.side-toc a{text-decoration:none;color:var(--ink)}
.side-toc a:hover{color:var(--brand)}
.side-list{list-style:none;margin:0;padding:0;font-size:.92rem}
.side-list li{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed #eef2f6}
.side-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.side-list a{text-decoration:none;color:var(--ink)}
.side-list a:hover{color:var(--brand)}
.side-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.side-tag{background:color-mix(in srgb, var(--brand) 8%, #fff);border:1px solid color-mix(in srgb, var(--brand) 22%, #fff);
  color:var(--brand);border-radius:50rem;padding:3px 11px;font-size:.8rem;font-weight:700;text-decoration:none}
.side-tag:hover{background:color-mix(in srgb, var(--brand) 15%, #fff)}
/* The sidebar quote box stacks vertically in its narrow column. */
.side-quote .quote-box{margin-top:0!important;padding:0!important;background:transparent!important;box-shadow:none}
.side-quote .quote-box .form-select,.side-quote .quote-box .apx,.side-quote .quote-box .btn{width:100%;flex:1 1 100%}

/* v101 — the featured rail is now a real <ul>/<li> (it was a div+ARIA that claimed
   <article> elements were listitems, which no accessibility tree accepts). Strip the
   list chrome so it looks exactly as before. */
ul.fp-rail{list-style:none;margin:0;padding:4px 4px 18px}
li.fp-card{list-style:none}