/* self-hosted fonts (latin woff2, downloaded from Google Fonts 2026-07-17) */
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/Barlow-400i.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Rajdhani-500.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Rajdhani-600.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Rajdhani-700.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ShareTechMono-400.woff2') format('woff2')}

/* Audio Electronics Indy - design system v2
   Client-loved elements kept 1:1: AEBanner collage hero (the box build story),
   amp-boot nav (staggered power-on + neon beacon + green/purple hover glitch,
   lifted from the AS-theme header.css), white content body like the live site.
   Fonts: Rajdhani (display) · Barlow (body) · Share Tech Mono (labels) */

:root{
  --bg:#0f1216;
  --panel:#151a20;
  --line-d:rgba(230,240,248,.12);
  --paper:#ffffff;
  --paper2:#f2f5f8;
  --line:#e3e9ee;
  --text:#16202a;
  --dim:#5b6873;
  --text-inv:#eef3f7;
  --dim-inv:#9fadb9;
  --volt:#29a9e2;
  --volt-hi:#5cc6f2;
  --volt-deep:#0f7fb5;
  --red:#ff3b30;
  --cyan:#2ee6ff;
  --glitch-g:#49fc00;
  --glitch-p:#b300fc;
  --beacon:#00bfff;
  --disp:'Rajdhani',sans-serif;
  --body:'Barlow',sans-serif;
  --mono:'Share Tech Mono',monospace;
  --gutter:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:17.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--volt);color:#04121c}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.06}
.volt{color:var(--volt-deep)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--volt-hi)}
.lede{color:var(--dim);font-size:clamp(17px,1.4vw,19.5px)}

