/* =========================================================
   THEME-NEUTRAL BASELINE
   Prepended to every theme's CSS. Covers behavior that must work
   regardless of theme (anchor-scroll to the quote form under a sticky
   topbar) and a plain fallback for arbitrary site-authored HTML inside
   CONFIG["cost_body"] (tables, lists) that a theme's own CSS doesn't
   otherwise style.
========================================================= */
*{ box-sizing: border-box; }

/* Browsers default <figure> to `margin: 1em 40px`, which throws off any
   grid/flex pairing it sits in (e.g. an image beside a quote-form box) —
   the sibling box ends up looking like it "sticks out" below the image. */
figure{ margin: 0; }

html, body{ max-width: 100%; overflow-x: clip; }

html, body{
  scroll-behavior: smooth;
  scroll-padding-top: calc(110px + env(safe-area-inset-top));
}

#quote-panel{
  scroll-margin-top: calc(110px + env(safe-area-inset-top));
}

@media (min-width: 900px){
  html, body{ scroll-padding-top: 80px; }
  #quote-panel{ scroll-margin-top: 80px; }
}

[hidden]{ display: none !important; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Fallback styling for arbitrary CONFIG["cost_body"] markup (tables, lists)
   that a theme's own stylesheet doesn't specifically target. */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 14px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;
}
thead th{
  background: rgba(0,0,0,.04);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  white-space: nowrap;
  font-size: 13px;
}
td{
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 14px;
}
tbody tr:last-child td{ border-bottom: none; }
.table-scroll{ max-width: 100%; }
@media (max-width: 640px){
  .table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table{ min-width: 720px; }
}

/* Merit Badge theme: a 1950s skill-award pamphlet with an embroidered sash.
   Olive twill, khaki cover stock, cream pages, red and navy thread. */
:root{
  --olive:#56602f; --olive-d:#3f4722; --khaki:#cdbd8c; --khaki-d:#b3a26e; --page:#f8f3e3; --page-2:#efe7cf;
  --ink:#24251d; --soft:#5d5b4c; --red:#b3322b; --red-d:#8e2520; --navy:#26385f; --blue:#dde6f2; --gold:#d9a73b;
}
body{
  margin:0; color:var(--ink); background:var(--khaki);
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 2px, transparent 2px 6px);
  font:17px/1.6 'Zilla Slab', Rockwell, Georgia, serif;
}
a{ color:inherit; }
.city-group__title{
  font-family:Oswald, 'Arial Narrow', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
}

.mbdg-btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:8px 20px;
  font:600 17px/1.1 Oswald, 'Arial Narrow', sans-serif; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  color:#fff; background:var(--red); border:2px solid var(--red-d); border-radius:6px; white-space:nowrap;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.mbdg-btn:hover, .btn:hover{ background:var(--red-d); }
.mbdg-btn:focus-visible, .btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
.mbdg-btn--big{ font-size:21px; min-height:54px; }
.btn.ghost{ color:var(--navy); background:transparent; border-color:var(--navy); box-shadow:none; }
.btn.ghost:hover{ background:var(--blue); }

