/* ============================================================
   MAXIMUS WRAPS & SIGNS — Landing Page
   Industrial / contractor aesthetic · black + lime · Anton/Archivo
   ============================================================ */

/* ---- Fonts (self-hosted woff2) ---- */
@font-face{
  font-family:'Anton';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/anton-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;font-weight:100 900;font-stretch:75% 125%;font-display:swap;
  src:url('../assets/fonts/archivo-latin.woff2') format('woff2');
}

/* ---- Design tokens ---- */
:root{
  --black:#070809;
  --ink:#0a0c0e;
  --panel:#0f1316;
  --panel-2:#141a1f;
  --line:#1e262c;
  --white:#ffffff;
  --gray:#aeb7bf;
  --gray-dim:#6b7884;
  --lime:#95c11f;
  --lime-bright:#aee23a;
  --lime-deep:#6f9112;
  --danger:#e2533f;

  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --shadow-card:0 18px 50px -22px rgba(0,0,0,.85);
  --shadow-lime:0 14px 40px -12px rgba(149,193,31,.45);
  --maxw:1200px;
  --skew:-7deg;
  --r:14px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
ul{list-style:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Grain overlay for atmosphere */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layout helpers ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,5vw,40px)}
.section{position:relative;padding:clamp(64px,9vw,120px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lime);margin-bottom:18px;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--lime)}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.94;letter-spacing:.01em;text-transform:uppercase}
.h-display{transform:skewX(var(--skew));transform-origin:left}
.lime{color:var(--lime)}
.outline-txt{color:transparent;-webkit-text-stroke:2px var(--gray-dim)}

h2.title{font-size:clamp(2.1rem,6vw,4.6rem);margin-bottom:18px}
.lead{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--gray);max-width:62ch}

/* ---- Buttons ---- */
.btn{
  --pad-y:17px;--pad-x:30px;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-weight:800;font-size:.96rem;letter-spacing:.04em;text-transform:uppercase;
  padding:var(--pad-y) var(--pad-x);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease;
  white-space:nowrap;line-height:1;
}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--lime);color:#0a0c08;box-shadow:var(--shadow-lime)}
.btn-primary:hover{background:var(--lime-bright);transform:translateY(-3px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--lime);color:var(--lime);transform:translateY(-3px)}
.btn-dark{background:#0b0d0f;color:var(--white);box-shadow:inset 0 0 0 2px #232b31}
.btn-dark:hover{box-shadow:inset 0 0 0 2px var(--lime)}
.btn-lg{--pad-y:21px;--pad-x:38px;font-size:1.05rem}
.btn-block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(7,8,9,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.site-header.scrolled{background:rgba(7,8,9,.97)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:11px}
.brand img.logo{height:30px;width:auto;filter:invert(1) brightness(1.6)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);transition:color .18s}
.nav a:hover{color:var(--lime)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--white);font-size:.98rem}
.header-phone svg{width:18px;height:18px;color:var(--lime)}
.nav-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--line);border-radius:8px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:22px;height:2px;background:var(--white);transition:.25s}
.nav-toggle span::before{transform:translateY(-7px)}.nav-toggle span::after{transform:translateY(5px)}
.nav-toggle.open span{background:transparent}
.nav-toggle.open span::before{transform:rotate(45deg)}
.nav-toggle.open span::after{transform:rotate(-45deg) translateY(-2px)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--black)}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--black)}
.hero-media picture{position:absolute;inset:0;display:block;z-index:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
/* Video fades in only once it is actually playing (js/main.js adds .is-playing).
   Until then — and forever, if autoplay is blocked — the still image shows. */
.hero-video{z-index:1;opacity:0;transition:opacity .8s ease}
.hero-media.is-playing .hero-video{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(5,6,7,.97) 0%,rgba(5,6,7,.86) 38%,rgba(5,6,7,.45) 70%,rgba(5,6,7,.7) 100%),
    linear-gradient(0deg,var(--black) 2%,transparent 38%);
}
.hero-glow{position:absolute;z-index:-1;inset:0;
  background:radial-gradient(60% 50% at 80% 35%,rgba(149,193,31,.16),transparent 70%)}
