/* ============================================================
   BLACKOUT BROS — palette sampled from the logo artwork
   ============================================================ */
:root{
  --ink:#0A0A0B;
  --panel:#141416;
  --panel-2:#1B1B1E;
  --line:#2A2A2F;
  --red:#E8121E;
  --steel:#8B8B8B;
  --white:#FFFFFF;
  --dim:#A5A5AC;
  --glass:#3A3A41;

  --display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --body:'Barlow', system-ui, -apple-system, sans-serif;
  --cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono:'Roboto Mono', ui-monospace, monospace;

  --pad:clamp(20px, 5vw, 72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--white);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* Off-screen until focused - lets keyboard/screen-reader users jump
   straight to the page content instead of tabbing through the nav
   every time. */
.skip-link{position:absolute;top:-100px;left:12px;z-index:1000;
  background:var(--red);color:#fff;padding:10px 16px;border-radius:6px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;transition:top .15s ease}
.skip-link:focus{top:12px}

/* No promotional banner is in use. The rules that styled the old
   "$50 off" strip have been removed along with it - if a real,
   dated promotion is run again, restyle it then rather than
   leaving dead CSS on every page load. */

/* ---- shared type ---- */
.h-display{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:.92;letter-spacing:.01em;
  transform:skewX(-8deg);transform-origin:left bottom;
}
.eyebrow{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;font-size:13px;color:var(--steel);
}
.eyebrow .mark{color:var(--red)}
.rule{height:3px;display:flex;width:180px;margin:14px 0 26px}
.rule i{flex:1}
.rule i:nth-child(1){background:var(--red)}
.rule i:nth-child(2){background:var(--white)}
.rule i:nth-child(3){background:var(--steel)}

.wrap{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:clamp(30px,5.2vw,54px);transform:skewX(-8deg);transform-origin:left bottom}
.sec-head p{color:var(--dim);margin-top:18px;font-size:clamp(16px,2vw,19px);max-width:62ch}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:16px;
  padding:15px 26px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:background .16s,color .16s,border-color .16s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#ff2431}
.btn-ghost{border-color:#3A3A41;color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff}

/* ============ HEADER ============ */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(10,10,11,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.topbar .inner{display:flex;align-items:center;gap:20px;
  padding-top:14px;padding-bottom:14px}
.topbar img{width:190px;height:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-family:var(--cond);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:15px}
.nav a{text-decoration:none;color:var(--dim)}
.nav a:hover{color:#fff}
.topbar .btn{padding:11px 18px;font-size:14px}
.tel-top{font-family:var(--mono);font-weight:700;font-size:15px;text-decoration:none;letter-spacing:-.02em}
@media(max-width:980px){.nav{display:none}.topbar .btn{margin-left:auto}}
@media(max-width:520px){.topbar img{width:150px}.tel-top{display:none}}

/* The Signature page has no "See my price" button in its header, so
   the phone number is the only contact left up there. Two rules the
   shared topbar would otherwise get wrong on that page:
     - under 980px the nav hides and .topbar .btn took the auto
       margin; with no button, the number has to take it instead
     - under 520px the number is normally hidden because the button
       covers the CTA; here there is no button, so it stays. */
@media(max-width:980px){.signature-theme .tel-top{margin-left:auto}}
@media(max-width:520px){.signature-theme .tel-top{display:inline-block;font-size:14px}}

/* ============ HERO ============ */
.hero{border-top:0;padding-top:clamp(48px,7vw,90px);padding-bottom:clamp(40px,6vw,72px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%, rgba(232,18,30,.14), transparent 62%)}
.hero .inner{position:relative;z-index:1;max-width:900px}
.hero h1{font-size:clamp(42px,9vw,104px);margin:20px 0 0}
.hero h1 .grey{color:var(--steel)}
.hero .sub{color:var(--dim);font-size:clamp(17px,2.4vw,22px);margin-top:26px;max-width:56ch}
.hero .sub b{color:#fff;font-weight:600}
/* the same button row is reused outside the hero (Signature's closing
   block), so the layout rule can't live under .hero alone */
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.badges{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:38px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;font-weight:600;color:var(--dim)}
.badges span{display:flex;align-items:center;gap:9px}
.badges .dot{width:7px;height:7px;background:var(--red);flex:none}

/* ============ PRICE BUILDER (signature) ============ */
#price{background:var(--panel)}
.builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}

.picker{display:flex;flex-direction:column;gap:26px}
.field > .lbl{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:13px;color:var(--steel);display:block;margin-bottom:12px}
.field .lbl .n{color:var(--red);margin-right:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:15px;padding:11px 17px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--dim);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.opt:hover{color:#fff;border-color:#4A4A52}
.opt[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.opt.off{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.opt.off:hover{color:var(--dim);border-color:var(--line)}
.opt .sm{display:block;font-size:11px;letter-spacing:.08em;opacity:.7;font-weight:500}

/* price readout */
.readout{background:var(--panel-2);border:1px solid var(--line);padding:26px;position:sticky;top:96px}
@media(max-width:900px){.readout{position:static}}
.readout .lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--steel)}
.amount{font-family:var(--display);font-size:clamp(52px,11vw,74px);line-height:1;
  margin:10px 0 4px;letter-spacing:-.01em;transform:skewX(-8deg);transform-origin:left bottom}
.amount .cur{font-size:.45em;vertical-align:top;color:var(--steel);margin-right:2px}
.readout .note{color:var(--dim);font-size:14px;line-height:1.5;margin-top:10px}
.specs{margin:22px 0;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.specs dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  color:var(--steel);font-size:13px}
.specs dd{font-family:var(--mono);font-weight:500;font-size:13.5px;text-align:right}
.readout .btn{width:100%}
.heatbar{height:6px;background:#2A2A2F;margin-top:8px;overflow:hidden}
.heatbar i{display:block;height:100%;background:var(--red);width:0;transition:width .5s ease}


/* ============ NO-FEE CALLOUT ============ */
.freebar{margin-top:clamp(26px,3.4vw,40px);background:var(--panel-2);
  border:1px solid var(--line);border-left:4px solid var(--red);
  padding:clamp(20px,2.6vw,28px);display:flex;gap:clamp(18px,3vw,34px);
  align-items:center;flex-wrap:wrap}
.freebar .big{font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:clamp(24px,3.6vw,38px);transform:skewX(-8deg);transform-origin:left bottom;
  white-space:nowrap}
.freebar .big em{font-style:normal;color:var(--red)}
.freebar p{color:var(--dim);font-size:15.5px;max-width:58ch;margin:0}
.freebar p b{color:#fff;font-weight:600}

/* ============ SERVICES ============ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.svc{grid-template-columns:1fr}}
.svc article{background:var(--ink);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.svc h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3vw,32px);
  transform:skewX(-8deg);transform-origin:left bottom;line-height:1}
.svc .tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--red);font-weight:700;margin-bottom:14px}
.svc p{color:var(--dim);margin:16px 0 20px;font-size:16px}
.svc ul{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:9px}
.svc li{font-size:15px;padding-left:20px;position:relative;color:#D6D6DA}
.svc li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--red)}
.svc .foot{margin-top:auto}
.svc .from{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;color:var(--steel)}
.svc .from b{font-family:var(--mono);color:#fff;font-size:17px;letter-spacing:-.02em}

/* ============ FILM TABLE ============ */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:620px}
th,td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
thead th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  color:var(--steel);background:var(--panel);font-weight:700}
tbody th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:16px;font-weight:700}
td{font-family:var(--mono);font-size:14px;color:#D6D6DA}
tr.best td, tr.best th{background:rgba(232,18,30,.07)}
tr.best th::after{content:"Most popular";display:block;font-family:var(--cond);
  font-size:11px;letter-spacing:.18em;color:var(--red);margin-top:3px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}


/* ============ VLT SHADE CHART ============ */
.shades{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:900px){.shades{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.shades{grid-template-columns:repeat(2,1fr)}}
.shade{background:var(--ink);display:flex;flex-direction:column}
.swatch{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111}
.swatch picture{display:block;width:100%;height:100%}
.swatch img{width:100%;height:100%;object-fit:cover;display:block}
.shade .meat{padding:18px 16px 20px;display:flex;flex-direction:column;gap:0;flex:1}
.shade h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.6vw,27px);
  line-height:1;transform:skewX(-8deg);transform-origin:left bottom;margin-bottom:12px}
.shade dl{margin:0;border-top:1px solid var(--line)}
.shade dl div{display:flex;justify-content:space-between;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.shade dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--steel)}
.shade dd{font-family:var(--mono);font-size:12px;color:#D6D6DA;text-align:right;margin:0}
.shade .use{color:var(--dim);font-size:13.5px;margin-top:14px;line-height:1.5}
.tagline{display:inline-block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;font-weight:700;padding:4px 9px;margin-top:14px;
  align-self:flex-start}
.tagline.no{background:rgba(232,18,30,.14);color:#F0A5AA;border:1px solid rgba(232,18,30,.4)}
.tagline.chk{background:rgba(79,158,95,.13);color:#AFD8BA;border:1px solid rgba(79,158,95,.45)}
.heatnote{margin-top:clamp(24px,3vw,36px);background:var(--panel-2);
  border:1px solid var(--line);border-left:4px solid var(--red);
  padding:clamp(18px,2.4vw,26px);display:flex;gap:clamp(16px,3vw,30px);
  align-items:center;flex-wrap:wrap}
.heatnote .big{font-family:var(--display);text-transform:uppercase;line-height:.95;
  font-size:clamp(21px,3vw,32px);transform:skewX(-8deg);transform-origin:left bottom;
  white-space:nowrap}
.heatnote p{color:var(--dim);font-size:15.5px;max-width:60ch;margin:0}
.heatnote p b{color:#fff;font-weight:600}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.steps div{background:var(--ink);padding:26px 22px}
.steps .num{font-family:var(--display);font-size:40px;color:var(--red);line-height:1;
  transform:skewX(-8deg);display:inline-block;margin-bottom:12px}
.steps h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:17px;margin-bottom:8px}
.steps p{color:var(--dim);font-size:15px}

/* ============ GALLERY ============ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.shot{aspect-ratio:4/3;background:var(--panel);border:1px dashed #35353C;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#8A8A94;font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;text-align:center;padding:16px}
.shot b{color:#76767F;font-size:13px;letter-spacing:.14em}


/* ---- gallery: auto-scrolling strips ---- */
.galscroll{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.galscroll + .galscroll{margin-top:10px}
.galtrack{display:flex;gap:10px;width:max-content;will-change:transform}
.galscroll.a .galtrack{animation:slideL 64s linear infinite}
.galscroll.b .galtrack{animation:slideR 58s linear infinite}
.galscroll:hover .galtrack,
.galscroll:focus-within .galtrack{animation-play-state:paused}
/* the visible pause button - hover pausing does nothing on a phone */
.gal-paused .galtrack{animation-play-state:paused!important}
.galpause{background:none;border:1px solid var(--line);color:inherit;font:inherit;
  cursor:pointer;border-radius:999px;padding:3px 12px;margin-right:4px}
.galpause:hover{border-color:var(--red);color:var(--red)}
@keyframes slideL{from{transform:translateX(0)}      to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}   to{transform:translateX(0)}}

.shot{position:relative;margin:0;padding:0;flex:none;overflow:hidden;
  width:clamp(220px,26vw,340px);aspect-ratio:4/3;
  background:var(--panel);border:1px solid #26262B;cursor:zoom-in;display:block}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.9,.3,1), filter .3s}
.shot:hover img{transform:scale(1.05);filter:brightness(1.07)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  color:#fff;line-height:1.35;opacity:0;transform:translateY(6px);
  background:linear-gradient(transparent, rgba(6,6,8,.93));
  transition:opacity .3s, transform .3s}
.shot:hover figcaption, .shot:focus-visible figcaption{opacity:1;transform:none}
.shot::after{content:"";position:absolute;inset:0;border:2px solid transparent;
  transition:border-color .25s;pointer-events:none}
.shot:hover::after{border-color:var(--red)}
.galhint{margin-top:14px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--steel);text-align:center}

@media (prefers-reduced-motion:reduce){
  .galscroll{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .galtrack{animation:none!important}
}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,6,8,.96);
  display:none;align-items:center;justify-content:center;padding:24px}
.lb.on{display:flex}
.lb img{max-width:min(1200px,92vw);max-height:82vh;object-fit:contain;
  border:1px solid var(--line)}
.lb .cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--steel);padding:0 24px}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--display);font-size:34px;line-height:1;padding:14px 18px;opacity:.72}
.lb button:hover{opacity:1;color:var(--red)}
.lb .close{top:10px;right:14px;font-size:28px}
.lb .prev{left:6px;top:50%;transform:translateY(-50%)}
.lb .next{right:6px;top:50%;transform:translateY(-50%)}

/* ============ REVIEWS ============ */
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.score .big{font-family:var(--display);font-size:56px;line-height:1;transform:skewX(-8deg)}
.score .stars{color:var(--red);letter-spacing:4px;font-size:20px}
.score .cnt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  color:var(--steel);font-size:14px}

/* --- head row: score badge + actions --- */
.rvbar{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:24px}
.rvbar .gbadge{margin-bottom:0}
.rvacts{display:flex;gap:10px;flex-wrap:wrap}
.rvacts a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;font-weight:600;text-decoration:none;color:#fff;
  border:1px solid var(--line);background:var(--panel);padding:13px 20px;
  transition:border-color .2s ease,background .2s ease}
