/* ============================================================
   DENT SOLUTIONS NW - interactive components
   Video theaters, the access diagram, the two calculators,
   and the before/after gallery.
   ============================================================ */

/* ═══ VIDEO THEATER ═══════════════════════════════════════════
   Frameless. No boxed player, no native control deck, no icon row.
   The play control is the chrome word itself. Poster melts into the
   dark. Drop a file path into data-src and it becomes a real player. */
.thtr{position:relative;min-height:clamp(460px,70vw,820px);overflow:hidden;display:grid;
  place-items:center;cursor:pointer;background:var(--bg)}
.thtr__im{position:absolute;inset:-4%;background-size:cover;background-position:center 44%;
  filter:saturate(.92) contrast(1.06) brightness(.62);transform:scale(1.02);
  transition:transform 1.5s var(--ease),filter .7s var(--ease)}
.thtr:hover .thtr__im{transform:scale(1.06);filter:saturate(1) contrast(1.1) brightness(.72)}
.thtr__veil{position:absolute;inset:0;background:
  linear-gradient(to top,var(--bg) 0%,rgba(14,21,38,.2) 36%,transparent 58%),
  linear-gradient(to bottom,var(--bg) 0%,rgba(14,21,38,.24) 32%,transparent 54%),
  radial-gradient(64% 74% at 50% 48%,transparent 30%,rgba(14,21,38,.55) 100%)}
.thtr__mid{position:relative;z-index:2;text-align:center;padding:0 24px}
.thtr__word{font-family:var(--dsp);font-size:clamp(46px,10vw,124px);font-weight:400;
  letter-spacing:-.048em;line-height:.9;color:#fff;-webkit-text-fill-color:#fff;
  -webkit-text-stroke:var(--fat) #fff;paint-order:stroke fill;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.9)) drop-shadow(0 10px 26px rgba(0,0,0,.7));
  transition:transform .5s var(--ease)}
.thtr:hover .thtr__word{transform:scale(1.03)}
.thtr__ring{width:64px;height:64px;border-radius:50%;margin:22px auto 0;position:relative;
  border:2px solid var(--g);display:grid;place-items:center;
  box-shadow:0 0 0 0 var(--g-glow);animation:pulse 3s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,212,164,.34)}
  70%{box-shadow:0 0 0 20px rgba(36,212,164,0)}100%{box-shadow:0 0 0 0 rgba(36,212,164,0)}}
.thtr__ring::after{content:"";border-left:15px solid var(--g);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:5px}
.thtr__cap{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(226,240,255,.72)}
.thtr__sub{margin-top:7px;font-size:14.6px;color:var(--muted);max-width:44ch;margin-inline:auto}
/* honest placeholder state until real footage is dropped in */
.thtr__slot{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;color:#F0B429;background:rgba(240,180,41,.11);
  border:1px dashed rgba(240,180,41,.42)}
.thtr[data-src]:not([data-src=""]) .thtr__slot{display:none}
.thtr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4}

/* ═══ ACCESS DIAGRAM ══════════════════════════════════════════ */
.dgm{background:linear-gradient(158deg,var(--bg-3),var(--panel) 62%);border:1px solid var(--line);
  border-radius:18px;padding:clamp(20px,3vw,34px);box-shadow:0 30px 66px -32px rgba(0,0,0,.9)}
.dgm__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.dgm__tabs button{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:10px 16px;border-radius:999px;cursor:pointer;
  background:rgba(14,21,38,.55);color:var(--muted);border:1px solid var(--line);transition:.22s}
