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

/* Panel Schedule: inside of a breaker-panel door. Hammertone steel box,
   embossed label-maker tape, printed circuit-directory card in "form blue",
   headings filled in with a black marker, red marker for the price. */
:root{
  --wall:#d9d4c7; --steel:#8d959a; --steel-hi:#b4bbbf; --steel-lo:#5f676c;
  --card:#fbfaf4; --print:#24479a; --rule:rgba(36,71,154,.42); --faint:rgba(36,71,154,.12);
  --marker:#1a1a1a; --red:#c4282b; --tape:#151515; --hl:#fff27a;
}
body.pnl-body{
  margin:0; color:var(--marker); font:500 16px/1.45 'Barlow Condensed','Arial Narrow',sans-serif;
  background:
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) 0 0/64px 32px,
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0/64px 32px,
    var(--wall);
}
a{ color:inherit; }
.pnl-lbl{
  display:block; font:700 12px/1.2 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:var(--print);
}

/* ---------- the enclosure ---------- */
.pnl-box{
  position:relative; max-width:1100px; margin:26px auto 30px; padding:18px 26px 22px; border-radius:6px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1.5px) 0 0/7px 7px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 1px, transparent 1.5px) 0 0/9px 9px,
    linear-gradient(160deg, var(--steel-hi), var(--steel) 40%, var(--steel-lo));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), inset 0 0 0 6px rgba(0,0,0,.18), 0 18px 34px -16px rgba(0,0,0,.55);
}
.pnl-box::before, .pnl-box::after{ /* screws */
  content:""; position:absolute; top:12px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #eef0f1, #7c8388 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.5);
}
.pnl-box::before{ left:12px; } .pnl-box::after{ right:12px; }
.pnl-box::before, .pnl-box::after{ z-index:51; } /* stay above the pinned door top */