.rvacts a:hover{border-color:var(--red);background:var(--panel-2)}
.rvacts a.solid{background:var(--red);border-color:var(--red)}
.rvacts a.solid:hover{background:#c60f19;border-color:#c60f19}

/* --- the moving strip --- */
.rvscroll{position:relative;overflow:hidden;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.rvtrack{display:flex;gap:14px;width:max-content;will-change:transform;
  cursor:grab;touch-action:pan-y}
.rvtrack.drag{cursor:grabbing}
.rvscroll[data-empty="1"] .rvtrack{cursor:default}

/* --- one review card --- */
.rev{width:370px;flex:none;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--red);padding:22px;
  display:flex;flex-direction:column;gap:13px}
@media(max-width:560px){.rev{width:80vw}}
.rev .top{display:flex;align-items:center;gap:12px}
.rev .av{width:40px;height:40px;flex:none;background:var(--panel-2);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;
  font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.04em;color:#fff}
.rev .av img{width:100%;height:100%;object-fit:cover}
.rev .id{min-width:0}
.rev .nm{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:13.5px;color:#fff;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rev .dt{font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:2px}
.rev .st{color:var(--red);letter-spacing:3px;font-size:15px;line-height:1;margin-left:auto}
.rev .body{font-size:15px;color:#D6D6DA;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rev.open .body{-webkit-line-clamp:unset;overflow:visible}
.rev .more{align-self:flex-start;margin-top:-4px;background:none;border:0;padding:0;
  cursor:pointer;font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;font-weight:600;color:var(--red)}
.rev .more:hover{text-decoration:underline}
.rev .src{margin-top:auto;padding-top:4px;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--glass)}

/* --- controls under the strip --- */
.rvfoot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.rvnav{display:flex;gap:8px}
.rvnav button{width:44px;height:44px;background:var(--panel);border:1px solid var(--line);
  color:#fff;font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.rvnav button:hover{border-color:var(--red);background:var(--panel-2)}
.rvhint{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--steel)}
.rvhint b{color:var(--red);font-weight:400}

/* ============ AREA ============ */
.cities{display:flex;flex-wrap:wrap;gap:8px}
.cities span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;padding:9px 15px;border:1px solid var(--line);color:var(--dim);background:var(--panel)}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(16px,2.2vw,19px);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--red);font-family:var(--display);font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 24px;color:var(--dim);max-width:74ch;font-size:16px}

