/* =========================================================
   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; }
}

/* Pegboard Wall — workshop shadow board.
   Tempered hardboard with a 1" hole grid; everything readable sits on paper,
   masking tape or manila tags hung from the board. Red = painted outlines
   and the "use this" handles. */
:root{
  --pg-board:#8d6039; --pg-board-2:#7c5331; --pg-hole:#24170d;
  --pg-paper:#fdfcf6; --pg-ink:#1d1915; --pg-soft:#4f463d;
  --pg-red:#c2311d; --pg-red-dk:#7a1c0f; --pg-tag:#f0dba4; --pg-tape:rgba(236,224,178,.95);
  --pg-steel:#c3c7cc; --pg-pine:#d6ab72;
}
.pgbd-body, .est-body{
  margin:0; color:var(--pg-ink); font:17px/1.6 'Barlow',system-ui,sans-serif;
  background-color:var(--pg-board);
  background-image:
    radial-gradient(circle at 13px 13px, var(--pg-hole) 0 2.6px, #4a2f1a 3.1px, transparent 3.9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--pg-board), var(--pg-board-2));
  background-size:26px 26px, 180px 180px, 100% 100%;
}
a{ color:inherit; }
.pgbd-wall{ max-width:1260px; margin:0 auto; padding:0 26px; }

/* ---------- header: tape label + hanging tags ---------- */
.pgbd-top__in{ max-width:1260px; margin:0 auto; padding:22px 26px 12px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.pgbd-brand{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 10px; text-decoration:none;
  background:var(--pg-tape); font:400 19px/1.2 'Permanent Marker',cursive; color:var(--pg-ink);
  transform:rotate(-1.2deg); box-shadow:0 2px 3px rgba(0,0,0,.25);
  clip-path:polygon(0 4%,3% 0,97% 6%,100% 0,99% 96%,96% 100%,3% 94%,0 100%);
}
.pgbd-brand img{ display:block; width:40px; height:40px; border-radius:50%; background:#fff; }
.pgbd-pegs{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.pgbd-tag, .pgbd-btn--tag{
  position:relative; display:inline-flex; align-items:center; min-height:42px; padding:8px 16px 8px 36px;
  font:800 14px/1 'Barlow',sans-serif; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);
}
.pgbd-tag{
  color:var(--pg-ink);
  background:radial-gradient(circle at 15px 50%, var(--pg-board-2) 0 4px, #b48e4f 4.5px 5.5px, transparent 6px), var(--pg-tag);
}
.pgbd-tag[aria-current="page"]{ box-shadow:inset 0 -4px 0 var(--pg-red); }
.pgbd-tag:hover{ background-color:#fff3cf; }

/* ---------- red "handle" buttons ---------- */
.pgbd-btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 20px;
  border:0; border-radius:6px; cursor:pointer; text-decoration:none;
  font:800 15px/1.1 'Barlow',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--pg-red); box-shadow:0 3px 0 var(--pg-red-dk), 0 6px 10px -4px rgba(0,0,0,.5);
}
.pgbd-btn:hover, .btn:hover{ background:#d63b25; }
.pgbd-btn:active, .btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--pg-red-dk); }
.pgbd-btn--tag{
  border-radius:0; box-shadow:none; color:#fff;
  background:radial-gradient(circle at 15px 50%, var(--pg-board-2) 0 4px, #f3b2a6 4.5px 5.5px, transparent 6px), var(--pg-red);
}
.pgbd-btn--wide{ width:100%; min-height:52px; font-size:17px; }

/* ---------- layout: board + sticky clipboard rail ---------- */
.pgbd-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:28px 38px;
  grid-template-areas:"head rail" "main rail"; padding:18px 0 40px;
}
.pgbd-head{ grid-area:head; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:30px; align-items:center; }
.pgbd-rail{ grid-area:rail; align-self:start; position:sticky; top:110px; display:grid; gap:0; }
.pgbd-main{ grid-area:main; min-width:0; }

/* painted plywood sign carrying the h1 */
.pgbd-sign{
  position:relative; padding:30px 30px 28px; background:#f7f3ea;
  background-image:repeating-linear-gradient(92deg, rgba(150,110,60,.05) 0 2px, transparent 2px 9px);
  box-shadow:0 14px 22px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.08);
  transform:rotate(-.6deg);
}
.pgbd-sign::before, .pgbd-sign::after{
  content:""; position:absolute; top:10px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #f3f4f5, #8d9298 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.4);
}
.pgbd-sign::before{ left:10px; } .pgbd-sign::after{ right:10px; }
.pgbd-sign h1{ margin:0; font:400 40px/1.15 'Permanent Marker',cursive; color:var(--pg-ink); overflow-wrap:break-word; hyphens:auto; }

/* photo hung from one peg on a wire */
.pgbd-photo{ position:relative; margin-top:34px; padding:10px; background:#2b2420; box-shadow:0 16px 24px -12px rgba(0,0,0,.7); transform:rotate(1.4deg); }
.pgbd-photo::before{
  content:""; position:absolute; left:50%; top:-34px; width:62%; height:34px; transform:translateX(-50%);
  background:linear-gradient(to top right, transparent calc(50% - 1px), #9ea3a8 50%, transparent calc(50% + 1px)) left/50% 100% no-repeat,
             linear-gradient(to top left, transparent calc(50% - 1px), #9ea3a8 50%, transparent calc(50% + 1px)) right/50% 100% no-repeat;
}
.pgbd-photo::after{
  content:""; position:absolute; left:50%; top:-40px; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #f3f4f5, #80868c 70%); box-shadow:0 2px 2px rgba(0,0,0,.5);
}
.pgbd-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* clipboard */
.pgbd-clip{
  position:relative; padding:40px 14px 14px; border-radius:12px;
  background:linear-gradient(160deg, #5c3d22, #48301b); box-shadow:0 18px 26px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15);
}
.pgbd-clip::before{ /* the spring clip */
  content:""; position:absolute; left:50%; top:-8px; width:132px; height:42px; margin-left:-66px; border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg, #eef0f2, #a3a8ae 55%, #d3d6da); box-shadow:0 3px 4px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.2);
}
.pgbd-clip::after{
  content:""; position:absolute; left:50%; top:4px; width:26px; height:12px; margin-left:-13px; border-radius:50%;
  background:var(--pg-board-2); box-shadow:inset 0 2px 3px rgba(0,0,0,.6);
}
.pgbd-clip__paper{
  padding:20px 18px 16px; background:var(--pg-paper);
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(70,110,170,.18) 27px 28px);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.pgbd-clip__title{ margin:0 0 12px; font:400 24px/1.2 'Permanent Marker',cursive; color:var(--pg-red); }
.pgbd-clip__form{ display:grid; gap:10px; }
.pgbd-clip__zip{
  width:100%; height:56px; padding:0 14px; border:2px solid var(--pg-ink); border-radius:4px; background:#fff;
  font:700 26px 'Barlow',sans-serif; letter-spacing:.18em; color:var(--pg-ink);
}
.pgbd-clip__zip::placeholder{ color:#a59d93; letter-spacing:.05em; font-weight:400; font-size:20px; }
.pgbd-clip__zip:focus{ outline:3px solid var(--pg-red); outline-offset:2px; }

/* price tag dangling under the clipboard */
.pgbd-price{
  position:relative; margin:44px 18px 0; padding:34px 20px 14px; background:var(--pg-tag);
  clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);
  transform:rotate(1.6deg); filter:drop-shadow(0 8px 8px rgba(0,0,0,.4));
}
.pgbd-price__eyelet{
  position:absolute; top:10px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%;
  background:var(--pg-board-2); box-shadow:0 0 0 4px #c9a560;
}
.pgbd-price h2{ margin:0 0 6px; font:800 17px/1.3 'Barlow',sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.pgbd-price p{ margin:0 0 8px; font-size:16px; line-height:1.5; }
.pgbd-price strong{ font:400 26px/1 'Permanent Marker',cursive; color:var(--pg-red); white-space:nowrap; }

/* intro sheet */
.pgbd-intro{
  position:relative; padding:24px 26px 14px; background:var(--pg-paper); box-shadow:0 12px 18px -10px rgba(0,0,0,.6);
}
.pgbd-intro::before{
  content:""; position:absolute; top:-12px; left:40px; width:110px; height:26px; background:var(--pg-tape); transform:rotate(-3deg);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.pgbd-intro p{ margin:0 0 12px; font-size:19px; line-height:1.55; }

/* hanging sheets with painted tool outlines */
.pgbd-board{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 28px; margin-top:52px; align-items:start; }
.pgbd-sheet{
  position:relative; padding:26px 22px 14px; background:var(--pg-paper);
  box-shadow:0 14px 20px -12px rgba(0,0,0,.7);
}
.pgbd-sheet:nth-child(odd){ transform:rotate(-.5deg); }
.pgbd-sheet:nth-child(even){ transform:rotate(.6deg); margin-top:18px; }
.pgbd-sheet::before, .pgbd-sheet::after{ /* steel peg hooks */
  content:""; position:absolute; top:-16px; width:9px; height:24px; border:3px solid var(--pg-steel); border-top:0;
  border-radius:0 0 9px 9px; box-shadow:0 2px 2px rgba(0,0,0,.35);
}
.pgbd-sheet::before{ left:26px; } .pgbd-sheet::after{ right:26px; }
.pgbd-outline{ position:absolute; top:16px; right:16px; width:52px; height:52px; fill:none; stroke:var(--pg-red); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.pgbd-sheet h2{ margin:0 0 10px; padding-right:62px; font:800 20px/1.3 'Barlow',sans-serif; }
.pgbd-sheet p{ margin:0 0 12px; }
.pgbd-sheet ul{ margin:0 0 12px; padding:0; list-style:none; }
.pgbd-sheet li{ position:relative; padding:0 0 6px 22px; }
.pgbd-sheet li::before{ content:""; position:absolute; left:2px; top:.62em; width:10px; height:10px; border:2.5px solid var(--pg-red); border-radius:50%; }

/* cost-mode tables */
.table-scroll table{ background:#fff; border:2px solid var(--pg-ink); border-radius:0; }
.table-scroll thead th{ background:var(--pg-tag); font-size:14px; text-transform:uppercase; letter-spacing:.06em; }
.table-scroll td{ font-size:15px; }

/* service area: a typed route sheet taped up */
.pgbd-route{ position:relative; margin:30px 0 44px; padding:34px 24px 20px; background:var(--pg-paper); box-shadow:0 14px 20px -12px rgba(0,0,0,.7); }
.pgbd-route h2{ margin:0 0 4px; font:800 24px/1.25 'Barlow',sans-serif; }
.muted{ color:var(--pg-soft); font-size:15px; margin:0 0 10px; }
.pgbd-route__list{ columns:5 180px; column-gap:26px; }
.city-group__title{
  break-after:avoid; break-inside:avoid;
  margin:14px 0 4px; padding-bottom:3px; border-bottom:2px solid var(--pg-red);
  font:800 13px/1.3 'Barlow',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pg-red);
}
.city-grid{ list-style:none; margin:0; padding:0; }
.city-grid li{ break-inside:avoid; }
.city-grid a{ display:block; padding:3px 0; font-size:14px; line-height:1.35; text-decoration:none; color:var(--pg-ink); }
.city-grid a:hover{ color:var(--pg-red); text-decoration:underline; }
.pgbd-route hr{ display:none; }

/* footer: pine shelf */
.pgbd-shelf{ padding:10px 0 30px; }
.pgbd-shelf__plank{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:20px 24px;
  background:repeating-linear-gradient(178deg, rgba(120,70,20,.12) 0 2px, transparent 2px 11px), linear-gradient(180deg, #e2bb83, var(--pg-pine));
  border-bottom:10px solid #a87a45; box-shadow:0 18px 22px -12px rgba(0,0,0,.75);
}
.pgbd-shelf__links{ display:flex; gap:20px; margin:0; font-weight:600; font-size:15px; }
.pgbd-shelf__links a{ color:var(--pg-ink); }
.pgbd-shelf__copy{ display:inline-block; margin:16px 0 0; padding:6px 14px; background:var(--pg-tape); font-size:14px; color:var(--pg-ink); transform:rotate(-.6deg); }

/* ---------- tablet / phone ---------- */
@media (max-width:980px){
  .pgbd-layout{ grid-template-columns:minmax(0,1fr); grid-template-areas:"sign" "rail" "photo" "main"; gap:26px; }
  .pgbd-head{ display:contents; }
  .pgbd-sign{ grid-area:sign; }
  .pgbd-photo{ grid-area:photo; margin:40px 8px 0; }
  .pgbd-rail{ position:static; }
  .pgbd-price{ margin:40px 6px 0; }
}
@media (max-width:620px){
  .pgbd-wall{ padding:0 16px; }
  .pgbd-top__in{ padding:16px 16px 12px; gap:14px; }
  .pgbd-brand{ font-size:17px; }
  .pgbd-pegs{ gap:8px; }
  .pgbd-sign{ padding:24px 18px 20px; }
  .pgbd-sign h1{ font-size:29px; }
  .pgbd-board{ grid-template-columns:minmax(0,1fr); gap:40px; margin-top:44px; }
  .pgbd-sheet:nth-child(even){ margin-top:0; }
  .pgbd-intro p{ font-size:18px; }
  .pgbd-route{ padding:30px 16px 16px; }
  .pgbd-route__list{ columns:2; column-gap:16px; }
  .city-grid a{ padding:6px 0; }
  .pgbd-shelf__plank{ padding:18px 16px; }
}

/* =========================================================
   STANDALONE (estimate wizard + legal): a clipboard on the board
========================================================= */
.est-page{ min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; max-width:1100px; margin:0 auto; padding:0 20px; }
.topbar--estimate{ padding:22px 0 10px; }
.topbar-inner--estimate{ display:flex; }
.brand--estimate{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 10px; text-decoration:none; color:var(--pg-ink);
  background:var(--pg-tape); font:400 19px/1.2 'Permanent Marker',cursive; transform:rotate(-1deg); box-shadow:0 2px 3px rgba(0,0,0,.25);
}
.brand-logo--estimate{ display:block; width:40px; height:40px; border-radius:50%; background:#fff; }
.est-main{ padding:26px 0 40px; }
.est-weave{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:start; }
.est-weave-media{ padding:10px; background:#2b2420; box-shadow:0 16px 24px -12px rgba(0,0,0,.7); transform:rotate(-1.2deg); margin-top:30px; }
.est-weave-media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.est-shell{
  position:relative; min-width:0; padding:44px 22px 22px; border-radius:12px;
  background:var(--pg-paper); box-shadow:0 0 0 14px #52371f, 0 22px 30px -10px rgba(0,0,0,.8);
  margin:14px;
}
.est-shell::before{
  content:""; position:absolute; left:50%; top:-22px; width:132px; height:42px; margin-left:-66px; border-radius:10px 10px 6px 6px;
  background:linear-gradient(180deg, #eef0f2, #a3a8ae 55%, #d3d6da); box-shadow:0 3px 4px rgba(0,0,0,.45);
}
.est-title{ margin:0 0 16px; font:400 30px/1.15 'Permanent Marker',cursive; color:var(--pg-ink); }
.est-form{ display:block; }
.est-header{ margin-bottom:14px; }
.est-progress{ height:12px; background:#e9e1d1; border:2px solid var(--pg-ink); }
.est-bar{ height:100%; width:20%; background:repeating-linear-gradient(90deg, var(--pg-red) 0 10px, #d9533f 10px 12px); transition:width .25s; }
.est-error{ margin:10px 0; padding:10px 12px; background:#fde8e4; border-left:5px solid var(--pg-red); font-weight:600; }
.est-panel label{ display:block; margin:12px 0; font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--pg-soft); }
.est-panel input, .est-panel select, .est-panel textarea{
  display:block; width:100%; margin-top:6px; padding:12px; border:2px solid var(--pg-ink); border-radius:4px; background:#fff;
  font:500 17px 'Barlow',sans-serif; color:var(--pg-ink); text-transform:none; letter-spacing:0;
}
.est-panel input:focus, .est-panel select:focus, .est-panel textarea:focus{ outline:3px solid var(--pg-red); outline-offset:1px; }
.est-textarea{ resize:vertical; min-height:110px; }
.est-row{ display:grid; grid-template-columns:1fr 110px 110px; gap:12px; }
.est-tcpa{ margin:12px 0 0; font-size:11px; line-height:1.45; color:var(--pg-soft); }
.est-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.btn.ghost{ background:var(--pg-tag); color:var(--pg-ink); box-shadow:0 3px 0 #b39459; }
.btn.ghost:hover{ background:#f6e6bb; }
.est-thanks{ padding:18px; background:var(--pg-tag); font-weight:700; font-size:18px; }
.legal-copy p{ margin:0 0 14px; font-size:16px; }
.est-page > footer{ padding:14px 0 26px; }
.est-page > footer .footer-copy{ display:inline-block; padding:6px 14px; background:var(--pg-tape); font-size:14px; }
@media (max-width:820px){
  .est-weave{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .est-weave-media{ order:2; transform:none; margin-top:10px; }
  .est-row{ grid-template-columns:1fr; }
  .est-page{ padding:0 14px; }
  .est-shell{ margin:14px 12px; padding:40px 16px 18px; }
}

/* keep a wide (min-width:720px) cost table from widening its grid column;
   it scrolls inside its wrapper instead */
.table-scroll{ contain:inline-size; }

/* ---------- sticky header ----------
   Tape label and tags stay pinned while the board scrolls, on a strip of the
   same pegboard (it starts at the page origin, so at rest its holes line up
   with the wall's); a drop shadow fades in once content passes under it
   (scroll-driven where supported). */
.pgbd-top, .topbar--estimate{
  position:sticky; top:0; z-index:50;
  background-color:var(--pg-board);
  background-image:
    radial-gradient(circle at 13px 13px, var(--pg-hole) 0 2.6px, #4a2f1a 3.1px, transparent 3.9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:26px 26px, 180px 180px;
}
.topbar--estimate{ margin:0 -20px; padding:22px 20px 10px; }
@media (max-width:820px){ .topbar--estimate{ margin:0 -14px; padding:22px 14px 10px; } }
@supports (animation-timeline: scroll()){
  .pgbd-top, .topbar--estimate{ animation:pgbd-lift linear both; animation-timeline:scroll(root); animation-range:0 80px; }
  @keyframes pgbd-lift{ to{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); } }
}
@supports not (animation-timeline: scroll()){
  .pgbd-top, .topbar--estimate{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); }
}