/* ---------- header: the amp boot ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:900;height:70px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:#1a1a1a;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hd .mark img{height:34px;width:auto}
.hd nav{display:flex;gap:26px;align-items:center}
/* staggered power-on, like channels lighting up */
html.js .hd nav>.boot{opacity:0;animation:boot-in .5s ease forwards}
html.js .hd nav>.boot:nth-child(1){animation-delay:.1s}
html.js .hd nav>.boot:nth-child(2){animation-delay:.2s}
html.js .hd nav>.boot:nth-child(3){animation-delay:.3s}
html.js .hd nav>.boot:nth-child(4){animation-delay:.4s}
html.js .hd nav>.boot:nth-child(5){animation-delay:.5s}
html.js .hd nav>.boot:nth-child(6){animation-delay:.6s}
html.js .hd nav>.boot:nth-child(7){animation-delay:.7s}
html.js .hd nav>a.tel{opacity:0;animation:boot-in .5s ease .8s forwards}
html.js .hd nav>a.cta{opacity:0;animation:boot-in .5s ease .9s forwards}
@keyframes boot-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .hd nav>.boot,html.js .hd nav>a.tel,html.js .hd nav>a.cta{animation:none;opacity:1}}
.hd nav a{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:#fff;transition:color .2s;position:relative;display:inline-block}
.hd nav .boot>a:hover,.hd nav a[aria-current]{color:var(--volt-hi)}
/* neon beacon dot (flickers on hover) */
.beacon{
  display:none;position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--beacon);
  box-shadow:0 0 5px var(--beacon),0 0 10px var(--beacon);
}
.hd nav .boot>a:hover .beacon,.has-drop.open>a .beacon{display:block;animation:neon-flicker 1.5s infinite}
@keyframes neon-flicker{
  0%,100%{opacity:1;box-shadow:0 0 5px var(--beacon),0 0 10px var(--beacon)}
  50%{opacity:.7;box-shadow:0 0 2px var(--beacon),0 0 5px var(--beacon)}
}
/* green/purple RGB glitch on hover (from the AS theme) */
.hd nav .boot>a::before,.hd nav .boot>a::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.hd nav .boot>a:hover::before{
  opacity:1;color:#fff;text-shadow:0 0 2px var(--glitch-g),-1px 0 var(--glitch-g);
  clip-path:inset(0 0 100% 0);animation:glitch-anim 2s infinite linear alternate-reverse;
}
.hd nav .boot>a:hover::after{
  opacity:1;color:#fff;text-shadow:0 0 2px var(--glitch-p),1px 0 var(--glitch-p);
  clip-path:inset(0 0 100% 0);animation:glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim{
  0%{clip-path:inset(42% 0 28% 0)}10%{clip-path:inset(65% 0 5% 0)}20%{clip-path:inset(98% 0 0 0)}
  30%{clip-path:inset(54% 0 16% 0)}40%{clip-path:inset(19% 0 51% 0)}50%{clip-path:inset(88% 0 0 0)}
  60%{clip-path:inset(45% 0 25% 0)}70%{clip-path:inset(36% 0 34% 0)}80%{clip-path:inset(16% 0 54% 0)}
  90%{clip-path:inset(82% 0 0 0)}100%{clip-path:inset(14% 0 56% 0)}
}
@keyframes glitch-anim-2{
  0%{clip-path:inset(65% 0 5% 0)}10%{clip-path:inset(98% 0 0 0)}20%{clip-path:inset(54% 0 16% 0)}
  30%{clip-path:inset(76% 0 0 0)}40%{clip-path:inset(88% 0 0 0)}50%{clip-path:inset(45% 0 25% 0)}
  60%{clip-path:inset(27% 0 43% 0)}70%{clip-path:inset(61% 0 9% 0)}80%{clip-path:inset(31% 0 39% 0)}
  90%{clip-path:inset(12% 0 58% 0)}100%{clip-path:inset(23% 0 47% 0)}
}
@media(prefers-reduced-motion:reduce){
  .hd nav .boot>a:hover::before,.hd nav .boot>a:hover::after,.beacon{animation:none !important}
}
.hd nav a.tel{color:var(--volt-hi);font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.hd nav a.cta{color:#04121c;background:var(--volt);padding:9px 18px;border-radius:4px;transition:.2s}
.hd nav a.cta:hover{background:var(--volt-hi);color:#04121c}
.has-drop{position:relative}
.has-drop .drop{
  position:absolute;top:100%;left:-12px;min-width:230px;padding:10px 0;display:none;
  background:#1e242b;border:1px solid var(--line-d);border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.has-drop:hover .drop,.has-drop.open .drop{display:block}
.has-drop .drop a{display:block;padding:9px 18px;font-size:14px;letter-spacing:.05em;color:#cfd9e2}
.has-drop .drop a::before,.has-drop .drop a::after{content:none !important}
.has-drop .drop a:hover{background:rgba(41,169,226,.14);color:var(--volt-hi)}
.mnav-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;padding:8px 14px;cursor:pointer;border-radius:4px}
@media(max-width:1080px){
  .hd nav{display:none;position:fixed;top:70px;left:0;right:0;max-height:calc(100vh - 70px);overflow:auto;
    flex-direction:column;gap:0;align-items:stretch;background:#1a1a1a;border-bottom:1px solid var(--line-d);padding:6px 0 16px}
  .hd nav.open{display:flex}
  .hd nav a{padding:13px var(--gutter)}
  .hd nav .boot>a{display:block}
  .has-drop .drop{position:static;display:none;border:0;box-shadow:none;background:rgba(255,255,255,.04);border-radius:0}
  .has-drop.open .drop{display:block}
  .hd nav a.cta{margin:10px var(--gutter) 0;text-align:center}
  .mnav-btn{display:block}
}

/* ---------- hero: the AEBanner collage, made legible ---------- */
.hero{
  position:relative;min-height:88svh;display:flex;align-items:center;
  padding:140px 0 90px;overflow:hidden;color:var(--text-inv);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(10,13,17,.93) 0%,rgba(10,13,17,.82) 34%,rgba(10,13,17,.45) 62%,rgba(10,13,17,.30) 100%),
    linear-gradient(0deg,rgba(10,13,17,.55) 0%,transparent 30%),
    url('https://audioelectronicsindy.com/wp-content/uploads/2025/06/AEBanner-1536x768.png');
  background-size:cover;background-position:center right;
}
@media(max-width:760px){
  .hero-bg{
    background-image:
      linear-gradient(180deg,rgba(10,13,17,.92) 0%,rgba(10,13,17,.75) 55%,rgba(10,13,17,.55) 100%),
      url('https://audioelectronicsindy.com/wp-content/uploads/2025/06/AEBanner-768x384.png');
    background-position:72% center;
  }
}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-tx{max-width:720px}
.hero h1{font-size:clamp(40px,5.6vw,72px);margin:18px 0 6px;color:#fff}
.hero .lede{max-width:54ch;margin:18px 0 28px;color:var(--dim-inv)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:14px 28px;border-radius:4px;display:inline-block;transition:.2s}
.btn-volt{background:var(--volt);color:#04121c;box-shadow:0 0 24px rgba(41,169,226,.35)}
.btn-volt:hover{background:var(--volt-hi);transform:translateY(-2px);box-shadow:0 0 34px rgba(41,169,226,.5)}
.btn-ghost{border:1px solid rgba(238,243,247,.45);color:#fff}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt-hi);transform:translateY(-2px)}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:13px;color:var(--dim-inv);letter-spacing:.05em}
.trust b{color:var(--volt-hi);font-weight:400;display:inline-block;font-variant-numeric:tabular-nums;text-align:right}
.hero-cred{
  position:absolute;right:var(--gutter);bottom:16px;z-index:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,243,247,.55);
}
@media(max-width:760px){.hero-cred{display:none}}

/* glitch (hero: red/cyan like the site's own fix plugin) */
.glitch{position:relative;display:inline-block;color:var(--volt-hi);text-shadow:0 0 30px rgba(41,169,226,.4)}
.glitch::before,.glitch::after{
  content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.glitch::before{color:var(--red);z-index:-1;animation:gl-1 6s infinite steps(1)}
.glitch::after{color:var(--cyan);z-index:-2;animation:gl-2 6s infinite steps(1)}
@keyframes gl-1{
  0%,4.5%,20%,24.5%,55%,59.5%,100%{opacity:0;transform:none;clip-path:none}
  2%,3%{opacity:.9;transform:translate(4px,-2px);clip-path:polygon(0 10%,100% 10%,100% 38%,0 38%)}
  21%,22%{opacity:.9;transform:translate(-4px,2px);clip-path:polygon(0 55%,100% 55%,100% 82%,0 82%)}
  56%,57.5%{opacity:.9;transform:translate(3px,1px);clip-path:polygon(0 30%,100% 30%,100% 60%,0 60%)}
}
@keyframes gl-2{
  0%,5%,20.5%,25%,55.5%,60%,100%{opacity:0;transform:none;clip-path:none}
  2.5%,4%{opacity:.9;transform:translate(-4px,2px);clip-path:polygon(0 45%,100% 45%,100% 72%,0 72%)}
  22%,23.5%{opacity:.9;transform:translate(4px,-1px);clip-path:polygon(0 8%,100% 8%,100% 32%,0 32%)}
  57%,58.5%{opacity:.9;transform:translate(-3px,-2px);clip-path:polygon(0 62%,100% 62%,100% 90%,0 90%)}
}
@media(prefers-reduced-motion:reduce){.glitch::before,.glitch::after{animation:none}}

/* pulse line */
.pulse-line{height:34px;max-width:560px;opacity:.9}
.pulse-line.big{margin:6px 0 4px}
.pulse-line svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(41,169,226,.7))}
.pulse-line path{stroke-dasharray:900;stroke-dashoffset:900;animation:pulse 3.6s linear infinite}
@keyframes pulse{0%{stroke-dashoffset:900}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-900}}
@media(prefers-reduced-motion:reduce){.pulse-line path{animation:none;stroke-dashoffset:0}}

/* ---------- sections (white body) ---------- */
section{padding:clamp(64px,8vw,110px) 0;background:var(--paper)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4vw,52px);flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,4.2vw,54px)}
.sec-head .side{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);max-width:320px;line-height:1.9}
.more{font-family:var(--mono);font-size:13.5px;color:var(--dim);margin-top:26px;letter-spacing:.03em}
.more a{color:var(--volt-deep);text-decoration:none}
.more a:hover{text-decoration:underline}

/* services grid */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.svcs{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;transition:.25s;display:block;
  box-shadow:0 2px 10px rgba(22,32,42,.05)}
.svc:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 18px 40px rgba(22,32,42,.14)}
.svc-ph{aspect-ratio:16/9;overflow:hidden}
.svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.svc:hover .svc-ph img{transform:scale(1.05)}
.svc-tx{padding:20px 22px 24px}
.svc-tx h3{font-size:23px;margin-bottom:8px}
.svc-tx p{color:var(--dim);font-size:15.5px}
.svc-tx .go{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--volt-deep);margin-top:14px;display:inline-block}
.svc-tx .go::after{content:" →"}