/* ============ FORM ============ */
#quote{background:var(--panel)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.full{grid-column:1/-1}
label.fl{display:block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.18em;font-size:12px;color:var(--steel);margin-bottom:8px;font-weight:700}
input,select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);color:#fff;
  padding:14px 15px;font-family:var(--body);font-size:16px;
}
input:hover,select:hover,textarea:hover{border-color:#3E3E46}
textarea{resize:vertical;min-height:96px}
.pref{display:flex;gap:8px;flex-wrap:wrap}
.microcopy{color:var(--steel);font-size:13.5px;margin-top:14px}


/* ============ FILM TIER LADDER ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:clamp(24px,3vw,38px)}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--ink);padding:clamp(22px,3vw,32px);position:relative;display:flex;flex-direction:column}
.tier.pick{background:#121214}
.tier.pick::before{content:"Most popular";position:absolute;top:0;right:0;
  background:var(--red);color:#fff;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;font-weight:700;padding:6px 12px}
.tier .rank{font-family:var(--cond);text-transform:uppercase;letter-spacing:.24em;
  font-size:12px;color:var(--steel);font-weight:700}
.tier .pct{font-family:var(--display);font-size:clamp(48px,7.6vw,68px);line-height:.92;
  transform:skewX(-8deg);transform-origin:left bottom;margin:12px 0 2px;display:block}
.tier .pct em{font-style:normal;color:var(--red);font-size:.42em;vertical-align:top}
.tier .pctcap{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--steel);display:block;margin-bottom:16px}
.tier h3{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:19px;
  margin-bottom:10px}
.tier p{color:var(--dim);font-size:15px;margin-bottom:16px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.tier li{font-size:14.5px;color:#D6D6DA;padding-left:18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--red)}
.tier .from{margin-top:auto;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:13px;color:var(--steel)}
.tier .from b{font-family:var(--mono);color:#fff;font-size:18px;letter-spacing:-.02em}

/* ============ REVIEW BADGE ============ */
.gbadge{display:inline-flex;align-items:center;gap:16px;background:var(--panel);
  border:1px solid var(--line);padding:16px 22px;margin-bottom:26px}
.gbadge .g{font-family:var(--display);font-size:38px;line-height:1;transform:skewX(-8deg)}
.gbadge .st{color:var(--red);letter-spacing:3px;font-size:17px;display:block}
.gbadge .vc{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:12.5px;color:var(--steel);display:block;margin-top:3px}

/* ============ REFERENCE REVEALS ============ */
.reveal{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px}
.reveal summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(14px,2vw,17px);font-weight:600;color:var(--dim)}
.reveal summary:hover{color:#fff}
.reveal summary::-webkit-details-marker{display:none}
.reveal summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--red);font-family:var(--display);font-size:26px;line-height:1}
.reveal[open] summary::after{content:"–"}
.reveal .inner{padding:4px 0 30px}

