/* =========================================================
   FORGE COATINGS — shared styles for every page
   Change the brand colors and fonts here and the whole site updates.
   ========================================================= */
:root {
  --red: #e30613;          /* logo red */
  --red-dark: #b8050f;
  --black: #0b0b0c;        /* logo background */
  --ink: #16171a;          /* main text */
  --muted: #5d6068;        /* secondary text */
  --line: #e3e4e7;         /* borders */
  --bg: #ffffff;
  --bg-soft: #f4f5f7;      /* light gray sections */
  --silver: #c9ccd1;

  --font-head: "Exo 2", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius: 10px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 73px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a[href^="tel:"] { white-space: nowrap; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section.soft { background: var(--bg-soft); }
.section.dark { background: var(--black); color: #fff; }
.eyebrow {
  display: inline-block; font: 700 .78rem/1 var(--font-head);
  letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 620px; }
.dark .lead { color: #b9bcc3; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius); border: 2px solid transparent;
  font: 700 1rem/1 var(--font-head); text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--black); color: #fff; border-bottom: 1px solid #1d1e22;
}
.header .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 34px; width: auto; }
.brand span { font: 700 .95rem/1 var(--font-head); letter-spacing: .28em; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 10px 14px; border-radius: 8px; text-decoration: none;
  font-weight: 600; color: #d6d8dc;
}
.nav a:hover, .nav a.active { color: #fff; background: #1b1c20; }
.header-phone { font-weight: 700; text-decoration: none; white-space: nowrap; }
.header .btn { padding: 11px 18px; }
.menu-btn {
  display: none; margin-left: auto; background: none; border: 0; color: #fff;
  width: 44px; height: 44px; cursor: pointer;
}
.menu-btn svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .header-phone, .header .btn { display: none; }
  .menu-btn { display: block; }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; background: var(--black); padding: 8px 20px 20px;
    border-bottom: 1px solid #1d1e22;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .nav .nav-cta { display: block; margin-top: 8px; text-align: center; background: var(--red); color: #fff; }
}
@media (min-width: 901px) { .nav .nav-cta { display: none; } }

/* ---------- Hero ---------- */
.hero {
  background: var(--black); color: #fff; position: relative; overflow: hidden;
  padding: 90px 0 100px;
}
.hero::before {           /* subtle flake-floor texture */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(circle at 80% 30%, rgba(227,6,19,.18), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(201,204,209,.08), transparent 40%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero p.lead { color: #c4c7cd; }
.hero-logo { width: 100%; max-width: 460px; justify-self: center; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; padding: 0; list-style: none; color: #c4c7cd; font-weight: 600; font-size: .95rem; }
.hero-points li::before { content: "✓"; color: var(--red); margin-right: 8px; font-weight: 800; }
@media (max-width: 900px) {
  .hero { padding: 56px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-logo { order: -1; max-width: 300px; justify-self: start; }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; height: 100%;
}
.card p { color: var(--muted); margin: 0; }
.card .icon {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: #fde8e9; color: var(--red); margin-bottom: 16px;
}
.card .icon svg { width: 24px; height: 24px; }
.section-head { margin-bottom: 40px; }

/* Steps */
.step-num {
  font: 800 2.4rem/1 var(--font-head); color: var(--red); margin-bottom: 10px;
}
.dark .card { background: #141518; border-color: #24262b; }
.dark .card p { color: #a9acb3; }

/* ---------- Photo placeholders (swap for real photos) ---------- */
.photo {
  aspect-ratio: 4 / 3; border-radius: var(--radius); position: relative; overflow: hidden;
  background-color: #8d9097;
  background-image:
    radial-gradient(#2b2c30 1.4px, transparent 1.6px),
    radial-gradient(#e9eaec 1.2px, transparent 1.4px),
    radial-gradient(#c33 1px, transparent 1.2px);
  background-size: 11px 13px, 17px 15px, 23px 29px;
  background-position: 0 0, 5px 7px, 9px 3px;
}
.photo.v2 { background-color: #5b5e66; }
.photo.v3 { background-color: #a8a49c; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .tag {
  position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.72); color: #fff;
  font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 6px;
}

/* ---------- Reviews ---------- */
.stars { color: #f5a400; letter-spacing: 2px; font-size: 1.05rem; }
.review p { color: var(--ink); margin: 12px 0 16px; }
.review .who { font-weight: 700; }
.review .where { color: var(--muted); font-size: .9rem; }
.rating-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rating-box .big { font: 800 3.4rem/1 var(--font-head); }

/* ---------- Service area ---------- */
.cities { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.cities li { background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: #fff; padding: 56px 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; }
.cta-band .btn-white { background: #fff; color: var(--red); }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.12); }

/* ---------- Page banner (inner pages) ---------- */
.banner { background: var(--black); color: #fff; padding: 64px 0 56px; }
.banner .lead { color: #c4c7cd; }

/* ---------- Form ---------- */
.form-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field label .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid #cfd1d6; border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,6,19,.15);
}
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.show { display: block; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.info-list strong { display: block; font-family: var(--font-head); }
.info-list a { color: var(--red); font-weight: 600; text-decoration: none; }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: #a9acb3; padding: 56px 0 28px; font-size: .95rem; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer .cols { grid-template-columns: 1fr; } }
.footer img { height: 90px; width: auto; margin-bottom: 8px; }
.footer h4 { color: #fff; font-family: var(--font-head); margin: 0 0 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .legal { border-top: 1px solid #1f2024; margin-top: 40px; padding-top: 20px; font-size: .85rem; }
.nav .nav-call { background: transparent; border: 1px solid #3a3c42; }

/* =========================================================
   MODERN TOUCHES — motion, glow and angled accents.
   Delete this whole block to go back to the plain version.
   ========================================================= */

/* Slanted red bar before small labels (matches the logo's slant) */
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 3px; margin-right: 10px;
  background: var(--red); transform: skewX(-30deg); vertical-align: middle;
}

/* Hero: drifting red glow + moving floor grid */
.hero::before { animation: glow-drift 12s ease-in-out infinite alternate; }
.hero::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -2px; height: 55%;
  background-image:
    linear-gradient(rgba(227,6,19,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,6,19,.35) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  opacity: .7; animation: grid-move 4s linear infinite; pointer-events: none;
}
.hero .wrap { z-index: 1; }
.hero-logo { filter: drop-shadow(0 10px 40px rgba(227,6,19,.25)); }
@keyframes grid-move { to { background-position: 0 64px; } }
@keyframes glow-drift { from { transform: translate(0,0); } to { transform: translate(-6%, 4%); } }

/* Buttons: light sweep on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .5s ease;
}
.btn:hover::after { left: 120%; }
.btn-red { box-shadow: 0 6px 24px -8px rgba(227,6,19,.7); }

/* Cards: lift + red line slides in on hover */
.card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--red), #ff5a5f); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
.card:hover::before { transform: scaleX(1); }
.dark .card:hover { border-color: #3a1517; box-shadow: 0 18px 40px -20px rgba(227,6,19,.45); }

/* Step numbers in brushed silver like the logo */
.step-num {
  background: linear-gradient(180deg, #ffffff, #8f939a); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-style: italic;
}

/* Photo placeholders: dark flake look + "Example pic" label */
.photo {
  background-color: #2a2c31;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(#0e0f11 1.3px, transparent 1.5px),
    radial-gradient(#b9bcc2 1.1px, transparent 1.3px),
    radial-gradient(var(--red) .9px, transparent 1.1px);
  background-size: 100% 100%, 9px 11px, 13px 12px, 21px 25px;
}
.photo.v2 { background-color: #44474e; }
.photo.v3 { background-color: #6b6862; }
.photo::after {           /* glossy sheen that slides across on hover */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform .8s ease;
}
.photo:hover::after { transform: translateX(100%); }
.photo .example {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 8px 14px; border: 1px dashed rgba(255,255,255,.6); border-radius: 6px;
  font: 700 .8rem/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.45);
}

/* Slide-up as things scroll into view (site.js adds the classes); always readable */
.reveal { transform: translateY(28px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { transform: none; }
}

/* Admin link: in the phone menu, and small in the footer */
.nav .nav-admin { color: #8d9097; font-size: .95rem; border-top: 1px solid #1f2024; margin-top: 10px; padding-top: 16px; border-radius: 0; }
@media (min-width: 901px) { .nav .nav-admin { display: none; } }
.footer .legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-admin { color: #6b6e75; }

/* =========================================================
   SERVICE AREA MAP (traced from OpenStreetMap: city limits, Utah Lake, I-15)
   Everything sits still; a city lights up red only while the mouse is on it.
   ========================================================= */
.area { background: #fff; color: var(--ink); }
.area-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.area-copy { position: sticky; top: 110px; }
@media (max-width: 900px) { .area-copy { position: static; } }
.area-group { font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.area .cities li { padding: 6px 12px; font-size: .88rem; }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr; gap: 32px; } }
.area .lead { color: var(--muted); }
.area .cities li { background: #fff; border-color: var(--line); color: var(--ink); transition: border-color .2s, color .2s, background .2s; cursor: default; }
.area .cities li.hl { border-color: var(--red); color: #fff; background: var(--red); }
.area-note { color: var(--muted); margin: 22px 0 0; }
.area-note a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; }

.map-frame {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #d9dbdf;
  background: #fbfbfc; box-shadow: 0 24px 60px -30px rgba(11,11,12,.35);
  max-width: 620px; width: 100%; justify-self: center;
}
.map-frame::before, .map-frame::after {      /* corner brackets */
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--black); z-index: 2; pointer-events: none;
}
.map-frame::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.map-frame::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.map { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.hud {
  position: absolute; z-index: 2; font: 600 .66rem/1 var(--font-head); letter-spacing: .18em; color: #5d6068; pointer-events: none;
}
.hud-tl { top: 18px; left: 40px; }
.hud-tr { top: 18px; right: 64px; color: var(--red); }
.hud-bl { bottom: 40px; left: 18px; }
.hud-hint { display: none; }

.map .grid-line { stroke: rgba(11,11,12,.05); stroke-width: 1; }
.map .muni {
  fill: #eceef1; stroke: #9a9ea6; stroke-width: .9; stroke-linejoin: round; cursor: pointer;
  transition: fill .2s, stroke .2s;
}
.map .muni.hl { fill: rgba(227,6,19,.16); stroke: var(--red); stroke-width: 1.4; }
.map .hatch { stroke: rgba(11,11,12,.13); stroke-width: 1.4; }
.map .lake { fill: url(#lakehatch-wasatch); pointer-events: none; }
.map .lake-edge { fill: rgba(255,255,255,.55); fill-rule: evenodd; stroke: var(--black); stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }
.map .lake-label { fill: #5d6068; font: 600 12px var(--font-head); letter-spacing: .5em; pointer-events: none; }
.map .road { fill: none; stroke: var(--black); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; pointer-events: none; }
.map .shield rect { fill: var(--black); }
.map .shield text { fill: #fff; font: 700 10px var(--font-head); }

.map .city { cursor: pointer; outline: none; }
.map .city .pin { fill: var(--black); stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .2s, fill .2s; }
.map .city text {
  fill: var(--ink); font: 600 11.5px var(--font-head); letter-spacing: .02em;
  paint-order: stroke; stroke: #fbfbfc; stroke-width: 4px; stroke-linejoin: round; transition: fill .2s;
}
.map .city.hl .pin { fill: var(--red); transform: scale(1.5); }
.map .city.hl text { fill: var(--red); font-weight: 800; }

.map .compass circle { fill: #fff; stroke: var(--black); }
.map .compass path { fill: var(--red); }
.map .compass text, .map .scale text { fill: #5d6068; font: 600 10px var(--font-head); letter-spacing: .14em; }
.map .scale line { stroke: var(--black); stroke-width: 1.5; }

/* Phones: the full map is too small for 33 names, so only the main cities keep a
   label (bigger), and any other city shows its name when tapped */
@media (max-width: 620px) {
  .hud-tl, .hud-bl { display: none; }
  .hud-tr { left: 40px; right: auto; }
  .hud-hint { display: block; top: 34px; left: 40px; color: #5d6068; }
  .map .city text { display: none; font-size: 19px; stroke-width: 5px; }
  .map .city.major text, .map .city.hl text { display: inline; }
  .map .city .pin { r: 5.5px; }
  .map .city.hl text { font-weight: 800; }
  .map .compass text, .map .scale text { font-size: 15px; }
}

/* =========================================================
   NOV 2026 ADDITIONS: motto, 2-day process, before/after, flake colors,
   visualizer, Forge Pro Partners, first reviews, map tabs
   ========================================================= */
@media (max-width: 1180px) and (min-width: 901px) { .header-phone { display: none; } .nav a { padding: 10px 10px; } }
.hero .lead { max-width: 640px; font-size: 1.05rem; }
.hero h1 { font-style: italic; letter-spacing: -.01em; }
.footer .motto { font: 800 italic 1.3rem/1.2 var(--font-head); color: #fff; margin: 0 0 8px; }
.sub-head { font-family: var(--font-head); margin: 44px 0 16px; font-size: 1.1rem; }
.btn-ghost-dark { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark:hover { background: rgba(0,0,0,.05); }
.dark .btn-ghost-dark, .swatch-dialog .btn-ghost-dark { border-color: currentColor; }
.btn-silver { background: linear-gradient(180deg, #f4f5f6, #b9bcc2); color: var(--black); }
.form-error { color: #b42318; font-weight: 600; margin: 0; }
.form-title { margin-bottom: 18px; }

/* ---------- 2-day process ---------- */
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .process { grid-template-columns: 1fr; } }
.day-col { background: #141518; border: 1px solid #24262b; border-radius: var(--radius); padding: 26px; }
.day-label {
  display: inline-block; font: 800 .8rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 8px 12px; border-radius: 6px; margin-bottom: 18px; transform: skewX(-10deg);
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.steps .step-num { font-size: 1.7rem; margin: 0; }
.steps h3 { margin: 2px 0 4px; }
.steps p { margin: 0; color: #a9acb3; }
.process-cta { margin-top: 30px; }

/* ---------- Before / after ---------- */
.ba {
  position: relative; aspect-ratio: 16 / 10; max-width: min(100%, 960px); margin-inline: auto; border-radius: 14px; overflow: hidden;
  background: #222; user-select: none; touch-action: pan-y;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before-example {
  background-color: #a19f99;
  background-image:
    radial-gradient(ellipse 18% 9% at 32% 62%, rgba(55,50,45,.35), transparent 70%),
    radial-gradient(ellipse 12% 6% at 66% 40%, rgba(55,50,45,.28), transparent 70%),
    linear-gradient(100deg, transparent 49.6%, rgba(60,60,60,.45) 49.8%, rgba(60,60,60,.45) 50%, transparent 50.2%),
    radial-gradient(#8f8d87 1px, transparent 1.3px), radial-gradient(#b4b2ac 1px, transparent 1.3px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 7px 9px, 11px 7px;
}
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none;
}
.ba-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center;
  font: 800 1rem/1 var(--font-head); box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag {
  position: absolute; top: 14px; background: rgba(11,11,12,.75); color: #fff; font: 700 .78rem/1 var(--font-head);
  letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; border-radius: 6px; pointer-events: none;
}
.ba-tag-l { left: 14px; } .ba-tag-r { right: 14px; }
.ba .example {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 12px;
  border: 1px dashed rgba(255,255,255,.7); border-radius: 6px; background: rgba(0,0,0,.5); color: #fff;
  font: 700 .72rem/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; pointer-events: none;
}
.job-photos .photo { aspect-ratio: 1; }

/* ---------- Flake teaser (home) ---------- */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .teaser { grid-template-columns: 1fr; } }
.teaser-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teaser-swatches a { text-decoration: none; display: grid; gap: 6px; font: 700 .85rem var(--font-head); }
.teaser-swatches canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); transition: transform .2s; }
.teaser-swatches a:hover canvas { transform: translateY(-3px); }

/* ---------- First reviews strip ---------- */
.first-review { background: var(--black); color: #fff; padding-block: 44px; border-top: 1px solid #1d1e22; }
.first-review .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.first-review h2 { margin: 0 0 4px; font-size: 1.5rem; }
.first-review p { margin: 0; color: #b9bcc3; }
.first-review .wrap > div { flex: 1; min-width: 240px; }
.first-review .wrap > .stars { font-size: 1.4rem; flex: none; min-width: 0; }

/* ---------- Forge Pro Partners ---------- */
.pro-band { background: linear-gradient(180deg, #0b0b0c, #16171b); color: #fff; }
.pro-band .lead { color: #b9bcc3; }
.pro-band .card { background: rgba(255,255,255,.03); border-color: #2a2c31; }
.pro-band .card p { color: #a9acb3; }
.pro-band .card .icon { background: rgba(255,255,255,.06); color: #e7e8ea; }
.pro-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.pro-hero {
  background: radial-gradient(ellipse at 80% 0%, rgba(201,204,209,.16), transparent 55%), var(--black);
  color: #fff; padding-block: 90px 80px; position: relative; overflow: hidden;
}
.pro-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #c9ccd1, var(--red), #c9ccd1, transparent);
}
.pro-hero h1 { max-width: 780px; }
.pro-hero .lead { color: #c4c7cd; }
.pro-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .pro-steps { grid-template-columns: 1fr; } }
.pro-steps li { border-top: 3px solid var(--black); padding-top: 18px; }
.pro-steps .step-num { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--red); font-size: 2rem; }
.pro-steps p { color: var(--muted); margin: 0; }
.pro-aside { background: var(--black); color: #fff; border-color: var(--black); }
.pro-aside .info-list a { color: #fff; }

/* ---------- Flake library ---------- */
.toolbar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chips button {
  border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 9px 16px; cursor: pointer;
  font: 600 .92rem var(--font-body); color: var(--ink);
}
.filter-chips button.active { background: var(--black); color: #fff; border-color: var(--black); }
.example-note { color: var(--muted); font-size: .88rem; }
.flake-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.flake-card {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer; display: grid; gap: 4px; color: var(--ink);
}
.flake-card canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 12px 28px -18px rgba(0,0,0,.55); transition: transform .2s, box-shadow .2s; }
.flake-card:hover canvas, .flake-card:focus-visible canvas { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(0,0,0,.55); }
.flake-card:focus-visible { outline: none; }
.flake-card:focus-visible .flake-name { color: var(--red); }
.flake-name { font: 800 1rem var(--font-head); margin-top: 6px; }
.flake-group { color: var(--muted); font-size: .85rem; }
.swatch-dialog {
  border: 0; border-radius: 16px; padding: 0; width: min(760px, calc(100vw - 32px)); overflow: hidden;
  display: none; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.swatch-dialog[open] { display: grid; }
.swatch-dialog::backdrop { background: rgba(11,11,12,.6); }
.swatch-dialog canvas { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.swatch-info { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.swatch-info .btn-row { flex-direction: column; align-items: stretch; margin-top: 12px; }
.swatch-close {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); cursor: pointer; font-size: 1rem; z-index: 2;
}
@media (max-width: 620px) { .swatch-dialog { grid-template-columns: 1fr; } }

/* ---------- Visualizer ---------- */
.viz { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 960px) { .viz { grid-template-columns: 1fr; } }
.viz-stage-wrap { min-width: 0; }
.viz-stage { position: relative; line-height: 0; touch-action: none; }   /* not clipped, so corner handles stay grabbable */
.viz-stage canvas { width: 100%; height: auto; display: block; border-radius: 14px; background: #111; }
.viz-split { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none; }
.viz-handle {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: grab; touch-action: none; padding: 0;
}
.viz-handle:active { cursor: grabbing; }
.viz-handle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.viz-compare { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: #c4c7cd; font: 700 .8rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.viz-compare input { flex: 1; accent-color: var(--red); }
.viz-panel { background: #141518; border: 1px solid #24262b; border-radius: 14px; padding: 22px; }
.viz-steps { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 18px; color: #c4c7cd; }
.viz-steps strong { color: #fff; display: block; margin-bottom: 8px; font-family: var(--font-head); }
.viz-steps .btn { padding: 10px 14px; font-size: .9rem; }
.viz-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.viz-colors button { border: 2px solid transparent; background: none; padding: 2px; border-radius: 10px; cursor: pointer; color: #c4c7cd; display: grid; gap: 3px; font-size: .7rem; }
.viz-colors canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 7px; }
.viz-colors button[aria-checked="true"] { border-color: var(--red); color: #fff; }
.viz-picked { margin: 10px 0 0; font-size: .9rem; }
.viz-picked b { color: #fff; }
.viz-quote { width: 100%; }
.viz-note { color: #8d9097; font-size: .85rem; margin: 12px 0 0; }

/* ---------- Map tabs ---------- */
.map-col { display: grid; gap: 12px; max-width: 620px; width: 100%; justify-self: center; }
.map-tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 5px; border-radius: 12px; }
.map-tabs button {
  flex: 1; border: 0; background: none; padding: 11px 12px; border-radius: 8px; cursor: pointer;
  font: 700 .92rem var(--font-head); color: var(--muted);
}
.map-tabs button[aria-selected="true"] { background: var(--black); color: #fff; }

/* ---------- The Forge system: exploded cross-section ---------- */
.system { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .system { grid-template-columns: 1fr; gap: 32px; } }
.system-copy .lead { margin-bottom: 24px; }
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stack-row { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: 28px; align-items: center; }
.slab { position: relative; height: 84px; }
.slab .face {                                 /* top surface, drawn in perspective */
  position: absolute; left: 0; right: 0; top: 0; height: 66px; width: 100%;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
.slab .edge {                                 /* the layer's thickness, seen from the front */
  position: absolute; left: 0; width: 80%; top: 66px; height: 14px;
}
.slab::after {                                /* right side of the layer */
  content: ""; position: absolute; left: 80%; width: 20%; top: 0; height: 80px;
  clip-path: polygon(0 82.5%, 100% 0, 100% 17.5%, 0 100%);
}
.slab-top .face { background: linear-gradient(115deg, rgba(255,255,255,.95), rgba(225,230,236,.55) 45%, rgba(255,255,255,.9) 60%, rgba(214,220,227,.6)); box-shadow: inset 0 0 0 1px #c9ccd1; }
.slab-top .edge { background: linear-gradient(180deg, rgba(220,226,232,.9), rgba(190,197,205,.9)); height: 6px; }
.slab-top::after { background: rgba(190,197,205,.9); height: 72px; clip-path: polygon(0 91.7%, 100% 0, 100% 8.3%, 0 100%); }
.slab-flake .edge { background: #5a5d63; }
.slab-flake::after { background: #44474c; }
.slab-epoxy .face { background: linear-gradient(115deg, #6c7076, #50545a 55%, #6a6e74); }
.slab-epoxy .edge { background: #3b3e43; height: 18px; }
.slab-epoxy::after { background: #2f3236; height: 84px; clip-path: polygon(0 78.6%, 100% 0, 100% 21.4%, 0 100%); }
.slab-concrete .face {
  background-color: #a9a7a1;
  background-image: radial-gradient(#8f8d87 1px, transparent 1.4px), radial-gradient(#c3c1bb 1px, transparent 1.4px);
  background-size: 7px 8px, 11px 7px;
}
.slab-concrete .edge { background: #8d8b85; height: 18px; }
.slab-concrete::after { background: #7b7974; height: 84px; clip-path: polygon(0 78.6%, 100% 0, 100% 21.4%, 0 100%); }
.stack-text h3 { margin: 4px 0 4px; }
.stack-text p { margin: 0; color: var(--muted); font-size: .95rem; }
.stack-day { font: 700 .7rem/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stack-key h3 { color: var(--red); }
.stack-key .stack-day { color: var(--red); }
@media (max-width: 520px) {
  .stack-row { grid-template-columns: 120px 1fr; gap: 16px; }
  .slab { height: 64px; }
  .slab .face { height: 50px; }
  .slab .edge { top: 50px; height: 10px; }
  .slab::after { height: 60px; }
}

/* ---------- Visualizer controls ---------- */
.btn-sm { padding: 8px 12px !important; font-size: .85rem !important; }
.viz-tools { margin-top: 10px; gap: 8px; }
.viz-tools .btn:disabled { opacity: .4; cursor: not-allowed; }
.viz-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viz-outline polygon { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; opacity: .85; }
.viz-size { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #c4c7cd; font-size: .9rem; }
.viz-size select, .viz-size input {
  background: #0b0b0c; color: #fff; border: 1px solid #3a3c42; border-radius: 8px; padding: 9px 10px; font: inherit;
}
.viz-size input { width: 64px; }
.viz-custom { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.viz-chip { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.viz-chip span { color: #8d9097; font-size: .85rem; margin-right: 4px; }
.viz-chip button { border: 1px solid #3a3c42; background: none; color: #c4c7cd; border-radius: 99px; padding: 7px 13px; font: 600 .85rem var(--font-body); cursor: pointer; }
.viz-chip button[aria-checked="true"] { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Color library: category menu + type tags ---------- */
.flake-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.flake-main { min-width: 0; }
.flake-cats { display: grid; gap: 2px; position: sticky; top: 96px; }
.flake-cats button {
  text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font: 600 .95rem var(--font-body); color: var(--ink);
}
.flake-cats button:hover { background: var(--bg-soft); }
.flake-cats button.active { background: var(--black); color: #fff; }
.flake-cats .cat { font-family: var(--font-head); font-weight: 700; margin-top: 8px; }
.flake-cats .sub { padding-left: 26px; color: var(--muted); border-left: 2px solid var(--line); margin-left: 12px; border-radius: 0 8px 8px 0; }
.flake-cats .sub.active { color: #fff; border-left-color: var(--red); }
.flake-count { font: 700 .95rem var(--font-head); }
@media (max-width: 820px) {
  .flake-layout { grid-template-columns: 1fr; gap: 16px; }
  .flake-cats { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .flake-cats button, .flake-cats .sub { white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; margin: 0; color: var(--ink); }
  .flake-cats .cat { margin-top: 0; }
}
.flake-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.flake-tags span { font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 3px 7px; border-radius: 4px; background: var(--bg-soft); color: var(--muted); }
.flake-card .flake-name { margin-top: 2px; }
.viz-status { margin: 10px 0 0; font-size: .88rem; color: #c4c7cd; min-height: 1.2em; }
.viz-status.ok::before { content: "✓ "; color: #4ade80; font-weight: 800; }
.viz-handle.viz-mid { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2px; background: #b3121a; }

/* ---------- AI floor finder states ---------- */
.viz-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.viz-tools-label { color: #8d9097; font-size: .85rem; width: 100%; }
.viz-tools [aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.viz-stage.ai-mode .viz-handle, .viz-stage.ai-mode .viz-outline { display: none; }
.viz-stage.ai-mode canvas { cursor: crosshair; }
.viz-stage.busy::after {
  content: "Finding your floor…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(11,11,12,.82); color: #fff; padding: 12px 18px; border-radius: 10px;
  font: 700 .95rem/1 var(--font-head); letter-spacing: .02em; line-height: 1;
}
.viz-tap {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center;
  font: 800 16px/1 var(--font-head); color: #fff; border: 2px solid #fff; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.viz-tap.add { background: #16a34a; }
.viz-tap.remove { background: var(--red); }

/* ---------- Visualizer v3: showroom + your garage ---------- */
.viz-modes { display: flex; gap: 6px; background: #141518; padding: 5px; border-radius: 12px; margin-bottom: 12px; border: 1px solid #24262b; }
.viz-modes button { flex: 1; border: 0; background: none; color: #a9acb3; padding: 11px 12px; border-radius: 8px; cursor: pointer; font: 700 .95rem var(--font-head); }
.viz-modes button[aria-selected="true"] { background: #fff; color: var(--black); }
.viz-h { color: #fff; margin: 0 0 10px; font-size: 1.05rem; }
.viz-yours { display: grid; gap: 10px; justify-items: start; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #24262b; }
.viz-yours .viz-status { margin: 0; font-size: .98rem; color: #fff; font-weight: 600; }
.viz-stage.tap-mode canvas { cursor: crosshair; }
.viz-stage.needs-tap::after {
  content: "Tap your garage floor"; position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 12px 18px; border-radius: 99px; font: 800 1rem/1 var(--font-head);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; animation: tap-bob 1.6s ease-in-out infinite;
}
@keyframes tap-bob { 50% { transform: translate(-50%, -6px); } }
.viz-tap {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid #fff; background: rgba(227,6,19,.55); pointer-events: none; animation: tap-ring .9s ease-out forwards;
}
@keyframes tap-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.btn.is-disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn.is-disabled::after { display: none; }

/* Phones: keep the showroom picture in view (pinned under the menu bar) while scrolling through the colors */
@media (max-width: 700px) and (min-height: 560px) {
  .viz-stage-wrap { position: sticky; top: 73px; z-index: 3; background: var(--black); padding: 8px 0 2px; margin-top: -8px; }
  .viz-compare { margin-top: 8px; }
}

/* Service area as a short bullet list in the contact boxes */
.info-list .area-bullets { list-style: disc; margin: 4px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.info-list .area-bullets li::marker { color: var(--red); }

/* Coating layers: his diagram in a clean white card */
.system-figure { margin: 0; background: #fff; border-radius: 18px; padding: clamp(10px, 2vw, 22px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); }
.system-figure img { display: block; width: 100%; height: auto; }

/* ---------- Torginol flake library ---------- */
.flake-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #f3f3f2; box-shadow: 0 12px 28px -18px rgba(0,0,0,.45); transition: transform .2s, box-shadow .2s; }
.flake-card:hover img, .flake-card:focus-visible img { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(0,0,0,.5); }
.flake-search { flex: 0 1 260px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; font: inherit; background: #fff; }
.flake-search:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.custom-blend { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 24px; padding: 18px 22px; border-radius: 14px; background: var(--black); color: #fff; }
.custom-blend h3 { margin: 0 0 4px; font-size: 1.1rem; }
.custom-blend p { margin: 0; color: #c4c7cd; max-width: 52ch; }
.swatch-dialog img#swatch-big { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #fff; }
.swatch-code { margin: -6px 0 16px; color: var(--muted); font-size: .9rem; }
.viz-cat { width: 100%; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #2b2d32; background: #141518; color: #fff; font: 600 .95rem var(--font-body, inherit); }
.viz-colors { max-height: 330px; overflow-y: auto; padding-right: 4px; }
.viz-colors img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: #fff; }
.viz-colors span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Real job photos */
.job-photos-2 { grid-template-columns: repeat(2, 1fr); }
.job-photos.job-photos-2 .photo { aspect-ratio: 16 / 10; }
@media (max-width: 620px) { .job-photos-2 { grid-template-columns: 1fr; } }

/* ---------- Service area: the map is the city list; three counts beside it (Nov 2026) ---------- */
.area-stats { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.area-stats button { all: unset; cursor: pointer; display: grid; gap: 4px; }
.area-stats strong { font: 800 2.4rem/1 var(--font-head); color: var(--ink); }
.area-stats span { font-size: .9rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
.area-stats button:hover strong, .area-stats button:focus-visible strong { color: var(--red); }
.area-stats button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }

/* ---------- Before / after, refreshed (Nov 2026): bigger, floor-focused, cleaner handle ---------- */
.ba {
  aspect-ratio: 16 / 9; max-width: 100%; border-radius: 18px;
  clip-path: inset(0 round 18px);              /* keeps the right-hand corners round in Safari */
  box-shadow: 0 30px 60px -30px rgba(11,11,12,.45);
}
.ba-img { object-position: 50% 78%; }          /* less ceiling, more floor */
.ba-after { clip-path: inset(0 0 0 var(--pos) round 0 18px 18px 0); }
.ba-handle { width: 2px; margin-left: -1px; box-shadow: 0 0 12px rgba(0,0,0,.35); }
.ba-handle::after { content: none; }
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ba-knob::before, .ba-knob::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; border-block: 7px solid transparent; transform: translateY(-50%);
}
.ba-knob::before { left: 12px; border-right: 9px solid var(--red); }
.ba-knob::after { right: 12px; border-left: 9px solid var(--red); }
.ba-tag {
  top: auto; bottom: 16px; background: rgba(11,11,12,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 9px 14px; border-radius: 999px; font-size: .74rem;
}
.ba-tag-l { left: 16px; } .ba-tag-r { right: 16px; }
.ba-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 26px; }
.ba-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ba-facts li { position: relative; padding-left: 18px; font-weight: 600; color: var(--ink); }
.ba-facts li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--red); transform: rotate(45deg); }
@media (max-width: 620px) {
  .ba { aspect-ratio: 4 / 3; border-radius: 14px; clip-path: inset(0 round 14px); }
  .ba-after { clip-path: inset(0 0 0 var(--pos) round 0 14px 14px 0); }
  .ba-knob { width: 46px; height: 46px; }
  .ba-knob::before { left: 9px; } .ba-knob::after { right: 9px; }
  .ba-foot .btn { width: 100%; text-align: center; }
}

/* ---------- Nov 11 polish ---------- */
/* The drifting glow used to slide its own edge into view (a faint box behind the logo).
   Make the glow layer bigger than the hero so no edge ever shows. */
.hero::before { inset: -15%; }
/* Half the white gap between the dark hero and the first white section */
.hero + .section { padding-top: 40px; }
/* Phones: the map's corner labels sat on top of the North Salt Lake label.
   The city count is already shown in the big numbers above the map, so drop it here
   and give the "tap a city" hint its own line above the map instead of on top of it. */
@media (max-width: 620px) {
  .hud-tr { display: none; }
  .hud-hint { position: static; padding: 16px 16px 0 52px; }
}