/* layout: sash + pamphlet */
.mbdg-layout{ display:grid; grid-template-columns:168px minmax(0,1fr); max-width:1160px; margin:0 auto; min-height:100vh; }
.mbdg-sash{ position:relative; background:var(--olive); background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 5px); }
.mbdg-sash::before, .mbdg-sash::after{ content:""; position:absolute; top:0; bottom:0; width:0; border-left:2px dashed rgba(230,220,180,.45); }
.mbdg-sash::before{ left:8px; } .mbdg-sash::after{ right:8px; }
.mbdg-sash__nav{ position:sticky; top:0; display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 12px; }
.mbdg-patch{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:104px; height:104px; border-radius:50%;
  background:var(--page); color:var(--olive-d); text-decoration:none; border:6px solid var(--navy);
  outline:2px dashed rgba(36,37,29,.35); outline-offset:-12px; box-shadow:0 3px 0 rgba(0,0,0,.3);
  font:600 15px/1 Oswald, sans-serif; text-transform:uppercase; letter-spacing:.1em;
}
.mbdg-patch:hover{ background:#fff; }
.mbdg-patch[aria-current="page"]{ border-color:var(--red); }
.mbdg-patch--gold{ background:#f6e4b4; border-color:var(--gold); }
.mbdg-ico{ width:30px; height:30px; }
.mbdg-patch--cta{
  width:132px; height:auto; min-height:84px; padding:12px 10px; border-radius:12px; text-align:center; line-height:1.15;
  font-size:17px; color:#fff; background:var(--red); border-color:#f3e7c4; outline-color:rgba(255,255,255,.55);
}
.mbdg-patch--cta:hover{ background:var(--red-d); }

/* the pamphlet */
.mbdg-book{ min-width:0; background:var(--page); padding:0 54px; box-shadow:0 0 30px rgba(0,0,0,.15); }
.mbdg-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 -54px; padding:16px 54px; background:var(--khaki-d); border-bottom:4px solid var(--olive); }
.mbdg-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; font:700 21px/1.15 'Zilla Slab', serif; }
.mbdg-brand img{ display:block; width:38px; height:38px; border-radius:50%; border:3px solid var(--navy); background:#fff; }

.mbdg-title{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:34px; align-items:center; padding:40px 0 26px; }
.mbdg-emblem{
  width:200px; height:200px; border-radius:50%; padding:10px; background:var(--gold);
  box-shadow:0 0 0 6px var(--navy), 0 6px 0 6px rgba(0,0,0,.25);
  outline:2px dashed rgba(36,37,29,.5); outline-offset:-6px;
}
.mbdg-emblem img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mbdg-title h1{ margin:0; font:600 48px/1.05 Oswald, 'Arial Narrow', sans-serif; text-transform:uppercase; letter-spacing:.01em; color:var(--olive-d); }

.mbdg-card{
  position:relative; margin:0 0 34px; padding:20px 24px 20px; background:var(--blue); border:2px solid var(--navy); border-radius:4px;
  box-shadow:4px 4px 0 var(--navy); max-width:640px;
}
.mbdg-card::before{ /* the paper clip */
  content:""; position:absolute; top:-14px; right:36px; width:16px; height:42px; border:3px solid #8b9099; border-radius:10px;
}
.mbdg-card__t{ margin:0 0 12px; font-size:20px; font-weight:700; }
.mbdg-card__row{ display:flex; gap:10px; }
.mbdg-card__zip{
  flex:1 1 auto; min-width:0; max-width:240px; height:50px; padding:0 12px; border:0; border-bottom:3px solid var(--navy); background:#fff;
  font:700 26px 'Zilla Slab', serif; letter-spacing:.2em; color:var(--navy);
}
.mbdg-card__zip::placeholder{ color:#b5bfcf; letter-spacing:.04em; }
.mbdg-card__zip:focus{ outline:3px solid var(--red); outline-offset:2px; }
.mbdg-card__row .mbdg-btn{ min-height:50px; }

.mbdg-intro{ margin:0 0 30px; max-width:760px; }
.mbdg-intro p{ margin:0 0 12px; font-size:20px; line-height:1.55; }

/* requirements */
.mbdg-main{ padding:0 0 10px; }
.mbdg-reqs{ border-top:4px double var(--olive); padding-top:18px; }
.mbdg-reqs__ol{ list-style:none; margin:0; padding:0; }
.mbdg-req{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 12px; padding:18px 0; border-bottom:1px solid var(--khaki); }
.mbdg-box{ width:24px; height:24px; margin-top:3px; border:2.5px solid var(--ink); border-radius:2px; background:#fff; }
.mbdg-box--on{ background:linear-gradient(45deg, transparent 44%, var(--red) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--red) 44% 56%, transparent 56%), #fff; }
.mbdg-req h2{ margin:0 0 8px; font:700 23px/1.25 'Zilla Slab', serif; }
.mbdg-req p{ margin:0 0 10px; }
.mbdg-req ul{ margin:0 0 10px; padding-left:22px; list-style:disc; }
.mbdg-req li{ margin:0 0 5px; }
.mbdg-fee{ padding:14px 18px 6px; background:#fff; border:2px solid var(--gold); border-radius:4px; box-shadow:inset 0 0 0 4px #fbf1d6; }
.mbdg-fee strong{ font:600 26px Oswald, sans-serif; color:var(--red); letter-spacing:.02em; }
.mbdg-req .table-scroll table{ margin:8px 0 12px; background:#fff; border:2px solid var(--olive); border-radius:0; }
.mbdg-req .table-scroll th{ font:600 13px Oswald, sans-serif; letter-spacing:.08em; text-transform:uppercase; background:var(--page-2); }
/* keep a wide (min-width:720px) cost table from widening its grid column;
   it scrolls inside its wrapper instead */
.table-scroll{ contain:inline-size; }

/* service area */
.mbdg-area{ margin:34px 0 0; padding-top:18px; border-top:4px double var(--olive); }
.mbdg-area h2{ margin:0 0 4px; font:600 30px/1.1 Oswald, sans-serif; text-transform:uppercase; color:var(--olive-d); }
.muted{ margin:0 0 6px; color:var(--soft); font-size:15px; }
.city-group__title{ margin:14px 0 4px; font-size:13px; color:var(--olive); }
.city-grid{ list-style:none; margin:0; padding:0; columns:4 160px; column-gap:20px; }
.city-grid li{ break-inside:avoid; }
.city-grid a{ display:block; padding:3px 0; font-size:15px; text-decoration:none; border-bottom:1px dotted var(--khaki-d); }
.city-grid a:hover{ color:var(--red); }

/* footer */
.mbdg-foot{ margin:40px -54px 0; padding:22px 54px 26px; background:var(--khaki-d); border-top:4px solid var(--olive); }
.mbdg-foot__cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mbdg-foot__links{ display:flex; gap:18px; margin:16px 0 4px; font-size:15px; }
.mbdg-foot__copy{ margin:0; font-size:14px; color:#4a4836; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mbdg-layout{ grid-template-columns:minmax(0,1fr); }
  .mbdg-sash{ position:sticky; top:0; z-index:50; }
  .mbdg-sash::before, .mbdg-sash::after{ left:0; right:0; top:auto; bottom:auto; width:auto; height:0; border-left:0; border-top:2px dashed rgba(230,220,180,.45); }
  .mbdg-sash::before{ top:5px; } .mbdg-sash::after{ bottom:5px; }
  .mbdg-sash__nav{ position:static; flex-direction:row; justify-content:flex-start; gap:10px; padding:12px 14px; }
  .mbdg-patch{ width:58px; height:58px; border-width:4px; outline-offset:-9px; font-size:13px; gap:0; }
  .mbdg-patch .mbdg-ico{ width:20px; height:20px; }
  .mbdg-patch--cta{ flex:1 1 auto; width:auto; height:58px; min-height:0; padding:6px 10px; font-size:17px; }
  .mbdg-book{ padding:0 16px; }
  .mbdg-head{ margin:0 -16px; padding:12px 16px; }
  .mbdg-brand{ font-size:17px; }
  .mbdg-title{ grid-template-columns:96px minmax(0,1fr); gap:18px; padding:22px 0 18px; }
  .mbdg-emblem{ width:96px; height:96px; padding:5px; box-shadow:0 0 0 4px var(--navy), 0 4px 0 4px rgba(0,0,0,.25); }
  .mbdg-title h1{ font-size:29px; }
  .mbdg-card{ padding:16px 16px 16px; margin-bottom:26px; }
  .mbdg-card::before{ right:20px; }
  .mbdg-card__t{ font-size:18px; }
  .mbdg-card__zip{ max-width:none; }
  .mbdg-intro p{ font-size:18px; }
  .mbdg-req{ grid-template-columns:24px minmax(0,1fr); gap:0 8px; }
  .mbdg-box{ width:20px; height:20px; }
  .mbdg-req h2{ font-size:20px; }
  .mbdg-fee{ margin-left:-32px; }
  .city-grid{ columns:2; column-gap:14px; }
  .city-grid a{ font-size:14px; }
  .mbdg-foot{ margin:30px -16px 0; padding:20px 16px; }
}

/* =========================================================
   STANDALONE (estimate wizard + legal pages)
========================================================= */
.est-page{ min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; max-width:1080px; margin:0 auto; background:var(--page); }
.topbar--estimate{ padding:14px 24px; background:var(--khaki-d); border-bottom:4px solid var(--olive); }
.topbar-inner--estimate{ display:flex; }
.brand--estimate{ display:flex; align-items:center; gap:12px; text-decoration:none; font:700 21px/1.15 'Zilla Slab', serif; }
.brand-logo--estimate{ display:block; width:40px; height:40px; border-radius:50%; border:3px solid var(--navy); background:#fff; }
.est-main{ padding:28px 24px 40px; }
.est-weave{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:36px; align-items:center; }
.est-weave-media{ border-radius:50%; padding:10px; background:var(--gold); box-shadow:0 0 0 6px var(--navy); outline:2px dashed rgba(36,37,29,.5); outline-offset:-6px; }
.est-weave-media img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.est-shell{ min-width:0; }
.est-title{ margin:0 0 14px; font:600 36px/1.05 Oswald, sans-serif; text-transform:uppercase; color:var(--olive-d); }
.est-form{ padding:18px; background:var(--blue); border:2px solid var(--navy); border-radius:4px; box-shadow:4px 4px 0 var(--navy); }
.est-header{ margin-bottom:12px; }
.est-progress{ height:12px; border:2px solid var(--navy); border-radius:6px; background:#fff; overflow:hidden; }
.est-bar{ height:100%; width:20%; background:var(--red); transition:width .25s; }
.est-error{ margin:10px 0; padding:8px 12px; border-left:5px solid var(--red); background:#fff; font-size:15px; }
.est-panel label{ display:block; margin:12px 0; font:600 13px Oswald, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); }
.est-panel input, .est-panel select, .est-panel textarea{
  display:block; width:100%; margin-top:5px; padding:10px; border:0; border-bottom:3px solid var(--navy); border-radius:0; background:#fff;
  font:17px 'Zilla Slab', serif; color:var(--ink); text-transform:none; letter-spacing:0;
}
.est-panel textarea{ border:2px solid var(--navy); resize:vertical; }
.est-panel input:focus, .est-panel select:focus, .est-panel textarea:focus{ outline:3px solid var(--red); outline-offset:1px; }
.est-row{ display:grid; grid-template-columns:1fr 110px 110px; gap:10px; }
.est-tcpa{ margin:12px 0 0; font-size:11px; line-height:1.4; color:var(--soft); }
.est-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.est-thanks{ padding:16px; background:#fff; border:2px solid var(--gold); font-weight:700; font-size:18px; }
.legal-copy p{ margin:0 0 12px; font-size:16px; }
.est-page footer{ padding:14px 24px; background:var(--khaki-d); border-top:4px solid var(--olive); font-size:14px; }
@media (max-width:820px){
  .est-main{ padding:18px 14px 30px; }
  .est-weave{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .est-weave-media{ width:150px; margin:0 auto; padding:6px; }
  .est-row{ grid-template-columns:1fr; }
  .est-title{ font-size:28px; }
}

/* Slash-joined service names ("Handyman/Repair/Maintenance") are one long
   unbreakable word; render_page passes its length as --h1w so phones can fit it. */
@media (max-width:760px){ h1[style*="--h1w"]{ font-size:calc((100vw - 150px) / (var(--h1w) * .5)) !important; } }

/* ---------- sticky nav (estimate/legal) ----------
   The sash nav already stays pinned on the main pages; the standalone pages'
   top bar does the same, with a shadow fading in once content passes under
   it (scroll-driven where supported). */
.topbar--estimate{ position:sticky; top:0; z-index:50; }
@supports (animation-timeline: scroll()){
  .topbar--estimate{ animation:mbdg-lift linear both; animation-timeline:scroll(root); animation-range:0 80px; }
  @keyframes mbdg-lift{ to{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); } }
}
@supports not (animation-timeline: scroll()){
  .topbar--estimate{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); }
}