.smsbox{background:var(--ink);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:13px 15px;margin-bottom:16px}
.smsbox label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0}
.smsbox input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--red)}
.smsbox span{color:var(--steel);font-size:12.5px;line-height:1.55}
.smsbox span b{color:#fff;font-weight:600}
.smsbox span a{color:var(--red);text-decoration:underline}

/* ============ BOOKING STEP ============ */
.carry{font-family:var(--mono);font-size:13px;color:#fff;margin:0;
  background:var(--ink);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:12px 14px;word-break:break-word}
.bookpanel{margin-top:22px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--red);padding:28px}
.bookpanel h3{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);
  line-height:1.02;letter-spacing:.01em;transform:skewX(-8deg);margin:10px 0 12px}
.bookpanel p{color:var(--dim);font-size:16px;max-width:60ch}
.bookpanel .slot{margin:20px 0 14px;min-height:46px}
.bookpanel .calmeta{font-family:var(--mono);font-size:12.5px;color:var(--steel);
  margin:14px 0 0;letter-spacing:.02em}
.bookpanel .calbox{margin:22px 0 14px;min-height:620px;width:100%;
  border:1px solid var(--line);background:var(--ink);overflow:hidden;
  padding:22px 16px}
.bookpanel .calbox iframe{border:0!important;width:100%!important;display:block}
/* The box hugs the iframe: no min-height fighting the reported height. */
.bookpanel .calbox{height:auto}
@media(max-width:680px){
  /* Cal's iframe reports its own height and the embed resizes to match,
     so min-height here is only a floor to stop the box collapsing while
     the calendar loads - NOT a target height. Setting it tall left dead
     space above and below once the real height arrived.
     Side padding is kept minimal because it steals width from the date
     cells, and the negative margins buy back ~40px from the section. */
  .bookpanel .calbox{
    min-height:340px;
    padding:10px 4px;
    margin-left:calc(var(--pad) * -0.5);
    margin-right:calc(var(--pad) * -0.5);
    width:auto;
  }
}
@media(max-width:400px){
  .bookpanel .calbox{padding:8px 2px}
}
.bookpanel .fallback{font-size:13.5px;color:var(--steel);margin-top:6px}
.bookpanel .fallback a{color:var(--red)}
.bookpanel .recap{font-family:var(--mono);font-size:12.5px;color:var(--steel);
  border-top:1px solid var(--line);margin-top:20px;padding-top:14px;word-break:break-word}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:52px 0 40px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
