/* ========== Electronica Racing - Design System ========== */
:root{
  --er-red:#E10600;
  --er-red-dark:#B30500;
  --er-red-soft:#FF2A1F;
  --er-red-text:#FF4136; /* brighter for small text on dark, WCAG AA on #1A1A1A */
  --er-accent:#FFD700;
  --er-dark:#0A0A0A;
  --er-carbon:#141414;
  --er-graphite:#1E1E1E;
  --er-graphite-2:#2A2A2A;
  --er-silver:#C0C0C0;
  --er-text:#F5F5F5;
  --er-muted:#8B8B8B;
  --er-success:#00D97E;
  --er-border:rgba(255,255,255,.08);
  --er-border-hover:rgba(225,6,0,.35);

  --er-radius:10px;
  --er-radius-lg:18px;
  --er-shadow:0 20px 60px rgba(0,0,0,.55);
  --er-shadow-sm:0 6px 20px rgba(0,0,0,.35);

  --er-max:1360px;
  --er-gap:clamp(1rem,2vw,1.5rem);

  --er-font-head:"Rajdhani","Oswald","Bebas Neue",system-ui,sans-serif;
  --er-font-body:"Inter","Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--er-font-body);
  background:var(--er-dark);
  color:var(--er-text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeSpeed;
}
/* Below-fold sections skip rendering until needed — big perf win */
.section,.site-footer{content-visibility:auto;contain-intrinsic-size:1px 1000px}

/* Racing carbon-fiber texture background */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(225,6,0,.10), transparent 50%),
    radial-gradient(900px 500px at 100% 100%, rgba(255,215,0,.05), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
}

a{color:var(--er-text);text-decoration:none;transition:color .2s}
a:hover{color:var(--er-red)}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4,h5,h6{
  font-family:var(--er-font-head);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 .6em;
  text-transform:none;
}
h1{font-size:clamp(2.2rem, 5vw, 3.8rem);font-weight:800}
h2{font-size:clamp(1.8rem, 3.5vw, 2.6rem)}
h3{font-size:clamp(1.3rem, 2.5vw, 1.65rem)}
h4{font-size:1.15rem}

.highlight{color:var(--er-red)}
.kbd{font-family:ui-monospace,Menlo,monospace;background:var(--er-graphite);padding:.1em .4em;border-radius:4px;font-size:.9em}

