/* ==========================================================================
   F&R AUTO BODY — DESIGN SYSTEM
   Theme: shop-floor red / carbon black / chrome / gold.
   Motifs: cut body panels (angled clips), hazard stripes, brushed metal,
   paint mist, panel-gap hairlines. No generic rounded cards anywhere.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --red:#E01212;
  --red-hot:#FF2A1F;
  --red-deep:#8E0202;
  --red-ink:#3A0303;
  --gold:#F2C230;
  --gold-deep:#B8890C;
  --gold-pale:#FFE9A3;

  --ink:#08080A;
  --ink-2:#0E0E12;
  --panel:#131318;
  --panel-2:#1A1A21;
  --panel-3:#23232C;
  --line:#2C2C36;
  --line-2:#3A3A46;

  --chrome-1:#FFFFFF;
  --chrome-2:#D6DBE2;
  --chrome-3:#8E96A3;
  --chrome-4:#565E6B;

  --paper:#FFFFFF;
  --paper-2:#F4F5F7;
  --paper-3:#E7E9ED;

  --text:#EDEFF3;
  --text-dim:#A8AEBA;
  --text-mute:#8D95A3;
  --text-on-light:#14141A;
  --text-on-light-dim:#4A5060;

  --ok:#2ECC71;
  --warn:#F2C230;

  --sp:clamp(1rem,3vw,2rem);
  --gut:clamp(1.15rem,4.5vw,2.5rem);
  --max:1280px;
  --max-narrow:820px;

  --f-display:'Anton',"Arial Narrow",Impact,system-ui,sans-serif;
  --f-cond:'Barlow Condensed',"Arial Narrow",system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);

  --cut:14px;           /* body-panel corner cut */
  --cut-lg:26px;
  --hdr-h:74px;
  --sticky-h:0px;
}
@media (max-width:1239px){ :root{ --sticky-h:66px; } }
@media (max-width:900px){ :root{ --hdr-h:62px; } }

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
html{overflow-x:hidden}
body{
  max-width:100vw;
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.62;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--sticky-h);
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--red);color:#fff}

/* ---------- TYPE ---------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.005em;
  text-transform:uppercase;
}
h1.display{font-size:clamp(2.6rem,1.4rem + 6.2vw,6.2rem)}
h2.display{font-size:clamp(2.05rem,1.15rem + 4.2vw,4.2rem)}
h3.display{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.4rem)}
/* section headings always break cleanly between the silver half and the accent half */
h2.display .h-red,h2.display .h-gold{display:block}
.h-chrome{
  background:linear-gradient(178deg,#fff 4%,var(--chrome-2) 34%,var(--chrome-4) 51%,var(--chrome-2) 63%,#fff 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));
}
.h-red{
  background:linear-gradient(178deg,#FF6A57 2%,var(--red-hot) 30%,var(--red) 52%,var(--red-deep) 78%,#FF7A66 99%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(224,18,18,.35));
}
.h-gold{
  background:linear-gradient(178deg,#FFF6D8 3%,var(--gold) 36%,var(--gold-deep) 56%,var(--gold) 74%,#FFF6D8 98%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
.eyebrow{
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;font-size:.8rem;color:var(--gold);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:none;transform:skewX(-24deg)}
.lede{font-size:clamp(1.04rem,1rem + .45vw,1.28rem);color:var(--text-dim);max-width:66ch;line-height:1.66}
.sec-sub{color:var(--text-dim);max-width:62ch;margin-top:1.1rem;font-size:clamp(1rem,.98rem + .25vw,1.13rem)}
strong,b{font-weight:700;color:#fff}
.on-light strong,.on-light b{color:var(--text-on-light)}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:var(--max-narrow);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(3.6rem,9vw,7.5rem)}
.sec-tight{padding-block:clamp(2.6rem,6vw,4.6rem)}
.sec-head{margin-bottom:clamp(2rem,5vw,3.6rem);max-width:70ch}
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.split{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.split.rev>*:first-child{order:2}}
.split>*{min-width:0}

/* ---------- TEXTURES / MOTIFS ---------- */
.tex-carbon{
  background-color:var(--ink-2);
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.5) 0 2px,transparent 2px 4px);
}
.tex-brushed{
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
}
.hazard{
  height:8px;
  background:repeating-linear-gradient(115deg,var(--gold) 0 16px,var(--ink) 16px 32px);
  opacity:.9;
}
.hazard-red{background:repeating-linear-gradient(115deg,var(--red) 0 16px,var(--ink) 16px 32px)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.mist{position:absolute;inset:0;pointer-events-events:none;pointer-events:none;overflow:hidden}
.mist::before,.mist::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
}
.mist::before{width:min(60vw,620px);aspect-ratio:1;background:radial-gradient(circle,rgba(224,18,18,.5),transparent 68%);top:-18%;right:-12%}
.mist::after{width:min(52vw,520px);aspect-ratio:1;background:radial-gradient(circle,rgba(242,194,48,.26),transparent 66%);bottom:-22%;left:-14%}
/* the signature body-panel cut */
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.cut-lg{clip-path:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg))}
.cut-tr{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--red);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.02rem;line-height:1;padding:1.02rem 1.7rem;
  background:var(--bg);color:var(--fg);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  transition:transform .22s var(--ease),filter .22s var(--ease),box-shadow .22s var(--ease);
  will-change:transform;text-align:center;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-115%);transition:transform .62s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 12px 30px -10px rgba(224,18,18,.62)}