.dgm__tabs button:hover{border-color:var(--g);color:#fff}
.dgm__tabs button[aria-pressed="true"]{background:var(--g);color:#03210f;border-color:var(--g)}
.dgm svg{display:block;width:100%;height:auto}
.dgm__read{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:18px 20px;border-radius:12px;background:rgba(14,21,38,.5);border:1px solid var(--line)}
.dgm__read .vt{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;white-space:nowrap}
.dgm__read.ok .vt{background:rgba(36,212,164,.15);color:var(--g)}
.dgm__read.warn .vt{background:rgba(240,180,41,.14);color:#F0B429}
.dgm__read.bad .vt{background:rgba(232,80,70,.14);color:#ff8478}
.dgm__read p{margin:0;font-size:15.2px;color:var(--muted)}
.dgm__read b{color:#fff}
/* transport for the repair animation */
.dgm__ctl{display:flex;align-items:center;gap:18px;margin-top:6px}
.dgm__ctl button{display:inline-flex;align-items:center;gap:11px;font-family:inherit;font-size:13px;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#03210f;cursor:pointer;
  padding:12px 20px;border:0;border-radius:999px;flex:none;
  background:linear-gradient(168deg,var(--g-hi),var(--g) 55%,var(--g-dk));
  box-shadow:0 10px 26px -8px var(--g-glow);transition:transform .2s var(--ease)}
.dgm__ctl button:hover{transform:translateY(-1px)}
.dgm__ctl button:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.dgm__ctl .tri{width:0;height:0;border-left:11px solid #03210f;border-top:7px solid transparent;
  border-bottom:7px solid transparent}
.dgm__ctl button.playing .tri{border:0;width:10px;height:12px;
  background:linear-gradient(90deg,#03210f 0 3px,transparent 3px 7px,#03210f 7px 10px)}
.dgm__scrub{flex:1;height:3px;border-radius:3px;background:rgba(120,150,220,.18);overflow:hidden}
.dgm__scrub i{display:block;height:100%;width:0;border-radius:3px;background:var(--g);
  box-shadow:0 0 12px var(--g-glow)}

/* ═══ CALCULATORS ═════════════════════════════════════════════ */
.calc{background:linear-gradient(158deg,var(--bg-3),var(--panel) 60%);border:1px solid var(--line-2);
  border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -42px rgba(0,0,0,.95),
  inset 0 1px 0 rgba(150,180,235,.12);position:relative}
.calc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(66% 88% at 86% 0%,var(--g-soft),transparent 60%)}
.calc__grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr}
@media(max-width:880px){.calc__grid{grid-template-columns:1fr}}
.calc__in{padding:clamp(22px,3vw,34px);display:grid;gap:22px;align-content:start}
.calc__out{padding:clamp(22px,3vw,34px);background:rgba(14,21,38,.5);border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
@media(max-width:880px){.calc__out{border-left:0;border-top:1px solid var(--line)}}
.fld > label{display:block;font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px}
.seg{display:flex;flex-wrap:wrap;gap:7px}
.seg button{font-family:inherit;font-size:14px;font-weight:600;padding:11px 15px;border-radius:9px;
  cursor:pointer;background:rgba(14,21,38,.55);color:var(--muted);border:1px solid var(--line);
  transition:.2s;flex:1 1 auto;min-width:0}
.seg button:hover{border-color:var(--g);color:#fff}
.seg button[aria-pressed="true"]{background:var(--g);color:#03210f;border-color:var(--g);font-weight:700}
.rng{display:flex;align-items:center;gap:16px}
.rng input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--g) var(--p,20%),rgba(120,150,220,.2) var(--p,20%));outline:none}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--g);cursor:grab;box-shadow:0 3px 12px var(--g-glow),0 0 0 4px rgba(36,212,164,.14)}
.rng input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;
  background:var(--g);cursor:grab}
.rng output{font-size:26px;font-weight:900;letter-spacing:-.03em;min-width:2.6ch;text-align:right;
  font-variant-numeric:tabular-nums;color:#fff}
.calc__verdict{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;align-self:flex-start;margin-bottom:16px}
.calc__verdict.ok{background:rgba(36,212,164,.15);color:var(--g);border:1px solid rgba(36,212,164,.3)}
.calc__verdict.warn{background:rgba(240,180,41,.13);color:#F0B429;border:1px solid rgba(240,180,41,.3)}
.calc__verdict.bad{background:rgba(232,80,70,.13);color:#ff8478;border:1px solid rgba(232,80,70,.3)}
.calc__big{font-size:clamp(30px,4.2vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1;
  margin:0 0 6px}
.calc__big em{font-style:normal;color:var(--g)}
.calc__unit{font-size:12px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:20px}
.calc__rows{display:grid;gap:1px;background:var(--line);border-radius:11px;overflow:hidden;margin-bottom:20px}
.calc__rows div{background:rgba(14,21,38,.72);padding:12px 15px;display:flex;justify-content:space-between;
  gap:14px;font-size:14.2px}
.calc__rows span:first-child{color:var(--muted)}
.calc__rows span:last-child{color:#fff;font-weight:700;text-align:right}
.calc__note{font-size:13.6px;color:var(--muted-2);line-height:1.55;margin:0 0 18px}
.meter{height:7px;border-radius:7px;background:rgba(120,150,220,.16);overflow:hidden;margin-bottom:8px}
.meter i{display:block;height:100%;border-radius:7px;transition:width .5s var(--ease),background .5s}
.meter__lbl{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px}

/* ═══ BEFORE / AFTER GALLERY ══════════════════════════════════ */
.gal__tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.gal__tabs button{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.05em;
  padding:11px 19px;border-radius:999px;cursor:pointer;background:rgba(14,21,38,.55);
  color:var(--muted);border:1px solid var(--line);transition:.22s}
.gal__tabs button:hover{border-color:var(--g);color:#fff}
.gal__tabs button[aria-pressed="true"]{background:var(--g);color:#03210f;border-color:var(--g)}
.ba{position:relative;aspect-ratio:4/3.05;max-width:960px;margin:0 auto;overflow:hidden;
  border-radius:18px;box-shadow:0 34px 76px -30px rgba(0,0,0,.92);touch-action:pan-y;
  cursor:ew-resize;user-select:none;border:1px solid var(--line)}
.ba .lay{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:background-image .25s}
.ba .top{clip-path:inset(0 50% 0 0)}
.ba .hdl{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--g);
  box-shadow:0 0 22px 3px var(--g-glow);z-index:3;pointer-events:none}
.ba .hdl b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:var(--g);box-shadow:0 6px 22px rgba(0,0,0,.6)}
.ba .hdl b::before,.ba .hdl b::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border-top:2px solid #03210f;border-right:2px solid #03210f}
.ba .hdl b::before{left:12px;transform:translateY(-50%) rotate(-135deg)}
.ba .hdl b::after{right:12px;transform:translateY(-50%) rotate(45deg)}
.ba .tag{position:absolute;bottom:16px;z-index:3;font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;padding:8px 13px;border-radius:999px;background:rgba(14,21,38,.78);
  color:#fff;backdrop-filter:blur(6px)}
.ba .tag.l{left:16px} .ba .tag.r{right:16px;color:var(--g)}
.gal__cap{text-align:center;margin-top:18px;font-size:14.6px;color:var(--muted);max-width:56ch;
  margin-inline:auto}
.cue{text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-top:12px}

/* ═══ PHOTO MOSAIC - more of his real work, melted ════════════ */
.mos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.mos figure{position:relative;overflow:hidden;border-radius:12px;margin:0;
  background:var(--panel);border:1px solid var(--line)}
.mos figure div{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease),filter .5s}
.mos figure:hover div{transform:scale(1.07);filter:saturate(1.1)}
.mos figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,21,38,.72),transparent 52%)}
.mos figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:11.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(232,240,255,.9)}
.mos .t{grid-column:span 2;aspect-ratio:4/4.6}
.mos .w{grid-column:span 3;aspect-ratio:3/2.05}
.mos figcaption{font-size:12px}
@media(max-width:860px){.mos{grid-template-columns:repeat(2,1fr);gap:10px}
  .mos .t,.mos .w{grid-column:span 1;aspect-ratio:4/4.4}
  .mos .w:first-of-type{grid-column:span 2;aspect-ratio:3/1.9}}

/* Mosaic filmstrip: equal tiles on one horizontal rail so the rows never go
   ragged, however many panels get added. It rides slowly from one side to the
   other on its own (assets/page.js), and any hover, touch or scroll hands it to
   the visitor. gap 10 matches dsCarousel's step math. */
.mosr{position:relative}
.mosr__rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:none;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.mosr__rail::-webkit-scrollbar{display:none}
/* auto-drift rails must glide, so beat the [data-carousel] proximity snap that would
   otherwise nudge the marquee card to card and read as auto-advancing */
[data-mos-auto] .mosr__rail{scroll-snap-type:none}

/* the damage card, used in the home "What happened to the panel?" auto-slide rail
   and on the panel-options pitch page. Global so both share one definition. */
.pc{position:relative;display:flex;align-items:flex-end;min-height:160px;overflow:hidden;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.pc:hover{border-color:var(--g);transform:translateY(-2px)}
.pc .ph{position:absolute;inset:0;background-size:cover;background-position:center 46%;
  transition:transform .6s var(--ease),filter .5s}
.pc:hover .ph{filter:brightness(.56) saturate(1)}
.pc__vl{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,22,.9),transparent 60%)}
.pc__t{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#03210f;background:var(--g);padding:4px 9px;border-radius:999px}
.pc__tx{position:relative;z-index:2;padding:14px 15px}
.pc__tx b{display:block;font-family:var(--dsp);font-size:17px;font-weight:700;letter-spacing:.01em;color:#fff}
.pc__tx span{display:block;font-size:12.4px;color:rgba(232,240,255,.76);margin-top:3px;line-height:1.4}
.mosr__rail>.pc{flex:0 0 clamp(240px,64%,304px);scroll-snap-align:start;min-height:0;aspect-ratio:3/2}
@media(max-width:860px){.mosr__rail>.pc{flex:0 0 clamp(220px,78%,300px)}}
.mosr__rail>figure{flex:0 0 clamp(240px,32%,322px);scroll-snap-align:start;margin:0;
  position:relative;overflow:hidden;border-radius:12px;aspect-ratio:3/2;
  background:var(--panel);border:1px solid var(--line)}
.mosr__rail .ph{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s var(--ease),filter .5s}
.mosr__rail figure:hover .ph{transform:scale(1.06);filter:saturate(1.1)}
.mosr__rail figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,21,38,.74),transparent 52%)}
.mosr__rail figcaption{position:absolute;left:14px;right:14px;bottom:11px;z-index:2;font-size:12px;
  font-weight:700;letter-spacing:.03em;color:rgba(236,243,255,.96);text-shadow:0 2px 10px rgba(0,0,0,.85)}
@media(max-width:860px){.mosr__rail>figure{flex:0 0 clamp(220px,78%,300px)}}

/* ── BEFORE / AFTER PAIR ──────────────────────────────────────
   Lifted out of the design-options page, where it was the only
   copy. Six live pages used .pairA and .pairnote with nothing
   defining them, so every before/after rendered as two raw
   stacked images with plain text captions.
   Unequal split so it is not a symmetrical slab, and the after
   gets the larger frame because the after is the argument. */
.pairA{display:grid;grid-template-columns:5fr 7fr;gap:14px;align-items:end}
@media(max-width:780px){.pairA{grid-template-columns:1fr}}
.pairA figure{margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line)}
.pairA .b{aspect-ratio:4/3.1;filter:saturate(.82) brightness(.86)}
.pairA .a{aspect-ratio:4/2.9}
.pairA img{width:100%;height:100%;object-fit:cover;display:block}
.pairA figcaption{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
  background:rgba(14,21,38,.82);backdrop-filter:blur(6px)}
.pairA .a figcaption{color:var(--g);border:1px solid rgba(36,212,164,.35)}
.pairA .b figcaption{color:rgba(232,240,255,.8)}
.pairnote{margin-top:18px;padding:14px 18px;border-radius:12px;background:rgba(14,21,38,.4);
  border:1px solid var(--line-2);color:var(--muted);font-size:15.4px;max-width:66ch;line-height:1.7}
.pairnote b{color:#fff}

/* ── THE CREW, ONE FRAME ──────────────────────────────────────
   Doug's staff photo. Wide, captioned, and deliberately not a
   grid of cut-out heads: the shop and the wall behind them are
   half of why the picture is worth having. */
.team{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel)}
.team img{width:100%;height:auto;display:block}
.team figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 18px;
  background:linear-gradient(transparent,rgba(14,21,38,.88) 62%);
  font-size:14.4px;color:rgba(232,240,255,.9)}
.team figcaption b{color:#fff;display:block;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;color:var(--g)}
@media(max-width:620px){.team figcaption{position:static;padding:14px 0 0;background:none}}

/* ── LOCAL BUILD: cities, makes, reviews, NAP ─────────────────
   Shared by the service-area hub, the nine city pages and the
   vehicle pages. */

/* the two-column roads / parking panel on a city page */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.loc{grid-template-columns:1fr}}
.loc__c{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2.4vw,26px)}
.loc__c h3{font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;color:var(--g);margin:0 0 14px}
.loc__l{list-style:none;margin:0;padding:0}
.loc__l li{padding:9px 0 9px 18px;border-bottom:1px solid var(--line);position:relative;
  font-size:15.4px;color:var(--muted)}
.loc__l li:last-child{border-bottom:0}
.loc__l li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:1px;
  background:var(--g)}

/* city cards on the hub */
.city{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.city{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.city{grid-template-columns:1fr}}
.city__c{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;text-decoration:none;transition:border-color .18s,transform .18s,background .18s}
.city__c:hover{border-color:rgba(36,212,164,.45);background:var(--bg-3);transform:translateY(-2px)}
.city__c b{display:block;font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;
  font-size:20px;letter-spacing:.01em;color:#fff;margin-bottom:6px}
.city__d{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g);margin-bottom:10px}
.city__r{display:block;font-size:13.2px;color:var(--muted-2)}

/* make cards, used on the hub and on every city page */
.mk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.mk{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mk{grid-template-columns:1fr}}
.mk__c{display:block;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:18px;text-decoration:none;transition:border-color .18s,background .18s}
.mk__c:hover{border-color:rgba(36,212,164,.45);background:var(--bg-3)}
.mk__c b{display:block;font-weight:800;font-size:16.2px;color:#fff;margin-bottom:5px}
.mk__c span{display:block;font-size:13.4px;color:var(--muted);line-height:1.45}

/* reviews. Real ones, hand picked, never a feed. */
.rv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.rv{grid-template-columns:1fr}}
.rv__c{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2.4vw,26px)}
.rv__s{color:var(--g);font-size:15px;letter-spacing:.22em;margin-bottom:12px}
.rv__c blockquote{margin:0 0 16px;font-size:15.8px;line-height:1.62;color:var(--tx)}
.rv__c figcaption b{display:block;font-weight:800;font-size:14.4px;color:#fff}
.rv__c figcaption span{display:block;font-size:11.6px;color:var(--muted-2);margin-top:2px}
.rv__topics{margin-top:22px;padding:20px clamp(18px,2.4vw,26px);background:var(--bg-3);
  border:1px solid var(--line);border-radius:14px}
.rv__topics ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rv__topics li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:13.2px;color:var(--tx)}
.rv__topics li i{font-style:normal;font-size:11px;font-weight:800;color:var(--g)}
.rv__note{margin:14px 0 0;font-size:12.4px;color:var(--muted-2)}