/* why band (light grey) */
.why{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:920px){.why-grid{grid-template-columns:1fr}}
.why h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:18px}
.why p{color:var(--dim);margin-bottom:14px;max-width:60ch}
.badges{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:22px}
.badges img{height:74px;width:auto}
.why-ph{margin:0}
.why-ph img{width:100%;border-radius:8px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.why-ph figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:10px}

/* reviews rail */
.rev-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.rev-card{
  flex:0 0 min(360px,86vw);scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:22px 22px 20px;box-shadow:0 2px 10px rgba(22,32,42,.05);
}
.rev-card .stars{color:#f6b21b;letter-spacing:.2em;font-size:14px;margin-bottom:10px}
.rev-card p{color:var(--text);font-size:15.5px;line-height:1.6}
.rev-card .who{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);margin-top:14px;text-transform:uppercase}
.revs{background:var(--paper)}

/* gallery */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.g-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-grid,.g-grid.four{grid-template-columns:repeat(2,1fr)}}
.g-cell{border-radius:6px;overflow:hidden;border:1px solid var(--line);display:block}
.g-cell img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s}
.g-cell:hover img{transform:scale(1.06)}

/* subpage hero strip (stays dark) */
.phero{padding:150px 0 44px;background:
  radial-gradient(50% 70% at 80% 0%,rgba(41,169,226,.12),transparent 70%),var(--bg);
  border-bottom:1px solid var(--line-d);color:var(--text-inv)}