.btn:hover::after{transform:translateX(115%)}
.btn:active{transform:translateY(0)}
.btn-gold{--bg:var(--gold);--fg:#1A1204}
.btn-gold:hover{box-shadow:0 12px 30px -10px rgba(242,194,48,.6)}
.btn-ghost{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 2px var(--line-2)}
.btn-ghost:hover{--bg:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px var(--chrome-3),0 12px 30px -14px rgba(255,255,255,.25)}
.btn-light{--bg:#12121A;--fg:#fff}
.btn-sm{padding:.72rem 1.15rem;font-size:.9rem}
.btn-lg{padding:1.12rem 1.7rem;font-size:1.08rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;color:var(--gold);
  border-bottom:2px solid transparent;transition:.2s var(--ease);padding-bottom:2px;
}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--gold-pale);border-bottom-color:var(--gold)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- HEADER ---------- */
.hdr{
  position:sticky;top:0;z-index:900;overflow-x:clip;
  background:rgba(8,8,10,.82);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:background .3s,box-shadow .3s;
}
.hdr.scrolled{background:rgba(8,8,10,.97);box-shadow:0 12px 34px -18px rgba(0,0,0,.95)}
.hdr-in{display:flex;align-items:center;gap:.7rem;height:var(--hdr-h);min-width:0;flex-wrap:nowrap;max-width:1420px}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 1 auto;min-width:0}
.brand-mark{
  width:auto;height:46px;flex:none;display:block;
  /* The mark is 3 flat colours with no glow of its own; a soft red bloom ties it
     to the rest of the palette and keeps it from floating on the dark header. */
  filter:drop-shadow(0 0 10px rgba(224,18,18,.28));
}
.brand:hover .brand-mark{filter:drop-shadow(0 0 14px rgba(224,18,18,.5))}
.brand-mark,.brand:hover .brand-mark{transition:filter .28s var(--ease)}
.brand-txt{display:flex;flex-direction:column;line-height:1;min-width:0;overflow:hidden}
.brand-name{font-family:var(--f-display);font-size:clamp(1.05rem,.9rem + .6vw,1.24rem);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-family:var(--f-cond);font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){.hdr .brand-sub{display:none}}

