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

/* Gas Bay: 1950s filling station. Red canopy fascia, cream enamel office
   wall, a red pump with a milk-glass globe, a navy-framed service bay, a
   black service-menu board, and a checkered-floor footer. */
:root{
  --red:#c8302a; --red-d:#9e221d; --cream:#f7f2e4; --cream-2:#ebe3cc; --navy:#183a63; --navy-d:#0f2745;
  --ink:#1a1a1a; --board:#1c1d1f; --yellow:#f3b61f; --chrome-a:#f4f6f7; --chrome-b:#a7aeb3; --chrome-c:#6b7378;
  --apron:#e6e1d4;
}
body.gby-body{ margin:0; background:var(--apron); color:var(--ink); font:400 16px/1.6 'Work Sans',system-ui,sans-serif; }
a{ color:inherit; }

/* ---------- buttons ---------- */
.gby-btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:8px 20px;
  background:var(--red); color:#fff; border:3px solid var(--ink); border-radius:999px; cursor:pointer; text-decoration:none;
  font:400 16px/1 'Bungee',sans-serif; letter-spacing:.03em; box-shadow:0 4px 0 var(--ink);
}
.gby-btn:hover, .btn:hover{ background:var(--red-d); }
.gby-btn:active, .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.btn.ghost{ background:var(--cream); color:var(--ink); }
.gby-btn--fascia{ background:var(--cream); color:var(--red); border-color:var(--cream); box-shadow:0 4px 0 var(--red-d); min-height:44px; }
.gby-btn--fascia:hover{ background:#fff; }
.gby-btn--pump{ width:100%; background:var(--yellow); color:var(--ink); min-height:52px; font-size:18px; }
.gby-btn--pump:hover{ background:#ffc93f; }

/* ---------- canopy fascia ---------- */
.gby-fascia{
  display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  padding:16px max(20px, calc(50% - 600px));
  background:
    linear-gradient(var(--cream) 0 0) top/100% 6px no-repeat,
    linear-gradient(var(--cream) 0 0) bottom 8px left 0/100% 3px no-repeat,
    var(--red);
  border-bottom:8px solid var(--navy); color:var(--cream);
}
.gby-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; font:400 clamp(18px, 2.2vw, 26px)/1.1 'Bungee',sans-serif; letter-spacing:.02em; }
.gby-brand img{ display:block; width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--cream); }
.gby-nav{ display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; }
.gby-navlink{ padding:8px 2px; font:400 15px 'Bungee',sans-serif; text-decoration:none; border-bottom:3px solid transparent; }
.gby-navlink[aria-current="page"]{ border-color:var(--yellow); }

/* ---------- forecourt: office wall + bay ---------- */
.gby-front{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border-bottom:10px solid var(--ink); }
.gby-office{
  padding:40px 40px 44px max(20px, calc((100vw - 1200px)/2));
  background:
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(0,0,0,.08) 158px 160px),
    linear-gradient(180deg, var(--cream), var(--cream-2));
  position:relative;
}
.gby-office::after{ /* red belt stripe across the wall */
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px; background:var(--red); box-shadow:0 -4px 0 var(--cream), 0 -8px 0 var(--navy);
}
.gby-office h1{ margin:0 0 28px; font:400 clamp(30px, 3.4vw, 48px)/1.08 'Bungee',sans-serif; color:var(--navy); overflow-wrap:break-word; }