/* Layout helpers */
.container{max-width:var(--er-max);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.section{padding:clamp(3.5rem, 7vw, 6rem) 0}
.section-tight{padding:clamp(2rem,4vw,3rem) 0}
.grid{display:grid;gap:var(--er-gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.flex{display:flex;gap:var(--er-gap);align-items:center;flex-wrap:wrap}
.flex-col{flex-direction:column;align-items:flex-start}
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}

/* Eyebrow / section header */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--er-font-head);
  text-transform:uppercase;letter-spacing:.25em;
  font-size:.8rem;font-weight:700;
  color:var(--er-red-text);
  padding:.45rem .75rem;border:1px solid var(--er-red-text);
  border-radius:2px;
  background:rgba(255,65,54,.08);
}
.eyebrow::before{
  content:"";width:10px;height:10px;background:var(--er-red);clip-path:polygon(0 0,100% 0,100% 50%,50% 50%,50% 100%,0 100%);
}
.section-head{max-width:720px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section-head p{color:var(--er-muted);font-size:1.05rem;margin-top:.5rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.4rem;font-family:var(--er-font-head);
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  font-size:.95rem;border:2px solid transparent;border-radius:2px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  cursor:pointer;line-height:1;white-space:nowrap;
}
.btn-primary{background:var(--er-red);color:#fff;border-color:var(--er-red)}
.btn-primary:hover{background:var(--er-red-dark);border-color:var(--er-red-dark);transform:translateY(-1px);color:#fff}
.btn-outline{background:transparent;color:var(--er-text);border-color:var(--er-silver)}
.btn-outline:hover{border-color:var(--er-red);color:var(--er-red)}
.btn-ghost{background:transparent;color:var(--er-text)}
.btn-ghost:hover{color:var(--er-red)}
.btn-lg{padding:1.05rem 2rem;font-size:1.05rem}
.btn-sm{padding:.55rem .9rem;font-size:.85rem}
.btn-block{display:flex;justify-content:center;width:100%}
.btn svg{width:1.1em;height:1.1em}

/* ========== Header ========== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--er-border);
}
.site-header .inner{
  display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.5rem);
  padding:.9rem 0;min-height:64px;
}

/* Logo */
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--er-font-head);text-transform:uppercase;font-weight:800;font-size:1.1rem;letter-spacing:.03em;color:var(--er-text);flex:0 0 auto;min-width:0}
.logo:hover{color:var(--er-text)}
.logo .mark{
  width:38px;height:38px;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,var(--er-red) 0%,var(--er-red-dark) 100%);
  border-radius:2px;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(225,6,0,.45);
}
.logo .mark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.2) 75%,rgba(0,0,0,.2)),linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.2) 75%,rgba(0,0,0,.2));background-size:8px 8px;background-position:0 0,4px 4px;opacity:.25;border-radius:2px}
.logo .mark svg{position:relative;z-index:1;color:#fff;width:22px;height:22px}
.logo .brand-text{display:flex;flex-direction:column;line-height:1;gap:3px;min-width:0;overflow:hidden}
.logo .brand-text > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo .brand-text small{font-size:.58rem;letter-spacing:.28em;color:var(--er-red);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Desktop nav — sits next to logo with flexible gap, CTAs get margin-left:auto */
.nav-main{margin-left:clamp(1.2rem,3vw,3rem);display:flex;gap:clamp(.9rem,1.4vw,1.5rem);align-items:center;flex-wrap:nowrap}
.nav-main a{font-family:var(--er-font-head);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:600;color:var(--er-silver);white-space:nowrap}
.nav-main a.nav-stores{color:var(--er-red-text);border:1px solid var(--er-red-text);border-radius:4px;padding:.35rem .7rem}
.nav-main a.nav-stores:hover{background:var(--er-red-text);color:#fff}
.nav-main a:hover{color:var(--er-text)}
.nav-main a.active{color:var(--er-accent)}
.nav-main a.nav-stores.active{color:var(--er-accent);border-color:var(--er-accent)}
.nav-main a.nav-stores.active:hover{background:var(--er-accent);color:#000}
.nav-main .has-dropdown > a.active{color:var(--er-accent)}
.nav-main .has-dropdown{position:relative}
.nav-main .has-dropdown > a::after{content:" ▾";font-size:.7em;opacity:.6}
.nav-main .has-dropdown .dropdown{position:absolute;top:calc(100% + 14px);left:-1rem;min-width:240px;background:var(--er-carbon);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:.6rem;box-shadow:var(--er-shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;z-index:50}
.nav-main .has-dropdown:hover .dropdown,.nav-main .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-main .dropdown a{display:block;padding:.55rem .8rem;border-radius:6px;color:var(--er-text);letter-spacing:.03em}
.nav-main .dropdown a:hover{background:var(--er-graphite);color:var(--er-red)}

/* Header CTA cluster — always at the far right */
.header-cta{display:flex;gap:.5rem;align-items:center;flex-shrink:0;margin-left:auto}
.header-cta .phone-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--er-silver);padding:.5rem .6rem;font-family:var(--er-font-head);font-weight:600;letter-spacing:.03em;font-size:.88rem;white-space:nowrap;border-radius:6px;transition:all .2s}
.header-cta .phone-link:hover{color:var(--er-red)}
.header-cta .phone-link svg{width:1.05em;height:1.05em;flex-shrink:0}

/* Menu toggle button */
.menu-toggle{
  display:none;background:transparent;border:1px solid var(--er-border);
  color:var(--er-text);cursor:pointer;padding:.5rem;border-radius:6px;
  width:44px;height:44px;align-items:center;justify-content:center;
  transition:border-color .2s, background .2s;
}
.menu-toggle:hover{border-color:var(--er-red);background:rgba(225,6,0,.06)}
.menu-toggle svg{display:block}

/* ===== Breakpoint: 1240px — hide "Blog" nav item ===== */
@media (max-width:1240px){
  .nav-main > a.opt{display:none}
}

/* ===== Breakpoint: 1100px — collapse secondary nav items & phone text ===== */
@media (max-width:1100px){
  .header-cta .phone-link .phone-text{display:none}
  .header-cta .phone-link{padding:.5rem}
  .nav-main{gap:1rem}
}

/* ===== Breakpoint: 1024px — hide primary desktop nav, show hamburger ===== */
@media (max-width:1024px){
  .nav-main{display:none}
  .menu-toggle{display:inline-flex}

  /* When menu open, show fullscreen drawer */
  .site-header.open .nav-main{
    display:flex;flex-direction:column;
    position:fixed;top:64px;left:0;right:0;
    max-height:calc(100vh - 64px);overflow-y:auto;
    background:var(--er-carbon);padding:1rem 1.2rem 4rem;
    border-top:1px solid var(--er-border);gap:0;align-items:stretch;
    animation:slideDown .2s ease-out;
    z-index:99;
  }
  .site-header.open .nav-main > a,
  .site-header.open .nav-main .has-dropdown > a{
    padding:1rem .4rem;border-bottom:1px solid var(--er-border);
    font-size:1rem;letter-spacing:.05em;
    display:flex;align-items:center;justify-content:space-between;
  }
  .site-header.open .nav-main .has-dropdown{border-bottom:0;padding:0}
  .site-header.open .nav-main .has-dropdown > a::after{content:" +";font-size:1.3em;opacity:1;color:var(--er-red)}
  .site-header.open .nav-main .has-dropdown.expanded > a::after{content:" −"}
  .site-header.open .nav-main .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:rgba(0,0,0,.25);padding:.5rem 0 .5rem 1.2rem;
    min-width:unset;display:none;
    border-left:2px solid var(--er-red);margin:0 0 .8rem .4rem;
  }
  .site-header.open .nav-main .has-dropdown.expanded .dropdown{display:block}
  .site-header.open .nav-main .dropdown a{padding:.7rem .6rem;font-size:.92rem}

  /* CTA secondary buttons fit in drawer footer */
  .site-header.open .nav-main::after{
    content:"";display:block;height:1px;background:var(--er-border);margin:1rem 0;
  }
}

@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Breakpoint: 768px — compact header ===== */
@media (max-width:768px){
  .site-header .inner{padding:.65rem 0;min-height:56px;gap:.5rem}
  .site-header.open .nav-main{top:56px;max-height:calc(100vh - 56px)}
  .logo .brand-text small{display:none}
  .logo{font-size:1rem;gap:.5rem}
  .logo .mark{width:34px;height:34px}
  .logo .mark svg{width:20px;height:20px}
  .header-cta .btn{padding:.6rem .9rem;font-size:.8rem}
}

/* ===== Breakpoint: 520px — ultra compact ===== */
@media (max-width:520px){
  .logo .brand-text > span{font-size:.95rem}
  .header-cta .btn-sm{padding:.55rem .7rem;font-size:.75rem}
  .header-cta .phone-link{display:none}
}
@media (max-width:380px){
  .header-cta .btn{display:none}
}

/* Prevent scroll when menu open */
body.menu-open{overflow:hidden}

/* Hero */
.hero{
  position:relative;
  padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,7vw,5rem);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(225,6,0,.18), transparent 60%),
    linear-gradient(180deg, var(--er-dark) 0%, var(--er-carbon) 100%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;bottom:-2px;left:0;right:0;height:80px;
  background:linear-gradient(180deg,transparent,var(--er-carbon));
}
.hero-grid{
  display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-top:1rem;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;max-width:18ch}
.hero h1 .highlight{display:inline}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--er-silver);max-width:620px;margin-bottom:2rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2rem;margin-top:2.5rem;flex-wrap:wrap}
.hero-stat{flex:1 1 140px}
.hero-stat strong{display:block;font-family:var(--er-font-head);font-size:2rem;color:var(--er-red);font-weight:800;line-height:1}
.hero-stat span{color:var(--er-muted);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase}