.hero-in{padding:clamp(48px,8vw,96px) 0 0}
.hero-title{
  display:flex;flex-direction:column;align-items:flex-start;max-width:100%;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,8.6vw,6.4rem);line-height:.88;letter-spacing:.01em;
}
/* per-line skew, anchored bottom-left → uniform lean, clean left edge, no overlap */
.hero-title .hl{display:inline-block;transform:skewX(var(--skew));transform-origin:bottom left}
.hero-title .hl + .hl{margin-top:.07em}
.hero-title .hl-into{margin:.18em 0;transform:none}
.hero-title .into{
  display:inline-block;background:var(--lime);color:#0a0c08;
  font-size:.3em;letter-spacing:.1em;padding:.42em 1.15em;line-height:1.05;
  transform:skewX(var(--skew));transform-origin:bottom left;
  box-shadow:6px 6px 0 rgba(149,193,31,.18);
}
.hero-sub{margin:26px 0 14px;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:800;color:var(--white);letter-spacing:.01em;line-height:1.25}
.hero-sub b{color:var(--lime)}
.hero-desc{font-size:1.05rem;color:var(--gray);max-width:54ch;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-rating{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.stars{color:var(--lime);letter-spacing:3px;font-size:1.15rem}
.hero-rating .rtxt{font-size:.86rem;color:var(--gray);font-weight:600}
.hero-rating .rtxt b{color:var(--white)}

/* value-prop cards under hero */
.trust-strip{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,72px);background:linear-gradient(180deg,rgba(12,15,18,.55),rgba(7,8,9,.92))}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:clamp(22px,3vw,32px) 0;list-style:none}
.trust-cell{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;
  padding:20px 22px;border:1px solid var(--line);border-radius:15px;
  background:linear-gradient(180deg,#11161a,#0b0e11);
  transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease;
}
.trust-cell::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--lime);transform:scaleY(0);transform-origin:top;transition:transform .28s ease}
.trust-cell:hover{transform:translateY(-5px);border-color:rgba(149,193,31,.5);box-shadow:0 20px 44px -26px rgba(0,0,0,.95)}
.trust-cell:hover::before{transform:scaleY(1)}
.trust-cell .ti{
  flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;color:var(--lime);
  background:rgba(149,193,31,.1);border:1px solid rgba(149,193,31,.28);border-radius:14px;transition:background .2s ease;
}
.trust-cell:hover .ti{background:rgba(149,193,31,.2)}
.trust-cell .ti svg{width:26px;height:26px}
.trust-cell .tc b{display:block;font-family:var(--body);font-weight:800;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.1;margin-bottom:4px}
.trust-cell .tc span{display:block;font-size:.85rem;color:var(--gray);line-height:1.32;font-weight:500}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{background:linear-gradient(180deg,var(--black),var(--ink))}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cmp{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 32px;overflow:hidden}
.cmp::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px}
.cmp.bad::before{background:var(--danger)}
.cmp.good::before{background:var(--lime)}
.cmp.good{border-color:rgba(149,193,31,.4);background:linear-gradient(180deg,rgba(149,193,31,.07),var(--panel));box-shadow:var(--shadow-lime)}
.cmp-tag{display:inline-flex;align-items:center;gap:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin-bottom:16px}
.cmp.bad .cmp-tag{color:var(--danger)}.cmp.good .cmp-tag{color:var(--lime)}
.cmp h3{font-family:var(--body);font-weight:800;font-size:1.18rem;text-transform:none;line-height:1.2;margin-bottom:18px;letter-spacing:0}
.cmp ul li{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line);color:var(--gray);font-weight:600}
.cmp ul li:first-child{border-top:none}
.cmp .ic{flex:0 0 auto;width:20px;height:20px}
.cmp.good .ic{color:var(--lime)}.cmp.bad .ic{color:var(--danger)}