/* name, address, phone. Identical on every page on purpose. */
.nap{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.8vw,30px)}
@media(max-width:760px){.nap{grid-template-columns:1fr}}
.nap__n{font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;font-size:21px;
  color:#fff;margin:0 0 8px}
.nap__a{margin:0 0 10px;font-size:15.4px;color:var(--tx);line-height:1.55}
.nap__h{margin:0 0 6px;font-size:14.4px;color:var(--muted)}
.nap__s{margin:0;font-size:12.8px;color:var(--g);font-weight:700}
.nap__act{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.nap__gbp{display:block;margin-top:4px;text-decoration:none;padding:12px 16px;border-radius:12px;
  background:var(--bg-3);border:1px solid var(--line);width:100%}
.nap__gbp b{display:block;color:var(--g);font-size:19px;font-weight:800;letter-spacing:.02em}
.nap__gbp span{display:block;font-size:11.8px;color:var(--muted-2);margin-top:2px}
.nap__gbp:hover{border-color:rgba(36,212,164,.45)}

/* ── CAROUSEL ─────────────────────────────────────────────────
   For link grids that were three rows deep. CSS scroll-snap, so
   every card is still in the DOM, still rendered, still crawled.
   Nothing is hidden; it is laid out sideways instead of down.
   JS only adds the arrows and the count.
   Snap is PROXIMITY, not mandatory: measured in Chrome, a mandatory
   x-snap container swallows the vertical wheel (0px of page scroll
   with the cursor over it) and the page feels stuck. Proximity still
   settles on a card but lets the page scroll past. */
[data-carousel]{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-padding:2px}
[data-carousel]::-webkit-scrollbar{display:none}
[data-carousel]>*{flex:0 0 clamp(232px,30.5%,330px);scroll-snap-align:start;min-width:0}
@media(max-width:560px){[data-carousel]>*{flex-basis:78%}}
.car{position:relative}
.car__bar{display:flex;align-items:center;gap:10px;margin-top:14px}
.car__bar button{font-family:inherit;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--panel);color:var(--tx);cursor:pointer;
  display:grid;place-items:center;font-size:18px;line-height:1;transition:border-color .18s,color .18s}
.car__bar button:hover:not(:disabled){border-color:var(--g);color:var(--g)}
.car__bar button:disabled{opacity:.28;cursor:not-allowed}
.car__cnt{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.car__hint{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2)}


/* ── SLIDES: situation strip + damage-type rail ───────────────
   Both were multi-row grids. Now one row each on the carousel
   machinery above, with a progress line and a slide-in panel.
   Every card is still real HTML in the DOM. */
.goals[data-carousel]{display:flex;grid-template-columns:none;gap:10px}
.goals[data-carousel]>button{flex:0 0 clamp(188px,23.4%,248px);min-height:150px}
.dmg[data-carousel]{display:flex;grid-template-columns:none;gap:10px}
.dmg[data-carousel]>a{flex:0 0 clamp(236px,31%,320px)}
.car__prog{position:relative;flex:1 1 120px;height:2px;background:var(--line);border-radius:2px;
  overflow:hidden;margin:0 6px}
.car__prog i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--g);
  border-radius:2px;transition:width .25s var(--ease),transform .25s var(--ease)}
/* the recommendation arrives from the direction of travel */
@keyframes recIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rec.swap{animation:recIn .42s var(--ease) both}
@media(prefers-reduced-motion:reduce){.rec.swap{animation:none}}
/* damage cards: the detail line rises on hover, the time badge lights */
.dmg[data-carousel] .tx > span{transform:translateY(6px);opacity:.72;
  transition:transform .28s var(--ease),opacity .28s}
.dmg[data-carousel] a:hover .tx > span,.dmg[data-carousel] a:focus-visible .tx > span{transform:none;opacity:1}
.dmg[data-carousel] a:hover em{color:#03210f;background:var(--g);border-color:var(--g)}
/* the no-JS twin of the situation picker. page.js clears it before rendering. */
.sit__static{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:760px){.sit__static{grid-template-columns:repeat(2,1fr)}}
.sit__static a{display:block;padding:14px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none}
.sit__static b{display:block;font-family:var(--dsp);font-size:16px;color:#fff}
.sit__static span{display:block;font-size:12.6px;color:var(--muted);margin-top:3px}

/* ── LEAD FORM: optional email, photo upload, honeypot ────────
   Parity with the JotForm on Doug's old site, which takes photos
   and an email address. The photo input is visually replaced by
   a drop area but stays a real, focusable file input. */
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead .opt{margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.lead .fld--ph input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.lead .fld label.ph__drop{display:flex;flex-direction:column;gap:4px;margin:0;padding:18px 18px 17px;
  border:1.5px dashed var(--line-2);border-radius:12px;background:var(--bg-3);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;transition:border-color .18s,background .18s}
.lead .fld label.ph__drop:hover,.lead .fld label.ph__drop:focus-within{border-color:var(--g);
  background:var(--panel)}
.lead .ph__drop b{color:#fff;font-size:15px;font-weight:800}
.lead .ph__drop span{color:var(--muted);font-size:13px}
.lead .ph__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lead .ph__list:empty{display:none}
.lead .ph__t{width:64px;height:64px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel) center/cover no-repeat}
.lead .ph__list em{align-self:center;font-style:normal;font-size:12px;color:var(--muted-2)}

/* <picture> inside the pair: fill the frame the same way a bare <img> does */
.pairA picture{display:block;width:100%;height:100%}

/* ── BEFORE / AFTER SLIDER ────────────────────────────────────
   One frame, a divider you drag. Both photographs are real <img>
   in the DOM with their own alt text, so a crawler or a reader
   with JavaScript off still gets both. The control is a real
   range input, which means it is keyboard accessible and works
   on touch without any custom gesture code. */
/* Named .cmpr, not .ba: components.css already has a .ba before/after block
   whose aspect-ratio was silently sizing this frame.
   The frame's shape comes from the photographs, not from whichever image
   happens to load first, so nothing shifts while they arrive. */
.cmpr{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  --x:50%;--ar:1360/860;aspect-ratio:var(--ar);line-height:0;
  touch-action:pan-y;background:var(--panel)}
.cmpr__f{margin:0;position:absolute;inset:0}
.cmpr picture{display:block;width:100%;height:100%}
.cmpr img{display:block;width:100%;height:100%;object-fit:cover}
.cmpr__a{clip-path:inset(0 0 0 var(--x));-webkit-clip-path:inset(0 0 0 var(--x))}
.cmpr figcaption{position:absolute;top:12px;line-height:1;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(14,21,38,.82);
  backdrop-filter:blur(6px);z-index:3}
.cmpr__b figcaption{left:12px;color:rgba(232,240,255,.8)}
.cmpr__a figcaption{right:12px;color:var(--g);border:1px solid rgba(36,212,164,.35)}
/* the divider and its grip follow the same custom property */
.cmpr__h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;z-index:4;
  background:var(--g);box-shadow:0 0 18px rgba(36,212,164,.45);pointer-events:none}
.cmpr__h::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--g);
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cmpr__h b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  color:#03210f;font-size:15px;letter-spacing:-.08em}
/* the real control, invisible but full size, so drag works anywhere on the photo */
.cmpr__r{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:5;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.cmpr__r::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%}
.cmpr__r::-moz-range-thumb{width:48px;height:100%;border:0;opacity:0}
.cmpr__r:focus-visible{opacity:1;outline:2px solid var(--g);outline-offset:-2px}
.cmpr__note{margin-top:18px;padding:14px 18px;border-radius:12px;background:rgba(14,21,38,.4);
  border:1px solid var(--line-2);color:var(--muted);font-size:15.4px;max-width:66ch;line-height:1.7}
.cmpr__note b{color:#fff}
@media(prefers-reduced-motion:reduce){.cmpr__h{box-shadow:none}}


/* ── BEHIND THE PANEL ────────────────────────────────────────────────────────
   Two images of the same vehicle in identical framing: the painted skin over an
   x-ray of the structure under it. A clip-path edge peels the paint away so the
   bracing shows. Numbered hotspots sit on real coordinates and tie to a numbered
   legend below, and that legend is real on-page text rather than tooltips, so a
   crawler and an answer engine can read why a given spot changes the repair.
   Same reveal mechanic as .cmpr, different job, so it keeps its own namespace. */
.xr__stage{position:relative;border-radius:14px;overflow:hidden;background:#000;
  border:1px solid var(--line);cursor:ew-resize;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;--rev:0}
.xr__scene{position:relative;line-height:0}
.xr__skin{display:block;width:100%;height:auto;pointer-events:none}
.xr__xray{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  clip-path:inset(0 calc((100 - var(--rev)) * 1%) 0 0);
  -webkit-clip-path:inset(0 calc((100 - var(--rev)) * 1%) 0 0)}
.xr__scan{position:absolute;top:0;bottom:0;width:2px;left:calc(var(--rev) * 1%);
  background:var(--g);box-shadow:0 0 22px 5px var(--g-glow);opacity:.85;pointer-events:none}
.xr__handle{position:absolute;top:50%;left:calc(var(--rev) * 1%);transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--g);border:2px solid rgba(14,21,38,.55);
  display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none;
  color:#062012;font-weight:900;font-size:13px;letter-spacing:-.04em;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.xr__co{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;
  margin:0;cursor:pointer;opacity:0;transition:opacity .4s ease;z-index:3}
.xr__co.on{opacity:1}
.xr__num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--g);color:#062012;font-weight:800;font-size:14px;
  border:2px solid rgba(14,21,38,.55);animation:xrPulse 2s infinite;
  transition:transform .2s ease,box-shadow .2s ease}