/* Speedometer / dashboard style visual */
.hero-visual{
  position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto;width:100%;
  display:grid;place-items:center;
}
.hero-visual .ring{position:absolute;inset:0;border:2px solid var(--er-border);border-radius:50%}
.hero-visual .ring.r2{inset:6%;border-color:rgba(225,6,0,.28)}
.hero-visual .ring.r3{inset:14%;border:1px dashed rgba(255,255,255,.08)}
.hero-visual .ring.r4{inset:22%;border-color:rgba(225,6,0,.15)}
.hero-visual .needle{
  position:absolute;left:50%;top:50%;width:2px;height:42%;background:linear-gradient(180deg,var(--er-red),var(--er-accent));
  transform-origin:bottom center;transform:translate(-50%,-100%) rotate(-50deg);border-radius:2px;
  animation:needle 4s ease-in-out infinite alternate;
  box-shadow:0 0 20px rgba(225,6,0,.5);
}
@keyframes needle{0%{transform:translate(-50%,-100%) rotate(-60deg)}100%{transform:translate(-50%,-100%) rotate(60deg)}}
.hero-visual .dot{position:absolute;left:50%;top:50%;width:22px;height:22px;background:var(--er-red);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(225,6,0,.2)}
.hero-car{
  position:absolute;top:0;left:0;width:56px;height:28px;z-index:3;pointer-events:none;
  offset-path:circle(46% at 50% 50%);
  offset-distance:0%;
  offset-rotate:auto;
  offset-anchor:center;
  animation:hero-car-orbit 4.5s linear infinite;
  filter:drop-shadow(0 0 6px rgba(225,6,0,.6));
}
.hero-car svg{width:100%;height:100%;display:block}
@keyframes hero-car-orbit{from{offset-distance:0%}to{offset-distance:100%}}
.hero-car .hero-flame{transform-origin:right center;animation:hero-flame .1s steps(2) infinite}
@keyframes hero-flame{50%{transform:scaleX(.55) translateX(-2px);opacity:.7}}
/* Fallback for very old browsers without offset-path */
@supports not (offset-path: circle(46%)){
  .hero-car{
    top:50%;left:50%;width:0;height:0;
    transform-origin:0 0;
    animation:hero-car-orbit-fallback 4.5s linear infinite;
  }
  .hero-car svg{
    position:absolute;width:56px;height:28px;
    left:-28px;top:calc(-46% * 4);/* rough fallback */
  }
  @keyframes hero-car-orbit-fallback{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:reduce){
  .hero-car,.hero-car .hero-flame{animation:none!important}
}
.hero-visual .label{position:absolute;bottom:16%;left:50%;transform:translateX(-50%);font-family:var(--er-font-head);font-size:.78rem;letter-spacing:.4em;color:var(--er-red);text-transform:uppercase;font-weight:700}
.hero-visual .value{position:absolute;top:50%;left:50%;transform:translate(-50%,-90%);font-family:var(--er-font-head);font-size:clamp(2.6rem,5vw,4.2rem);font-weight:800;color:var(--er-text);line-height:1}
.hero-visual .value small{display:block;font-size:.28em;font-weight:600;color:var(--er-silver);letter-spacing:.2em;margin-top:.4rem;text-transform:uppercase}
.hero-visual .marks{position:absolute;inset:0;border-radius:50%}
.hero-visual .marks::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 235deg, transparent 0deg, var(--er-red) 1deg 2deg, transparent 3deg 12deg,
    var(--er-silver) 12deg 13deg, transparent 14deg 24deg,
    var(--er-red) 24deg 25deg, transparent 26deg 36deg,
    var(--er-silver) 36deg 37deg, transparent 38deg 48deg,
    var(--er-red) 48deg 49deg, transparent 50deg 270deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 62%,#000 70%,transparent 70%);
          mask:radial-gradient(circle,transparent 62%,#000 62%,#000 70%,transparent 70%);
}

/* Cards */
.card{
  background:linear-gradient(180deg,var(--er-graphite) 0%,var(--er-carbon) 100%);
  border:1px solid var(--er-border);
  border-radius:var(--er-radius);
  padding:clamp(1.2rem,2vw,1.8rem);
  transition:border-color .25s,transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.6rem;
  color:var(--er-text);
}
.card:hover{border-color:var(--er-border-hover);transform:translateY(-3px);box-shadow:var(--er-shadow-sm)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--er-red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0}
.card p{color:var(--er-muted);margin:0;font-size:.95rem}
.card .price{margin-top:auto;font-family:var(--er-font-head);color:var(--er-accent);font-weight:700;font-size:1.05rem}
.card .price small{color:var(--er-muted);font-weight:400;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.card .icon{
  width:52px;height:52px;border-radius:8px;
  background:rgba(225,6,0,.08);color:var(--er-red);
  display:grid;place-items:center;margin-bottom:.5rem;
}
.card .icon svg{width:26px;height:26px}
.card-link{color:inherit;display:flex;flex-direction:column;gap:.6rem;height:100%}

/* Service/Brand chip */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;background:var(--er-graphite);
  border:1px solid var(--er-border);border-radius:99px;
  font-size:.82rem;color:var(--er-text);
  transition:all .2s;
}
.chip:hover{border-color:var(--er-red);color:var(--er-red);background:rgba(225,6,0,.06)}

/* USP strip */
.usps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border:1px solid var(--er-border);border-radius:var(--er-radius);overflow:hidden;background:var(--er-graphite)}
.usp{padding:1.4rem;border-right:1px solid var(--er-border);border-bottom:1px solid var(--er-border)}
.usp:last-child{border-right:0}
.usp strong{display:block;font-family:var(--er-font-head);text-transform:uppercase;letter-spacing:.04em;color:var(--er-red-text);margin-bottom:.3rem;font-size:1rem;font-weight:700}
.usp p{margin:0;color:#D0D0D0;font-size:.95rem}
.usp .icon{width:40px;height:40px;background:rgba(255,65,54,.12);color:var(--er-red-text);border-radius:8px;display:grid;place-items:center;margin-bottom:.8rem}
.usp .icon svg{width:20px;height:20px}

/* Testimonials */
.review{background:var(--er-graphite);border:1px solid var(--er-border);padding:1.5rem;border-radius:var(--er-radius);position:relative}
.review .stars{color:var(--er-accent);font-size:1.1rem;margin-bottom:.5rem}
.review cite{color:var(--er-muted);font-style:normal;font-size:.85rem;display:block;margin-top:1rem}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,var(--er-red) 0%,var(--er-red-dark) 100%);
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 30px,rgba(0,0,0,.06) 30px 60px);
}
.cta-band > *{position:relative}
.cta-band .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-block:3rem}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:rgba(255,255,255,.9);margin:.3rem 0 0;max-width:640px}
.cta-band .btn-primary{background:#fff;color:var(--er-red);border-color:#fff}
.cta-band .btn-primary:hover{background:#111;color:#fff;border-color:#111}

/* Breadcrumbs */
.breadcrumbs{color:var(--er-muted);font-size:.85rem;padding:1rem 0;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.breadcrumbs a{color:var(--er-muted)}
.breadcrumbs a:hover{color:var(--er-red)}
.breadcrumbs .sep{color:var(--er-border)}

/* Forms */
form.er-form{display:grid;gap:.9rem}
form.er-form label{display:block;font-family:var(--er-font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--er-silver);margin-bottom:.3rem}
form.er-form input,form.er-form textarea,form.er-form select{
  width:100%;padding:.75rem .9rem;background:var(--er-carbon);
  border:1px solid var(--er-border);border-radius:6px;color:var(--er-text);
  font-family:var(--er-font-body);font-size:1rem;transition:border-color .2s;
}
form.er-form input:focus,form.er-form textarea:focus,form.er-form select:focus{outline:0;border-color:var(--er-red)}
form.er-form .form-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--er-silver)}
form.er-form .form-check input[type=checkbox]{width:18px;height:18px;margin-top:2px}
form.er-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:640px){form.er-form .form-row{grid-template-columns:1fr}}