/* ============================================================
   WORK GALLERY
   ============================================================ */
.gal-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--ink)}
/* contain, not cover: on a wrap portfolio a cropped-off tailgate is the whole point missed.
   The letterbox is painted --ink, so it reads as the card, not as a bar. */
.gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--ink);transition:transform .5s ease}
.gal:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;
  background:linear-gradient(0deg,rgba(5,6,7,.94) 30%,transparent)}
.gal figcaption b{display:block;font-size:.9rem;color:var(--white)}
.gal figcaption span{font-size:.75rem;color:var(--gray)}
@media(max-width:1080px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.svc{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px 30px;overflow:hidden;transition:transform .2s ease,border-color .2s ease;
}
.svc::after{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(149,193,31,.12),transparent 70%);transition:transform .35s ease}
.svc:hover{transform:translateY(-6px);border-color:rgba(149,193,31,.45)}
.svc:hover::after{transform:scale(1.6)}
.svc .icon{width:54px;height:54px;display:grid;place-items:center;color:var(--lime);background:rgba(149,193,31,.1);border-radius:12px;margin-bottom:18px}
.svc .icon svg{width:30px;height:30px}
.svc h3{font-family:var(--body);font-weight:800;font-size:1.16rem;text-transform:none;letter-spacing:0;margin-bottom:8px;line-height:1.15}
.svc p{font-size:.92rem;color:var(--gray)}

/* ============================================================
   WHY MAXIMUS
   ============================================================ */
.why{background:linear-gradient(180deg,var(--ink),var(--black))}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:46px}
.why-cell{background:var(--black);padding:30px 26px;transition:background .2s}
.why-cell:hover{background:var(--panel)}
.why-cell .num{font-family:var(--display);font-size:1.05rem;color:var(--lime);letter-spacing:.06em}
.why-cell h3{font-family:var(--body);font-weight:800;font-size:1.1rem;text-transform:none;letter-spacing:0;margin:10px 0 7px;line-height:1.15}
.why-cell p{font-size:.88rem;color:var(--gray)}

/* ============================================================
   REVIEWS / SOCIAL PROOF
   ============================================================ */