.xr__co:hover .xr__num,.xr__co.active .xr__num{transform:scale(1.18);animation:none;
  box-shadow:0 0 0 6px var(--g-soft)}
@keyframes xrPulse{0%{box-shadow:0 0 0 0 var(--g-glow)}
  70%{box-shadow:0 0 0 12px rgba(36,212,164,0)}100%{box-shadow:0 0 0 0 rgba(36,212,164,0)}}
@media(prefers-reduced-motion:reduce){.xr__num{animation:none}}
.xr__hint{position:absolute;left:14px;bottom:12px;color:var(--muted);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.xr__stage.touched .xr__hint{opacity:0}
.xr__cap{text-align:center;color:var(--muted);margin-top:16px;line-height:1.6;font-size:.96rem}
.xr__cap b{color:#fff;font-weight:600}
.xr__legend{list-style:none;padding:0;margin:22px 0 0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:12px}
.xr__legend li{margin:0}
.xr__item{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  cursor:pointer;transition:border-color .2s ease,background .2s ease}
.xr__item:hover,.xr__item.active{border-color:var(--g);background:var(--g-soft)}
.xr__inum{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--g);
  color:#062012;font-weight:800;font-size:13px;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.xr__itext b{display:block;color:#fff;font-weight:700;font-size:1rem;margin-bottom:4px}
.xr__itext span{display:block;color:var(--muted);font-size:.95rem;line-height:1.6}
.xr__any{margin:22px 0 0;color:var(--muted);line-height:1.75;text-wrap:pretty}
/* Honest-pricing callout (Option C, picked 2026-10-09). A note straight from the
   shop: the DS monogram marks it, the statement leads, no colored edge. The green
   lives only in the mark. */
.xr__note{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-top:24px;
  padding:26px 28px;border-radius:18px;background:rgba(14,21,38,.55);
  border:1px solid var(--line-2);box-shadow:0 24px 50px -36px rgba(0,0,0,.9);
  color:var(--muted);line-height:1.72;font-size:15px;text-wrap:pretty}
.xr__note-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-family:var(--dsp);font-weight:900;font-size:15px;letter-spacing:-.02em;
  color:#03210f;background:linear-gradient(160deg,var(--g-hi,#5effb0),var(--g));
  box-shadow:0 10px 22px -8px var(--g-glow,rgba(36,212,164,.5))}
.xr__note-by{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:9px}
.xr__note b{display:block;font-family:var(--dsp);font-weight:var(--dsp-wt);
  font-size:clamp(17px,2.1vw,22px);line-height:1.32;letter-spacing:-.01em;color:#fff;margin:0 0 11px}
@media(max-width:560px){.xr__note{grid-template-columns:1fr;gap:14px}}
@media(max-width:760px){
  .xr__legend{grid-template-columns:1fr;gap:10px}
  .xr__num{width:25px;height:25px;font-size:13px}
}


/* A comparison slider that fills its grid cell instead of setting its own
   aspect, for the featured card on the Learn page where the cell height is
   driven by the text beside it. */
.cmpr--fill{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0}
.cmpr--fill img{object-fit:cover}


/* A wide before/after band becomes a 130px letterbox on a phone. Where a taller
   mobile crop is supplied, the frame takes that shape too. */
@media(max-width:760px){
  .cmpr--resp{--ar:1120/841 !important}
}

/* ── BEHIND THE PANEL, TAP YOUR DENT ─────────────────────────────────────────
   Companion to .xr__ above. The visitor marks the exact spot of their dent and
   the paint clears to the structure under it; a card reads the panel and, when
   the placement changes the job, says so. Three modes share one stage. Markers
   use this site's neon green (the family standard is yellow; Dent Solutions runs green to match its brand). */
.btp .btp__lead a{color:var(--g);text-decoration:underline;text-underline-offset:3px}
.btp__modes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 14px}
.btp__mode{cursor:pointer;background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--muted);border-radius:12px;padding:.55rem .9rem;text-align:left;min-width:150px;font:inherit;transition:border-color .2s,background .2s}
.btp__mode b{display:block;font-family:var(--font-h,inherit);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;color:#fff}
.btp__mode span{font-size:.72rem;color:var(--muted)}
.btp__mode.on{border-color:var(--g);background:var(--g-soft)}
.btp__mode.on b{color:var(--g)}
.btp__stagecard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(.6rem,1.6vw,1rem)}
.btp__stage{position:relative;border-radius:12px;overflow:hidden;background:#000;touch-action:manipulation;cursor:crosshair;user-select:none;-webkit-user-select:none;line-height:0}
.btp__zoomer{position:relative;transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform}
.btp__skin{display:block;width:100%;height:auto;pointer-events:none}
.btp__xr{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .9s ease;pointer-events:none}
.btp__stage.fullx .btp__xr,.btp__stage.zoomed .btp__xr{opacity:1}
.btp__stage.zoomed .btp__xr{transition:opacity .9s ease .35s}
.btp__skinclip{position:absolute;inset:0;z-index:3}
.btp__skinclip img{display:block;width:100%;height:auto}
.btp__divider{position:absolute;top:0;bottom:0;z-index:8;width:2px;background:var(--g);box-shadow:0 0 14px var(--g-glow)}
.btp__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--g);border:2px solid rgba(14,21,38,.55);display:flex;align-items:center;justify-content:center;color:#04181d;font-size:.9rem;font-weight:700;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.btp__hud{position:absolute;top:10px;z-index:9;transform:translateX(-50%);background:rgba(14,21,38,.9);border:1px solid var(--line-2);border-radius:10px;padding:.3rem .7rem;white-space:nowrap;pointer-events:none;color:#fff;line-height:1.4}
.btp__hud b{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.btp__reveal{position:absolute;z-index:4;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 0%,#000 52%,transparent 76%);mask-image:radial-gradient(circle,#000 0%,#000 52%,transparent 76%);opacity:0;transform:scale(.35);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.btp__reveal.open{opacity:1;transform:scale(1)}
.btp__reveal img{position:absolute;max-width:none}
.btp__pulse{position:absolute;z-index:5;width:24px;height:24px;border-radius:50%;border:2px solid var(--g);transform:translate(-50%,-50%);opacity:0;animation:btpSonar 1.1s ease-out}
@keyframes btpSonar{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
.btp__pin{position:absolute;z-index:6;width:22px;height:22px;border-radius:50%;background:var(--g);border:2px solid #0b0f14;box-shadow:0 0 0 4px rgba(36,212,164,.30),0 0 14px rgba(36,212,164,.55),0 4px 10px rgba(0,0,0,.5);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:#0b0f14;line-height:1}
.btp__pin.past{box-shadow:0 0 0 4px var(--g-glow),0 0 14px rgba(36,212,164,.55)}
.btp__ring{position:absolute;z-index:6;width:54px;height:54px;border-radius:50%;border:3px solid var(--g);outline:2px solid #0b0f14;outline-offset:-5px;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(36,212,164,.25),0 0 22px rgba(36,212,164,.5);animation:btpPulse 1.8s infinite}
@keyframes btpPulse{0%,100%{box-shadow:0 0 0 3px rgba(36,212,164,.25),0 0 22px rgba(36,212,164,.5)}50%{box-shadow:0 0 0 8px rgba(36,212,164,.10),0 0 30px rgba(36,212,164,.6)}}
.btp__linesvg{position:absolute;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
.btp__linesvg path{stroke:var(--g);stroke-width:2;stroke-dasharray:7 6;fill:none;filter:drop-shadow(0 0 4px var(--g-glow));animation:btpDash 1.2s linear infinite}
@keyframes btpDash{to{stroke-dashoffset:-13}}
.btp__linesvg circle{fill:var(--g)}
.btp__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.6rem .2rem .1rem;flex-wrap:wrap}
.btp__hint{color:var(--muted);font-size:.86rem;margin:0;line-height:1.5}
.btp__hint b{color:var(--g);font-weight:600}
.btp__btns{display:flex;gap:8px}
.btp__btn{cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;border-radius:10px;padding:.5rem 1rem;border:1px solid var(--line-2);background:transparent;color:var(--muted);font-family:inherit;font-weight:700;transition:all .2s}
.btp__btn:hover{color:#fff;border-color:var(--g)}
.btp__btn.on{color:var(--g);border-color:var(--g);background:var(--g-soft)}
.btp__btn--g{background:var(--g);border-color:var(--g);color:#04181d}
.btp__btn--g:hover{background:var(--g-hi);color:#04181d}
.btp__guide{color:var(--muted);font-size:.86rem;margin:.55rem .2rem 0;line-height:1.55}
.btp__guide b{color:var(--g);font-weight:600}
.btp__cards{display:grid;gap:12px;margin-top:14px}
.btp__card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;text-align:left;animation:btpRise .5s cubic-bezier(.16,1,.3,1)}
.btp__card h3{text-transform:uppercase;font-size:1rem;letter-spacing:.04em;color:#fff;margin:0;font-weight:800}
.btp__num{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--g);color:#04181d;font-size:.75rem;font-weight:800;align-items:center;justify-content:center;margin-right:8px;vertical-align:-3px}
.btp__card p{color:var(--muted);font-size:.94rem;margin:.45rem 0 0;line-height:1.6}
.btp__k{color:var(--g);font-weight:600}
.btp__loc{color:var(--g);font-weight:600}
.btp__chip{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border-radius:6px;padding:2px 8px;vertical-align:2px;margin-left:8px;font-weight:700}
.btp__chip--steel{background:rgba(134,166,230,.16);color:var(--steel);border:1px solid rgba(134,166,230,.35)}
.btp__chip--alu{background:rgba(255,255,255,.1);color:#e6ecf8;border:1px solid rgba(255,255,255,.3)}
.btp__chip--plastic{background:rgba(142,213,188,.14);color:var(--mint);border:1px solid rgba(142,213,188,.4)}
@keyframes btpRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.btp__readpanel{margin-top:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;text-align:left}
.btp__stepline{display:flex;align-items:center;gap:10px;margin-bottom:.7rem}
.btp__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s}
.btp__dot.on{background:var(--g);transform:scale(1.25)}
.btp__steplabel{color:var(--muted);font-size:.85rem}
.btp__eyebrow{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:.35rem;font-weight:700}
.btp__readtitle{text-transform:none;font-size:1.05rem;color:#fff;margin:0;font-weight:800}
.btp__readcopy{color:var(--muted);font-size:.95rem;margin-top:.5rem;max-width:640px;line-height:1.65}
.btp__readnav{display:flex;gap:10px;margin-top:1rem;flex-wrap:wrap}
.btp__strip{display:flex;gap:12px;align-items:flex-start;margin:.6rem .2rem 0;padding:.6rem .8rem;background:rgba(14,21,38,.9);border:1px solid var(--line-2);border-radius:12px;color:#fff;line-height:1.4;font-size:.9rem;opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.btp__strip.open{opacity:1;transform:none}
.btp__strip .btp__num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--g);color:#0b0f14;border:2px solid #0b0f14;width:26px;height:26px;font-weight:800;font-size:.78rem;margin:2px 0 0}
.btp__strip b{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--g);margin-bottom:.1rem;font-weight:800}
.btp__strip small{display:block;color:var(--muted);font-size:.7rem;margin-top:.3rem;letter-spacing:.06em;text-transform:uppercase}
.btp__zoomer.peek{transition:transform 1s cubic-bezier(.16,1,.3,1)}
.btp__zoomer.unpeek{transition:transform .9s ease}
.btp__card{border-color:var(--line-2)}
.btp__card.is-new{border-color:rgba(159,182,218,.32);box-shadow:0 0 0 1px rgba(159,182,218,.12),0 16px 36px -22px rgba(0,0,0,.7)}
.btp__ceyebrow{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:.35rem;font-weight:700}
@media (max-width:640px){
  .btp__mode{min-width:0;flex:1 1 30%;padding:.5rem .35rem;text-align:center;border-radius:10px}
  .btp__mode b{font-size:.66rem;letter-spacing:.04em}
  .btp__mode span{display:none}
  .btp__modes{gap:6px}
  .btp__hud{display:none}
  .btp__lead{font-size:.95rem}
  .btp__stagecard{padding:.4rem;border-radius:12px;margin-left:-8px;margin-right:-8px}
  .btp__stage{border-radius:9px}
  .btp__bar{flex-direction:column;align-items:stretch;gap:8px;padding:.5rem .3rem .15rem}
  .btp__btns{width:100%}
  .btp__btn{flex:1;text-align:center;padding:.5rem .4rem;font-size:.7rem;letter-spacing:.06em}
  .btp__guide{font-size:.8rem;margin:.5rem .3rem 0}
  .btp__card{padding:.85rem .9rem;border-radius:12px}
  .btp__card p{font-size:.9rem}
  .btp__card h3{font-size:.95rem}
  .btp__strip{font-size:.84rem;padding:.5rem .65rem;margin:.5rem 0 0}
}


/* ── CORNER ESTIMATE LAUNCHER ────────────────────────────────────────────────
   Every page gets a route to the form. Twenty of the forty-six pages carry no
   estimate form of their own, the home page included, so without this a reader
   on those pages has nowhere to go but the phone. */
.pest{position:fixed;right:22px;bottom:22px;z-index:57;pointer-events:none}
/* only the control is clickable: see the note in the markup */
.pest__fab{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;
  padding:11px 20px 11px 15px;border-radius:100px;color:#fff;
  background:linear-gradient(180deg,var(--bg-3),var(--panel));
  border:1px solid var(--g-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 3px rgba(0,0,0,.5),
    0 0 0 1px rgba(36,212,164,.14),0 12px 28px -12px rgba(0,0,0,.85);
  transition:transform .25s var(--ease),border-color .25s}
.pest__fab:hover{transform:translateY(-2px);border-color:var(--g)}
.pest__fab:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.pest__fab svg{width:22px;height:22px;flex:none;color:var(--g)}
.pest__tx{display:block;font-family:var(--dsp);font-weight:var(--dsp-wt);
  text-transform:uppercase;letter-spacing:.01em;font-size:14.5px;line-height:1.1}
.pest__tx b{display:block;font-family:var(--f);font-weight:500;text-transform:none;
  letter-spacing:0;font-size:11.4px;color:var(--muted);margin-top:3px}
/* the sticky bar already owns the bottom of a phone screen, and two fixed
   controls stacked there is how you lose a tap target */
@media(max-width:760px){.pest{display:none}}
@media(prefers-reduced-motion:reduce){.pest__fab{transition:none}}

/* Behind the Panel, layout A: one read at a time in three tabs */
.btp__guide{text-align:center;max-width:70ch;margin:1.2rem auto .2rem}
.btp__tapcue{display:none;justify-content:center;margin:.2rem 0 .7rem}
.btp__tapcue.on{display:flex}
.btp__tapcue span{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.8rem;color:#0a0d16;background:var(--g);border:2px solid #e82020;border-radius:99px;padding:.5rem 1.15rem;animation:btpCue 1.8s ease-in-out infinite}
.btp__tapcue i{font-style:normal;font-size:1.05rem;line-height:1}
@keyframes btpCue{0%,100%{box-shadow:0 0 0 0 rgba(36,212,164,.55),0 0 18px rgba(36,212,164,.35)}50%{box-shadow:0 0 0 10px rgba(36,212,164,0),0 0 30px rgba(36,212,164,.6)}}
.btp__stage.idle{animation:btpStageGlow 1.8s ease-in-out infinite}
@keyframes btpStageGlow{0%,100%{box-shadow:0 0 0 1px rgba(36,212,164,.35),0 0 16px rgba(36,212,164,.18)}50%{box-shadow:0 0 0 3px rgba(36,212,164,.75),0 0 38px rgba(36,212,164,.45)}}
.btp__ghost{position:absolute;z-index:5;left:42%;top:60%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px dashed var(--g);pointer-events:none;display:none}
.btp__ghost::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--g);animation:btpGhost 1.8s ease-out infinite}
@keyframes btpGhost{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.8);opacity:0}}
.btp__stage.idle .btp__ghost{display:block}
.btp__stage.peeking{cursor:zoom-out}
.btp__pin.dim{opacity:.55;box-shadow:none}
.btp__cd{display:block;margin-top:.45rem;color:#e9eef8;font-size:.92rem}
.btp__strip .btp__cd b{display:inline;color:var(--g);font-size:inherit;letter-spacing:0;text-transform:none;font-weight:600;margin:0;font-family:inherit}
.btp__cdbar{display:block;height:3px;border-radius:3px;background:rgba(36,212,164,.18);margin-top:.45rem;overflow:hidden}
.btp__cdbar i{display:block;height:100%;background:var(--g);width:100%;animation:btpCd 5s linear forwards}
@keyframes btpCd{to{width:0}}
.btp__read{text-align:left;margin-top:1.3rem;padding:0 .3rem}
.btp__read:empty{display:none}
.btp__dchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem}
.btp__dchip{cursor:pointer;display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:.3rem .8rem .3rem .35rem;text-transform:uppercase;font-weight:600;font-size:.7rem;letter-spacing:.06em;font-family:inherit}
.btp__dchip.on{border-color:var(--g);color:#fff}
.btp__read .btp__num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--g);color:#e82020;border:2px solid #e82020;width:26px;height:26px;font-weight:700;font-size:.78rem;margin:0}
.btp__dchip .btp__num{width:22px;height:22px;font-size:.7rem}
.btp__rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btp__rhead h3{text-transform:uppercase;font-size:clamp(1.25rem,3.2vw,1.8rem);letter-spacing:.02em;color:#fff;margin:0;line-height:1.05}
.btp__tabs{display:flex;gap:6px;flex-wrap:wrap;margin:1.1rem 0 0;border-bottom:1px solid var(--line)}
.btp__tab{cursor:pointer;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font-family:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding:.7rem .9rem;margin-bottom:-1px}
.btp__tab:hover{color:#fff}
.btp__tab.on{color:#fff;border-bottom-color:var(--g)}
.btp__pane{padding:1.4rem .2rem .4rem;min-height:150px;animation:btpRise .4s ease}
.btp__kicker{display:block;font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:.4rem}
.btp__big{font-size:clamp(1.02rem,2.2vw,1.15rem);line-height:1.65;color:#e9eef8;max-width:62ch;margin:0}
.btp__big + .btp__big{margin-top:.8rem}
.btp__big .btp__loc{color:#ff5a5a;font-weight:600}
.btp__why{color:var(--muted);font-size:.97rem;max-width:60ch;margin:.8rem 0 0;line-height:1.6}
.btp__tabcta{margin-top:1rem}
@media (prefers-reduced-motion:reduce){.btp__tapcue span,.btp__stage.idle,.btp__ghost::after{animation:none}}
@media (max-width:640px){.btp__tabs{flex-wrap:nowrap;gap:2px}.btp__tab{padding:.6rem .38rem;font-size:.6rem;letter-spacing:.03em;white-space:nowrap}}

/* The floating "Get a Photo Estimate" button is now folded into the concierge
   widget (assets/concierge.js), so hide the standalone one to avoid two
   overlapping launchers in the corner. */
.pest{display:none!important}

/* ── "How to get your estimate", the closing block on every page (2026-10-21) ── */
.getest{padding:clamp(40px,7vw,80px) 0 clamp(44px,7vw,84px)}
.getest__in{max-width:900px;margin:0 auto;padding:clamp(24px,4vw,40px);border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 0 1px rgba(92,239,203,.06),0 0 40px rgba(36,212,164,.14),0 26px 60px -26px rgba(16,154,119,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.getest__k{display:inline-flex;align-items:center;gap:11px;margin:0 0 12px;font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--g)}
.getest__k::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--g)}
.getest__t{margin:0 0 24px;font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;letter-spacing:.006em;line-height:1;font-size:clamp(30px,4.6vw,48px);color:#fff}
.getest__steps{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
@media(max-width:760px){.getest__steps{grid-template-columns:1fr}}
.getest__steps li{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:16px;background:rgba(10,15,28,.5);border:1px solid rgba(255,255,255,.1)}
.getest__steps b{flex:none;font-family:var(--dsp);font-weight:700;font-size:28px;line-height:.9;color:var(--g);text-shadow:0 0 18px rgba(36,212,164,.45)}
.getest__steps span{color:var(--muted);font-size:14.5px;line-height:1.5}
.getest__steps strong{display:block;font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;letter-spacing:.02em;font-size:16px;color:#fff;margin-bottom:3px}
.getest__btn{justify-content:center;min-width:min(100%,340px);background:linear-gradient(180deg,#3ee6b8,#1fc497) !important;color:#032118 !important;text-shadow:none !important;border-color:transparent !important;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.getest__note{margin:12px 0 0;color:var(--muted-2);font-size:13.5px}

/* ── Melted photo band (the homepage look), usable on any page: <section class="ph-melt"><div class="ph-melt__img" data-phmelt style="background-image:url(...)"></div><div class="ph-melt__veil"></div></section>. page.js melts it in and out with scroll. ── */
.ph-melt{position:relative;width:100%;height:clamp(64vh,74vh,82vh);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 8%,rgba(0,0,0,.62) 18%,#000 30%,#000 70%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.18) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 8%,rgba(0,0,0,.62) 18%,#000 30%,#000 70%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.18) 92%,transparent 100%)}
.ph-melt__img{position:absolute;left:0;right:0;top:-20%;height:140%;z-index:0;background-size:cover;background-position:center;will-change:transform,opacity,filter;transform:translate3d(0,0,0)}
.ph-melt__cap{will-change:opacity,transform}
.ph-melt__veil{position:absolute;inset:0;z-index:1;background:rgba(14,21,38,.12)}
.ph-melt__cap ~ .ph-melt__veil,.ph-melt:has(.ph-melt__cap) .ph-melt__veil{background:radial-gradient(70% 34% at 50% 50%,rgba(14,21,38,.55) 0,rgba(14,21,38,.2) 60%,rgba(14,21,38,.08) 100%)}
.ph-melt__cap{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.ph-melt__cap h2{font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;font-size:clamp(26px,5vw,52px);line-height:1.06;margin:0;color:#fff;max-width:18ch;letter-spacing:-.01em;text-shadow:0 2px 26px rgba(0,0,0,.7)}
.ph-melt__cap h2 b{color:var(--g);-webkit-text-fill-color:var(--g)}
.ph-melt__cap .ph-melt__h{font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;font-size:clamp(26px,5vw,52px);line-height:1.06;margin:0;color:#fff;max-width:18ch;letter-spacing:-.01em;text-shadow:0 2px 26px rgba(0,0,0,.7)}
.ph-melt__cap .ph-melt__h b{color:var(--g)}
@media(prefers-reduced-motion:reduce){.ph-melt__img{transform:none !important;opacity:1 !important;filter:none !important}.ph-melt__cap{opacity:1 !important;transform:none !important}}
/* the page's own form, moved up into the estimate card (inner-page pattern) */
.getest--top{padding-top:clamp(28px,5vw,56px)}
.getest__orig{text-align:left;margin-top:4px}
.getest__orig > .wrap{padding:0;max-width:none}
.getest__orig .sit__lead{display:none}
#quote.getest--top .lead{margin:0;padding:0;background:none;border:0;box-shadow:none}
#quote.getest--top .lead__hd{display:none}

/* before/after pair cards (the homepage gallery), shared so any page can show them */
.ph-gal{display:grid;gap:clamp(13px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ph-pair{border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.ph-pair__row{display:grid;grid-template-columns:1fr 1fr}
.ph-pair figure{margin:0;position:relative}
.ph-pair img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ph-pair figcaption{position:absolute;top:9px;left:9px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#fff;background:rgba(14,21,38,.72);border:1px solid rgba(255,255,255,.2);padding:3px 8px;border-radius:40px}
.ph-pair .ph-aft figcaption{color:#03210f;background:var(--g);border-color:var(--g)}
.ph-pair__cap{padding:13px 16px;font-size:13.5px;color:var(--muted);font-weight:600}
.ph-pair .ph-aft{position:relative;overflow:hidden}
.ph-pair .ph-aft::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-14deg);pointer-events:none;opacity:0}

/* ===================================================================
   ESTIMATE FORM - Dent Time two-step layout, Dent Solutions skin.
   Built by page.js initLeadForms() into every [data-lead] host. Uses
   the site's own tokens (--g mint, --bg navy, --muted) and the shared
   .lead / .consent / .row / .fld / .btn-a styles so it reads as the
   same site. Everything under .efd .diag-wrap is the Dent Time / War
   Room calculator diagram styling, copied verbatim (HARD RULE: never
   restyle the drawing), only scoped to .lead and with the mint focus
   ring instead of Dent Time's red.
   =================================================================== */
.lead .lf-step[hidden]{display:none}
.lead .lf-stepno{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--g);margin:0 0 8px}
.lead .lf-h{font-family:var(--fh,inherit);font-size:clamp(20px,2.6vw,27px);line-height:1.12;margin:0 0 16px;color:#fff}
.lead .lf-sub{font-size:14px;color:var(--muted);margin:16px 0 18px;text-align:center}
.lead .lf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead .lf-tile{position:relative;display:block;aspect-ratio:1/1;border:1.5px dashed rgba(36,212,164,.45);border-radius:14px;
  background:rgba(36,212,164,.05);cursor:pointer;overflow:hidden;transition:border-color .18s,background .18s}
.lead .lf-tile:hover,.lead .lf-tile:focus-within{border-color:var(--g);background:rgba(36,212,164,.1)}
.lead .lf-tile.is-filled{border-style:solid;border-color:var(--g)}
.lead .lf-tile input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lead .lf-tile__face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center}
.lead .lf-tile__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--g);color:#04221a;font-weight:900;font-size:15px}
.lead .lf-tile__face b{color:#fff;font-size:14.5px;font-weight:700;line-height:1.2}
.lead .lf-tile__cta{color:var(--g);font-size:12px;font-weight:700;letter-spacing:.04em}
.lead .lf-tile__done{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;background:linear-gradient(0deg,rgba(4,18,14,.92),transparent);
  color:#a6ffdc;font-size:11px;font-weight:800;letter-spacing:.03em;text-align:center}
.lead .lf-more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);border-radius:11px;background:rgba(255,255,255,.03);color:var(--muted);transition:border-color .18s,color .18s}
.lead .lf-more:hover,.lead .lf-more:focus-within{border-color:var(--g);color:#fff}
.lead .lf-more input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lead .lf-more b{color:#fff;font-weight:800}
.lead .lf-next{width:100%;justify-content:center;padding:16px 24px;font-size:16px;margin-top:4px}
.lead .lf-nextnote{min-height:1.1em;margin:10px 0 0;font-size:12.6px;color:var(--muted);text-align:center}
.lead .lf-nextnote:empty{margin:0}
.lead .lf-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 14px;padding:6px 2px;background:none;border:0;
  color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.lead .lf-back:hover{color:var(--g)}
/* Year / Make / Model: a balanced 3-up row (Year narrower, Make + Model wider)
   on desktop, a clean even stack on mobile, same gap as the other rows. */
.lead .row--3{grid-template-columns:minmax(72px,.72fr) 1fr 1fr}
@media(max-width:620px){.lead .row--3{grid-template-columns:1fr}}
.lead .efp-help{display:block;margin:-2px 0 8px;font-size:12.6px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted)}
.lead .efp .opt,.lead .efp .optq{margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2,#7f90a8)}

/* --- panel-location drop-down (calc-engine.html drawer, scoped) --- */
.lead .efd[hidden]{display:none}
.lead .efp .efp__head{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;-webkit-user-select:none;
  padding:13px 15px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);transition:border-color .2s,background .2s}
.lead .efp .efp__head:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.lead .efp.open .efp__head{border-radius:11px 11px 0 0;border-color:rgba(36,212,164,.4)}
.lead .efp .drawer-sel{margin-right:auto;min-width:0;font-weight:600;letter-spacing:.2px;text-transform:none;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead .efp .drawer-sel.none{color:#7f90a8;font-style:italic;font-weight:400}
.lead .efp .pl-clear{flex-shrink:0;padding:4px 10px;border:1px solid rgba(255,255,255,.12);border-radius:5px;color:#9fb0c6;font-size:11px;text-transform:none;letter-spacing:normal;font-weight:600;cursor:pointer;transition:all .13s}
.lead .efp .pl-clear:hover{border-color:rgba(36,212,164,.6);color:var(--g)}
.lead .efp .chev{flex-shrink:0;transition:transform .25s ease;color:#9fb0c6;font-size:12px}
.lead .efp.open .chev{transform:rotate(180deg)}
.lead .efp .efp__body{overflow:hidden;max-height:0;position:relative;margin-top:-7px}
.lead .efp.open .efp__body{max-height:2400px;padding:14px 10px 16px;border:1px solid rgba(36,212,164,.4);border-top:0;border-radius:0 0 11px 11px}
.lead .efp .pl-list-toggle{display:flex;align-items:center;gap:7px;width:max-content;margin:16px auto 0;padding:8px 16px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#9fb0c6;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-family:inherit;cursor:pointer;transition:all .13s}
.lead .efp .pl-list-toggle:hover{border-color:rgba(36,212,164,.5);color:var(--g)}
.lead .efp .pl-list-toggle .chev2{font-size:10px;transition:transform .25s ease}
.lead .efp .pl-list-toggle.on .chev2{transform:rotate(180deg)}
.lead .efp .panel-list-wrap{overflow:hidden;max-height:0;transition:max-height .3s ease}
.lead .efp .panel-list-wrap.open{max-height:1400px;margin-top:14px}
.lead .efd .diag-label{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8ea0b8;margin-bottom:8px}
.lead .efd .diag-wrap{background:transparent;border:none;padding:0;max-width:380px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.lead .efd .diag-wrap svg{width:100%;height:auto;display:block}
.lead .efd .diag-wrap svg .schematic-outline{fill:rgba(255,255,255,.015);stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-linejoin:round;pointer-events:none}
.lead .efd .diag-wrap svg .schematic-wheel{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2.5;stroke-linecap:round;pointer-events:none}
.lead .efd .diag-wrap svg .schematic-mirror{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1;pointer-events:none}
.lead .efd .diag-wrap svg .schematic-glass{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.15);stroke-width:1;stroke-linecap:round;pointer-events:none}
.lead .efd .diag-wrap svg .schematic-bedline{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;pointer-events:none}
.lead .efd .diag-wrap svg .panel-shape{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.16);stroke-width:1;cursor:pointer;transition:fill .12s,stroke .12s}
.lead .efd .diag-wrap svg .panel-shape:hover{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.6);filter:drop-shadow(0 0 10px rgba(255,255,255,.4))}
.lead .efd .diag-wrap svg .panel-shape.sel{fill:rgba(255,255,255,.18);stroke:#ffffff;stroke-width:2;filter:drop-shadow(0 0 16px rgba(255,255,255,.5));animation:panelGlow 2s ease-in-out infinite}
.lead .efd .diag-wrap svg .panel-label{fill:rgba(210,210,210,.52);font-size:11px;text-anchor:middle;pointer-events:none;font-family:Arial,sans-serif}
.lead .efd .diag-wrap svg .panel-count{display:none}
.lead .efd .diag-wrap svg .bz-divider{stroke:rgba(255,255,255,.38);stroke-width:1;stroke-dasharray:4,3;pointer-events:none}
.lead .efd .diag-wrap svg .bz-label{fill:rgba(220,220,220,.6);font-size:9px;text-anchor:middle;pointer-events:none;font-family:Arial,sans-serif;font-weight:700}
.lead .efd .diag-wrap svg .flare-zone{stroke-dasharray:3,2;stroke:rgba(255,120,120,.5)}
.lead .efd .diag-wrap svg .pillar-zone{stroke-dasharray:2,2;stroke:rgba(130,190,255,.55);fill:rgba(130,190,255,.05)}
@keyframes panelGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(255,255,255,.4))}50%{filter:drop-shadow(0 0 22px rgba(255,255,255,.6))}}
.lead .efd__stat{margin:10px 0 0;font-size:.95rem;color:#c7cede}
.lead .efd__stat b{color:#ffd76a}
.lead .efd__stat[hidden]{display:none}
/* panel-first step 1: the "Send at least 2 photos. 3 is better." line sits
   left-aligned above the vehicle fields (the two-tile step was removed). */
.lead .lf-sub--left{text-align:left;margin:2px 0 16px;color:var(--muted);font-size:13.5px}
.lead .efp{margin-top:4px}

/* DIAGRAM REVEAL (Myke 2026-10-28): when the vehicle is entered and the body
   is recognized, the car eases in (opacity + a slight rise), in the site's own
   reveal feel (var(--ease)). page.js adds .ds-diag-in to the fresh <svg> on a
   vehicle change. Reduced-motion users get no animation. */
@keyframes dsDiagIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.lead .efd .diag-wrap svg.ds-diag-in{animation:dsDiagIn .5s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
@media(prefers-reduced-motion:reduce){.lead .efd .diag-wrap svg.ds-diag-in{animation:none}}

/* MARKED-SPOT CARDS (Myke 2026-10-28: the chips were cramped at 375px).
   Each marked spot is a clean card: row 1 = numbered badge + panel label (+ a
   remove X at the right), row 2 = the full-width photo button. Stacks one per
   row so the label never wraps into a skinny column, with comfortable 44px tap
   targets. On-brand dark navy + mint. The diagram engine toggles .dg-row to
   flex when there are marks; direction/spacing live here. */
.lead .dg-row{flex-wrap:wrap;gap:10px;align-items:flex-start;margin-top:12px}
.lead .dg-chip{
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"num lab x" "cam cam cam";
  gap:8px 10px;align-items:center;width:100%;max-width:360px;box-sizing:border-box;
  background:var(--bg-3,#1b2440);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 14px;color:var(--text,#e8eaf0);font-size:.9rem;
}
.lead .dg-chip > b{grid-area:num;display:block;width:24px;height:24px;border-radius:50%;
  background:rgba(255,240,0,.95);color:#101010;font:800 .82rem/24px inherit;text-align:center}
.lead .dg-chip > span{grid-area:lab;align-self:center;font-weight:600;line-height:1.3;color:#eaf1ff}
.lead .dg-chip > button{grid-area:x;justify-self:end;align-self:start;width:32px;height:32px;
  border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#9fb0c6;font-size:1.15rem;line-height:1;cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.lead .dg-chip > button:hover{border-color:rgba(255,120,120,.6);color:#ffb3ad}
.lead .dg-chip__cam{grid-area:cam;position:relative;display:inline-flex;align-items:center;gap:8px;
  width:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--g);
  background:rgba(36,212,164,.1);color:#eafff6;border-radius:11px;padding:9px 14px;
  font:600 .86rem/1.1 inherit;cursor:pointer;transition:background .15s}
.lead .dg-chip__cam:hover{background:rgba(36,212,164,.18)}
.lead .dg-clear{align-self:center;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.14);
  color:#9fb0c6;border-radius:18px;padding:9px 16px;font-size:.82rem;cursor:pointer;min-height:40px;transition:border-color .15s,color .15s}
.lead .dg-clear:hover{border-color:rgba(36,212,164,.5);color:var(--g)}
/* desktop: let two cards sit side by side when there is room */
@media(min-width:620px){.lead .dg-chip{width:auto;min-width:300px;flex:0 1 340px}}

/* ===== FORM POLISH (Myke 2026-10-28, "like Steve Jobs would do it") ===== */

/* 1) LABEL / FIELD GROUPING. Tight gap from a label to ITS input, generous
   space above each field group, so a label clearly belongs to the input below
   it (not the field above). */
.lead label{margin-bottom:5px}
.lead .lf-step > .fld,
.lead .lf-step > .row,
.lead .lf-step > .consent,
.lead .lf-step > .lf-more,
.lead .lf-step > .ph__list{margin-top:24px}
.lead .row > .fld{margin-top:0}
.lead .lf-step > .lf-next,
.lead .lf-step > .lf-send{margin-top:26px}
.lead .lf-step > .ph__list:empty{margin-top:0}

/* 2) CONSENT AT THE TOP of Step 1, front and centre. Uses the existing mint
   consent card; a touch more presence so it is not an afterthought. The Send
   button in Step 2 shows a locked look until the box is ticked but stays
   tappable (a tap jumps back to the agreement). */
.lead .consent--top{margin-top:22px;border-color:rgba(36,212,164,.55);box-shadow:0 0 0 1px rgba(36,212,164,.12),0 14px 34px -22px rgba(0,0,0,.8)}
.lead .btn-a.is-locked{opacity:.5;filter:saturate(.55)}
.lead .lf-lockhint{margin:10px 0 0;text-align:center;font-size:12.6px;font-weight:700;color:#F0B429}
.lead .lf-lockhint[hidden]{display:none}

/* 3) DIAGRAM starts collapsed (clean, short first view) and eases in once the
   make + model are entered. Reuses the dsDiagIn keyframe; honours reduced motion. */
.lead .efp.is-diag-collapsed{display:none}
.lead .efp.ds-diag-reveal{animation:dsDiagIn .5s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
@media(prefers-reduced-motion:reduce){.lead .efp.ds-diag-reveal{animation:none}}

/* ===== FORM POLISH v2 (Myke 2026-10-28) ===== */

/* 3) MORE PROMINENT INPUTS: a lighter field fill and a clearer border so they
   obviously read as fillable against the dark navy, with a mint focus ring. */
.lead input[type=text],.lead input[type=tel],.lead input[type=email],.lead textarea,.lead select{
  background:rgba(255,255,255,.055);
  border:1.5px solid rgba(255,255,255,.2);
}
.lead input::placeholder,.lead textarea::placeholder{color:rgba(255,255,255,.4)}
.lead input:focus,.lead input[type=text]:focus,.lead input[type=tel]:focus,.lead input[type=email]:focus,
.lead textarea:focus,.lead select:focus{
  outline:none;border-color:var(--g);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(36,212,164,.22);
}

/* 2) NEXT GATED ON AGREE: solid bright green when active; dim/inactive until the
   agreement is ticked. The .btn-a fill (background-size) transition makes the
   switch to bright green feel smooth. Send on Step 2 is the same solid green. */
.lead .lf-next,.lead .lf-send{
  color:#04221a;text-shadow:none;background-size:100% 100%;border-color:var(--g);
  box-shadow:0 0 28px -6px rgba(36,212,164,.55),0 8px 20px -8px rgba(0,0,0,.55);
}
.lead .lf-next:hover,.lead .lf-send:hover{box-shadow:0 0 34px -4px rgba(36,212,164,.72),0 8px 20px -8px rgba(0,0,0,.6)}
.lead .lf-next.is-locked{
  opacity:1;filter:none;color:#8ea0b8;text-shadow:none;
  background-image:none;background-color:rgba(255,255,255,.04);background-size:0% 100%;
  border-color:rgba(255,255,255,.16);box-shadow:none;
}
.lead .lf-nextnote.is-err{color:#ffb3ad;font-weight:600}

/* ===== PER-SPOT PHOTO LIGHTBOX (Myke 2026-10-28) ===== */
/* Chip row = compact summary. The 2nd row shows photo status; the whole chip is
   tappable to re-open the lightbox. Adding happens in the popup, not inline. */
.lead .dg-chip{cursor:pointer}
.lead .dg-chip:hover{border-color:rgba(36,212,164,.35)}
.lead .dg-chip [data-spot-stat]{grid-area:cam;display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted,#9fb0c6)}
.lead .dg-chip [data-spot-stat].is-done{color:var(--g)}
.lead .dg-chip [data-spot-stat] svg{flex:none}

/* a marked panel turns mint once it has a photo (filled mark + mint halo) */
.lead .efd .diag-wrap svg .dg-mark.has-photo .dg-dot{fill:var(--g)}
.lead .efd .diag-wrap svg .dg-mark.has-photo .dg-halo{stroke:var(--g)}

/* the lightbox itself (appended to <body>, so NOT scoped under .lead) */
.dg-pop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.dg-pop[hidden]{display:none}
.dg-pop__backdrop{position:absolute;inset:0;background:rgba(5,9,18,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dg-pop__sheet{position:relative;z-index:1;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  font-family:var(--f,inherit);
  background:linear-gradient(158deg,var(--bg-3,#1b2440),var(--panel,#171f34) 62%);
  border:1px solid rgba(36,212,164,.4);border-radius:18px;padding:22px 20px 20px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.9);color:var(--text,#e8eaf0);
  animation:dgPopIn .26s var(--ease,cubic-bezier(.22,.61,.36,1)) both}
.dg-pop__x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#cfd8e6;font-size:1.35rem;line-height:1;cursor:pointer;padding:0}
.dg-pop__x:hover{border-color:rgba(255,255,255,.4);color:#fff}
.dg-pop__badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,240,0,.95);color:#101010;font:800 .95rem/1 inherit}
.dg-pop__title{font-family:var(--fh,inherit);font-size:1.28rem;line-height:1.15;margin:10px 40px 4px 0;color:#fff}
.dg-pop__prompt{margin:0 0 14px;font-size:.92rem;line-height:1.45;color:var(--muted,#9fb0c6)}
.dg-pop__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.dg-pop__thumbs:empty{display:none}
.dg-pop__thumb{position:relative;width:72px;height:72px}
.dg-pop__thumb img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.2);display:block}
.dg-pop__thumb button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;border:2px solid var(--bg,#0e1526);background:#2a3350;color:#fff;font:700 15px/22px inherit;cursor:pointer;padding:0}
.dg-pop__add{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;box-sizing:border-box;cursor:pointer;
  border-radius:12px;border:2px solid var(--g);color:#04221a;font-weight:800;font-size:1rem;
  background-image:linear-gradient(110deg,var(--g-hi,#5CEFCB),var(--g,#24D4A4) 55%,#10B894);
  box-shadow:0 0 24px -8px rgba(36,212,164,.6)}
.dg-pop__add:hover{box-shadow:0 0 30px -5px rgba(36,212,164,.78)}
.dg-pop__add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(36,212,164,.45)}
.dg-pop__add input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dg-pop__note{margin:8px 0 0;font-size:.82rem;color:#F0B429;text-align:center}
.dg-pop__note:empty{display:none}
.dg-pop__done{display:block;width:100%;margin-top:12px;min-height:46px;cursor:pointer;
  border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#cfd8e6;font-weight:700;font-size:.95rem;transition:border-color .15s,color .15s}
.dg-pop__done:hover{border-color:rgba(36,212,164,.5);color:#fff}
html.dg-pop-open{overflow:hidden}
@keyframes dgPopIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dg-pop__sheet{animation:none}}

/* Footer social row. Doug's live profiles. Neutral hairline, mint on hover. */
.fsoc{display:flex;gap:22px;align-items:center;justify-content:center;margin:26px auto 2px;padding-top:24px;border-top:1px solid var(--line-2)}
.fsoc a{color:var(--muted);display:inline-flex;transition:color .18s ease,transform .18s ease}
.fsoc a:hover,.fsoc a:focus-visible{color:var(--g-hi);transform:translateY(-1px)}
.fsoc svg{width:22px;height:22px;display:block;fill:currentColor}
/* the shop address, linked to Doug's Google Maps listing wherever it appears in copy */
.addr-link{color:var(--g-hi,#5ff0c4);text-decoration:underline;text-decoration-color:rgba(36,212,164,.45);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s,color .2s}
.addr-link:hover,.addr-link:focus-visible{color:#fff;text-decoration-color:var(--g)}
/* header on phones: same as the home page, the number moves into the menu so
   "Send Photos" stays on one line (it wrapped on every inner page at 375px) */
body>header .btn{white-space:nowrap}
@media(max-width:440px){body>header .tel{display:none}}
/* designer credit, last line of every footer: Doug's navy and mint, kept quiet */
.fcredit{display:flex;justify-content:center;margin:22px auto 0;padding:18px 16px 0;border-top:1px solid rgba(255,255,255,.06);max-width:1200px}
.fcredit__a{display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));font-family:var(--f);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);text-decoration:none;transition:border-color .25s,color .25s,box-shadow .25s}
.fcredit__a:hover,.fcredit__a:focus-visible{border-color:rgba(36,212,164,.5);color:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(36,212,164,.12),0 8px 30px rgba(36,212,164,.1)}
.fcredit__mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3fe6b8,#109A77);color:#06231a;box-shadow:0 0 12px rgba(36,212,164,.4)}
.fcredit__mark svg{width:14px;height:14px}
.fcredit__t strong{color:rgba(255,255,255,.88);font-weight:800;letter-spacing:.1em;margin-left:4px}
.fcredit__a:hover .fcredit__t strong{color:#fff}
.fcredit__sep{width:1px;height:13px;background:rgba(36,212,164,.45)}
.fcredit__b{color:var(--g);font-weight:800;letter-spacing:.12em}
@media(max-width:560px){.fcredit__a{flex-wrap:wrap;justify-content:center;text-align:center;font-size:9.5px;letter-spacing:.08em;gap:5px 8px;padding:9px 14px;border-radius:16px}.fcredit__mark{width:20px;height:20px}.fcredit__mark svg{width:12px;height:12px}.fcredit__t strong{margin-left:2px}.fcredit__sep{display:none}.fcredit__b{flex-basis:100%}}