/* Price table */
.price-table{width:100%;border-collapse:collapse;background:var(--er-graphite);border-radius:var(--er-radius);overflow:hidden}
.price-table th,.price-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--er-border)}
.price-table th{background:var(--er-carbon);font-family:var(--er-font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--er-red)}
.price-table tr:last-child td{border-bottom:0}
.price-table tr:hover td{background:rgba(225,6,0,.04)}

/* FAQ */
.faq{display:grid;gap:.6rem;max-width:860px;margin:0 auto}
.faq details{background:var(--er-graphite);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:1rem 1.3rem;transition:border-color .2s}
.faq details[open]{border-color:var(--er-border-hover)}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--er-font-head);text-transform:none;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--er-red);font-size:1.4rem;transition:transform .2s;line-height:1}
.faq details[open] summary::after{content:"－"}
.faq p{margin:.8rem 0 0;color:var(--er-silver)}

/* Footer */
.site-footer{background:var(--er-carbon);border-top:3px solid var(--er-red);padding:4rem 0 2rem;color:var(--er-silver);margin-top:4rem}

/* Footer stores row (very prominent) */
.footer-stores{
  background:linear-gradient(180deg,var(--er-graphite) 0%,var(--er-carbon) 100%);
  border:1px solid var(--er-border);border-radius:var(--er-radius-lg);
  padding:2rem clamp(1.2rem,2vw,2rem);margin-bottom:3rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  align-items:stretch;position:relative;
}
.footer-stores h2{grid-column:1/-1;text-align:center;font-size:clamp(1.2rem,2.5vw,1.5rem);color:var(--er-text);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.footer-stores .store-card{background:rgba(0,0,0,.3);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;transition:border-color .2s}
.footer-stores .store-card:hover{border-color:var(--er-red-text)}
.footer-stores .store-card-head{display:flex;align-items:center;gap:.5rem}
.footer-stores .store-card-head strong{font-family:var(--er-font-head);font-size:1rem;color:var(--er-text);letter-spacing:.02em}
.footer-stores address{font-style:normal;color:var(--er-silver);font-size:.92rem;line-height:1.5;margin:0}
.footer-stores .store-card-meta{display:flex;flex-direction:column;gap:.25rem;margin-top:auto;padding-top:.5rem;border-top:1px solid var(--er-border)}
.footer-stores .store-phone{color:var(--er-red-text);font-family:var(--er-font-head);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.footer-stores .store-phone:hover{color:var(--er-accent)}
.footer-stores .store-hours{color:var(--er-muted);font-size:.82rem}
.footer-stores .store-card-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.footer-stores .store-card-actions .btn{padding:.45rem .7rem;font-size:.78rem;flex:1;justify-content:center}
@media (max-width:820px){.footer-stores{grid-template-columns:1fr;padding:1.5rem}}

.site-footer .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:2.5rem;margin-bottom:3rem}
@media (max-width:820px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.site-footer .footer-grid{grid-template-columns:1fr}}
.site-footer h3{color:var(--er-text);font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;font-weight:700;font-family:var(--er-font-head)}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.site-footer a{color:var(--er-silver);font-size:.9rem}
.site-footer a:hover{color:var(--er-red)}
.site-footer .copyright{border-top:1px solid var(--er-border);padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--er-muted)}