footer img{width:210px;height:auto;margin-bottom:18px}
footer h5{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:13px;color:var(--steel);margin-bottom:14px}
footer a{display:block;color:var(--dim);text-decoration:none;font-size:15px;margin-bottom:9px}
footer a:hover{color:#fff}
.legal{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;
  /* #5C5C66 measured 2.78:1 against the footer panel - below the 4.5:1
     WCAG AA minimum for body text. #8A8A94 is 5.38:1 and still reads as
     quiet secondary text. */
  color:#8A8A94;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ MOBILE ACTION BAR ============ */
/* Mobile only. On desktop the header already carries the phone number
   and the "See my price" button, so a fixed bar at the bottom of the
   screen just repeats them and eats vertical space. */
.actionbar{display:none}
@media(max-width:820px){
  body{padding-bottom:64px} /* room for the bar */
  .actionbar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;
    grid-template-columns:1fr 1fr 1.2fr;border-top:1px solid var(--line);
    background:rgba(10,10,11,.97);backdrop-filter:blur(8px);
  }
  .actionbar a{
    text-decoration:none;padding:17px 6px;text-align:center;
    font-family:var(--cond);font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;font-size:14px;color:#fff;border-left:1px solid var(--line);
  }
  .actionbar a:first-child{border-left:0}
  .actionbar a.primary{background:var(--red)}
}


/* ============================================================
   BACKGROUNDS
   To use your own hero photo, set --hero-photo below to
   url('/images/yourphoto.jpg') and drop the file in images/.
   Leave it as none and the built-in graphic direction is used.

   IMPORTANT: this file lives in css/site.css, not next to
   index.html, so the path MUST start with a leading slash
   (site-root-relative) or it silently 404s — a bare
   'images/photo.jpg' resolves against css/images/, which
   doesn't exist. This is exactly the bug that made the hero
   photo disappear when the styles were split out of index.html.
   ============================================================ */
:root{
  --hero-photo:url('/images/hero-tesla-model-y-san-diego.webp');
  --slash:repeating-linear-gradient(115deg,
          rgba(255,255,255,.030) 0 1px, transparent 1px 46px);
  --grid:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0/100% 56px,
         linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/56px 100%;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
}

/* hero: photo (if set) → red bloom → diagonal slashes → grain */
.hero{
  background-color:var(--ink);
  background-image:var(--slash), var(--hero-photo);
  background-size:auto, cover;
  background-position:center, 62% 46%;
  background-repeat:repeat, no-repeat;
  min-height:clamp(460px, 62vh, 720px);
  display:flex;align-items:center;
}
@media(max-width:820px){
  .hero{background-position:center, 60% 42%;min-height:auto}
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--grain);opacity:.055;mix-blend-mode:overlay;
}
/* darkens a hero photo so the headline stays readable */
.hero .scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,.80) 34%,
                            rgba(10,10,11,.42) 62%, rgba(10,10,11,.72) 100%),
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.28) 42%, var(--ink) 100%);
}
/* red bloom, bottom-anchored diagonal */
.hero::after{
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(232,18,30,.16), transparent 62%),
    linear-gradient(200deg, transparent 62%, rgba(232,18,30,.10) 78%, transparent 88%);
}

/* panel sections get a faint engineering grid */
#price, #quote{background-color:var(--panel);background-image:var(--grid)}

/* films + area: angled band that echoes the logo rule */
#films, #area{position:relative;overflow:hidden}
#films::before, #area::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(255deg, rgba(232,18,30,.075) 0 22%, transparent 22.4%),
             linear-gradient(255deg, rgba(255,255,255,.030) 22.4% 24%, transparent 24.3%);
}
#films .wrap, #area .wrap{position:relative;z-index:1}