.phero h1{font-size:clamp(34px,5vw,62px);margin-top:16px;color:#fff}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-inv)}
.crumbs a{color:var(--dim-inv);text-decoration:none}
.crumbs a:hover{color:var(--volt-hi)}
.phero .lede{color:var(--dim-inv)}

/* content sections (subpages, white) */
.c-sec{padding:clamp(40px,5vw,70px) 0;background:var(--paper)}
.c-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(26px,4vw,60px);align-items:center}
.c-sec.flip .c-grid{grid-template-columns:1.25fr 1fr}
.c-sec.flip .c-img{order:2}
@media(max-width:860px){.c-grid,.c-sec.flip .c-grid{grid-template-columns:1fr}.c-sec.flip .c-img{order:0}}
.c-img{margin:0}
.c-img img{width:100%;border-radius:8px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}
.c-txt h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:14px}
.c-txt p{color:var(--dim);margin-bottom:12px;max-width:62ch}

/* contact */
.c2-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:900px){.c2-grid{grid-template-columns:1fr}}
.c2-grid h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.c-meta{margin-top:26px}
.c-meta p{margin-bottom:16px;color:var(--dim)}
.c-meta b{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--volt-deep)}
.c-meta a{color:var(--text);text-decoration:none}
.c-meta a:hover{color:var(--volt-deep)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){form .row,form .row3{grid-template-columns:1fr}}
.veh{border:1px solid #ccd6de;border-radius:6px;padding:14px 16px 4px;margin-bottom:14px}
.veh legend{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--volt-deep);padding:0 6px}
.fld select{
  width:100%;background:#fff;border:1px solid #ccd6de;border-radius:5px;padding:13px 14px;
  font-family:var(--body);font-size:16.5px;color:var(--text);transition:border-color .2s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6873' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;
}
.fld select:focus{outline:none;border-color:var(--volt)}
.fld select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--paper2)}
.fld{margin-bottom:14px}
.fld label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
.fld input,.fld textarea{
  width:100%;background:#fff;border:1px solid #ccd6de;border-radius:5px;padding:13px 14px;
  font-family:var(--body);font-size:16.5px;color:var(--text);transition:border-color .2s;
}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--volt)}
.fld textarea{min-height:110px;resize:vertical}
.hpx,.hp{display:none !important}
.form-note{font-family:var(--mono);font-size:12px;color:#8a949d;margin-top:12px;letter-spacing:.03em}

/* CTA band + footer (dark) */
.cta-band{
  background:linear-gradient(90deg,rgba(41,169,226,.18),rgba(41,169,226,.05)),var(--bg);
  border-top:1px solid var(--line-d);text-align:center;color:var(--text-inv);
}
.cta-band h2{font-size:clamp(30px,4vw,48px);color:#fff}
.cta-band p{color:var(--dim-inv);max-width:60ch;margin:14px auto 26px}
.cta-band .btnrow{justify-content:center}
footer{background:#101418;padding:60px 0 36px;color:var(--text-inv)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
@media(max-width:820px){.f-grid{grid-template-columns:1fr}}
.f-logo{height:52px;width:auto;display:block}
.f-tag{color:var(--dim-inv);margin-top:16px;max-width:40ch;font-size:15.5px}
.f-h{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--volt);margin-bottom:14px}
.f-grid a{display:block;color:var(--dim-inv);text-decoration:none;font-size:15px;padding:4px 0}
.f-grid a:hover{color:var(--volt-hi)}
.f-nap{color:var(--dim-inv);font-size:15px;line-height:1.9}
.f-nap a{display:inline;padding:0}
.f-btm{margin-top:46px;padding-top:22px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:#5f6a74;letter-spacing:.06em}

/* reveal */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ============ subpage content system (v2 rebuild) ============ */
.sublede{max-width:60ch;margin-top:16px;color:var(--dim-inv);font-size:clamp(16px,1.4vw,19px);line-height:1.6}

.band{padding:clamp(46px,6vw,86px) 0;background:var(--paper)}
.band.alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-head{max-width:760px;margin-bottom:clamp(26px,3.6vw,46px)}
.band-head h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:12px}
.band-head p{color:var(--dim);font-size:clamp(16px,1.4vw,19px);max-width:66ch}

/* lead photo */
.lead-ph{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.lead-ph .fr{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(22,32,42,.14)}
.lead-ph img{width:100%;height:clamp(220px,40vw,500px);object-fit:cover;display:block}

/* split image variants (base .c-img in the section block above) */
.c-img.contain{background:linear-gradient(180deg,#fbfdff,#e9f0f5);display:flex;align-items:center;justify-content:center;
  padding:26px;border-radius:8px;border:1px solid var(--line)}
.c-img.contain img{aspect-ratio:auto;border:0;border-radius:0;width:auto;max-height:320px;max-width:100%;object-fit:contain}
.c-img.tall img{aspect-ratio:4/5}

/* feature grid (icon cards) */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fgrid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.fgrid,.fgrid.two{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.fgrid,.fgrid.two{grid-template-columns:1fr}}
.fc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;
  box-shadow:0 2px 10px rgba(22,32,42,.05);transition:.25s}
.fc:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 18px 40px rgba(22,32,42,.12)}
.fc .ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-radius:12px;
  background:linear-gradient(160deg,rgba(41,169,226,.16),rgba(41,169,226,.03));border:1px solid rgba(41,169,226,.28)}
.fc .ic.dark{background:linear-gradient(160deg,#12171d,#1b2530);border-color:var(--line-d)}
.fc .ic img{width:34px;height:34px;object-fit:contain}
.fc .ic svg{width:28px;height:28px;stroke:var(--volt-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc .ic.dark svg{stroke:var(--volt-hi)}
.fc h3{font-size:20px;margin-bottom:8px}
.fc p{color:var(--dim);font-size:15px}

/* product cards (contain tile, product-on-white shots) */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pc{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(22,32,42,.05);transition:.25s;display:flex;flex-direction:column}
.pc:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 18px 40px rgba(22,32,42,.12)}
.pc .ph{aspect-ratio:16/10;background:linear-gradient(180deg,#f6f9fb,#e6edf3);display:flex;align-items:center;justify-content:center;
  padding:24px;border-bottom:1px solid var(--line)}
.pc .ph img{width:100%;height:100%;object-fit:contain}
.pc .tx{padding:22px 24px 26px}
.pc .tx h3{font-size:22px;margin-bottom:8px}
.pc .tx p{color:var(--dim);font-size:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:960px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.steps{grid-template-columns:1fr}}
.stp{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 20px 22px;position:relative;overflow:hidden;
  box-shadow:0 2px 10px rgba(22,32,42,.05)}
.stp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--volt)}
.stp .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--volt-deep)}
.stp h3{font-size:18px;margin:9px 0 8px}
.stp p{color:var(--dim);font-size:14.5px}

/* stat callouts (dark cards) */
.stats{display:flex;gap:18px;flex-wrap:wrap}
.stat{flex:1 1 240px;background:linear-gradient(160deg,#12171d,#1b2530);border:1px solid var(--line-d);
  border-radius:12px;padding:26px 24px;color:var(--text-inv)}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.6vw,56px);color:var(--volt-hi);line-height:1}