/* Floating WhatsApp */
.whatsapp-float{
  position:fixed;bottom:22px;right:22px;width:56px;height:56px;
  background:#25D366;color:#fff;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.35);z-index:90;
  transition:transform .2s;
}
.whatsapp-float:hover{transform:scale(1.08);color:#fff}
.whatsapp-float svg{width:28px;height:28px}

/* Flash message */
.flash-success{background:rgba(0,217,126,.1);border:1px solid rgba(0,217,126,.3);color:var(--er-success);padding:1rem 1.2rem;border-radius:var(--er-radius);margin-bottom:1rem}

/* Sections */
.bg-alt{background:linear-gradient(180deg,var(--er-carbon) 0%,var(--er-graphite) 100%)}

/* Utility */
.checkered{background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%,rgba(255,255,255,.03)),linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%,rgba(255,255,255,.03));background-size:20px 20px;background-position:0 0,10px 10px}
.divider-race{height:2px;background:linear-gradient(90deg,transparent,var(--er-red),transparent);margin:3rem 0}

/* ========== Stores page cards ========== */
.stores-grid{align-items:stretch}
.store-page-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.store-page-map{position:relative;height:220px;background:var(--er-graphite);flex-shrink:0}
.store-page-map iframe{border:0;display:block;width:100%;height:100%}
.store-page-body{padding:1.3rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.store-page-name{margin:0;font-family:var(--er-font-head);font-size:1.15rem;color:var(--er-text);letter-spacing:.02em;line-height:1.25}
.store-page-address{font-style:normal;font-size:.92rem;color:var(--er-silver);line-height:1.45;margin:0}
.store-page-meta{display:grid;grid-template-columns:max-content 1fr;gap:.3rem .8rem;margin:0;font-size:.88rem;line-height:1.4}
.store-page-meta dt{color:var(--er-red-text);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--er-font-head);font-weight:600;align-self:center}
.store-page-meta dd{margin:0;color:var(--er-text)}
.store-page-meta a{color:var(--er-text)}
.store-page-meta a:hover{color:var(--er-red-text)}
.store-page-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto;padding-top:1rem;border-top:1px solid var(--er-border)}
.store-page-actions .btn{flex:1;justify-content:center;min-width:90px}

/* ========== Category hero animated visuals ========== */
.cat-visual{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:420px;margin:0 auto;aspect-ratio:1/1;
  position:relative;
}
.cat-svg{width:80%;height:auto;color:var(--er-text);filter:drop-shadow(0 10px 30px rgba(225,6,0,.15))}
@media (max-width:900px){
  .cat-visual{max-width:260px;order:-1;margin-bottom:1rem}
}
@media (max-width:560px){.cat-visual{max-width:200px}}

/* Floating motion for phone */
.cat-float{animation:cat-float 3.2s ease-in-out infinite alternate}
@keyframes cat-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* Signal bars sequential reveal */
.cat-signal rect{opacity:0;animation:cat-signal 1.8s ease-in-out infinite}
.cat-signal rect:nth-child(1){animation-delay:0s}
.cat-signal rect:nth-child(2){animation-delay:.18s}
.cat-signal rect:nth-child(3){animation-delay:.36s}
.cat-signal rect:nth-child(4){animation-delay:.54s}
@keyframes cat-signal{0%,85%,100%{opacity:0}20%,70%{opacity:1}}

/* Generic blink */
.cat-blink{animation:cat-blink 1s steps(2) infinite}
.cat-blink-delay{animation:cat-blink 1s steps(2) infinite;animation-delay:.5s}
@keyframes cat-blink{50%{opacity:.2}}
.cat-blink-text{animation:cat-blink 1.6s steps(2) infinite}

/* Check mark draw */
.cat-check{
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:cat-check 2.4s ease-out infinite;
}
@keyframes cat-check{0%,30%{stroke-dashoffset:60}60%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:60}}

/* Laptop lid subtle tilt */
.cat-laptop-lid{transform-origin:160px 160px;animation:cat-tilt 4s ease-in-out infinite alternate}
@keyframes cat-tilt{from{transform:rotateX(-4deg)}to{transform:rotateX(4deg)}}

/* Apple logo gentle pulse */
.cat-pulse-soft{animation:cat-pulse-soft 3s ease-in-out infinite}
@keyframes cat-pulse-soft{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,215,0,0))}50%{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(255,215,0,.4))}}

.cat-orbit{transform-origin:110px 150px;animation:cat-orbit 18s linear infinite}
@keyframes cat-orbit{to{transform:rotate(360deg)}}

/* Gamepad buttons pulse in sequence */
.cat-btn-y,.cat-btn-b,.cat-btn-a,.cat-btn-x{transform-box:fill-box;transform-origin:center}
.cat-btn-y{animation:cat-btn 2s ease-in-out infinite;animation-delay:0s}
.cat-btn-b{animation:cat-btn 2s ease-in-out infinite;animation-delay:.5s}
.cat-btn-a{animation:cat-btn 2s ease-in-out infinite;animation-delay:1s}
.cat-btn-x{animation:cat-btn 2s ease-in-out infinite;animation-delay:1.5s}
@keyframes cat-btn{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9) drop-shadow(0 0 6px currentColor)}}

/* Pulse dot (laptop power LED) */
.cat-pulse{transform-box:fill-box;transform-origin:center;animation:cat-pulse 1.4s ease-in-out infinite}
@keyframes cat-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

/* Tap ripple for tablet */
.cat-tap-1{transform-box:fill-box;transform-origin:center;animation:cat-tap 2s ease-out infinite}
.cat-tap-2{transform-box:fill-box;transform-origin:center;animation:cat-tap 2s ease-out infinite;animation-delay:.6s}
@keyframes cat-tap{0%{transform:scale(.5);opacity:1}100%{transform:scale(2);opacity:0}}