/* services + steps sit on a soft vignette so the cards lift */
#services, #how{
  background:radial-gradient(90% 120% at 50% 0%, rgba(255,255,255,.035), transparent 60%);
}

/* gallery slots read as intentional frames, not broken images */
.shot{
  background-color:var(--panel);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.020) 0 2px, transparent 2px 12px);
}


/* ============================================================
   VISUAL PASS — hero anchor, stat band, reveals, mosaic, ticker
   ============================================================ */

/* hero becomes two columns: copy left, ghost car right */
.hero h1{font-size:clamp(46px,10.5vw,124px);letter-spacing:-.005em}

/* ---- stat band: type as image ---- */
.statband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);padding:0}
.statband .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:760px){.statband .grid{grid-template-columns:1fr 1fr}}
.statband .cell{background:var(--panel);padding:clamp(22px,3.4vw,40px) clamp(16px,2vw,26px)}
.statband .fig{font-family:var(--display);font-size:clamp(40px,6.4vw,74px);line-height:.9;
  transform:skewX(-8deg);transform-origin:left bottom;display:block;letter-spacing:-.01em}
.statband .fig em{font-style:normal;color:var(--red)}
.statband .cap{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;
  font-size:12.5px;color:var(--steel);margin-top:14px;display:block;line-height:1.4}

/* ---- scroll reveal ---- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.9,.3,1), transform .62s cubic-bezier(.22,.9,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---- service cards get a live top rule ---- */
.svc article{position:relative;transition:background .25s}
.svc article::before{content:"";position:absolute;top:0;left:0;height:3px;width:34px;
  background:var(--red);transition:width .3s cubic-bezier(.22,.9,.3,1)}