.stat .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-top:12px}
.stat p{color:var(--dim-inv);font-size:14.5px;margin-top:8px;line-height:1.55}

/* tint-grade (VLT) scale */
.tint-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:860px){.tint-scale{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tint-scale{grid-template-columns:repeat(2,1fr)}}
.tint{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(22,32,42,.05)}
.tint .pane{position:relative;aspect-ratio:3/4;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;isolation:isolate}
.tint .pane::after{content:"";position:absolute;inset:0;background:#05070a;opacity:var(--o);z-index:0}
.tint .pane .vlt{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,34px);
  color:#fff;padding:12px 14px 10px;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.tint .lab{padding:14px 16px 18px;border-top:1px solid var(--line)}
.tint .lab .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--volt-deep)}
.tint .lab p{color:var(--dim);font-size:13px;margin-top:5px;line-height:1.5}
.tint-legend{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--dim);margin-top:18px}

/* brand strip */
.brandstrip{display:flex;gap:clamp(26px,5vw,64px);align-items:center;flex-wrap:wrap;justify-content:center;
  padding:28px 24px;background:#12171d;border:1px solid var(--line-d);border-radius:12px}
.brandstrip img{height:clamp(26px,3.6vw,40px);width:auto;filter:brightness(0) invert(1);opacity:.85}
.brandstrip img.tall{height:clamp(30px,4.4vw,50px)}

/* info cards (text-only feature) */
.igrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.igrid{grid-template-columns:1fr}}
.icard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--volt);border-radius:10px;
  padding:24px 26px;box-shadow:0 2px 10px rgba(22,32,42,.05)}