.nav{display:none;margin-left:auto;align-items:center;justify-content:flex-end;gap:0;flex:none}
@media (min-width:1240px){.nav{display:flex}}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.3rem;padding:.6rem .55rem;
  font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.075em;
  font-size:.9rem;color:var(--text-dim);transition:color .18s;white-space:nowrap;
}
.nav-link:hover,.nav-link[aria-expanded=true],.nav-link.active{color:#fff}
.nav-link.active{color:var(--gold)}
.nav-link .chev{transition:transform .22s var(--ease)}
.nav-link[aria-expanded=true] .chev{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-8px);
  min-width:290px;background:var(--panel);border:1px solid var(--line);
  padding:.5rem;opacity:0;visibility:hidden;transition:.22s var(--ease);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.95);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  max-height:min(72vh,560px);overflow-y:auto;
}
.drop.wide{min-width:420px;columns:2;column-gap:.4rem}
.nav-item.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{
  display:block;padding:.56rem .8rem;font-size:.94rem;color:var(--text-dim);
  border-left:2px solid transparent;transition:.16s;break-inside:avoid;
}
.drop a:hover{background:rgba(255,255,255,.05);color:#fff;border-left-color:var(--red)}
.drop .drop-all{margin-top:.3rem;border-top:1px solid var(--line);padding-top:.6rem;color:var(--gold);font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;font-weight:700}

.hdr-cta{display:none;align-items:center;gap:.6rem;margin-left:.7rem;flex:none}
@media (min-width:1240px){.hdr-cta{display:flex}}
.hdr-cta .btn{white-space:nowrap;padding-inline:1rem}
.hdr-phone{display:flex;flex-direction:column;line-height:1.1;text-align:right}
.hdr-phone .l{font-family:var(--f-cond);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.hdr-phone .n{font-family:var(--f-cond);font-weight:700;font-size:1.06rem;color:#fff;white-space:nowrap}
.hdr-phone .l{white-space:nowrap}
.hdr-phone:hover .n{color:var(--gold)}
@media (max-width:1519px){.hdr-phone{display:none}}

.lang{
  display:flex;align-items:center;flex:none;margin-left:auto;flex-shrink:0;
  border:1px solid var(--line-2);overflow:hidden;
}
@media (min-width:1240px){.lang{margin-left:.6rem}}
.lang a,.lang span{
  padding:.34rem .62rem;font-family:var(--f-cond);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;transition:.16s;
}
.lang .on{background:var(--red);color:#fff}
.lang .off{color:var(--text-mute)}
.lang .off:hover{color:#fff;background:rgba(255,255,255,.07)}

.burger{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line-2);margin-left:.4rem;
}
@media (min-width:1240px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.25s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:880;background:var(--ink);will-change:transform;
  transform:translateX(100%);transition:transform .34s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;padding:1.2rem var(--gut) 4rem;
  visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
@media (min-width:1240px){.drawer{display:none}}
.drawer .d-sec{border-bottom:1px solid var(--line)}
.drawer .d-top{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1.05rem .2rem;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:1.05rem;color:#fff;
}
.drawer .d-top .chev{transition:transform .25s var(--ease);color:var(--gold)}
.drawer .d-top[aria-expanded=true] .chev{transform:rotate(180deg)}
.drawer .d-body{display:none;padding-bottom:.9rem}
.drawer .d-body.open{display:block}
.drawer .d-body a{display:block;padding:.6rem .2rem .6rem 1rem;color:var(--text-dim);border-left:2px solid var(--line);font-size:1rem}
.drawer .d-body a:hover{color:#fff;border-left-color:var(--red)}
.drawer .d-cta{display:grid;gap:.7rem;margin-top:1.6rem}
.drawer .d-phones{display:grid;gap:.55rem;margin-top:1.4rem}
.drawer .d-phone{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:var(--panel);border-left:3px solid var(--red)}
.drawer .d-phone .who{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--text-mute)}
.drawer .d-phone .num{font-family:var(--f-cond);font-weight:700;font-size:1.15rem;color:#fff}

/* ---------- STICKY MOBILE BAR ---------- */
.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:870;display:grid;grid-template-columns:1fr 1fr 1.25fr;
  background:rgba(8,8,10,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
@media (min-width:1240px){.sticky-bar{display:none}}
.sticky-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:.62rem .3rem;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.78rem;color:var(--text-dim);border-right:1px solid var(--line);
}
.sticky-bar a:last-child{border-right:0;background:var(--red);color:#fff}
.sticky-bar a svg{width:19px;height:19px}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 78% 12%,rgba(224,18,18,.42),transparent 58%),
    radial-gradient(90% 70% at 8% 92%,rgba(242,194,48,.09),transparent 60%),
    linear-gradient(180deg,#0A0A0D 0%,#111116 52%,#08080A 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.42) 0 2px,transparent 2px 5px);
}
.hero-streak{
  position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;
}
.hero-streak i{
  position:absolute;top:-30%;height:160%;width:clamp(40px,7vw,110px);
  background:linear-gradient(180deg,transparent,rgba(224,18,18,.2),transparent);
  transform:skewX(-16deg);
}
.hero-streak i:nth-child(1){left:8%;animation:drift 13s var(--ease) infinite}
.hero-streak i:nth-child(2){left:37%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07),transparent);animation:drift 17s var(--ease) infinite reverse}
.hero-streak i:nth-child(3){left:71%;animation:drift 15s var(--ease) infinite 2s}
@keyframes drift{0%,100%{transform:skewX(-16deg) translateY(-3%)}50%{transform:skewX(-16deg) translateY(3%)}}

.hero-in{position:relative;padding-block:clamp(3.4rem,10vw,7.4rem) clamp(3rem,8vw,6rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,3.4rem);grid-template-columns:minmax(0,1fr);align-items:center}
.hero-grid>*{min-width:0}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr)}}
.hero h1{margin-bottom:1.5rem;font-size:clamp(2.3rem,1.15rem + 5vw,5.1rem);max-width:100%;hyphens:manual}
.hero h1 .l1{display:block;font-size:.44em;color:var(--text-dim);letter-spacing:.04em;margin-bottom:.5rem}
.hero h1 .l2{display:block}
.hero h1 .l3{display:block}
.hero-feats{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.7rem 0 2rem}
.hero-feat{
  display:inline-flex;align-items:center;gap:.45rem;padding:.44rem .82rem;
  background:rgba(255,255,255,.055);border:1px solid var(--line-2);
  font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.83rem;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.hero-feat svg{color:var(--gold);flex:none}
.hero-phones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.hero-phone{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;
  background:rgba(255,255,255,.04);border-left:3px solid var(--gold);transition:.2s var(--ease);
}
.hero-phone:hover{background:rgba(255,255,255,.09);transform:translateX(3px)}
.hero-phone .who{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--text-mute);display:block}
.hero-phone .num{font-family:var(--f-cond);font-weight:700;font-size:1.08rem;color:#fff;display:block;line-height:1.15}

/* hero art: layered "panel" plate */
.hero-art{position:relative;aspect-ratio:4/3.1;width:100%}
.hero-plate{
  position:absolute;inset:0;overflow:hidden;
  background:#0A0A0D;
  border:1px solid var(--chrome-4);
  clip-path:polygon(0 5%,95% 0,100% 92%,5% 100%);
  box-shadow:0 44px 90px -38px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-plate>svg,.hero-plate>img{width:100%;height:100%;object-fit:cover;display:block}
.hero-plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 52% at 50% 46%,rgba(255,255,255,.16),transparent 70%),
    linear-gradient(180deg,transparent 52%,rgba(0,0,0,.6) 100%);
}
.hero-plate.has-photo::after{background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.62) 100%)}
.hero-photo-note{
  position:absolute;z-index:3;left:0;bottom:-2.2rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--text-mute);
}
.hero-photo-note svg{width:15px;height:15px}
.has-photo+.hero-badge~.hero-photo-note,.hero-plate.has-photo~.hero-photo-note{display:none}
.hero-badge{
  position:absolute;z-index:3;background:var(--red);color:#fff;padding:.7rem 1.05rem;
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.84rem;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 16px 40px -14px rgba(224,18,18,.8);
}
.hero-badge.b1{top:6%;left:-2%}
.hero-badge.b2{bottom:8%;right:-2%;background:var(--gold);color:#1A1204;box-shadow:0 16px 40px -14px rgba(242,194,48,.7)}

/* ---------- PANEL / CARD (no rounded boxes) ---------- */
.pnl{
  position:relative;background:var(--panel);border:1px solid var(--line);
  padding:clamp(1.3rem,3vw,2rem);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:transform .28s var(--ease),background .28s,border-color .28s;
}
.pnl-hover:hover{transform:translateY(-5px);background:var(--panel-2);border-color:var(--line-2)}
.pnl::before{
  content:"";position:absolute;left:0;top:var(--cut);bottom:0;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--ease);
}
.pnl-hover:hover::before{transform:scaleY(1)}
.pnl.gold::before{background:var(--gold)}
.pnl-light{background:var(--paper);color:var(--text-on-light);border-color:var(--paper-3)}