.svc article:hover{background:#101012}
.svc article:hover::before{width:100%}

/* ---- heat bars inside the film table ---- */
.hcell{display:flex;flex-direction:column;gap:7px;min-width:118px}
.hbar{height:5px;background:#2A2A2F;overflow:hidden}
.hbar i{display:block;height:100%;width:0;background:var(--steel);transition:width .9s cubic-bezier(.22,.9,.3,1)}
tr.best .hbar i{background:var(--red)}

/* ---- gallery becomes a mosaic with bracket frames ---- */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;grid-auto-rows:minmax(120px,auto)}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.shot{aspect-ratio:auto;min-height:170px;position:relative;border:1px solid #26262B;
  border-radius:0;justify-content:flex-end;align-items:flex-start;text-align:left;gap:4px;
  padding:18px}
.shot::before,.shot::after{content:"";position:absolute;width:16px;height:16px;
  border-color:var(--red);border-style:solid;opacity:.85}
.shot::before{top:10px;left:10px;border-width:2px 0 0 2px}
.shot::after{bottom:10px;right:10px;border-width:0 2px 2px 0}
.shot .idx{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:11px;color:#4E4E57}
.shot b{color:#8E8E97}
.shot:nth-child(1){grid-column:span 4}
.shot:nth-child(2){grid-column:span 2}
.shot:nth-child(3){grid-column:span 2}
.shot:nth-child(4){grid-column:span 2}
.shot:nth-child(5){grid-column:span 2}
.shot:nth-child(6){grid-column:span 6;min-height:150px}
@media(max-width:820px){
  .shot:nth-child(1),.shot:nth-child(6){grid-column:span 2}
  .shot:nth-child(2),.shot:nth-child(3),.shot:nth-child(4),.shot:nth-child(5){grid-column:span 1}
}

/* ---- service-area ticker ---- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;gap:0;width:max-content;animation:roll 44s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span,.ticker a{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3.4vw,40px);
  color:#232329;transform:skewX(-8deg);padding:0 26px;white-space:nowrap;line-height:1.15;
  transition:color .3s;text-decoration:none;display:inline-block}
.ticker span.hot,.ticker a.hot{color:var(--white)}
.ticker a:hover{color:var(--red)}
.ticker span i,.ticker a i{color:var(--red);font-style:normal;padding-left:26px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- full-bleed three-stripe divider ---- */
.stripe{display:flex;height:4px}
.stripe i:nth-child(1){flex:2;background:var(--red)}
.stripe i:nth-child(2){flex:5;background:var(--white)}
.stripe i:nth-child(3){flex:9;background:var(--steel)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .ticker .track{animation:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   MULTI-PAGE ADDITIONS — shared by /*/index.html (city pages)
   and /guides/*.html (content hub). Keep alongside the rest of
   this file rather than inlined per page, so one edit here
   reaches every page that links to css/site.css.
   ============================================================ */

/* ---- breadcrumb, top of subpages ---- */
.crumbs{padding:16px 0 0}
.crumbs .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--steel)}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{color:var(--glass)}

/* ---- linked city/area chips (reuses .cities layout, adds a tags) ---- */
.cities a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:14px;padding:9px 15px;border:1px solid var(--line);color:var(--dim);
  background:var(--panel);text-decoration:none;transition:border-color .15s,color .15s}
.cities a:hover{border-color:var(--red);color:#fff}

/* ---- named-brand trust callout (film section) ---- */
.brandbox{margin-top:clamp(24px,3vw,36px);background:var(--panel-2);border:1px solid var(--line);
  border-left:4px solid var(--red);padding:clamp(20px,2.6vw,28px);
  display:flex;gap:clamp(18px,3vw,34px);align-items:center;flex-wrap:wrap}
.brandbox img{width:120px;height:auto;flex:none}
.brandbox .txt{flex:1;min-width:240px}
.brandbox .txt h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:14px;color:var(--red);font-weight:700;margin-bottom:8px}
.brandbox .txt p{color:var(--dim);font-size:15px;margin:0;max-width:62ch}
.brandbox .txt p b{color:#fff;font-weight:600}

/* ---- package / bundle badge on a .tier card ---- */
.tier.bundle{background:#121214}
.tier.bundle::before{content:"Highest protection";position:absolute;top:0;right:0;
  background:var(--white);color:var(--ink);font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;font-weight:700;padding:6px 12px}
.tier .askprice{font-family:var(--mono);font-size:15px;color:var(--dim);margin-top:6px}
.tier .askprice b{color:#fff}

/* ============================================================
   BLACKOUT SIGNATURE — premium line theme
   Scoped to <body class="signature-theme"> on /blackout-signature/
   only — nothing here reaches any other page.

   The rest of the site is built to shout: heavy skewed caps,
   thick red blocks, corner "MOST POPULAR" stickers. That's the
   right voice for a $50-off calculator, wrong for a $5,000
   ceramic-coating decision. So this isn't just the red token
   swapped for gold (that alone still reads as the same shop in
   a different color) — headings switch to a serif (Fraunces,
   loaded only on this page via extra_head in gen_pages.py),
   corner ribbons are gone in favor of a plain-text label, cards
   get room to breathe instead of touching in a spec-sheet grid,
   and the red hero glow — which is hardcoded rgba(), not the
   --red token, so the color swap alone never reached it — is
   recolored gold too.
   ============================================================ */
.signature-theme{
  --red:#C9A45C;
  --sig-serif:'Fraunces','Times New Roman',Georgia,serif;
  --sig-line:rgba(201,164,92,.30);
  --sig-hover:#DDBE84;
}

/* the hero's red radial bloom is a hardcoded rgba(), not var(--red) —
   recolor it here or the "premium" page keeps a red glow behind its
   own headline */
.signature-theme .hero::after{
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201,164,92,.13), transparent 62%),
    linear-gradient(200deg, transparent 62%, rgba(201,164,92,.08) 78%, transparent 88%);
}

/* ---- type: quiet serif in place of the shouted skewed caps ---- */
.signature-theme .h-display,
.signature-theme .sec-head h2{
  font-family:var(--sig-serif);font-weight:500;font-style:italic;
  text-transform:none;letter-spacing:0;line-height:1.06;transform:none;
}
.signature-theme .hero h1{font-size:clamp(38px,6.6vw,78px)}
.signature-theme .hero h1 .grey,
.signature-theme .h-display .grey{color:var(--dim);font-style:normal}
.signature-theme .sec-head h2{font-size:clamp(26px,4vw,40px)}
.signature-theme .sub{font-size:clamp(16.5px,1.9vw,19px);line-height:1.75}

.signature-theme .eyebrow{letter-spacing:.34em;font-weight:500;color:var(--dim)}
.signature-theme .rule{height:1px;width:56px;background:var(--sig-line);margin:20px 0 30px}
.signature-theme .rule i{display:none}

/* ---- buttons: no more heavy condensed shouting ---- */
.signature-theme .btn{
  font-family:var(--body);font-weight:600;text-transform:none;
  letter-spacing:.01em;font-size:16px;border-radius:2px;padding:16px 30px;
}
.signature-theme .btn-red:hover{background:var(--sig-hover)}
.signature-theme .btn-ghost{border-color:var(--sig-line);color:var(--dim)}
.signature-theme .btn-ghost:hover{border-color:var(--red);color:#fff}

.signature-theme .badges{letter-spacing:.06em;font-weight:500;color:var(--steel)}
.signature-theme .badges .dot{width:4px;height:4px;border-radius:50%}

/* ---- product cards: room to breathe, no spec-sheet grid lines ---- */
.tiers-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:clamp(24px,3vw,38px)}
@media(max-width:820px){.tiers-2{grid-template-columns:1fr}}

.signature-theme .tiers-2,
.signature-theme .tiers{background:transparent;border:0;gap:clamp(18px,2.4vw,28px)}
.signature-theme .tier{
  background:var(--panel);border:1px solid var(--line);padding:clamp(30px,3.4vw,42px);
}
.signature-theme .tier.pick{border-top:2px solid var(--red)}
.signature-theme .tier.bundle{border-color:var(--line)}
/* corner "MOST POPULAR" / "HIGHEST PROTECTION" stickers are retail-
   calculator energy — the plain-text .rank label already says
   "Maximum protection" etc, so the ribbon is just noise here */
.signature-theme .tier.pick::before,
.signature-theme .tier.bundle::before{content:none}
.signature-theme .tier .rank{color:var(--red);font-weight:600;letter-spacing:.22em}
.signature-theme .tier h3{
  font-family:var(--sig-serif);font-weight:500;font-style:normal;
  text-transform:none;letter-spacing:0;font-size:clamp(21px,2.2vw,25px);margin-top:4px;
}
.signature-theme .tier p{font-size:15.5px;line-height:1.65}
.signature-theme .tier li::before{opacity:.75}
.signature-theme .tier .from b,
.signature-theme .tier .askprice b{font-family:var(--sig-serif);font-style:italic;font-weight:500}

/* ---- freebar: thin hairline instead of a thick alert-style block ---- */
.signature-theme .freebar{border-left:1px solid var(--line);border-color:var(--line)}
.signature-theme .freebar .big{
  font-family:var(--sig-serif);font-style:italic;font-weight:500;
  text-transform:none;letter-spacing:0;transform:none;font-size:clamp(20px,2.6vw,28px);
}

/* ---- FAQ: same accordion, quieter labels ---- */
.signature-theme .faq summary{font-family:var(--body);font-weight:600;letter-spacing:.01em;text-transform:none}

/* ---- stat row (The Blackout Standard) — plain facts, no fabricated numbers ---- */
.sig-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);margin-top:clamp(28px,3.4vw,44px)}
.sig-stats .stat{min-width:140px}
.sig-stats .stat .fig{font-family:var(--sig-serif);font-style:italic;font-weight:500;
  font-size:clamp(30px,3.4vw,42px);color:#fff;line-height:1}
.sig-stats .stat .cap{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--steel);margin-top:8px;display:block}

/* ---- real Google review, quoted in full ---- */
.sig-quote{max-width:70ch;margin-top:clamp(30px,3.4vw,44px);border-left:1px solid var(--sig-line);padding-left:clamp(20px,2.4vw,30px)}
.sig-quote p{font-family:var(--sig-serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,2vw,22px);line-height:1.55;color:#fff}
.sig-quote cite{display:block;margin-top:16px;font-style:normal;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;color:var(--steel)}

/* ---- editorial photo grid (larger than the standard .lgal city-page use) ---- */
.sig-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2px,.3vw,4px)}
@media(max-width:900px){.sig-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sig-gallery{grid-template-columns:1fr}}
.sig-gallery figure{position:relative;overflow:hidden;background:var(--panel)}
.sig-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sig-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  font-family:var(--cond);letter-spacing:.02em;font-size:13px;color:#fff;
  opacity:0;transition:opacity .2s ease}