/* door top: nameplate + label-tape nav */
.pnl-doortop{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 -26px; padding:6px 40px 18px; }
.pnl-plate{
  display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; text-decoration:none; border-radius:4px;
  background:linear-gradient(180deg, #e9ebec, #b9bfc3 60%, #d5d9db); color:#22262a;
  font:700 19px/1.1 'Barlow Condensed',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px #5d6468, 0 2px 3px rgba(0,0,0,.35);
}
.pnl-plate img{ display:block; width:34px; height:34px; border-radius:3px; background:#fff; }
.pnl-tabs{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
/* Embossed label-maker tape: raised white letters on glossy tape */
.pnl-tape, .btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:6px 16px;
  background:linear-gradient(180deg, #2f2f2f 0%, var(--tape) 45%, #050505 100%); color:#f4f4f4;
  font:700 17px/1 'Barlow Condensed',sans-serif; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  border:0; border-radius:2px; cursor:pointer;
  text-shadow:0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 2px 2px rgba(0,0,0,.45);
  clip-path:polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%);
}
.pnl-tape:nth-child(2){ transform:rotate(1deg); }
.pnl-tape:nth-child(3){ transform:rotate(-1deg); }
.pnl-tape[aria-current="page"]{ background:linear-gradient(180deg, #3f63b8, #24479a 45%, #193471); }
.pnl-tape--red, .btn{ background:linear-gradient(180deg, #e04447, var(--red) 45%, #8d1719); }
.pnl-tape:hover, .btn:hover{ filter:brightness(1.12); }
.btn.ghost{ background:linear-gradient(180deg, #e9ebec, #c3c8cb); color:#22262a; text-shadow:none; }

/* ---------- the directory card ---------- */
.pnl-card{
  position:relative; isolation:isolate; background:var(--card); border:2px solid var(--print);
  box-shadow:0 2px 0 rgba(0,0,0,.2), 0 0 0 5px rgba(255,255,255,.35);
}
.pnl-card::before{ /* clear plastic sleeve sheen */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(115deg, rgba(36,71,154,.05) 0 8%, transparent 8% 40%, rgba(36,71,154,.04) 40% 43%, transparent 43%);
}
.pnl-card__head{ display:grid; grid-template-columns:minmax(0,1fr) 230px; border-bottom:2px solid var(--print); }
.pnl-desig{ padding:12px 16px 14px; border-right:1px solid var(--print); }
.pnl-desig h1{
  margin:4px 0 0; font:400 clamp(26px, 3.3vw, 38px)/1.15 'Permanent Marker',cursive; color:var(--marker);
  overflow-wrap:break-word;
}
.pnl-loc{ padding:8px; display:flex; flex-direction:column; gap:4px; }
.pnl-loc img{ display:block; width:100%; height:130px; object-fit:cover; border:1px solid var(--print); filter:saturate(.85) contrast(1.05); }

/* MAIN row: the ZIP form */
.pnl-main{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:center;
  padding:12px 16px; border-bottom:2px solid var(--print);
  background:repeating-linear-gradient(0deg, transparent 0 23px, var(--faint) 23px 24px);
}
.pnl-breaker{ display:block; width:52px; height:78px; }
.pnl-main__body .pnl-lbl{ margin:0 0 6px; font-size:13px; }
.pnl-zipform{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.pnl-zip{
  flex:0 1 200px; min-width:0; height:48px; padding:0 12px; border:2px solid var(--print); border-radius:0; background:#fff;
  font:400 26px 'Permanent Marker',cursive; letter-spacing:.12em; color:var(--marker);
}
.pnl-zip::placeholder{ color:#9aa3b8; font-size:20px; letter-spacing:.04em; }
.pnl-zip:focus{ outline:3px solid var(--hl); outline-offset:0; box-shadow:0 0 0 5px var(--print); }
.pnl-switch{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:6px 18px 6px 10px; border:0; border-radius:4px; cursor:pointer;
  background:#1f2123; color:#fff; text-decoration:none; font:700 17px/1 'Barlow Condensed',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.3);
}
.pnl-switch::before{ /* toggle handle */
  content:""; width:30px; height:30px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(90deg, #4a4e52 0 50%, var(--red) 50%); box-shadow:inset 0 0 0 2px #0d0e0f;
}
.pnl-switch:hover::before{ background:linear-gradient(90deg, var(--red) 0 50%, #4a4e52 50%); }

/* notes = intro */
.pnl-body-main{ display:block; }
.pnl-notes{ padding:12px 16px; border-bottom:2px solid var(--print); }
.pnl-notes p{ margin:4px 0 0; font-size:18px; line-height:1.45; }

/* circuit directory */
.pnl-circuits{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; }
.pnl-ckt{ border-bottom:1px solid var(--rule); min-width:0; }
.pnl-ckt--odd{ border-right:4px double var(--print); }
.pnl-desc{ padding:10px 14px 8px; min-width:0;
  background:repeating-linear-gradient(0deg, transparent 0 22px, var(--faint) 22px 23px); }
.pnl-desc h2{ margin:0 0 6px; font:400 19px/1.25 'Permanent Marker',cursive; color:var(--marker); }
.pnl-desc p{ margin:0 0 8px; font-size:16px; }
.pnl-desc ul{ margin:0 0 8px; padding:0 0 0 2px; list-style:none; }
.pnl-desc li{ position:relative; padding:2px 0 2px 18px; font-size:16px; }
.pnl-desc li::before{ content:""; position:absolute; left:2px; top:10px; width:8px; height:8px; border:2px solid var(--print); border-radius:50%; }
.pnl-desc h3{ margin:10px 0 4px; font:700 14px 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--print); }
.pnl-ckt--cost .pnl-desc{ background:linear-gradient(transparent 0 0), var(--card); }
.pnl-ckt--cost h2{ color:var(--red); }
.pnl-ckt--cost strong{ font:400 22px 'Permanent Marker',cursive; color:var(--red); background:linear-gradient(transparent 55%, var(--hl) 55% 90%, transparent 90%); padding:0 3px; }
/* lone last circuit spans both columns */
.pnl-ckt:last-child.pnl-ckt--odd{ grid-column:1 / -1; border-right:0; }

/* cost tables */
.table-scroll table{ background:#fff; border:2px solid var(--print); border-radius:0; margin:8px 0; }
.table-scroll thead th{ background:var(--print); color:#fff; font:700 13px 'Barlow Condensed',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.table-scroll td{ font-size:15px; border-bottom:1px solid var(--rule); }

/* ---------- service area sub-card ---------- */
.pnl-card--sub{ margin-top:18px; }
.pnl-subhead{ padding:10px 16px; border-bottom:2px solid var(--print); }
.pnl-subhead h2{ margin:2px 0 0; font:400 22px 'Permanent Marker',cursive; }
.muted{ margin:2px 0 0; font-size:15px; color:#4b5363; }
.pnl-cities{ padding:6px 16px 14px; columns:4 210px; column-gap:0; column-rule:1px solid var(--rule); }
.city-group__title{
  break-after:avoid; margin:8px 10px 2px; font:700 13px/1.2 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:var(--print);
  border-bottom:1px solid var(--print); padding-bottom:2px;
}
.city-grid{ list-style:none; margin:0 10px 4px; padding:0; }
.city-group__title + .city-grid{ break-before:avoid; }
.city-grid li{ display:inline; font-size:14px; line-height:1.75; white-space:nowrap; }
.city-grid li:not(:last-child)::after{ content:" /"; color:var(--rule); }
.city-grid a{ text-decoration:none; white-space:nowrap; }
.city-grid a:hover{ color:var(--red); text-decoration:underline; }
hr{ border:0; border-top:2px solid var(--print); }

/* ---------- footer: bottom of the can ---------- */
.pnl-foot{ padding:16px 6px 0; color:#111; }
.pnl-knockouts{ display:flex; justify-content:center; gap:22px; margin-bottom:14px; }
.pnl-knockouts i{ width:30px; height:30px; border-radius:50%; background:radial-gradient(circle, var(--steel-lo) 0 52%, #a6adb1 55%, var(--steel) 70%); box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.35); }
.pnl-foot__row{ display:flex; align-items:center; justify-content:center; gap:12px 20px; flex-wrap:wrap; text-align:center; }
.pnl-foot__links{ display:flex; justify-content:center; gap:18px; margin:14px 0 4px; font-size:15px; }
.pnl-foot__copy{ margin:0; text-align:center; font-size:14px; }

/* ---------- estimate / legal ---------- */
.est-body{ margin:0; font:500 16px/1.45 'Barlow Condensed',sans-serif; color:var(--marker); background:var(--wall); }
.est-page{ max-width:1000px; margin:22px auto; padding:16px 22px 0; border-radius:6px; min-height:calc(100vh - 44px); display:grid; grid-template-rows:auto 1fr auto; align-content:start;
  background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1.5px) 0 0/7px 7px, linear-gradient(160deg, var(--steel-hi), var(--steel) 40%, var(--steel-lo));
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.15), 0 18px 34px -16px rgba(0,0,0,.55); }
.topbar--estimate{ padding:4px 0 16px; }
.brand--estimate{ display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; text-decoration:none; border-radius:4px;
  background:linear-gradient(180deg, #e9ebec, #b9bfc3 60%, #d5d9db); color:#22262a; font:700 18px 'Barlow Condensed',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 0 0 1px #5d6468, 0 2px 3px rgba(0,0,0,.35); }
.brand-logo--estimate{ display:block; width:36px; height:36px; border-radius:3px; background:#fff; }
.est-main{ background:var(--card); border:2px solid var(--print); padding:16px; }
.est-weave{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; align-items:start; }
.est-weave-media img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--print); }
.est-shell{ min-width:0; }
.est-title{ margin:0 0 12px; font:400 32px/1.15 'Permanent Marker',cursive; padding-bottom:8px; border-bottom:2px solid var(--print); }
.est-form{ border:1px solid var(--print); padding:14px; background:repeating-linear-gradient(0deg, transparent 0 23px, var(--faint) 23px 24px); }
.est-header{ margin-bottom:10px; }
.est-progress{ height:14px; border:1px solid var(--print); background:#fff; }
.est-bar{ height:100%; width:20%; background:repeating-linear-gradient(90deg, var(--print) 0 10px, #fff 10px 12px); transition:width .25s; }
.est-error{ margin:10px 0; padding:8px 10px; border:2px solid var(--red); color:var(--red); font-weight:700; background:#fff; }
.est-panel label{ display:block; margin:12px 0; font:700 13px 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.14em; color:var(--print); }
.est-panel input, .est-panel select, .est-panel textarea{
  display:block; width:100%; margin-top:5px; padding:10px; border:2px solid var(--print); border-radius:0; background:#fff;
  font:400 19px 'Permanent Marker',cursive; color:var(--marker); letter-spacing:.03em; text-transform:none;
}
.est-panel select{ font:600 17px 'Barlow Condensed',sans-serif; }
.est-panel textarea{ font:500 17px 'Barlow Condensed',sans-serif; }
.est-panel input:focus, .est-panel select:focus, .est-panel textarea:focus{ outline:3px solid var(--hl); outline-offset:0; }
.est-textarea{ resize:vertical; }
.est-row{ display:grid; grid-template-columns:1fr 100px 110px; gap:10px; }
.est-tcpa{ margin:10px 0 0; font-size:12px; line-height:1.4; color:#4b5363; }
.est-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.est-actions #est-next{ margin-left:auto; }
.est-thanks{ padding:14px; border:2px solid var(--print); font:400 20px 'Permanent Marker',cursive; }
.legal-copy p{ margin:0 0 12px; font-size:17px; }
.est-page footer{ padding:14px 0 16px; text-align:center; font-size:14px; }

/* ---------- small screens ---------- */
@media (max-width:760px){
  .pnl-box{ margin:0; padding:14px 10px 18px; border-radius:0; }
  .pnl-doortop{ margin:0 -10px; padding:4px 14px 12px; }
  .pnl-plate{ font-size:16px; }
  .pnl-tabs{ width:100%; }
  .pnl-tape--red{ flex:1 1 auto; }
  .pnl-card__head{ grid-template-columns:minmax(0,1fr) 108px; }
  .pnl-desig{ padding:10px 12px; }
  .pnl-loc img{ height:96px; }
  .pnl-main{ grid-template-columns:44px minmax(0,1fr); gap:10px; padding:10px 12px; }
  .pnl-breaker{ width:40px; height:60px; }
  .pnl-zip{ flex:1 1 100%; }
  .pnl-switch{ flex:1 1 100%; justify-content:center; }
  .pnl-circuits{ grid-template-columns:1fr; }
  .pnl-ckt--odd{ border-right:0; }
  .pnl-notes{ padding:10px 12px; }
  .pnl-cities{ columns:2; padding:4px 6px 12px; }
  .est-page{ margin:0; border-radius:0; padding:12px 10px 0; min-height:100vh; }
  .est-weave{ grid-template-columns:1fr; }
  .est-weave-media img{ aspect-ratio:16/9; }
  .est-row{ grid-template-columns:1fr; }
}

/* 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 door top ----------
   Nameplate and label-tape nav stay pinned while the panel scrolls, on a
   strip of the same hammertone steel; a drop shadow fades in once content
   passes under it (scroll-driven where supported). */
.pnl-doortop, .topbar--estimate{
  position:sticky; top:0; z-index:50;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1.5px) 0 0/7px 7px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 1px, transparent 1.5px) 0 0/9px 9px,
    linear-gradient(180deg, var(--steel-hi), #a6adb1);
}
.topbar--estimate{ margin:0 -22px; padding:4px 22px 16px; }
@media (max-width:760px){ .topbar--estimate{ margin:0 -10px; padding:4px 10px 16px; } }
@supports (animation-timeline: scroll()){
  .pnl-doortop, .topbar--estimate{ animation:pnl-lift linear both; animation-timeline:scroll(root); animation-range:0 80px; }
  @keyframes pnl-lift{ to{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); } }
}
@supports not (animation-timeline: scroll()){
  .pnl-doortop, .topbar--estimate{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); }
}