/* service card */
.svc{display:flex;flex-direction:column;gap:.85rem;height:100%}
.svc-ico{
  width:52px;height:52px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(224,18,18,.22),rgba(224,18,18,.05));
  border:1px solid rgba(224,18,18,.32);color:var(--red-hot);
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
}
.svc.gold .svc-ico{background:linear-gradient(140deg,rgba(242,194,48,.22),rgba(242,194,48,.05));border-color:rgba(242,194,48,.34);color:var(--gold)}
.svc h3{font-family:var(--f-cond);font-weight:700;font-size:1.32rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.svc p{color:var(--text-dim);font-size:.97rem;flex:1}

/* stat / trust strip */
.trust-strip{border-block:1px solid var(--line);background:var(--ink-2)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.trust-cell{padding:clamp(1.4rem,3vw,2.1rem) clamp(1rem,2.4vw,1.7rem);border-right:1px solid var(--line);position:relative}
.trust-cell:last-child{border-right:0}
@media (max-width:900px){.trust-cell{border-right:0;border-bottom:1px solid var(--line)}.trust-cell:last-child{border-bottom:0}}
.trust-cell .tc-h{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
.trust-cell .tc-h svg{color:var(--gold);flex:none}
.trust-cell p{color:var(--text-mute);font-size:.92rem}


/* ---------- BRAND MARQUEE ---------- */
.brands-sec{overflow:hidden;background:var(--ink-2);border-block:1px solid var(--line)}
.brand-marquee{
  position:relative;display:flex;width:max-content;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.brand-track{
  display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.1rem);flex:none;
  padding-inline:clamp(.2rem,.7vw,.55rem);
  animation:brand-scroll 68s linear infinite;
}
.brand-marquee.paused .brand-track{animation-play-state:paused}
.brand-marquee.static{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.brand-marquee.static .brand-track{animation:none}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.brand-track{animation:none}}
.brand-tile{
  flex:none;display:grid;place-items:center;
  width:clamp(104px,17vw,150px);aspect-ratio:316/276;
  background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:border-color .25s,transform .25s var(--ease);
}
.brand-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) brightness(.92);transition:filter .3s var(--ease)}
.brand-tile:hover{border-color:var(--line-2);transform:translateY(-3px)}
.brand-tile:hover img{filter:none}

/* ---------- REAL PHOTOGRAPHY ---------- */
.photo-shot{
  position:relative;width:100%;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.photo-shot img{width:100%;height:100%;object-fit:cover;display:block}
.photo-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.42) 100%);
}
.gal-item.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gal-item.has-photo .gal-ph{display:none}
.hero-plate.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- BEFORE / AFTER with real photography ---------- */
.ba-layer img{width:100%;height:100%;object-fit:cover;display:block}
.ba-cap{margin-top:.8rem;font-size:.84rem;color:var(--text-mute);text-align:center}

/* ---------- BEFORE / AFTER ---------- */
.ba{
  position:relative;width:100%;aspect-ratio:1000/799;overflow:hidden;user-select:none;touch-action:pan-y;
  border:1px solid var(--line-2);cursor:ew-resize;background:var(--ink-2);
  clip-path:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg));
}
.ba-layer{position:absolute;inset:0}
.ba-layer.after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-layer svg{width:100%;height:100%}
.ba-tag{
  position:absolute;top:1rem;padding:.4rem .8rem;font-family:var(--f-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;z-index:4;
}
.ba-tag.l{left:1rem;background:var(--red);color:#fff}
.ba-tag.r{right:1rem;background:var(--gold);color:#1A1204}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;z-index:5;
  transform:translateX(-50%);box-shadow:0 0 22px rgba(255,255,255,.75);
}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;background:#fff;display:grid;place-items:center;color:#111;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  box-shadow:0 8px 26px rgba(0,0,0,.6);
}
.ba-knob svg{width:22px;height:22px}

/* ---------- PROCESS ---------- */
.proc{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:700px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.proc{grid-template-columns:repeat(3,1fr)}}
.proc-step{
  position:relative;padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line);margin:-.5px;
  background:var(--ink-2);transition:background .3s,transform .3s var(--ease);overflow:hidden;
}
.proc-step:hover{background:var(--panel);z-index:2}
.proc-step::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.proc-step:hover::after{transform:scaleX(1)}
.proc-n{
  font-family:var(--f-display);font-size:clamp(3rem,7vw,4.4rem);line-height:.8;
  /* Outlined numerals. The stroke has to actually be visible against the panel —
     #3A3A46 measured ~1.6:1, which is decoration nobody can see. */
  color:transparent;-webkit-text-stroke:2px #6E7688;margin-bottom:.9rem;transition:.35s var(--ease);
}
@supports not (-webkit-text-stroke: 1px #000){ .proc-n{color:#6E7688} }
.proc-step:hover .proc-n{-webkit-text-stroke-color:var(--red)}
.proc-step h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.28rem;margin-bottom:.55rem}
.proc-step p{color:var(--text-dim);font-size:.97rem}