.sig-gallery figure:hover figcaption{opacity:1}

/* ---- financing pill (hidden until enabled — see index.html comment) ---- */
.financing-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--dim);
  border:1px solid var(--line);padding:8px 14px;margin-top:14px}
.financing-pill i{width:6px;height:6px;background:var(--red);flex:none}

/* ---- long-form article prose (guides) ---- */
.article{max-width:74ch}
.article h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(19px,2.6vw,24px);color:#fff;margin:38px 0 14px}
.article h2:first-child{margin-top:0}
.article p{color:#D6D6DA;font-size:16.5px;line-height:1.75;margin-bottom:18px}
.article ul{margin:0 0 20px;padding-left:20px;color:#D6D6DA}
.article li{margin-bottom:8px;line-height:1.6}
.article .lead{color:var(--dim);font-size:18px;line-height:1.65;margin-bottom:8px}
.article .callout{background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--red);
  padding:18px 22px;margin:24px 0;font-size:15px;color:var(--dim)}
.article .callout b{color:#fff}
.article .updated{font-family:var(--mono);font-size:12.5px;color:var(--steel);margin-bottom:8px}

/* ---- guide index cards ---- */
.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:720px){.guide-grid{grid-template-columns:1fr}}
.guide-card{background:var(--ink);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;text-decoration:none}
.guide-card .tag{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--red);font-weight:700;margin-bottom:10px}
.guide-card h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.6vw,26px);
  transform:skewX(-8deg);transform-origin:left bottom;line-height:1;color:#fff;margin-bottom:12px}
.guide-card p{color:var(--dim);font-size:15px;margin:0}
.guide-card:hover h3{color:var(--red)}

/* ---- static local-proof photo grid (city pages — no marquee/lightbox JS) ---- */
.lgal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:820px){.lgal{grid-template-columns:repeat(2,1fr)}}
.lshot{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.lshot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.lshot figcaption{padding:10px 12px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:var(--dim);line-height:1.4}


/* ---- Blackout Signature tier cards ----
   .tier-why carries the price justification that used to sit four
   screens down in the FAQ; .tier-cta gives every package its own
   way into the quote form instead of one shared sms: link. */
.tier .tier-why{color:var(--dim);font-size:13.5px;line-height:1.5;margin-top:10px}
.tier .tier-cta{display:inline-flex;margin-top:16px;width:100%;justify-content:center}