.icard h3{font-size:21px;margin-bottom:8px}
.icard p{color:var(--dim);font-size:15.5px}

/* payment options grid */
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.pay-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pay-grid{grid-template-columns:1fr}}
.pay{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center;
  box-shadow:0 2px 10px rgba(22,32,42,.05)}
.pay .pm{height:56px;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.pay .pm img{height:100%;width:auto;max-width:100%;object-fit:contain}
.pay h3{font-size:17px;margin-bottom:6px}
.pay p{color:var(--dim);font-size:13.5px}

/* image row (contain tiles, e.g. remote fobs) */
.img-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.img-row{grid-template-columns:1fr}}
.img-row .it{background:linear-gradient(180deg,#f6f9fb,#e6edf3);border:1px solid var(--line);border-radius:12px;
  padding:24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.img-row .it img{height:150px;width:auto;object-fit:contain;margin-bottom:14px}
.img-row .it .t{font-family:var(--disp);font-weight:700;font-size:18px}
.img-row .it p{color:var(--dim);font-size:13.5px;margin-top:4px}

/* inline CTA */
.cta-inline{background:radial-gradient(70% 130% at 100% 0%,rgba(41,169,226,.16),transparent 68%),#12171d;
  border:1px solid var(--line-d);border-radius:14px;padding:clamp(30px,4.4vw,48px);color:var(--text-inv);text-align:center}
.cta-inline h2{font-size:clamp(26px,3.4vw,40px);color:#fff;margin-bottom:12px}
.cta-inline p{color:var(--dim-inv);max-width:60ch;margin:0 auto 22px}
.cta-inline .btnrow{justify-content:center}

/* prose block */
.prose{max-width:74ch}
.prose h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:14px}
.prose p{color:var(--dim);margin-bottom:12px}

/* contact map */
.map-wrap .frame{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(22,32,42,.14);transition:box-shadow .25s}
.map-wrap .frame:hover{box-shadow:0 20px 44px rgba(22,32,42,.22)}
.map-wrap .frame img{display:block;width:100%;height:clamp(280px,40vw,440px);object-fit:cover;object-position:center}
.map-wrap .map-pill{position:absolute;right:14px;bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#04121c;background:var(--volt);padding:9px 15px;border-radius:5px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.map-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:16px}
.map-actions .addr{color:var(--dim);font-size:15px}