/* HDD platter spin — platter group is anchored via translate so spin is pure rotate */
.cat-disk{animation:cat-disk 2.2s linear infinite}
@keyframes cat-disk{from{transform:translate(125px,122px) rotate(0)}to{transform:translate(125px,122px) rotate(360deg)}}
/* Actuator arm subtle seek motion */
.cat-arm{animation:cat-arm 4.5s ease-in-out infinite alternate}
@keyframes cat-arm{from{transform:rotate(-8deg)}to{transform:rotate(18deg)}}

/* Apple iMac screen sheen sweep */
.cat-sheen{animation:cat-sheen 4s ease-in-out infinite}
@keyframes cat-sheen{0%{transform:translateX(0);opacity:0}30%{opacity:.25}70%{opacity:.25}100%{transform:translateX(230px);opacity:0}}
.cat-apple-logo{animation:cat-apple-glow 2.6s ease-in-out infinite}
@keyframes cat-apple-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,215,0,0))}50%{filter:drop-shadow(0 0 10px rgba(255,215,0,.8))}}

/* Laptop chart: each bar animates its height with a different delay (looks like a live graph) */
.cat-bar{transform-origin:bottom;animation:cat-bar 2.2s ease-in-out infinite alternate}
.cat-bar-1{animation-delay:0s}
.cat-bar-2{animation-delay:.15s}
.cat-bar-3{animation-delay:.3s}
.cat-bar-4{animation-delay:.45s}
.cat-bar-5{animation-delay:.6s}
.cat-bar-6{animation-delay:.75s}
.cat-bar-7{animation-delay:.9s}
@keyframes cat-bar{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.cat-trend{stroke-dasharray:200;stroke-dashoffset:200;animation:cat-trend 3s ease-in-out infinite}
@keyframes cat-trend{0%{stroke-dashoffset:200}60%,100%{stroke-dashoffset:0}}

/* Space Invaders — fleet moves L-R, sprites flip-frame with steps */
.cat-invaders{animation:cat-fleet 4s steps(8) infinite}
@keyframes cat-fleet{0%,100%{transform:translateX(-10px)}50%{transform:translateX(20px)}}
.cat-inv-frame{animation:cat-inv-frame .6s steps(2) infinite;transform-origin:center;transform-box:fill-box}
@keyframes cat-inv-frame{0%,49%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
.cat-ufo{animation:cat-ufo 6s linear infinite}
@keyframes cat-ufo{0%{transform:translate(50px,45px)}100%{transform:translate(310px,45px)}}
.cat-shot-1{animation:cat-shot 1.2s linear infinite}
.cat-shot-2{animation:cat-shot 1.2s linear infinite;animation-delay:.6s}
@keyframes cat-shot{0%{transform:translateY(30px);opacity:1}100%{transform:translateY(-80px);opacity:0}}
.cat-bomb{animation:cat-bomb 1.5s linear infinite;animation-delay:.3s}
@keyframes cat-bomb{0%{transform:translateY(0);opacity:1}100%{transform:translateY(40px);opacity:0}}
.cat-cannon{animation:cat-cannon 3s ease-in-out infinite alternate}
@keyframes cat-cannon{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
.cat-flicker{animation:cat-flicker .12s steps(2) infinite}
@keyframes cat-flicker{0%{opacity:.03}50%{opacity:.01}}
.cat-score{animation:cat-score .8s steps(2) infinite}
@keyframes cat-score{50%{fill:#E10600}}

/* Blog: lines drawing in from left */
.cat-blog-line{transform-origin:left center;transform:scaleX(0);animation:cat-blog-line 6s ease-out infinite}
.cat-bl-1{animation-delay:.0s}.cat-bl-2{animation-delay:.25s}
.cat-bl-3{animation-delay:.55s}.cat-bl-4{animation-delay:.75s}.cat-bl-5{animation-delay:.95s}
.cat-bl-6{animation-delay:1.2s}.cat-bl-7{animation-delay:1.4s}.cat-bl-8{animation-delay:1.6s}
.cat-bl-9{animation-delay:1.85s}.cat-bl-10{animation-delay:2.05s}
@keyframes cat-blog-line{0%{transform:scaleX(0)}25%{transform:scaleX(1)}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.8}}
/* Cursor blink after text done */
.cat-cursor{animation:cat-cursor 1s steps(2) infinite;animation-delay:2.2s}
@keyframes cat-cursor{50%{opacity:0}}
/* Pencil travels across the "writing" latest line */
.cat-pencil{animation:cat-pencil 6s ease-in-out infinite}
@keyframes cat-pencil{
  0%{transform:translate(44px,189px)}
  30%{transform:translate(220px,189px)}
  32%{transform:translate(44px,108px);opacity:0}
  34%{opacity:1}
  55%{transform:translate(220px,108px)}
  57%{transform:translate(44px,158px);opacity:0}
  59%{opacity:1}
  80%{transform:translate(220px,158px)}
  100%{transform:translate(220px,158px);opacity:.3}
}
.cat-blog-card{animation:cat-blog-card 4s ease-in-out infinite alternate}
@keyframes cat-blog-card{from{transform:translate(258px,130px) rotate(-4deg)}to{transform:translate(266px,130px) rotate(4deg)}}

@media (prefers-reduced-motion:reduce){
  .cat-blog-line,.cat-cursor,.cat-pencil,.cat-blog-card{animation:none!important;transform:none!important}
  .cat-blog-line{transform:scaleX(1)!important}
}

/* ========== Coverage hub page ========== */
/* Hero stats */
.coverage-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem;max-width:440px}
.cov-stat{background:rgba(0,0,0,.35);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:.8rem .6rem;text-align:center}
.cov-stat strong{display:block;font-family:var(--er-font-head);font-size:1.6rem;color:var(--er-red-text);line-height:1}
.cov-stat span{display:block;color:var(--er-muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.3rem}
@media (max-width:640px){.coverage-stats{grid-template-columns:repeat(2,1fr)}}

/* Animated delivery van scene */
.coverage-map-animated{position:relative;max-width:540px;margin:0 auto;filter:drop-shadow(0 12px 28px rgba(225,6,0,.2))}
.coverage-map-animated svg{width:100%;height:auto;display:block;overflow:hidden}

/* Road dashes scrolling leftward (simulates forward motion) */
.road-dashes rect{animation:road-scroll 1s linear infinite}
@keyframes road-scroll{to{transform:translateX(-80px)}}

/* Van bouncing gently */
.delivery-van{transform-origin:center;animation:van-bounce .35s ease-in-out infinite alternate}
@keyframes van-bounce{from{transform:translateY(0)}to{transform:translateY(1.5px)}}

/* Wheels spinning */
.van-wheel .wheel-spokes{transform-box:fill-box;transform-origin:center;animation:wheel-spin .4s linear infinite}
@keyframes wheel-spin{to{transform:rotate(360deg)}}

/* Headlight pulse */
.van-headlight{animation:van-head 1.8s ease-in-out infinite}
@keyframes van-head{50%{opacity:.5;r:2.5}}

/* Exhaust puff fade */
.van-exhaust circle{animation:van-puff 1s ease-out infinite}
.van-exhaust circle:nth-child(2){animation-delay:.2s}
.van-exhaust circle:nth-child(3){animation-delay:.4s}
@keyframes van-puff{0%{opacity:.6;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(-20px) scale(1.4)}}

/* Packages inside van bobbing */
.van-pkg{transform-box:fill-box;transform-origin:center}
.van-pkg-1{animation:pkg-bob .5s ease-in-out infinite alternate;animation-delay:0s}
.van-pkg-2{animation:pkg-bob .5s ease-in-out infinite alternate;animation-delay:.12s}
.van-pkg-3{animation:pkg-bob .5s ease-in-out infinite alternate;animation-delay:.24s}
@keyframes pkg-bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-1px) rotate(1deg)}}

/* Motion trail fading */
.van-trail rect{animation:trail-fade .7s ease-out infinite}
.van-trail rect:nth-child(2){animation-delay:.1s}
.van-trail rect:nth-child(3){animation-delay:.2s}
@keyframes trail-fade{0%{opacity:.3}100%{opacity:0;transform:translateX(-8px)}}

/* Chequered flag wave */
.flag-wave{transform-box:fill-box;transform-origin:left center;animation:flag-wave 1.5s ease-in-out infinite alternate}
@keyframes flag-wave{from{transform:skewX(-4deg) scaleX(.98)}to{transform:skewX(4deg) scaleX(1.02)}}

/* Dropping packages at each checkpoint appear + fade */
.drop{transform-box:fill-box;transform-origin:center;opacity:0}
.drop-1{animation:drop-appear 4s ease-out infinite;animation-delay:0s}
.drop-2{animation:drop-appear 4s ease-out infinite;animation-delay:1.3s}
.drop-3{animation:drop-appear 4s ease-out infinite;animation-delay:2.6s}
@keyframes drop-appear{
  0%{opacity:0;transform:translateY(-14px) rotate(-20deg)}
  10%{opacity:1;transform:translateY(0) rotate(0)}
  70%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(4px) rotate(10deg)}
}