/* ---------- REVIEW MAGNET ---------- */
.mag{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--red-ink),var(--ink) 46%,#12060A);
  border:1px solid rgba(242,194,48,.24);
  padding:clamp(1.8rem,5vw,3.6rem);
  clip-path:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg));
  text-align:center;
}
.mag::before{
  content:"";position:absolute;width:min(70vw,700px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,194,48,.2),transparent 66%);
  top:-40%;left:50%;transform:translateX(-50%);filter:blur(50px);pointer-events:none;
}
.mag>*{position:relative}
.stars{display:flex;justify-content:center;gap:clamp(.35rem,1.6vw,.75rem);margin:1.8rem 0 1rem}
.star{
  width:clamp(46px,10vw,68px);height:clamp(46px,10vw,68px);
  color:var(--line-2);transition:transform .2s var(--ease-snap),color .2s;
}
.star svg{width:100%;height:100%;fill:currentColor}
.star:hover{transform:scale(1.16) rotate(-6deg)}
.star.lit{color:var(--gold);filter:drop-shadow(0 0 14px rgba(242,194,48,.65))}
.star.pulse{animation:starpop .42s var(--ease-snap)}
@keyframes starpop{0%{transform:scale(1)}45%{transform:scale(1.32) rotate(-9deg)}100%{transform:scale(1)}}
.mag-hint{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.2em;font-size:.84rem;color:var(--text-mute)}
.mag-panel{display:none;margin-top:1.6rem;text-align:left;max-width:560px;margin-inline:auto}
.mag-panel.show{display:block;animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mag-panel h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.4rem,3.5vw,2rem);text-align:center;margin-bottom:.6rem}
.mag-panel p{color:var(--text-dim);text-align:center;margin-bottom:1.4rem}
.mag-note{font-size:.85rem;color:var(--text-mute);display:flex;align-items:center;gap:.45rem;justify-content:center;margin-top:.9rem}
.mag-note svg{color:var(--ok);flex:none}

/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.11em;font-size:.82rem;color:var(--text-dim)}
.field .req{color:var(--red-hot)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:.86rem 1rem;background:rgba(255,255,255,.045);
  border:1px solid var(--line-2);color:#fff;transition:.18s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
textarea{min-height:118px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.075)}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23F2C230' d='M7 9 0 1.7 1.6 0 7 5.6 12.4 0 14 1.7z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.radio-row{display:flex;flex-wrap:wrap;gap:.5rem}
.radio-row label{
  display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:.18s;
  font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.85rem;color:var(--text-dim);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.radio-row input{position:absolute;opacity:0;width:0;height:0}
.radio-row input:checked+span,.radio-row label:has(input:checked){color:#fff}
.radio-row label:has(input:checked){background:var(--red);border-color:var(--red)}
.radio-row label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.form-note{font-size:.86rem;color:var(--text-mute);margin-top:.9rem;display:flex;gap:.5rem;align-items:flex-start}
.form-note svg{flex:none;margin-top:3px;color:var(--gold)}
.form-grid{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media (min-width:620px){.form-grid.two{grid-template-columns:1fr 1fr}}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;width:100%;
  text-align:left;padding:1.25rem .2rem;font-family:var(--f-cond);font-weight:700;
  font-size:clamp(1.06rem,1rem + .5vw,1.28rem);text-transform:uppercase;letter-spacing:.02em;
  color:var(--text);transition:color .2s;line-height:1.28;
}
.faq-q:hover{color:#fff}
.faq-q .ico{
  flex:none;width:26px;height:26px;position:relative;margin-top:2px;
  border:1px solid var(--line-2);display:grid;place-items:center;transition:.25s var(--ease);
}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:var(--gold);transition:.25s var(--ease)}
.faq-q .ico::before{width:12px;height:2px}
.faq-q .ico::after{width:2px;height:12px}
.faq-q[aria-expanded=true] .ico{background:var(--red);border-color:var(--red);transform:rotate(135deg)}
.faq-q[aria-expanded=true] .ico::before,.faq-q[aria-expanded=true] .ico::after{background:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.faq-a.open{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 2.6rem 1.4rem .2rem;color:var(--text-dim)}
.faq-a p+p{padding-top:.8rem}

/* ---------- GALLERY ---------- */
.gal{display:grid;gap:clamp(.7rem,1.6vw,1.1rem);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.gal-item{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);cursor:default;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.gal-item svg{width:100%;height:100%}
.gal-cap{
  position:absolute;inset:auto 0 0 0;padding:1.7rem .85rem .75rem;
  background:linear-gradient(transparent,rgba(0,0,0,.5) 34%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.96));
}
.gal-cap b{line-height:1.15}
.gal-cap span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.79rem;line-height:1.4;margin-top:.15rem;
}
.gal-item.has-photo .gal-cap{
  background:linear-gradient(transparent,rgba(0,0,0,.7) 22%,rgba(0,0,0,.94) 58%,rgba(0,0,0,.98));
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.gal-item.has-photo .gal-cap span{color:#C9CFDA}
.gal-cap b{display:block;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem}
.gal-cap span{font-size:.85rem;color:var(--text-dim)}
.gal-ph{
  position:absolute;top:.75rem;left:.75rem;z-index:2;padding:.28rem .6rem;
  background:rgba(242,194,48,.16);border:1px dashed rgba(242,194,48,.55);color:var(--gold);
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;
}
.gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.filter-chip{
  padding:.52rem .95rem;
  font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.87rem;
  color:var(--text-dim);background:rgba(255,255,255,.045);border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .18s,background .18s,border-color .18s;
}
.filter-chip:hover{color:#fff;background:rgba(255,255,255,.09);border-color:var(--line-2)}
.filter-chip.sel{color:var(--text-on-light);background:var(--gold);border-color:var(--gold);font-weight:700}
.filter-chip.sel:hover{background:var(--gold-pale);border-color:var(--gold-pale)}

/* ---------- AREA CARDS ---------- */
.area{display:flex;flex-direction:column;gap:.7rem;height:100%}
.area-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.area h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.26rem;line-height:1.15}
.area .dist{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.11em;font-size:.74rem;color:var(--gold);white-space:nowrap;flex:none}
.area p{color:var(--text-dim);font-size:.95rem;flex:1}
.roads{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.road{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;padding:.2rem .5rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-mute);letter-spacing:.02em;
}

/* ---------- MAP EMBED ---------- */
.map-embed{
  position:relative;border:1px solid var(--line);background:var(--ink-2);
  clip-path:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg));
  line-height:0;
}
.map-embed iframe{width:100%;height:clamp(280px,42vw,420px);display:block;filter:grayscale(.25) contrast(1.05)}

/* ---------- GHL SLOTS ---------- */
.ghl-slot{
  position:relative;border:2px dashed var(--line-2);background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px),var(--ink-2);
  padding:clamp(1.8rem,4vw,3rem);text-align:center;min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
}
.ghl-slot .tag{
  font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.78rem;color:var(--gold);border:1px solid rgba(242,194,48,.4);padding:.3rem .8rem;
}
.ghl-slot p{color:var(--text-mute);font-size:.9rem;max-width:44ch}
.ghl-slot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--chrome-3);background:rgba(255,255,255,.05);padding:.15rem .4rem}
.ghl-body{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}
.ghl-dev{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line-2);font-family:var(--f-cond);
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--gold)}
html.dev .ghl-dev[hidden]{display:block}
html.dev .ghl-slot{border-color:var(--gold)}