.reviews{background:var(--black)}
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.google-badge{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px}
.google-badge .g{font-family:var(--display);font-size:1.7rem}
.google-badge .g b:nth-child(1){color:#4285F4}.google-badge .g b:nth-child(2){color:#EA4335}.google-badge .g b:nth-child(3){color:#FBBC05}.google-badge .g b:nth-child(4){color:#4285F4}.google-badge .g b:nth-child(5){color:#34A853}.google-badge .g b:nth-child(6){color:#EA4335}
.google-badge .gr b{font-family:var(--display);font-size:1.5rem;color:var(--white)}
.google-badge .stars{font-size:.95rem}
.google-badge small{color:var(--gray);font-size:.78rem;display:block}
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
.review{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
/* The customer's own wrapped vehicle is the proof — the quote only captions it. */
.review-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line)}
.review-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.review .stars{font-size:1rem}
.review p{color:#d5dadf;font-size:.96rem;font-style:italic}
.review .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px}
.avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;color:#0a0c08;background:var(--lime)}
.review .who b{font-weight:800;font-size:.95rem;display:block}
.review .who span{font-size:.78rem;color:var(--gray-dim)}
.verified{margin-left:auto;font-size:.68rem;color:var(--lime);display:flex;align-items:center;gap:5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.verified svg{width:14px;height:14px}

/* ============================================================
   ROI
   ============================================================ */
.roi{background:linear-gradient(180deg,var(--black),var(--ink));position:relative;overflow:hidden}
.roi .wrap{position:relative;z-index:1}
.roi-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;margin-top:30px}
.roi h2{font-size:clamp(2.2rem,6vw,4.4rem)}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lime)}
.stat .big{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--lime);line-height:1;transform:skewX(var(--skew))}
.stat .lbl{font-size:.82rem;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-top:8px;font-weight:600}
.roi-note{display:flex;gap:12px;align-items:flex-start;margin-top:22px;color:var(--gray);font-size:.95rem}
.roi-note svg{flex:0 0 auto;width:22px;height:22px;color:var(--lime);margin-top:2px}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px;counter-reset:step}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px 26px 30px}
.step .n{font-family:var(--display);font-size:3.2rem;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--lime);transform:skewX(var(--skew));display:inline-block}
.step h3{font-family:var(--body);font-weight:800;font-size:1.18rem;text-transform:none;letter-spacing:0;margin:14px 0 8px}
.step p{font-size:.92rem;color:var(--gray)}
.step .arrow{position:absolute;top:50%;right:-13px;color:var(--lime);z-index:2;background:var(--ink);transform:translateY(-50%)}
.step .arrow svg{width:24px;height:24px}
.step:last-child .arrow{display:none}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:linear-gradient(180deg,var(--ink),var(--black))}
.faq-grid{margin-top:40px;display:grid;gap:14px;max-width:920px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:rgba(149,193,31,.4)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;font-weight:800;font-size:1.05rem;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:var(--lime);transition:transform .25s}
.faq-item[open] summary .pm{transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 24px;color:var(--gray);font-size:.98rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;background:var(--lime);color:#0a0c08;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 14px,transparent 14px 28px)}
.final .wrap{position:relative;z-index:1;text-align:center;padding-block:clamp(60px,8vw,100px)}
.final h2{font-size:clamp(2.3rem,7vw,5rem);color:#0a0c08;max-width:18ch;margin-inline:auto}
.final p{font-size:1.2rem;font-weight:700;margin:18px 0 30px;color:#16210a}
.final .cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.final .btn-dark{background:#0a0c08;color:var(--white)}
.final .btn-dark:hover{box-shadow:inset 0 0 0 2px #0a0c08;background:#16210a}
.final .btn-outline-dark{box-shadow:inset 0 0 0 2px #0a0c08;color:#0a0c08}
.final .btn-outline-dark:hover{background:#0a0c08;color:var(--lime)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);border-top:1px solid var(--line);padding:clamp(48px,7vw,80px) 0 30px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand img{height:34px;filter:invert(1) brightness(1.6);margin-bottom:18px}
.footer-brand p{color:var(--gray);max-width:38ch;font-size:.95rem}
.footer-brand .tagline{color:var(--lime);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin-top:16px}
.footer-col h4{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;margin-bottom:16px}
.footer-col a,.footer-col p{display:block;color:var(--gray);font-size:.92rem;padding:5px 0;transition:color .18s}
.footer-col a:hover{color:var(--lime)}
.footer-col .row{display:flex;gap:10px;align-items:flex-start;color:var(--gray);font-size:.92rem;padding:5px 0}
.footer-col .row svg{flex:0 0 auto;width:17px;height:17px;color:var(--lime);margin-top:3px}
.footer-bottom{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;color:var(--gray-dim);font-size:.82rem}
.footer-bottom a{color:var(--gray)}.footer-bottom a:hover{color:var(--lime)}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.6);
}
.mobile-cta a,.mobile-cta button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.92rem;line-height:1}
.mobile-cta svg{flex:0 0 auto;width:19px;height:19px}
.mobile-cta .m-call{background:var(--ink);color:var(--white)}
.mobile-cta .m-quote{background:var(--lime);color:#0a0c08}

/* ============================================================
   QUOTE MODAL / MULTI-STEP FORM
   ============================================================ */
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(3,4,5,.82);backdrop-filter:blur(5px)}
.modal-card{position:relative;width:100%;max-width:540px;max-height:92vh;overflow:auto;background:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
.modal-head{padding:26px 28px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink);z-index:2}
.modal-head h3{font-size:1.7rem;letter-spacing:.02em}
.modal-head p{color:var(--gray);font-size:.9rem;margin-top:6px}
.modal-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--gray);box-shadow:inset 0 0 0 1px var(--line)}
.modal-close:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--lime)}
.progress{display:flex;gap:8px;margin-top:18px}
.progress i{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s}
.progress i.on{background:var(--lime)}
.modal-body{padding:26px 28px 30px}
.fstep{display:none}.fstep.active{display:block;animation:fadeUp .35s ease}
.fstep h4{font-family:var(--body);font-weight:800;font-size:1.15rem;margin-bottom:6px}
.fstep .hint{color:var(--gray);font-size:.86rem;margin-bottom:20px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.18s;font-weight:700;font-size:.95rem}
.opt:hover{border-color:rgba(149,193,31,.5)}
.opt input{position:absolute;opacity:0}
.opt .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);transition:.18s}
.opt:has(input:checked){border-color:var(--lime);background:rgba(149,193,31,.08)}
.opt:has(input:checked) .dot{background:var(--lime);box-shadow:inset 0 0 0 2px var(--lime),inset 0 0 0 5px var(--ink)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.84rem;margin-bottom:7px;color:var(--gray)}
.field label .req{color:var(--lime)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--white);transition:.18s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);background:#11161a}
.field.err input{border-color:var(--danger)}
.field .msg{color:var(--danger);font-size:.78rem;margin-top:6px;display:none}
.field.err .msg{display:block}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modal-nav{display:flex;gap:12px;margin-top:24px}
.modal-nav .btn{flex:1}
.form-reassure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;color:var(--gray-dim);font-size:.8rem}
.form-reassure svg{width:15px;height:15px;color:var(--lime)}
.form-success{display:none;text-align:center;padding:20px 0}
.form-success.show{display:block;animation:fadeUp .4s ease}
.form-success .check{width:78px;height:78px;border-radius:50%;background:rgba(149,193,31,.12);display:grid;place-items:center;margin:0 auto 22px;color:var(--lime)}
.form-success .check svg{width:42px;height:42px}
.form-success h3{font-size:2rem;margin-bottom:10px}
.form-success p{color:var(--gray);margin-bottom:24px}