.coverage-map-legend{margin-top:1rem;font-size:.78rem;color:var(--er-silver);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center}
.coverage-map-legend > span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.coverage-map-legend .legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.coverage-map-legend .legend-hq{background:#FFD700;box-shadow:0 0 8px rgba(255,215,0,.6)}
.coverage-map-legend .legend-city{background:#E10600}
.coverage-map-legend .legend-route{display:inline-block;width:28px;height:2px;background:#E10600}

/* City search */
.cov-search{display:flex;gap:.5rem;max-width:600px;margin:0 auto;flex-wrap:wrap}
.cov-search input{flex:1;min-width:240px;padding:.85rem 1rem;background:var(--er-carbon);border:1px solid var(--er-border);border-radius:var(--er-radius);color:var(--er-text);font-size:1rem;font-family:inherit}
.cov-search input:focus{outline:none;border-color:var(--er-red);box-shadow:0 0 0 3px rgba(225,6,0,.2)}
.cov-search .btn{flex-shrink:0}

/* Timeline */
.cov-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.5rem}
@media (max-width:900px){.cov-timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cov-timeline{grid-template-columns:1fr}}
.cov-step{position:relative;background:rgba(0,0,0,.35);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:1.4rem 1.2rem 1.2rem;transition:border-color .2s}
.cov-step:hover{border-color:var(--er-red-text)}
.cov-step-num{position:absolute;top:-14px;left:1.2rem;background:var(--er-red);color:#fff;font-family:var(--er-font-head);font-size:.78rem;font-weight:800;padding:.3rem .6rem;border-radius:4px;letter-spacing:.08em}
.cov-step h3{margin:0 0 .5rem;font-size:1.05rem}
.cov-step p{color:var(--er-silver);font-size:.92rem;line-height:1.55;margin:0}
.cov-step small{display:block;margin-top:.7rem;color:var(--er-accent);font-family:var(--er-font-head);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* By-community groups */
.coverage-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.coverage-group{background:rgba(0,0,0,.3);border:1px solid var(--er-border);border-radius:var(--er-radius);padding:1.2rem}
.coverage-group h3{margin:0 0 .8rem;color:var(--er-red-text);font-size:1rem;font-family:var(--er-font-head);letter-spacing:.04em;padding-bottom:.4rem;border-bottom:1px solid rgba(225,6,0,.2)}
.coverage-group ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.coverage-group li{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.coverage-group li a{color:var(--er-text);font-size:.9rem;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.coverage-group li a:hover{color:var(--er-accent);border-color:var(--er-accent)}
.coverage-group li small{color:var(--er-muted);font-size:.72rem;font-family:var(--er-font-head);letter-spacing:.04em;white-space:nowrap}

/* Testimonials */
.cov-testimonial{transition:border-color .2s,transform .2s}
.cov-testimonial:hover{border-color:var(--er-red-text);transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .road-dashes rect,.delivery-van,.van-wheel-1 .wheel-spokes,.van-wheel-2 .wheel-spokes,
  .van-headlight,.van-exhaust circle,.van-pkg,.van-trail rect,.flag-wave,.drop{animation:none!important}
}

/* Network dashes */
.cat-dash{stroke-dasharray:3 4;animation:cat-dash 1.2s linear infinite}
@keyframes cat-dash{to{stroke-dashoffset:-14}}

@media (prefers-reduced-motion:reduce){
  .cat-float,.cat-signal rect,.cat-blink,.cat-blink-delay,.cat-blink-text,.cat-check,
  .cat-laptop-lid,.cat-pulse-soft,.cat-orbit,.cat-btn-y,.cat-btn-b,.cat-btn-a,.cat-btn-x,
  .cat-pulse,.cat-tap-1,.cat-tap-2,.cat-disk,.cat-dash{animation:none!important}
}

/* ========== Responsive polish ========== */

/* Hero — tablet & mobile */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .hero-visual{max-width:280px;order:-1;margin-bottom:.5rem}
  .hero-visual .value{font-size:2rem}
  .hero-stats{gap:1.2rem 2rem;margin-top:1.8rem}
  .hero-stat{flex:1 1 45%;min-width:0}
}
@media (max-width:640px){
  .hero{padding:2.5rem 0 2rem}
  .hero h1{font-size:clamp(2rem,8vw,2.6rem);margin-top:.8rem}
  .hero .lead{font-size:1rem;margin-bottom:1.4rem}
  .hero-visual{max-width:220px}
  .hero-visual .value{font-size:1.6rem;transform:translate(-50%,-160%)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .hero-stats{gap:1rem;margin-top:1.5rem}
  .hero-stat strong{font-size:1.6rem}
  .hero-stat{flex:1 1 calc(50% - .5rem)}
}

/* Section spacing tighter on mobile */
@media (max-width:640px){
  .section{padding:2.5rem 0}
  .section-head{margin-bottom:1.8rem}
}

/* Cards grid auto-adapt (already uses auto-fit, but add minor tweaks) */
@media (max-width:640px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
  .card{padding:1.2rem}
}
@media (max-width:420px){
  .grid-4,.grid-6{grid-template-columns:1fr}
}

/* USPs strip — tablet & mobile */
@media (max-width:900px){
  .usps{grid-template-columns:repeat(2,1fr)}
  .usp{border-right:1px solid var(--er-border)}
  .usp:nth-child(2n){border-right:0}
}
@media (max-width:520px){
  .usps{grid-template-columns:1fr}
  .usp{border-right:0}
}

/* Price tables — horizontal scroll on small screens + larger tap area */
@media (max-width:640px){
  .price-table{font-size:.9rem}
  .price-table th,.price-table td{padding:.75rem .6rem}
}
/* Wrap any price-table in a scrollable shell */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;border:1px solid var(--er-border);border-radius:var(--er-radius)}
.table-wrap .price-table{border:0;margin:0;min-width:360px}

/* FAQ on mobile */
@media (max-width:640px){
  .faq details{padding:.8rem 1rem}
  .faq summary{font-size:.95rem;gap:.6rem}
}

/* Forms */
@media (max-width:640px){
  form.er-form{gap:.8rem}
  form.er-form input,form.er-form textarea,form.er-form select{font-size:16px} /* avoid iOS zoom */
}

/* CTA band — stack on mobile */
@media (max-width:700px){
  .cta-band .container{flex-direction:column;align-items:stretch;text-align:center;gap:1.2rem;padding-block:2.2rem}
  .cta-band .flex{justify-content:center}
  .cta-band h2{font-size:1.5rem}
}

/* Hero actions stack on ultra small */
@media (max-width:380px){
  .btn-lg{padding:.9rem 1.2rem;font-size:.9rem}
}

/* Breadcrumbs small screens */
@media (max-width:520px){
  .breadcrumbs{font-size:.78rem;gap:.35rem}
}

/* Chips wrap nicely */
@media (max-width:640px){
  .chips{gap:.4rem}
  .chip{padding:.4rem .7rem;font-size:.78rem}
}

/* Review card text on mobile */
@media (max-width:640px){
  .review{padding:1.2rem}
  .review p{font-size:.95rem}
}

/* Section head headline scaling */
@media (max-width:520px){
  h1{font-size:clamp(1.8rem,7vw,2.4rem)}
  h2{font-size:clamp(1.5rem,5.5vw,2rem)}
  h3{font-size:1.15rem}
}

/* WhatsApp float — move up to avoid overlap with fixed elements */
@media (max-width:640px){
  .whatsapp-float{width:52px;height:52px;bottom:18px;right:18px}
  .whatsapp-float svg{width:26px;height:26px}
}

/* Body padding when mobile menu open */
body.menu-open{overflow:hidden;touch-action:none}

/* Container padding adjustments */
@media (max-width:520px){
  .container{padding-inline:1rem}
}

/* Hero stat label truncate prevention */
.hero-stat span{display:block;max-width:100%;word-break:break-word}

/* Header overflow safety (keep standard container max-width) */
.site-header,.site-header *{min-width:0}
@media (max-width:1024px){
  .site-header .inner > .menu-toggle{margin-left:auto}
  .site-header .inner > .header-cta{order:-1}
}
@media (max-width:640px){
  .site-header .inner > .header-cta{order:0}
}