/* public-review option — always shown, at every star rating */
.mag-public{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;gap:.8rem}
.mag-public>p{color:var(--text-mute);font-size:.9rem;max-width:46ch;text-align:center}
.mag-public-soon{font-size:.85rem}

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo-ph{
  position:relative;width:100%;background:linear-gradient(150deg,var(--panel-2),var(--ink-2));
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.photo-ph::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:30px 30px;
}
.photo-ph.has-photo::before{display:none}
.photo-ph.has-photo .ph-in{display:none}
.photo-ph .ph-in{position:relative;text-align:center;padding:1.4rem;color:var(--text-mute)}
.gal-item.has-photo svg{display:none}
.ba-layer.has-photo svg{display:none}
.photo-ph .ph-in svg{margin:0 auto .7rem;color:var(--line-2)}
.photo-ph .ph-in span{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem}

/* ---------- CTA BAND ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--red-deep) 0%,var(--red) 46%,#A00707 100%);
}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.22;
  background:repeating-linear-gradient(115deg,rgba(0,0,0,.5) 0 22px,transparent 22px 44px);
}
.cta-band .wrap{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:56ch}

/* ---------- FOOTER ---------- */
.ftr{background:#050507;border-top:1px solid var(--line);padding-block:clamp(2.6rem,6vw,4.4rem) 1.5rem}
.ftr-grid{display:grid;gap:clamp(1.8rem,4vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:2.6rem}
.ftr-brand{grid-column:1/-1}
@media (min-width:900px){.ftr-brand{grid-column:span 2}}
.ftr h2{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.86rem;color:var(--gold);margin-bottom:1rem}
.ftr ul{display:grid;gap:.5rem}
.ftr a{color:var(--text-mute);font-size:.93rem;transition:.16s}
.ftr a:hover{color:#fff}
.ftr-bottom{border-top:1px solid var(--line);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between}
.ftr-bottom p,.ftr-bottom a{font-size:.83rem;color:var(--text-mute)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:1.1rem}
.socials{display:flex;gap:.55rem;margin-top:1.1rem}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);
  color:var(--text-dim);transition:.2s var(--ease);
}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.ftr-addr{color:var(--text-dim);font-size:.95rem;line-height:1.75;margin-top:1rem}
.ftr-addr a:hover{color:var(--gold)}

/* ---------- COOKIE ---------- */
.cookie{
  position:fixed;left:1rem;right:1rem;bottom:calc(var(--sticky-h) + 1rem);z-index:960;
  background:var(--panel);border:1px solid var(--line-2);padding:1.1rem 1.3rem;
  display:none;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:space-between;
  box-shadow:0 28px 60px -20px rgba(0,0,0,.95);max-width:760px;margin-inline:auto;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.cookie.show{display:flex}
.cookie p{font-size:.9rem;color:var(--text-dim);flex:1;min-width:230px}
.cookie p a{color:var(--gold);text-decoration:underline}

/* ---------- PAGE HEAD ---------- */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink-2)}
.phead::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 88% 0%,rgba(224,18,18,.3),transparent 62%),
             radial-gradient(70% 100% at 4% 100%,rgba(242,194,48,.1),transparent 60%);
}
.phead::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 5px),
             repeating-linear-gradient(-45deg,rgba(0,0,0,.4) 0 2px,transparent 2px 5px);
}
.phead .wrap{position:relative;padding-block:clamp(2.4rem,7vw,5rem)}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.83rem;color:var(--text-mute);margin-bottom:1.2rem}
.crumb a:hover{color:var(--gold)}
.crumb .sep{color:var(--line-2)}
.crumb [aria-current]{color:var(--text-dim)}