/* the pump */
.gby-pump{ position:relative; max-width:430px; padding-top:44px; }
.gby-globe{
  position:absolute; top:0; left:26px; z-index:1; display:flex; align-items:center; justify-content:center; width:120px; height:62px;
  border-radius:60px 60px 10px 10px; background:radial-gradient(ellipse at 50% 30%, #fff, #f1ece0 70%); border:4px solid var(--red);
  font:400 17px 'Bungee',sans-serif; color:var(--red); box-shadow:0 0 0 3px var(--ink);
}
.gby-pump__body{
  position:relative; padding:34px 22px 22px; border-radius:22px 22px 8px 8px; background:linear-gradient(90deg, var(--red-d), var(--red) 18%, var(--red) 82%, var(--red-d));
  box-shadow:0 0 0 3px var(--ink), 0 14px 22px -12px rgba(0,0,0,.55);
}
.gby-pump__body::after{ /* hose */
  content:""; position:absolute; right:-24px; top:60px; bottom:30px; width:30px; border:7px solid var(--ink); border-left:0; border-radius:0 30px 30px 0;
}
.gby-pump__label{ display:block; margin:0 0 10px; font:700 14px/1.3 'Work Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.gby-meter{
  display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 12px; border-radius:8px;
  background:linear-gradient(135deg, var(--chrome-a), var(--chrome-b) 50%, var(--chrome-c)); box-shadow:0 0 0 3px var(--ink);
}
.gby-zip{
  flex:1 1 auto; width:100%; min-width:0; height:56px; padding:0 12px; border:0; border-radius:4px; background:#111; color:#fff;
  font:400 32px 'Bungee',sans-serif; letter-spacing:.24em; box-shadow:inset 0 4px 8px rgba(0,0,0,.6);
}
.gby-zip::placeholder{ color:#4a4a4a; letter-spacing:.04em; }
.gby-zip:focus{ outline:3px solid var(--yellow); outline-offset:2px; }
.gby-pump--call .gby-btn--pump{ font-size:20px; }

/* the service bay */
.gby-bay{
  position:relative; display:flex; flex-direction:column; padding:22px max(20px, calc((100vw - 1200px)/2)) 0 30px;
  background:linear-gradient(180deg, var(--navy), var(--navy-d));
}
.gby-opening{ position:relative; flex:1 1 auto; min-height:360px; overflow:hidden; border:10px solid #2b4f7c; border-bottom:0; box-shadow:inset 0 0 0 3px var(--ink); background:#111; }
.gby-opening img{ display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- service menu board ---------- */
.gby-main{ display:block; max-width:1200px; margin:0 auto; padding:44px 20px 40px; }
.gby-col{ min-width:0; }
.gby-intro p{ margin:0 0 24px; font-size:21px; line-height:1.55; color:var(--navy-d); max-width:760px; }
.gby-board{
  position:relative; padding:24px 30px 18px; background:var(--board); color:#efe9da; border-radius:6px;
  box-shadow:0 0 0 6px #5a3b22, 0 0 0 9px var(--ink), 0 22px 30px -18px rgba(0,0,0,.6);
}
.gby-menu{ list-style:none; margin:0; padding:0; }
.gby-item{ padding:16px 0 12px; border-bottom:1px solid rgba(239,233,218,.14); }
.gby-item:last-child{ border-bottom:0; }
.gby-item__head{ display:flex; align-items:baseline; gap:10px; }
.gby-item h2{ margin:0; font:700 19px/1.3 'Work Sans',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.gby-item__body{ padding:6px 0 0; max-width:720px; }
.gby-item__body p{ margin:0 0 8px; color:#e7e0cf; }
.gby-item__body ul{ margin:4px 0 8px; padding:0; list-style:none; }
.gby-item__body li{ position:relative; padding:3px 0 3px 22px; color:#e7e0cf; }
.gby-item__body li::before{ content:""; position:absolute; left:2px; top:11px; width:10px; height:10px; background:var(--red); border-radius:50%; box-shadow:0 0 0 2px var(--cream); }
.gby-item__body strong{ color:var(--yellow); font-weight:700; }
.gby-item__body h3{ margin:12px 0 6px; font:400 15px 'Bungee',sans-serif; color:var(--yellow); }
.gby-item--cost h2{ color:var(--yellow); }

/* cost tables on the board */
.table-scroll table{ background:#2a2b2e; color:#efe9da; border:2px solid #4b4c50; border-radius:4px; }
.table-scroll thead th{ background:var(--red); color:#fff; border-bottom:0; font:400 13px 'Bungee',sans-serif; }
.table-scroll td{ border-bottom:1px solid rgba(255,255,255,.1); font-size:15px; }

/* roadside price sign */

/* ---------- service area: road map ---------- */
.gby-map{
  padding:34px 20px 36px; border-top:6px solid var(--navy);
  background:
    linear-gradient(28deg, transparent 0 48%, rgba(200,48,42,.14) 48% 49%, transparent 49%),
    linear-gradient(-62deg, transparent 0 63%, rgba(24,58,99,.12) 63% 64%, transparent 64%),
    linear-gradient(100deg, transparent 0 30%, rgba(243,182,31,.22) 30% 30.6%, transparent 30.6%),
    #f2eedf;
}
.gby-map__in{ max-width:1200px; margin:0 auto; }
.gby-map h2{ margin:0 0 4px; font:400 26px 'Bungee',sans-serif; color:var(--navy); }
.muted{ margin:0 0 6px; color:#545045; font-size:15px; }
.gby-cities{ columns:4 230px; column-gap:28px; }
.city-group__title{ break-after:avoid; margin:12px 0 3px; font:400 14px 'Bungee',sans-serif; color:var(--red); }
.city-grid{ list-style:none; margin:0 0 6px; padding:0; }
.city-grid li{ display:inline; font-size:14px; line-height:1.85; white-space:nowrap; }
.city-grid li:not(:last-child)::after{ content:" \00b7"; color:var(--red); font-weight:700; }
.city-grid a{ text-decoration:none; }
.city-grid a:hover{ color:var(--red); text-decoration:underline; }
hr{ border:0; border-top:3px dotted var(--navy); }

/* ---------- footer ---------- */
.gby-checker{ height:36px; background:conic-gradient(var(--ink) 25%, #fff 0 50%, var(--ink) 0 75%, #fff 0) 0 0/36px 36px; border-top:4px solid var(--ink); }
.gby-foot__in{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 20px 26px; background:var(--navy-d); color:#eef0f3; text-align:center; }
.gby-foot__links{ display:flex; gap:20px; margin:4px 0 0; font-size:14px; }
.gby-foot__copy{ margin:0; font-size:14px; opacity:.85; }

/* ---------- estimate / legal ---------- */
.est-body{ margin:0; background:var(--apron); color:var(--ink); font:400 16px/1.55 'Work Sans',sans-serif; }
.est-page{ min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.topbar--estimate{ padding:14px 20px; background:linear-gradient(var(--cream) 0 0) top/100% 5px no-repeat, var(--red); border-bottom:8px solid var(--navy); }
.topbar-inner--estimate{ max-width:1100px; margin:0 auto; }
.brand--estimate{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream); font:400 20px 'Bungee',sans-serif; }
.brand-logo--estimate{ display:block; width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--cream); }
.est-main{ padding:34px 20px 44px; }
.est-weave{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:30px; align-items:start; }
.est-weave-media{ border:10px solid #2b4f7c; box-shadow:0 0 0 3px var(--ink); background:var(--navy); }
.est-weave-media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.est-shell{ min-width:0; max-width:760px; margin:0 auto; }
.est-weave .est-shell{ max-width:none; margin:0; }
.est-title{ margin:0 0 14px; font:400 clamp(28px,3.4vw,40px)/1.1 'Bungee',sans-serif; color:var(--navy); }
.est-form{ padding:22px; background:var(--cream); border:5px solid var(--navy); border-radius:12px; box-shadow:0 0 0 3px var(--ink); }
.est-header{ margin-bottom:14px; }
.est-progress{ height:16px; border:3px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; }
.est-bar{ height:100%; width:20%; background:var(--red); transition:width .25s; }
.est-error{ margin:10px 0; padding:10px 12px; border:3px solid var(--red); border-radius:8px; color:var(--red-d); background:#fff; font-weight:700; }
.est-panel label{ display:block; margin:12px 0; font:700 13px 'Work Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
.est-panel input, .est-panel select, .est-panel textarea{
  display:block; width:100%; margin-top:6px; padding:12px; border:3px solid var(--ink); border-radius:8px; background:#fff;
  font:400 17px 'Work Sans',sans-serif; color:var(--ink); letter-spacing:0; text-transform:none;
}
.est-panel input:focus, .est-panel select:focus, .est-panel textarea:focus{ outline:3px solid var(--yellow); outline-offset:2px; }
.est-textarea{ resize:vertical; }
.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:#555; }
.est-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.est-actions #est-next{ margin-left:auto; }
.est-thanks{ padding:18px; background:var(--cream); border:5px solid var(--navy); border-radius:12px; font:400 18px 'Bungee',sans-serif; color:var(--navy); }
.legal-copy{ padding:22px; background:var(--cream); border:5px solid var(--navy); border-radius:12px; }
.legal-copy p{ margin:0 0 12px; }
.est-page footer{ padding:18px 20px; text-align:center; font-size:14px; color:#eef0f3; background:var(--navy-d); border-top:10px solid var(--ink); }

/* ---------- small screens ---------- */
@media (max-width:900px){
  .gby-front{ grid-template-columns:minmax(0,1fr); }
  .gby-office{ padding:24px 18px 40px; }
  .gby-office h1{ margin-bottom:20px; }
  .gby-pump{ max-width:none; margin-right:22px; }
  .gby-bay{ padding:18px 18px 0; }
  .gby-opening{ min-height:0; aspect-ratio:4/3; }
  .gby-main{ display:flex; flex-direction:column; align-items:stretch; gap:30px; padding:30px 14px; }
  .gby-intro p{ font-size:18px; }
  .gby-board{ padding:20px 16px 12px; }
  .gby-item__head{ flex-wrap:wrap; }
  .gby-item h2{ font-size:17px; flex:1 1 100%; }
  .gby-cities{ columns:1; }
  .est-weave{ grid-template-columns:1fr; }
  .est-row{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .gby-fascia{ padding:14px 14px 18px; }
  .gby-nav{ width:100%; }
  .gby-btn--fascia{ margin-left:auto; }
}

/* 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 canopy ----------
   The fascia stays pinned while the page scrolls; a drop shadow fades in
   once content passes under it (scroll-driven where supported). */
.gby-fascia, .topbar--estimate{ position:sticky; top:0; z-index:50; }
@supports (animation-timeline: scroll()){
  .gby-fascia, .topbar--estimate{ animation:gby-lift linear both; animation-timeline:scroll(root); animation-range:0 80px; }
  @keyframes gby-lift{ to{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); } }
}
@supports not (animation-timeline: scroll()){
  .gby-fascia, .topbar--estimate{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); }
}