/* ---- Reveal animation ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .svc-grid,.why-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .step .arrow{display:none}
  .roi-grid{grid-template-columns:1fr;gap:34px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .nav,.header-phone{display:none}
  .nav-toggle{display:flex}
  .nav.mobile-open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid var(--line);padding:10px 0}
  .nav.mobile-open a{padding:15px clamp(18px,5vw,40px);width:100%;border-top:1px solid var(--line)}
  .compare,.rev-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .stat-cards{grid-template-columns:1fr 1fr}
  .mobile-cta{display:grid}
  body{padding-bottom:58px}
  .header-cta .btn{display:none}
}
@media(max-width:600px){
  .svc-grid,.why-grid,.steps,.opt-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .hero-title{--skew:-5deg;font-size:clamp(2.15rem,9.4vw,3.4rem)}
  .hero-title .into{font-size:.4em}
  .hero-in{padding-inline:20px}
  /* Phones get the 9:16 cut, and the media stops short of the full hero height —
     covering a 390x1500 box with any clip zooms it into a useless close-up. */
  .hero-media{inset:0 0 auto 0;height:min(72%,720px)}
  /* The desktop scrim is horizontal because the copy sits on the left; on phones the
     copy is full-width, so it has to darken top-down or the vehicles disappear. */
  .hero-media::after{background:linear-gradient(180deg,rgba(5,6,7,.93) 0%,rgba(5,6,7,.8) 40%,rgba(5,6,7,.5) 72%,var(--black) 100%)}
  .hero-media img,.hero-media video{object-position:50% 52%}
  .hero-cta .btn,.final .cta-row .btn{width:100%}
  .hero-rating{gap:8px}
  h2.title{font-size:clamp(1.9rem,8vw,4.6rem)}
  .btn{--pad-x:24px}
  .modal-nav{flex-wrap:wrap}
}
@media(max-width:380px){
  .stat-cards{grid-template-columns:1fr}
}