/* ---------- PROSE ---------- */
.prose h2{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);margin:2.4rem 0 .9rem;line-height:1.2}
.prose h3{font-family:var(--f-cond);font-weight:700;font-size:1.24rem;text-transform:uppercase;letter-spacing:.03em;margin:1.9rem 0 .6rem}
.prose p{margin-bottom:1.05rem;color:var(--text-dim)}
.prose ul{display:grid;gap:.6rem;margin:0 0 1.3rem}
.prose ul li{display:flex;gap:.7rem;color:var(--text-dim)}
.prose ul li::before{content:"";width:7px;height:7px;background:var(--red);flex:none;margin-top:.62rem;transform:rotate(45deg)}
.prose ol{display:grid;gap:.6rem;margin:0 0 1.3rem;counter-reset:n}
.prose ol li{display:flex;gap:.8rem;color:var(--text-dim);counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);font-family:var(--f-cond);font-weight:700;color:var(--gold);flex:none;font-size:.95rem;margin-top:2px}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold-pale)}
/* buttons and arrow links keep their own styling inside prose blocks */
.prose .btn{color:var(--fg);text-decoration:none}
.prose .btn-ghost,.prose .btn-light{color:#fff}
.prose .link-arrow{color:var(--gold);text-decoration:none}
.prose .road{color:var(--text-mute);text-decoration:none}
.prose .road:hover{color:#fff}
.prose>*:first-child{margin-top:0}

.callout{
  border-left:3px solid var(--gold);background:rgba(242,194,48,.07);padding:1.1rem 1.3rem;margin:1.6rem 0;
}
.callout p:last-child{margin-bottom:0}
.callout.red{border-left-color:var(--red);background:rgba(224,18,18,.08)}
.disclaimer{font-size:.86rem;color:var(--text-mute);border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}

/* ---------- REVEAL ----------
   Only hides when JS is confirmed running (html.js is set inline in <head>).
   Without JS — or if the observer never fires — every section stays visible. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* ---------- UTIL ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gold);color:#111;padding:.8rem 1.2rem;font-weight:700}
.skip:focus{left:0}
.center{text-align:center}
.mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.mb1{margin-bottom:1rem}.mb2{margin-bottom:2rem}
.hide{display:none!important}
.text-gold{color:var(--gold)}.text-red{color:var(--red-hot)}.text-dim{color:var(--text-dim)}
.nowrap{white-space:nowrap}
.badge-soon{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-cond);text-transform:uppercase;
  letter-spacing:.14em;font-size:.72rem;color:var(--gold);border:1px dashed rgba(242,194,48,.5);padding:.24rem .6rem;
}
@media print{
  .hdr,.sticky-bar,.cookie,.drawer,.ghl-slot{display:none!important}
  body{background:#fff;color:#000}
}


/* ==========================================================================
   MOBILE PASS
   Phones are most of this traffic — somebody standing next to a damaged car.
   ========================================================================== */
@media (max-width:767px){
  /* Tighter vertical rhythm so the page is not endless on a phone */
  .sec{padding-block:clamp(2.8rem,8vw,3.6rem)}
  .sec-tight{padding-block:2rem}
  .sec-head{margin-bottom:1.6rem}
  .hero-in{padding-block:2.2rem 2.4rem}

  /* Every tappable thing clears 44px and full-width CTAs stop being half-width */
  .btn{padding:1.05rem 1.3rem;min-height:48px}
  .btn-lg{padding:1.1rem 1.35rem;font-size:1.05rem;min-height:52px}
  .btn-row .btn{flex:1 1 100%}
  .hero .btn-row .btn{flex:1 1 100%}
  .hero-phone{flex:1 1 100%;min-height:52px}
  .faq-q{padding-block:1.15rem;min-height:56px}
  .filter-chip,.swatch,.socials a{min-height:44px}
  .sticky-bar a{min-height:56px}

  /* Stop long headings from overflowing on 360px devices */
  h1.display,h2.display{overflow-wrap:break-word}
  .hero h1{font-size:clamp(2.1rem,7.6vw,3rem)}
  h2.display{font-size:clamp(1.75rem,6.6vw,2.5rem)}

  /* Cards and panels get their breathing room back */
  .pnl{padding:1.15rem}

  /* Trust strip goes 2x2 on phones. Stacked it ran ~480px tall and pushed
     everything below it — including the brands strip — off the first screens. */
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-cell{padding:1rem .9rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .trust-cell:nth-child(2n){border-right:0}
  .trust-cell:nth-last-child(-n+2){border-bottom:0}
  .trust-cell .tc-h{font-size:.97rem;letter-spacing:.03em;gap:.35rem;margin-bottom:.25rem}
  .trust-cell p{font-size:.82rem;line-height:1.45}
  .mag{padding:1.4rem 1.1rem}
  .proc-step{padding:1.35rem 1.15rem}
  .ghl-slot{padding:1.5rem 1.1rem;min-height:0}

  /* Forms: 16px inputs so iOS does not zoom the page on focus */
  input[type=text],input[type=tel],input[type=email],select,textarea{font-size:16px;padding:.9rem 1rem}
  .radio-row label{flex:1 1 auto;justify-content:center;min-height:48px}

  /* Before/after is easier to grab with a bigger knob */
  .ba-knob{width:60px;height:60px}
  .ba-tag{font-size:.68rem;padding:.32rem .6rem;top:.6rem}
  .ba-tag.l{left:.6rem}.ba-tag.r{right:.6rem}

  /* The gallery reads better as two-up than one giant tile per screen */
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .gal-cap{padding:1rem .6rem .6rem}
  .gal-cap b{font-size:.82rem}
  .gal-cap span{font-size:.72rem}
  .gal-ph{font-size:.6rem;padding:.2rem .4rem}

  /* Marquee moves a bit quicker so it reads as motion on a small screen */
  .brand-track{animation-duration:44s}

  /* Cookie bar must not bury the sticky call bar */
  .cookie{left:.6rem;right:.6rem;padding:.9rem 1rem;gap:.7rem}
  .cookie p{font-size:.84rem;min-width:0}
  .cookie .btn-row{width:100%}
  .cookie .btn{flex:1 1 0}

  .roads{gap:.3rem}
  .road{font-size:.68rem;padding:.18rem .42rem}
  .crumb{font-size:.78rem}
  .ftr-grid{gap:1.6rem}
}

/* the padded language switch was crowding the wordmark on phones */
@media (max-width:479px){
  /* Sized against the fallback face (Arial Narrow), not Anton — if the webfont
     is slow or blocked the wordmark still must not ellipsis. */
  .hdr-in{gap:.45rem}
  .burger{margin-left:.2rem;width:42px;height:42px}
  .lang a,.lang span{padding:.6rem .55rem;font-size:.76rem;letter-spacing:.05em}
  .brand{gap:.45rem}
  .brand-mark{height:38px}
  .brand-name{font-size:.95rem}
}

/* Under ~410px the wordmark stacks instead of shrinking to unreadable. */
@media (max-width:409px){
  .brand-name{white-space:normal;overflow:visible;text-overflow:clip;
    font-size:.92rem;line-height:1.05;max-width:10ch}
  .brand-txt{overflow:visible}
}

@media (max-width:380px){
  :root{--gut:1rem}
  .hero-feat{font-size:.74rem;padding:.36rem .6rem}
  .brand-tile{width:96px}
}

/* Tablet: three-up services, two-up areas */
@media (min-width:768px) and (max-width:1023px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Coarse pointers: no hover-only affordances, bigger hit areas */
@media (hover:none){
  .pnl-hover:hover{transform:none}
  .brand-tile:hover{transform:none}
  .brand-tile img{filter:none}
  .btn:hover{transform:none}
}

/* Landscape phones: the hero should not eat the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .hero-in{padding-block:1.6rem}
  .hero h1{font-size:clamp(1.8rem,5vw,2.4rem)}
  .hero-art{display:none}
}


/* ==========================================================================
   TOUCH TARGETS
   Anything you tap with a thumb clears ~44px. Scoped to coarse pointers and
   tablet-and-below so the desktop layout keeps its tighter rhythm.
   ========================================================================== */
@media (pointer:coarse),(max-width:1023px){
  /* language switch was 41x32 */
  .lang a,.lang span{padding:.62rem .9rem;font-size:.86rem}
  /* the logo is a link home — it needs a thumb-sized hit area too */
  .brand{min-height:46px}

  /* footer links were 18px tall */
  .ftr ul{gap:.15rem}
  .ftr ul li a,.ftr-legal a{display:inline-block;padding-block:.62rem;min-height:44px}
  .ftr-bottom{gap:.4rem 1.2rem}
  .socials a{width:46px;height:46px}

  /* inline "see all …" links were 29px tall */
  .link-arrow{padding-block:.62rem;min-height:44px}

  /* road chips are links on the service and area pages */
  a.road{padding:.62rem .8rem;font-size:.76rem;min-height:40px;display:inline-flex;align-items:center}

  /* small buttons and filter chips */
  .btn-sm{padding:.85rem 1.2rem;min-height:44px}
  .filter-chip{padding:.7rem 1rem;min-height:44px}
  /* breadcrumb links were 33px tall */
  .crumb{gap:.3rem .2rem}
  .crumb a{display:inline-flex;align-items:center;padding:.55rem .35rem;min-height:44px}
  .crumb [aria-current],.crumb .sep{display:inline-flex;align-items:center;min-height:44px}

  /* the phone/address links inside the footer <address> were 18px tall */
  .ftr-addr{line-height:1.5}
  .ftr-addr a{display:inline-flex;align-items:center;padding-block:.6rem;min-height:44px}

  /* short footer nav labels ("FAQ") were only 29px wide */
  .ftr ul li a,.ftr-legal a{min-width:48px}
  .faq-q{min-height:52px}
}