:root{
  --bg:#080b0d;
  --panel:#0f1316;
  --panel2:#151a1e;
  --text:#f7f7f7;
  --muted:#aab1b7;
  --red:#ef233c;
  --red-dark:#b9162a;
  --line:#283038;
  --max:1200px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

a{
  color:inherit;
  text-decoration:none;
}

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

.container{
  width:min(var(--max),calc(100% - 32px));
  margin-inline:auto;
}

.section-pad{
  padding:92px 0;
}

.section-pad-sm{
  padding:28px 0 56px;
}


/* ==============================
   HEADER
============================== */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,11,13,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-wrap{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}

.brand-mark{
  font-family:"Barlow Condensed",sans-serif;
  font-style:italic;
  font-size:40px;
  line-height:1;
  color:var(--red);
  font-weight:800;
  letter-spacing:-2px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
}

.brand-copy strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:20px;
  letter-spacing:.5px;
}

.brand-copy small{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.9px;
}

.main-nav{
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:14px;
}

.main-nav a:hover{
  color:var(--red);
}


/* ==============================
   BUTTONS
============================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:4px;
  border:1px solid transparent;
  font-weight:700;
  transition:.2s ease;
  cursor:pointer;
}

.btn-primary{
  background:var(--red);
  color:#fff;
}

.btn-primary:hover{
  background:var(--red-dark);
  transform:translateY(-1px);
}

.btn-outline{
  border-color:#78818a;
  background:rgba(255,255,255,.02);
}

.btn-outline:hover{
  border-color:#fff;
  background:rgba(255,255,255,.05);
}

.menu-toggle{
  display:none;
  margin-left:auto;
  background:none;
  border:1px solid var(--line);
  color:#fff;
  font-size:24px;
  border-radius:4px;
}


/* ==============================
   HERO
============================== */

.hero{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(4,5,6,.98) 0%,
      rgba(4,5,6,.82) 38%,
      rgba(4,5,6,.34) 67%,
      rgba(4,5,6,.12) 100%
    ),
    url('assets/hero-photo.jpg') 72% center/cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    transparent 65%,
    var(--bg) 100%
  );
}

.hero-grid{
  position:relative;
}

.hero-copy{
  max-width:760px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:13px;
  font-weight:700;
  color:#dfe4e8;
}

.centered{
  text-align:center;
}

.hero h1,
.feature-card h2,
.gains h2,
.reviews h2,
.coverage h2,
.cta-band h2{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  margin:0;
}

.hero h1{
  font-size:clamp(72px,10vw,138px);
  line-height:.82;
  letter-spacing:-3px;
}

.lead{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  font-size:26px;
  font-weight:700;
  margin:18px 0 22px;
}

.service-inline{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  color:#e8ebee;
  font-size:14px;
}

.service-inline span::before{
  content:'•';
  color:var(--red);
  margin-right:8px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:42px;
}

.trust-strip div{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:12px;
}

.trust-strip strong,
.trust-strip span{
  display:block;
}

.trust-strip span{
  color:var(--muted);
  font-size:12px;
}


/* ==============================
   MAIN FEATURE CARDS
============================== */

.split-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.feature-card{
  min-height:330px;
  position:relative;
  overflow:hidden;
  border:1px solid #394149;
  border-radius:6px;
  background-size:cover;
  background-position:center;
}

.mechanic-card{
  background-image:
    url('assets/mobile-mechanic-at-work.jpg');
}

.remap-card{
  background-image:
    url('assets/ecu-remap-software.jpg');
}

.carbon-card{
  background-image:
    url('assets/carbon-kingz-machine.jpg');
  background-position:center 45%;
}

.feature-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(8,11,13,.96),
      rgba(8,11,13,.5)
    );
}

.feature-content{
  position:relative;
  padding:34px;
  max-width:470px;
}

.icon-badge{
  font-size:34px;
}

.feature-card h2{
  font-size:42px;
  margin:16px 0 8px;
}

.feature-card p{
  color:#d7dce0;
  max-width:390px;
}


/* ==================================================
   SERVICE CARDS
   NEW HOVER + GLOW EFFECTS
================================================== */

.service-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.service-card{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  min-height:230px;
  padding:24px 18px;

  background:
    linear-gradient(
      180deg,
      var(--panel2),
      var(--panel)
    );

  border:1px solid var(--line);
  border-radius:6px;

  cursor:pointer;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* Red glow from bottom */

.service-card::before{
  content:"";

  position:absolute;

  width:160px;
  height:160px;

  left:50%;
  bottom:-140px;

  transform:translateX(-50%);

  background:rgba(239,35,60,.5);

  filter:blur(65px);

  opacity:0;

  transition:
    opacity .35s ease,
    bottom .35s ease;

  pointer-events:none;
}


/* Light sweep */

.service-card::after{
  content:"";

  position:absolute;

  top:-50%;
  left:-120%;

  width:65%;
  height:200%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  transform:rotate(15deg);

  transition:left .65s ease;

  pointer-events:none;
}


/* Hover whole card */

.service-card:hover{
  transform:translateY(-9px);

  border-color:var(--red);

  background:
    linear-gradient(
      180deg,
      rgba(239,35,60,.10),
      #0d1114 80%
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.42),
    0 0 0 1px rgba(239,35,60,.18),
    0 0 30px rgba(239,35,60,.16);
}

.service-card:hover::before{
  opacity:1;
  bottom:-95px;
}

.service-card:hover::after{
  left:150%;
}


/* Service icon */

.service-icon{
  position:relative;
  z-index:2;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      #1b2228,
      #101417
    );

  border:1px solid #39444c;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.service-card:hover .service-icon{
  transform:
    translateY(-3px)
    scale(1.08)
    rotate(-3deg);

  border-color:var(--red);

  box-shadow:
    0 0 22px rgba(239,35,60,.32);
}


/* Service heading */

.service-card h3{
  position:relative;
  z-index:2;

  margin:18px 0 8px;

  font-size:16px;

  transition:
    color .25s ease,
    transform .25s ease;
}

.service-card:hover h3{
  color:#fff;
  transform:translateX(3px);
}


/* Service description */

.service-card p{
  position:relative;
  z-index:2;

  color:var(--muted);

  font-size:13px;

  margin:0 0 22px;

  line-height:1.6;
}


/* Learn more section */

.service-link{
  position:relative;
  z-index:3;

  margin-top:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  color:#aab1b7;

  font-size:13px;
  font-weight:600;

  transition:color .3s ease;
}

.service-card:hover .service-link{
  color:var(--red);
}


/* Arrow */

.service-arrow{
  width:36px;
  height:36px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#202830;

  border:1px solid #39444c;

  color:white;

  font-size:28px;

  line-height:1;

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.service-card:hover .service-arrow{
  background:var(--red);

  border-color:var(--red);

  transform:
    translateX(4px)
    scale(1.08);

  box-shadow:
    0 0 20px rgba(239,35,60,.45);
}


/* Click animation */

.service-card.card-clicked{
  animation:serviceClick .45s ease;
}

@keyframes serviceClick{

  0%{
    transform:translateY(-9px) scale(1);
  }

  45%{
    transform:translateY(-9px) scale(.97);
  }

  100%{
    transform:translateY(-9px) scale(1);
  }

}


/* ==============================
   VEHICLE GAINS
============================== */

.gains{
  background:
    linear-gradient(
      90deg,
      rgba(8,11,13,.97),
      rgba(8,11,13,.72)
    );

  border-block:1px solid var(--line);
}

.gains-grid{
  display:grid;
  grid-template-columns:minmax(0,680px) 1fr;
}

.gains h2{
  font-size:54px;
}

.gains p{
  color:#d9dde0;
}

.gains-form{
  display:flex;
  gap:10px;
  margin-top:24px;
}

.gains-form input{
  flex:1;
  min-height:52px;
  border-radius:4px;
  border:none;
  padding:0 15px;
  font-size:16px;
}

.form-note{
  font-size:12px;
  color:var(--muted)!important;
}


/* ==============================
   WHY CHOOSE US
============================== */

.why-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  margin-top:24px;
}

.why-grid div{
  text-align:center;
  padding:22px 10px;
}

.why-grid strong,
.why-grid span{
  display:block;
}

.why-grid span{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}


/* ==============================
   REVIEWS
============================== */

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.reviews h2{
  font-size:44px;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.review-grid blockquote{
  margin:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px;
  padding:24px;
}

.stars{
  color:var(--red);
  letter-spacing:3px;
}

.review-grid p{
  color:#eef1f3;
}

.review-grid cite{
  color:var(--muted);
  font-style:normal;
  font-size:13px;
}


/* ==============================
   COVERAGE AREA
============================== */

.coverage{
  background:#0b0f12;
}

.coverage-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:60px;
  align-items:center;
}

.coverage h2{
  font-size:54px;
}

.coverage p{
  color:var(--muted);
}

.map-card{
  min-height:380px;
  position:relative;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 55% 52%,
      rgba(239,35,60,.18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #151a1d,
      #090b0d
    );
}

.map-card::before,
.map-card::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:36px 36px;
}

.map-ring{
  position:absolute;

  width:250px;
  height:250px;

  border:1px solid rgba(239,35,60,.55);

  border-radius:50%;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  box-shadow:
    0 0 0 60px rgba(239,35,60,.04);
}

.map-pin{
  position:absolute;
  z-index:2;
  font-size:12px;
}

.map-pin::before{
  content:"";

  display:inline-block;

  width:8px;
  height:8px;

  background:var(--red);

  border-radius:50%;

  margin-right:6px;
}

.pin-1{
  left:49%;
  top:34%;
}

.pin-2{
  left:61%;
  top:50%;
}

.pin-3{
  left:69%;
  top:65%;
}

.pin-4{
  left:30%;
  top:52%;
}

.pin-5{
  left:43%;
  top:71%;
}


/* ==============================
   CTA
============================== */

.cta-band{
  border-top:1px solid var(--line);

  background:
    linear-gradient(
      180deg,
      #101519,
      #090c0e
    );
}

.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.cta-band h2{
  font-size:44px;
}


/* ==============================
   FOOTER
============================== */

.site-footer{
  padding-top:48px;
  border-top:1px solid var(--line);
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1.4fr;
  gap:40px;
}

.footer-grid>div:not(.brand){
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-grid a,
.footer-grid span{
  font-size:13px;
  color:var(--muted);
}

.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:20px 0;
  color:#7f878d;
  font-size:12px;
}


/* ==============================
   TABLET
============================== */

@media(max-width:980px){

  .main-nav,
  .nav-cta{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .main-nav.open{
    position:absolute;
    display:flex;
    flex-direction:column;

    top:76px;
    left:16px;
    right:16px;

    background:#0d1114;

    border:1px solid var(--line);

    padding:18px;

    border-radius:6px;
  }

  .trust-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .service-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .why-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .coverage-grid{
    grid-template-columns:1fr;
  }

  .cta-inner{
    flex-direction:column;
    align-items:flex-start;
  }

}


/* ==============================
   MOBILE
============================== */

@media(max-width:720px){

  .section-pad{
    padding:68px 0;
  }

  .hero{
    min-height:720px;
    background-position:68% center;
  }

  .hero h1{
    font-size:72px;
  }

  .lead{
    font-size:21px;
  }

  .split-cards{
    grid-template-columns:1fr;
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .gains-grid{
    grid-template-columns:1fr;
  }

  .gains-form{
    flex-direction:column;
  }

  .why-grid{
    grid-template-columns:1fr 1fr;
  }

  .review-grid{
    grid-template-columns:1fr;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .brand-copy small{
    display:none;
  }

  .nav-wrap{
    min-height:68px;
  }

  .brand-mark{
    font-size:34px;
  }

  .brand-copy strong{
    font-size:18px;
  }

  .feature-card h2,
  .gains h2,
  .coverage h2,
  .reviews h2,
  .cta-band h2{
    font-size:38px;
  }

}


/* ==============================
   SMALL MOBILE
============================== */

@media(max-width:480px){

  .service-grid,
  .why-grid,
  .trust-strip{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:58px;
  }

  .container{
    width:min(
      var(--max),
      calc(100% - 22px)
    );
  }

  .feature-content{
    padding:26px 22px;
  }

  .map-card{
    min-height:320px;
  }

}

/* ==============================
   SCROLLING SERVICE TICKER
============================== */

.service-ticker{
  position:relative;
  width:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#0d1114 0%,#090c0e 100%);
  border-top:1px solid #252c31;
  border-bottom:1px solid #252c31;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 10px 30px rgba(0,0,0,.25);
  padding:17px 0;
}

.service-ticker::before,
.service-ticker::after{
  content:"";
  position:absolute;
  top:0;
  width:120px;
  height:100%;
  z-index:3;
  pointer-events:none;
}

.service-ticker::before{
  left:0;
  background:linear-gradient(
    90deg,
    #090c0e 0%,
    rgba(9,12,14,.8) 35%,
    transparent 100%
  );
}

.service-ticker::after{
  right:0;
  background:linear-gradient(
    270deg,
    #090c0e 0%,
    rgba(9,12,14,.8) 35%,
    transparent 100%
  );
}

.ticker-track{
  display:flex;
  width:max-content;
  animation:rsTicker 28s linear infinite;
  will-change:transform;
}

.ticker-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:34px;
  padding-right:34px;
  white-space:nowrap;
}

.ticker-group span{
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#c9ced2;
}

.ticker-group .ticker-dot{
  color:var(--red);
  font-size:9px;
  letter-spacing:0;
}

@keyframes rsTicker{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

.service-ticker:hover .ticker-track,
.ticker:hover .ticker-track,
.ticker-track:hover{
  animation-play-state:running !important;
}

@media(max-width:720px){
  .service-ticker{
    padding:14px 0;
  }

  .ticker-track{
    animation-duration:34s;
  }

  .ticker-group{
    gap:26px;
    padding-right:26px;
  }

  .ticker-group span{
    font-size:15px;
    letter-spacing:1.7px;
  }

  .service-ticker::before,
  .service-ticker::after{
    width:55px;
  }
}

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


/* ==============================
   RS PERFORMANCE LOGO
============================== */

.brand-logo-link{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  min-width:0;
}

.site-logo{
  display:block;
  width:195px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.footer-logo{
  display:block;
  width:220px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:980px){
  .site-logo{
    width:175px;
  }
}

@media(max-width:720px){
  .site-logo{
    width:155px;
  }

  .footer-logo{
    width:200px;
  }
}

@media(max-width:420px){
  .site-logo{
    width:145px;
  }
}


/* Mobile positioning for the new ECU tuning / mobile mechanic hero image */
@media(max-width:720px){
  .hero{
    background-position:64% center;
  }
}


/* ==============================
   MULTI-PAGE NAVIGATION
============================== */

.nav-item{
  position:relative;
}

.dropdown-label{
  display:flex;
  align-items:center;
  gap:6px;
}

.dropdown-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:0;
  line-height:1;
  padding:0;
  margin:0;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.dropdown-toggle::before{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
}

.dropdown:hover .dropdown-toggle,
.dropdown:focus-within .dropdown-toggle{
  color:var(--red);
}

.dropdown-menu{
  position:absolute;
  top:calc(100% + 18px);
  left:-18px;
  width:245px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(10,13,15,.98);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s ease;
}

.dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:20px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:5px;
  color:#d9dde0;
}

.dropdown-menu a:hover{
  background:rgba(239,35,60,.10);
  color:#fff;
}


/* ==============================
   INTERNAL PAGES
============================== */

.page-hero{
  position:relative;
  padding:100px 0 78px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 82% 42%, rgba(239,35,60,.14), transparent 32%),
    linear-gradient(135deg,#11161a 0%,#080b0d 70%);
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,.025));
}

.page-hero .container{
  position:relative;
  z-index:1;
}

.page-hero h1{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(56px,8vw,94px);
  line-height:.9;
  text-transform:uppercase;
  margin:8px 0 18px;
  max-width:900px;
}

.page-hero .lead{
  max-width:720px;
  font-family:Inter,system-ui,sans-serif;
  text-transform:none;
  font-size:18px;
  font-weight:400;
  color:#d0d5d9;
  line-height:1.7;
}

.breadcrumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}

.breadcrumbs a:hover{
  color:var(--red);
}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);
  gap:42px;
  align-items:start;
}

.content-card,
.info-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px;
}

.content-card h2,
.info-card h2,
.service-overview-card h2,
.vehicle-search-panel h2{
  margin:0 0 14px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:38px;
  line-height:1;
  text-transform:uppercase;
}

.content-card h3{
  margin-top:28px;
  font-size:18px;
}

.content-card p,
.info-card p,
.service-overview-card p{
  color:var(--muted);
}

.check-list{
  list-style:none;
  padding:0;
  margin:22px 0 0;
}

.check-list li{
  position:relative;
  padding:10px 0 10px 28px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--red);
  font-weight:800;
}

.info-card{
  position:sticky;
  top:100px;
}

.info-card .btn{
  width:100%;
  margin-top:10px;
}

.services-overview{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.service-overview-card{
  display:flex;
  flex-direction:column;
  min-height:285px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  transition:.25s ease;
}

.service-overview-card:hover{
  transform:translateY(-6px);
  border-color:var(--red);
  box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 26px rgba(239,35,60,.10);
}

.service-overview-card .service-icon{
  margin-bottom:20px;
}

.service-overview-card .service-link{
  margin-top:auto;
}

.page-cta{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0f12;
}

.page-cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.page-cta h2{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  font-size:42px;
  margin:0;
}

.vehicle-search-panel{
  max-width:820px;
  margin:0 auto;
  padding:36px;
  border:1px solid var(--line);
  border-radius:9px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}

.vehicle-search-panel .gains-form{
  margin-top:24px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-option{
  padding:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}

.contact-option h2{
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  font-size:34px;
  margin:0 0 8px;
}

.contact-option p{
  color:var(--muted);
}

.contact-option .btn{
  margin-top:12px;
}

.site-footer .footer-grid{
  grid-template-columns:1.25fr .8fr .9fr 1fr;
}

@media(max-width:980px){
  .content-grid{
    grid-template-columns:1fr;
  }

  .info-card{
    position:static;
  }

  .services-overview{
    grid-template-columns:repeat(2,1fr);
  }

  .site-footer .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:720px){
  .main-nav .nav-item{
    width:100%;
  }

  .dropdown-label{
    width:100%;
    justify-content:space-between;
  }

  .dropdown-toggle{
    width:42px;
    height:38px;
    border:1px solid var(--line);
    border-radius:4px;
    margin-left:0;
  }

  .dropdown:hover .dropdown-toggle{
    transform:none;
  }

  .dropdown-menu{
    position:static;
    display:none;
    width:100%;
    margin:6px 0 8px;
    padding:6px;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:#0d1114;
  }

  .dropdown.open .dropdown-menu{
    display:block;
  }

  .page-hero{
    padding:72px 0 58px;
  }

  .page-hero h1{
    font-size:58px;
  }

  .services-overview,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .page-cta-inner{
    display:block;
  }

  .page-cta .hero-actions{
    margin-top:22px;
  }

  .vehicle-search-panel{
    padding:24px 18px;
  }

  .site-footer .footer-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   ABOUT US PAGE
   ========================================================= */

.main-nav > a[aria-current="page"]{
  color:#fff;
}

.main-nav > a[aria-current="page"]::after{
  transform:scaleX(1);
}

.about-hero{
  position:relative;
  overflow:hidden;
  padding:104px 0 92px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 80% 38%,rgba(239,35,60,.14),transparent 28%),
    linear-gradient(110deg,#07090b 0%,#0b0e11 58%,#11161a 100%);
}

.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to right,transparent 8%,#000 55%,#000 100%);
}

.about-hero::after{
  content:"RS";
  position:absolute;
  right:-22px;
  bottom:-100px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:380px;
  font-weight:800;
  line-height:1;
  letter-spacing:-20px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.035);
  pointer-events:none;
}

.about-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:80px;
  align-items:end;
}

.about-hero-copy h1{
  max-width:820px;
  margin:15px 0 22px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(68px,8vw,116px);
  line-height:.84;
  letter-spacing:-2px;
  text-transform:uppercase;
}

.about-hero-copy h1 span,
.about-section-heading h2 span,
.about-heading-row h2 span,
.about-approach-intro h2 span,
.about-tuning-grid h2 span,
.about-centered-heading h2 span,
.about-final-cta h2 span{
  color:var(--red);
}

.about-hero-copy .lead{
  max-width:700px;
  margin:0;
  font-size:20px;
  line-height:1.7;
  color:#c4c9cd;
}

.about-hero-panel{
  position:relative;
  padding:26px 28px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-top:2px solid var(--red);
  background:rgba(11,14,17,.78);
  box-shadow:0 25px 70px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
}

.about-panel-kicker{
  margin:0 0 11px;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
}

.about-panel-row{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:center;
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.about-panel-row span{
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  color:#697178;
}

.about-panel-row strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:23px;
  line-height:1;
  text-transform:uppercase;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);
  gap:90px;
  align-items:start;
}

.about-section-heading{
  position:sticky;
  top:120px;
}

.about-section-heading h2,
.about-heading-row h2,
.about-approach-intro h2,
.about-tuning-grid h2,
.about-centered-heading h2,
.about-final-cta h2{
  margin:8px 0 0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(46px,5.2vw,72px);
  line-height:.92;
  letter-spacing:-1px;
  text-transform:uppercase;
}

.about-intro-copy{
  padding-left:34px;
  border-left:1px solid var(--line);
}

.about-intro-copy p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}

.about-intro-copy .about-lead-copy{
  color:#f2f4f5;
  font-size:23px;
  line-height:1.55;
}

.about-services-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0f12;
}

.about-heading-row{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:42px;
}

.about-heading-row > p{
  max-width:500px;
  margin:0 0 4px;
  color:var(--muted);
  line-height:1.8;
}

.about-service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.about-service-card{
  position:relative;
  overflow:hidden;
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(155deg,#171c20 0%,#101417 72%);
  color:var(--text);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.about-service-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.about-service-card:hover{
  transform:translateY(-7px);
  border-color:rgba(239,35,60,.7);
  box-shadow:0 22px 46px rgba(0,0,0,.35),0 0 28px rgba(239,35,60,.07);
}

.about-service-card:hover::after{
  transform:scaleX(1);
}

.about-card-number{
  position:absolute;
  top:20px;
  right:24px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:70px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.04);
}

.about-service-card h3{
  margin:8px 0 13px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:38px;
  line-height:1;
  text-transform:uppercase;
}

.about-service-card p:not(.eyebrow){
  color:var(--muted);
  line-height:1.75;
}

.about-card-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.about-card-link span{
  color:var(--red);
  font-size:20px;
  transition:transform .2s ease;
}

.about-service-card:hover .about-card-link span{
  transform:translateX(4px);
}

.about-approach-section{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:90px;
  align-items:start;
}

.about-approach-intro{
  position:sticky;
  top:120px;
}

.about-approach-intro > p:last-child{
  max-width:470px;
  margin-top:26px;
  color:var(--muted);
  line-height:1.8;
}

.approach-list{
  border-top:1px solid var(--line);
}

.approach-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:26px;
  padding:28px 0 30px;
  border-bottom:1px solid var(--line);
}

.approach-number{
  font-family:"Barlow Condensed",sans-serif;
  font-size:23px;
  font-weight:800;
  color:var(--red);
}

.approach-item h3{
  margin:0 0 8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:31px;
  text-transform:uppercase;
}

.approach-item p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.about-tuning-banner{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 20% 50%,rgba(239,35,60,.11),transparent 28%),
    #0c1013;
}

.about-tuning-banner::after{
  content:"PERFORMANCE";
  position:absolute;
  right:-20px;
  bottom:-35px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:128px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.018);
  letter-spacing:4px;
}

.about-tuning-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  padding-top:78px;
  padding-bottom:78px;
  align-items:center;
}

.about-tuning-grid p{
  color:var(--muted);
  line-height:1.8;
}

.text-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.text-link span{
  color:var(--red);
  font-size:20px;
  transition:transform .2s ease;
}

.text-link:hover span{
  transform:translateX(4px);
}

.about-centered-heading{
  max-width:780px;
  margin:0 auto 42px;
  text-align:center;
}

.about-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}

.about-benefit{
  min-height:230px;
  padding:28px;
  background:#0d1114;
}

.about-benefit > span{
  display:inline-block;
  margin-bottom:32px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  font-weight:800;
  color:var(--red);
}

.about-benefit h3{
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:27px;
  text-transform:uppercase;
}

.about-benefit p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:14px;
}

.coverage-strip{
  padding:38px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#080b0d;
}

.coverage-strip-inner{
  text-align:center;
}

.coverage-strip-inner .eyebrow{
  margin-bottom:18px;
}

.coverage-places{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 16px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:20px;
  font-weight:700;
  text-transform:uppercase;
  color:#d8dcdf;
}

.coverage-places i{
  color:var(--red);
  font-style:normal;
}

.about-final-cta{
  position:relative;
  overflow:hidden;
  padding:90px 0;
  background:linear-gradient(120deg,#11161a,#090c0e);
}

.about-final-cta::before{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  right:-160px;
  top:-190px;
  border-radius:50%;
  background:rgba(239,35,60,.11);
  filter:blur(30px);
}

.about-final-cta-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:70px;
  align-items:end;
}

.about-final-cta p:not(.eyebrow){
  max-width:720px;
  margin:22px 0 0;
  color:var(--muted);
  line-height:1.8;
}

.about-final-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:980px){
  .about-hero-inner,
  .about-intro-grid,
  .about-approach-section,
  .about-tuning-grid{
    grid-template-columns:1fr;
    gap:46px;
  }

  .about-hero-panel{
    max-width:620px;
  }

  .about-section-heading,
  .about-approach-intro{
    position:static;
  }

  .about-intro-copy{
    padding-left:0;
    padding-top:30px;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .about-service-grid{
    grid-template-columns:1fr;
  }

  .about-service-card{
    min-height:310px;
  }

  .about-benefit-grid{
    grid-template-columns:1fr 1fr;
  }

  .about-final-cta-inner{
    grid-template-columns:1fr;
    gap:34px;
  }

  .about-final-actions{
    justify-content:flex-start;
  }
}

@media(max-width:720px){
  .about-hero{
    padding:76px 0 64px;
  }

  .about-hero::after{
    display:none;
  }

  .about-hero-copy h1{
    font-size:60px;
    letter-spacing:-1px;
  }

  .about-hero-copy .lead{
    font-size:17px;
  }

  .about-hero-panel{
    padding:20px 20px 14px;
  }

  .about-section-heading h2,
  .about-heading-row h2,
  .about-approach-intro h2,
  .about-tuning-grid h2,
  .about-centered-heading h2,
  .about-final-cta h2{
    font-size:46px;
  }

  .about-heading-row{
    display:block;
  }

  .about-heading-row > p{
    margin-top:18px;
  }

  .about-intro-copy .about-lead-copy{
    font-size:20px;
  }

  .approach-item{
    grid-template-columns:48px 1fr;
    gap:14px;
  }

  .about-benefit-grid{
    grid-template-columns:1fr;
  }

  .about-benefit{
    min-height:0;
  }

  .coverage-places{
    font-size:17px;
    gap:8px 10px;
  }

  .about-final-cta{
    padding:68px 0;
  }

  .about-final-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .about-final-actions .btn{
    width:100%;
  }
}


/* =========================================================
   ECU REMAPPING PAGE
   ========================================================= */

.ecu-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 46%, rgba(239,35,60,.13), transparent 28%),
    linear-gradient(120deg,#07090b 0%,#0c1013 58%,#080a0c 100%);
}

.ecu-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 52%,#000 100%);
}

.ecu-hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(239,35,60,.14);
  border-radius:50%;
  right:-175px;
  top:50%;
  transform:translateY(-50%);
  box-shadow:
    0 0 0 70px rgba(239,35,60,.025),
    0 0 0 140px rgba(239,35,60,.018);
  pointer-events:none;
}

.ecu-hero-inner{
  position:relative;
  z-index:1;
  min-height:630px;
  padding-top:104px;
  padding-bottom:86px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
  align-items:center;
  gap:72px;
}

.ecu-hero-copy h1,
.ecu-section-heading h2,
.ecu-heading-row h2,
.ecu-stage-intro h2,
.ecu-process-heading h2,
.ecu-suitability-card h2,
.ecu-centered-heading h2,
.ecu-faq-heading h2,
.ecu-final-cta h2{
  margin:10px 0 18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(44px,5.4vw,76px);
  line-height:.94;
  text-transform:uppercase;
  letter-spacing:-.025em;
}

.ecu-hero-copy h1 span,
.ecu-section-heading h2 span,
.ecu-heading-row h2 span,
.ecu-stage-intro h2 span,
.ecu-process-heading h2 span,
.ecu-suitability-card h2 span,
.ecu-centered-heading h2 span,
.ecu-faq-heading h2 span,
.ecu-final-cta h2 span{
  color:var(--red);
}

.ecu-hero-copy .lead{
  max-width:720px;
  margin:0 0 30px;
  color:#c3c9ce;
  font-size:18px;
  line-height:1.75;
}

.ecu-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}

.ecu-hero-points span{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#cdd2d6;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.ecu-hero-panel{
  position:relative;
  padding:24px;
  border:1px solid #323b43;
  border-radius:10px;
  background:linear-gradient(145deg,rgba(22,27,31,.98),rgba(8,11,13,.98));
  box-shadow:0 32px 80px rgba(0,0,0,.38);
  overflow:hidden;
}

.ecu-hero-panel::after{
  content:"";
  position:absolute;
  inset:auto -20% -50% -20%;
  height:210px;
  background:radial-gradient(circle,rgba(239,35,60,.16),transparent 62%);
  pointer-events:none;
}

.ecu-panel-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.ecu-panel-head p,
.ecu-panel-head strong{
  margin:0;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.ecu-panel-head p{ color:var(--muted); }
.ecu-panel-head strong{ color:#fff; }

.ecu-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 14px rgba(239,35,60,.8);
}

.ecu-gauge-wrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  min-height:265px;
}

.ecu-gauge{
  position:relative;
  width:188px;
  height:188px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center,#0c1013 0 49%,transparent 50%),
    conic-gradient(from 220deg, var(--red) 0 54%, #252c31 54% 79%, transparent 79% 100%);
  box-shadow:inset 0 0 0 11px #0b0f12,0 0 55px rgba(239,35,60,.08);
}

.ecu-gauge::before{
  content:"";
  position:absolute;
  inset:19px;
  border:1px solid #2a3238;
  border-radius:50%;
}

.ecu-gauge-value{
  display:block;
  margin-top:-8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:54px;
  line-height:1;
  font-weight:800;
}

.ecu-gauge-label{
  position:absolute;
  top:112px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
}

.ecu-data-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.ecu-data-grid div{
  padding:14px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.ecu-data-grid span{
  display:block;
  margin-bottom:4px;
  color:#7f8991;
  font-size:9px;
  letter-spacing:.14em;
}

.ecu-data-grid strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  text-transform:uppercase;
}

.ecu-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:95px;
}

.ecu-section-heading{
  position:sticky;
  top:120px;
  align-self:start;
}

.ecu-section-heading h2,
.ecu-heading-row h2,
.ecu-stage-intro h2,
.ecu-process-heading h2,
.ecu-suitability-card h2,
.ecu-centered-heading h2,
.ecu-faq-heading h2,
.ecu-final-cta h2{
  font-size:clamp(38px,4.1vw,58px);
}

.ecu-intro-copy{
  max-width:740px;
}

.ecu-intro-copy p{
  margin:0 0 20px;
  color:#abb3ba;
  line-height:1.85;
}

.ecu-intro-copy .ecu-lead-copy{
  color:#fff;
  font-size:20px;
  line-height:1.65;
}

.ecu-benefits-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0f12;
}

.ecu-heading-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:38px;
}

.ecu-heading-row > p{
  max-width:490px;
  margin:0 0 8px;
  color:var(--muted);
  line-height:1.75;
}

.ecu-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.ecu-benefit-card{
  position:relative;
  min-height:300px;
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:7px;
  background:linear-gradient(155deg,#12171b,#0a0d0f);
  transition:.25s ease;
  overflow:hidden;
}

.ecu-benefit-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}

.ecu-benefit-card:hover{
  transform:translateY(-6px);
  border-color:#4a252d;
}

.ecu-benefit-card:hover::after{ transform:scaleX(1); }

.ecu-card-number{
  display:inline-block;
  margin-bottom:75px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:16px;
  font-weight:800;
}

.ecu-benefit-card h3{
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:28px;
  text-transform:uppercase;
}

.ecu-benefit-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.ecu-stages-section{
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  gap:70px;
  align-items:start;
}

.ecu-stage-intro{
  position:sticky;
  top:120px;
}

.ecu-stage-intro > p:last-child{
  max-width:470px;
  color:var(--muted);
  line-height:1.75;
}

.ecu-stage-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.ecu-stage-card{
  position:relative;
  padding:30px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0d1114;
}

.ecu-stage-featured{
  border-color:#56303a;
  background:
    radial-gradient(circle at 100% 0%,rgba(239,35,60,.12),transparent 34%),
    #0d1114;
}

.ecu-stage-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:40px;
}

.ecu-stage-label{
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.ecu-stage-number{
  color:#4f5960;
  font-family:"Barlow Condensed",sans-serif;
  font-size:17px;
  font-weight:800;
  letter-spacing:.08em;
}

.ecu-stage-card h3{
  margin:0 0 13px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:33px;
  text-transform:uppercase;
}

.ecu-stage-card > p{
  min-height:110px;
  margin:0 0 24px;
  color:var(--muted);
  line-height:1.75;
}

.ecu-stage-card .check-list{
  margin-bottom:28px;
}

.ecu-process-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(239,35,60,.025),transparent 35%),
    #080b0d;
}

.ecu-process-heading{
  max-width:680px;
  margin-bottom:45px;
}

.ecu-process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.ecu-process-step{
  min-height:260px;
  padding:26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.ecu-process-step > span{
  display:inline-block;
  margin-bottom:52px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  font-weight:800;
}

.ecu-process-step h3{
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:25px;
  text-transform:uppercase;
}

.ecu-process-step p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.ecu-process-note{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:25px;
  margin-top:18px;
  padding:22px 24px;
  border-left:2px solid var(--red);
  background:#0e1215;
}

.ecu-process-note strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:20px;
  text-transform:uppercase;
}

.ecu-process-note p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.ecu-suitability-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:55px;
  padding:46px 50px;
  border:1px solid #473039;
  border-radius:9px;
  background:
    radial-gradient(circle at 90% 20%,rgba(239,35,60,.15),transparent 31%),
    linear-gradient(120deg,#11161a,#0b0e10);
}

.ecu-suitability-card p:not(.eyebrow){
  max-width:780px;
  margin-bottom:0;
  color:var(--muted);
  line-height:1.75;
}

.ecu-suitability-actions,
.ecu-final-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:215px;
}

.ecu-suitability-actions .btn,
.ecu-final-actions .btn{
  text-align:center;
}

.ecu-trust-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0f12;
}

.ecu-centered-heading{
  margin-bottom:38px;
}

.ecu-trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.ecu-trust-grid > div{
  padding:26px;
  border-top:1px solid #3a4248;
  background:#0d1114;
}

.ecu-trust-grid > div > span{
  display:block;
  margin-bottom:28px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
}

.ecu-trust-grid h3{
  margin:0 0 9px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:24px;
  text-transform:uppercase;
}

.ecu-trust-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.ecu-faq-heading{
  max-width:640px;
  margin-bottom:36px;
}

.ecu-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.ecu-faq-item{
  border:1px solid var(--line);
  border-radius:6px;
  background:#0d1114;
}

.ecu-faq-item summary{
  position:relative;
  padding:20px 50px 20px 22px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
}

.ecu-faq-item summary::-webkit-details-marker{
  display:none;
}

.ecu-faq-item summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--red);
  font-size:24px;
  font-weight:400;
}

.ecu-faq-item[open] summary::after{ content:"−"; }

.ecu-faq-item p{
  margin:0;
  padding:0 22px 22px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}

.ecu-final-cta{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 74% 50%,rgba(239,35,60,.15),transparent 25%),
    #080a0c;
}

.ecu-final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:linear-gradient(115deg,transparent 0 65%,rgba(255,255,255,.08) 65.1% 65.25%,transparent 65.3%);
}

.ecu-final-cta-inner{
  position:relative;
  z-index:1;
  min-height:390px;
  padding-top:72px;
  padding-bottom:72px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:60px;
}

.ecu-final-cta p:not(.eyebrow){
  max-width:750px;
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

@media(max-width:1050px){
  .ecu-hero-inner,
  .ecu-intro-grid,
  .ecu-stages-section{
    grid-template-columns:1fr;
    gap:48px;
  }

  .ecu-hero-panel{
    max-width:620px;
  }

  .ecu-section-heading,
  .ecu-stage-intro{
    position:static;
  }

  .ecu-heading-row{
    display:block;
  }

  .ecu-heading-row > p{
    max-width:720px;
  }

  .ecu-benefit-grid,
  .ecu-process-grid,
  .ecu-trust-grid{
    grid-template-columns:1fr 1fr;
  }

  .ecu-suitability-card,
  .ecu-final-cta-inner{
    grid-template-columns:1fr;
    align-items:start;
  }

  .ecu-suitability-actions,
  .ecu-final-actions{
    flex-direction:row;
    min-width:0;
  }
}

@media(max-width:720px){
  .ecu-hero-inner{
    min-height:auto;
    padding-top:72px;
    padding-bottom:58px;
  }

  .ecu-hero::after{
    width:360px;
    height:360px;
    right:-230px;
  }

  .ecu-hero-copy h1{
    font-size:50px;
  }

  .ecu-hero-copy .lead{
    font-size:16px;
  }

  .ecu-hero-panel{
    padding:18px;
  }

  .ecu-gauge-wrap{
    min-height:225px;
  }

  .ecu-gauge{
    width:158px;
    height:158px;
  }

  .ecu-gauge-label{
    top:94px;
  }

  .ecu-section-heading h2,
  .ecu-heading-row h2,
  .ecu-stage-intro h2,
  .ecu-process-heading h2,
  .ecu-suitability-card h2,
  .ecu-centered-heading h2,
  .ecu-faq-heading h2,
  .ecu-final-cta h2{
    font-size:40px;
  }

  .ecu-benefit-grid,
  .ecu-stage-grid,
  .ecu-process-grid,
  .ecu-trust-grid,
  .ecu-faq-grid{
    grid-template-columns:1fr;
  }

  .ecu-benefit-card{
    min-height:235px;
  }

  .ecu-card-number{
    margin-bottom:45px;
  }

  .ecu-stage-card > p{
    min-height:0;
  }

  .ecu-process-step{
    min-height:220px;
  }

  .ecu-process-step > span{
    margin-bottom:35px;
  }

  .ecu-process-note{
    grid-template-columns:1fr;
    gap:8px;
  }

  .ecu-suitability-card{
    padding:30px 24px;
  }

  .ecu-suitability-actions,
  .ecu-final-actions{
    flex-direction:column;
    width:100%;
  }

  .ecu-final-cta-inner{
    min-height:auto;
    padding-top:58px;
    padding-bottom:58px;
  }

  .ecu-final-actions .btn,
  .ecu-suitability-actions .btn{
    width:100%;
  }
}
/* =========================================================
   MOBILE MECHANIC PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.mm-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(239,35,60,.12),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0c1013 58%,
      #080a0c 100%
    );
}


.mm-hero::before{
  content:"";
  position:absolute;
  inset:0;

  opacity:.15;
  pointer-events:none;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 52%,
      #000 100%
    );
}


.mm-hero::after{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  border:1px solid rgba(239,35,60,.13);
  border-radius:50%;

  right:-185px;
  top:50%;

  transform:translateY(-50%);

  box-shadow:
    0 0 0 70px rgba(239,35,60,.025),
    0 0 0 140px rgba(239,35,60,.015);

  pointer-events:none;
}


.mm-hero-inner{
  position:relative;
  z-index:1;

  min-height:630px;

  padding-top:104px;
  padding-bottom:86px;

  display:grid;

  grid-template-columns:
    minmax(0,1.18fr)
    minmax(340px,.82fr);

  align-items:center;

  gap:72px;
}


.mm-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    44px,
    5.4vw,
    76px
  );

  line-height:.94;

  text-transform:uppercase;

  letter-spacing:-.025em;
}


.mm-hero-copy h1 span{
  color:var(--red);
}


.mm-hero-copy .lead{
  max-width:720px;

  margin:0 0 30px;

  color:#c3c9ce;

  font-size:18px;

  line-height:1.75;
}


.mm-hero-points{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:30px;
}


.mm-hero-points span{
  padding:9px 12px;

  border:1px solid var(--line);

  border-radius:999px;

  background:
    rgba(255,255,255,.025);

  color:#cdd2d6;

  font-size:12px;

  font-weight:700;

  letter-spacing:.07em;

  text-transform:uppercase;
}



/* =========================
   HERO SIDE PANEL
========================= */

.mm-hero-panel{
  position:relative;

  padding:24px;

  border:1px solid #323b43;

  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      rgba(22,27,31,.98),
      rgba(8,11,13,.98)
    );

  box-shadow:
    0 32px 80px rgba(0,0,0,.38);

  overflow:hidden;
}


.mm-hero-panel::after{
  content:"";

  position:absolute;

  inset:auto -20% -50% -20%;

  height:210px;

  background:
    radial-gradient(
      circle,
      rgba(239,35,60,.16),
      transparent 62%
    );

  pointer-events:none;
}


.mm-panel-top{
  position:relative;
  z-index:1;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:18px;

  border-bottom:1px solid var(--line);
}


.mm-panel-top > div{
  display:flex;

  align-items:center;

  gap:8px;
}


.mm-panel-top span,
.mm-panel-top strong{
  font-size:10px;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.mm-panel-top span{
  color:var(--muted);
}


.mm-panel-top strong{
  color:#fff;
}


.mm-status-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--red);

  box-shadow:
    0 0 14px
    rgba(239,35,60,.8);
}



/* MAIN PANEL */

.mm-panel-main{
  position:relative;
  z-index:1;

  min-height:275px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:30px;
}


.mm-van-icon{
  width:150px;
  height:100px;

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  border:1px solid #343d44;

  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      #171d21,
      #0c1013
    );

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.32);
}


.mm-van-icon::before{
  content:"";

  position:absolute;

  width:32px;
  height:32px;

  left:18px;
  bottom:-17px;

  border-radius:50%;

  border:8px solid #11171a;

  background:#30383e;
}


.mm-van-icon::after{
  content:"";

  position:absolute;

  width:32px;
  height:32px;

  right:18px;
  bottom:-17px;

  border-radius:50%;

  border:8px solid #11171a;

  background:#30383e;
}


.mm-van-icon span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:42px;

  font-weight:800;

  line-height:.9;
}


.mm-van-icon small{
  margin-top:5px;

  font-size:9px;

  font-weight:700;

  letter-spacing:.19em;

  color:#bbc2c7;
}


.mm-location-line{
  display:flex;

  align-items:center;

  gap:12px;
}


.mm-location-pin{
  display:grid;

  place-items:center;

  width:35px;
  height:35px;

  border-radius:50%;

  background:
    rgba(239,35,60,.1);

  color:var(--red);
}


.mm-location-line small{
  display:block;

  margin-bottom:3px;

  color:#6f7880;

  font-size:8px;

  letter-spacing:.14em;
}


.mm-location-line strong{
  font-family:"Barlow Condensed",sans-serif;

  font-size:19px;

  letter-spacing:.05em;
}



/* PANEL DATA */

.mm-panel-grid{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}


.mm-panel-grid div{
  padding:14px;

  border-right:1px solid var(--line);

  border-bottom:1px solid var(--line);
}


.mm-panel-grid span{
  display:block;

  margin-bottom:4px;

  color:#7f8991;

  font-size:9px;

  letter-spacing:.14em;
}


.mm-panel-grid strong{
  font-family:"Barlow Condensed",sans-serif;

  font-size:18px;

  text-transform:uppercase;
}



/* =========================
   INTRO
========================= */

.mm-intro-grid{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:95px;
}


.mm-section-heading{
  position:sticky;

  top:120px;

  align-self:start;
}


.mm-section-heading h2,
.mm-heading-row h2,
.mm-process-heading h2,
.mm-convenience h2,
.mm-diagnostic-band h2,
.mm-job-check h2,
.mm-centered-heading h2,
.mm-faq-heading h2,
.mm-final-cta h2{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    38px,
    4.1vw,
    58px
  );

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.mm-section-heading h2 span,
.mm-heading-row h2 span,
.mm-process-heading h2 span,
.mm-convenience h2 span,
.mm-diagnostic-band h2 span,
.mm-job-check h2 span,
.mm-centered-heading h2 span,
.mm-faq-heading h2 span,
.mm-final-cta h2 span{
  color:var(--red);
}


.mm-intro-copy{
  max-width:740px;
}


.mm-intro-copy p{
  margin:0 0 20px;

  color:#abb3ba;

  line-height:1.85;
}


.mm-intro-copy .mm-lead-copy{
  color:#fff;

  font-size:20px;

  line-height:1.65;
}



/* =========================
   SERVICES
========================= */

.mm-services-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.mm-heading-row{
  display:flex;

  align-items:end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:38px;
}


.mm-heading-row > p{
  max-width:500px;

  margin:0 0 8px;

  color:var(--muted);

  line-height:1.75;
}


.mm-service-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}


.mm-service-card{
  position:relative;

  min-height:330px;

  display:flex;

  flex-direction:column;

  padding:28px 25px;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #0a0d0f
    );

  color:var(--text);

  text-decoration:none;

  overflow:hidden;

  transition:.25s ease;
}


.mm-service-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:.25s ease;
}


.mm-service-card:hover{
  transform:translateY(-7px);

  border-color:#542b34;

  box-shadow:
    0 24px 50px
    rgba(0,0,0,.25);
}


.mm-service-card:hover::after{
  transform:scaleX(1);
}


.mm-card-number{
  position:absolute;

  right:22px;
  top:22px;

  color:#444d54;

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.mm-service-icon{
  width:46px;
  height:46px;

  margin-bottom:54px;

  display:grid;

  place-items:center;

  border:1px solid #343d43;

  border-radius:6px;

  color:var(--red);

  font-size:21px;

  background:#101518;
}


.mm-service-card h3{
  margin:0 0 10px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:29px;

  text-transform:uppercase;
}


.mm-service-card p{
  margin:0 0 26px;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


.mm-card-link{
  margin-top:auto;

  display:flex;

  align-items:center;
  justify-content:space-between;

  color:#fff;

  font-size:12px;

  font-weight:700;

  letter-spacing:.07em;

  text-transform:uppercase;
}


.mm-card-link i{
  color:var(--red);

  font-size:18px;

  font-style:normal;

  transition:.2s ease;
}


.mm-service-card:hover
.mm-card-link i{
  transform:translateX(4px);
}



/* =========================
   PROCESS
========================= */

.mm-process-section{
  border-bottom:1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(239,35,60,.025),
      transparent 35%
    ),
    #080b0d;
}


.mm-process-heading{
  max-width:680px;

  margin-bottom:45px;
}


.mm-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}


.mm-process-step{
  min-height:265px;

  padding:26px;

  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}


.mm-process-step > span{
  display:inline-block;

  margin-bottom:52px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:18px;

  font-weight:800;
}


.mm-process-step h3{
  margin:0 0 10px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:25px;

  text-transform:uppercase;
}


.mm-process-step p{
  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}



/* =========================
   MOBILE CONVENIENCE
========================= */

.mm-convenience-grid{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:90px;

  align-items:start;
}


.mm-convenience-copy{
  position:sticky;

  top:120px;
}


.mm-convenience-copy > p:not(.eyebrow){
  max-width:520px;

  color:var(--muted);

  line-height:1.8;
}


.mm-benefit-list{
  border-top:1px solid var(--line);
}


.mm-benefit{
  display:grid;

  grid-template-columns:60px 1fr;

  gap:20px;

  padding:24px 0;

  border-bottom:1px solid var(--line);
}


.mm-benefit > span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:18px;

  font-weight:800;
}


.mm-benefit h3{
  margin:0 0 7px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  text-transform:uppercase;
}


.mm-benefit p{
  margin:0;

  color:var(--muted);

  line-height:1.7;
}



/* =========================
   DIAGNOSTIC BAND
========================= */

.mm-diagnostic-band{
  padding:85px 0;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(239,35,60,.10),
      transparent 30%
    ),
    #0b0f12;
}


.mm-diagnostic-inner{
  display:grid;

  grid-template-columns:
    1fr .78fr;

  gap:80px;

  align-items:center;
}


.mm-diagnostic-inner > div:first-child > p:not(.eyebrow){
  max-width:630px;

  color:var(--muted);

  line-height:1.8;
}


.mm-diagnostic-inner .btn{
  margin-top:15px;
}


.mm-diagnostic-display{
  padding:22px;

  border:1px solid #323b42;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #12171a,
      #090c0e
    );

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.28);
}


.mm-scan-head{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:15px;

  padding-bottom:18px;

  border-bottom:1px solid var(--line);
}


.mm-scan-head span,
.mm-scan-head strong{
  font-size:10px;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.mm-scan-head span{
  color:var(--muted);
}


.mm-scan-line{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:17px 4px;

  border-bottom:1px solid var(--line);
}


.mm-scan-line:last-child{
  border-bottom:none;
}


.mm-scan-line span{
  color:#b3bbc1;

  font-size:13px;
}


.mm-scan-line strong{
  color:var(--red);

  font-size:17px;
}



/* =========================
   JOB CHECK
========================= */

.mm-job-check-card{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:end;

  gap:55px;

  padding:46px 50px;

  border:1px solid #473039;

  border-radius:9px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(239,35,60,.15),
      transparent 31%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0b0e10
    );
}


.mm-job-check-card p:not(.eyebrow){
  max-width:780px;

  margin-bottom:0;

  color:var(--muted);

  line-height:1.75;
}


.mm-job-actions{
  display:flex;

  flex-direction:column;

  gap:10px;

  min-width:205px;
}


.mm-job-actions .btn{
  text-align:center;
}



/* =========================
   TRUST
========================= */

.mm-trust-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.mm-centered-heading{
  margin-bottom:38px;
}


.mm-trust-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}


.mm-trust-grid > div{
  padding:26px;

  border-top:1px solid #3a4248;

  background:#0d1114;
}


.mm-trust-grid > div > span{
  display:block;

  margin-bottom:28px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-weight:800;
}


.mm-trust-grid h3{
  margin:0 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  text-transform:uppercase;
}


.mm-trust-grid p{
  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}



/* =========================
   FAQ
========================= */

.mm-faq-heading{
  max-width:640px;

  margin-bottom:36px;
}


.mm-faq-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:12px;
}


.mm-faq-item{
  border:1px solid var(--line);

  border-radius:6px;

  background:#0d1114;
}


.mm-faq-item summary{
  position:relative;

  padding:
    20px
    50px
    20px
    22px;

  cursor:pointer;

  list-style:none;

  font-weight:700;
}


.mm-faq-item summary::-webkit-details-marker{
  display:none;
}


.mm-faq-item summary::after{
  content:"+";

  position:absolute;

  right:20px;
  top:50%;

  transform:
    translateY(-50%);

  color:var(--red);

  font-size:24px;

  font-weight:400;
}


.mm-faq-item[open]
summary::after{
  content:"−";
}


.mm-faq-item p{
  margin:0;

  padding:
    0
    22px
    22px;

  color:var(--muted);

  font-size:14px;

  line-height:1.75;
}



/* =========================
   FINAL CTA
========================= */

.mm-final-cta{
  position:relative;

  overflow:hidden;

  border-top:1px solid var(--line);

  background:
    radial-gradient(
      circle at 74% 50%,
      rgba(239,35,60,.15),
      transparent 25%
    ),
    #080a0c;
}


.mm-final-cta::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.12;

  background:
    linear-gradient(
      115deg,
      transparent 0 65%,
      rgba(255,255,255,.08)
      65.1% 65.25%,
      transparent 65.3%
    );
}


.mm-final-cta-inner{
  position:relative;

  z-index:1;

  min-height:390px;

  padding-top:72px;
  padding-bottom:72px;

  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:60px;
}


.mm-final-cta p:not(.eyebrow){
  max-width:750px;

  margin:0;

  color:var(--muted);

  line-height:1.75;
}


.mm-final-actions{
  display:flex;

  flex-direction:column;

  gap:10px;

  min-width:215px;
}


.mm-final-actions .btn{
  text-align:center;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .mm-hero-inner,
  .mm-intro-grid,
  .mm-convenience-grid,
  .mm-diagnostic-inner{
    grid-template-columns:1fr;

    gap:48px;
  }


  .mm-hero-panel{
    max-width:620px;
  }


  .mm-section-heading,
  .mm-convenience-copy{
    position:static;
  }


  .mm-heading-row{
    display:block;
  }


  .mm-heading-row > p{
    max-width:720px;
  }


  .mm-service-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .mm-process-grid,
  .mm-trust-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .mm-job-check-card,
  .mm-final-cta-inner{
    grid-template-columns:1fr;

    align-items:start;
  }


  .mm-job-actions,
  .mm-final-actions{
    flex-direction:row;

    min-width:0;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .mm-hero-inner{
    min-height:auto;

    padding-top:72px;
    padding-bottom:58px;
  }


  .mm-hero::after{
    width:360px;
    height:360px;

    right:-230px;
  }


  .mm-hero-copy h1{
    font-size:50px;
  }


  .mm-hero-copy .lead{
    font-size:16px;
  }


  .mm-hero-panel{
    padding:18px;
  }


  .mm-panel-main{
    min-height:235px;
  }


  .mm-section-heading h2,
  .mm-heading-row h2,
  .mm-process-heading h2,
  .mm-convenience h2,
  .mm-diagnostic-band h2,
  .mm-job-check h2,
  .mm-centered-heading h2,
  .mm-faq-heading h2,
  .mm-final-cta h2{
    font-size:40px;
  }


  .mm-service-grid,
  .mm-process-grid,
  .mm-trust-grid,
  .mm-faq-grid{
    grid-template-columns:1fr;
  }


  .mm-service-card{
    min-height:285px;
  }


  .mm-service-icon{
    margin-bottom:42px;
  }


  .mm-process-step{
    min-height:220px;
  }


  .mm-process-step > span{
    margin-bottom:35px;
  }


  .mm-benefit{
    grid-template-columns:
      45px 1fr;
  }


  .mm-diagnostic-band{
    padding:60px 0;
  }


  .mm-job-check-card{
    padding:30px 24px;
  }


  .mm-job-actions,
  .mm-final-actions{
    flex-direction:column;

    width:100%;
  }


  .mm-job-actions .btn,
  .mm-final-actions .btn{
    width:100%;
  }


  .mm-final-cta-inner{
    min-height:auto;

    padding-top:58px;
    padding-bottom:58px;
  }

}

/* =========================================================
   SERVICES OVERVIEW PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.services-page-hero{
  position:relative;
  overflow:hidden;

  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 78% 42%,
      rgba(239,35,60,.11),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0c1013 58%,
      #080a0c 100%
    );
}


.services-page-hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}


.services-page-hero-inner{
  position:relative;
  z-index:1;

  min-height:480px;

  padding-top:88px;
  padding-bottom:74px;

  display:grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(320px,.8fr);

  align-items:center;

  gap:70px;
}


.services-page-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    48px,
    5.7vw,
    76px
  );

  line-height:.94;

  letter-spacing:-.025em;

  text-transform:uppercase;
}


.services-page-hero-copy h1 span{
  color:var(--red);
}


.services-page-hero-copy .lead{
  max-width:700px;

  margin:0;

  color:#bcc3c8;

  font-size:17px;

  line-height:1.75;
}


.services-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:27px;
}



/* =========================
   HERO PANEL
========================= */

.services-hero-panel{
  padding:22px;

  border:1px solid #30383e;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #151a1e,
      #090c0e
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.3);
}


.services-hero-panel-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:16px;

  margin-bottom:4px;

  border-bottom:1px solid var(--line);
}


.services-hero-panel-head span,
.services-hero-panel-head strong{
  font-size:10px;

  letter-spacing:.14em;

  text-transform:uppercase;
}


.services-hero-panel-head span{
  color:var(--muted);
}


.services-hero-panel-head strong{
  color:var(--red);
}


.services-hero-panel-row{
  display:flex;

  justify-content:space-between;

  gap:18px;

  padding:16px 2px;

  border-bottom:1px solid var(--line);
}


.services-hero-panel-row:last-child{
  border-bottom:none;
}


.services-hero-panel-row span{
  color:#fff;

  font-size:13px;

  font-weight:600;
}


.services-hero-panel-row strong{
  color:var(--muted);

  font-size:12px;

  font-weight:500;

  text-align:right;
}



/* =========================
   SECTION HEADING
========================= */

.services-page-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:38px;
}


.services-page-heading h2{
  margin:7px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    38px,
    4vw,
    56px
  );

  line-height:.95;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.services-page-heading h2 span{
  color:var(--red);
}


.services-page-heading > p{
  max-width:480px;

  margin:0 0 4px;

  color:var(--muted);

  line-height:1.7;
}



/* =========================
   SERVICE GRID
========================= */

.services-overview{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}


.service-overview-card{
  position:relative;

  min-height:345px;

  display:flex;

  flex-direction:column;

  padding:25px;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #0a0d0f
    );

  overflow:hidden;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.service-overview-card::before{
  content:"";

  position:absolute;

  left:-70%;
  top:-40%;

  width:60%;
  height:180%;

  transform:rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.045),
      transparent
    );

  transition:
    left .55s ease;
}


.service-overview-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:
    transform .25s ease;

  box-shadow:
    0 -5px 18px
    rgba(239,35,60,.28);
}


.service-overview-card:hover{
  transform:translateY(-8px);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 24px 50px
    rgba(0,0,0,.28);
}


.service-overview-card:hover::before{
  left:120%;
}


.service-overview-card:hover::after{
  transform:scaleX(1);
}


.service-card-number{
  position:absolute;

  top:22px;
  right:22px;

  color:#485158;

  font-family:"Barlow Condensed",sans-serif;

  font-size:15px;

  font-weight:800;

  letter-spacing:.05em;
}


.service-overview-card .service-icon{
  width:48px;
  height:48px;

  display:grid;

  place-items:center;

  margin-bottom:48px;

  border:1px solid #343c42;

  border-radius:6px;

  background:#12171a;

  font-size:21px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.service-overview-card:hover
.service-icon{
  transform:
    translateY(-2px)
    scale(1.04);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 0 20px
    rgba(239,35,60,.12);
}


.service-overview-card h2{
  margin:0 0 11px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:27px;

  line-height:1;

  text-transform:uppercase;
}


.service-overview-card p{
  margin:0 0 28px;

  color:var(--muted);

  font-size:14px;

  line-height:1.72;
}


.service-link{
  position:relative;
  z-index:2;

  margin-top:auto;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-top:16px;

  border-top:1px solid var(--line);

  color:#fff;

  text-decoration:none;

  font-size:11px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

  transition:
    color .2s ease;
}


.service-arrow{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:30px;
  height:30px;

  border:1px solid #343d43;

  border-radius:50%;

  color:var(--red);

  font-size:17px;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.service-overview-card:hover
.service-link{
  color:var(--red);
}


.service-overview-card:hover
.service-arrow{
  transform:translateX(3px);

  border-color:
    rgba(239,35,60,.5);

  background:
    rgba(239,35,60,.08);

  box-shadow:
    0 0 18px
    rgba(239,35,60,.14);
}



/* =========================
   HELP CTA
========================= */

.services-help-wrap{
  padding-bottom:80px;
}


.services-help-card{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:50px;

  align-items:center;

  padding:42px 46px;

  border:1px solid #473039;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(239,35,60,.14),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0a0d0f
    );
}


.services-help-card h2{
  margin:8px 0 13px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    34px,
    3.7vw,
    50px
  );

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.services-help-card h2 span{
  color:var(--red);
}


.services-help-card p:not(.eyebrow){
  max-width:760px;

  margin:0;

  color:var(--muted);

  line-height:1.75;
}


.services-help-actions{
  min-width:205px;

  display:flex;

  flex-direction:column;

  gap:10px;
}


.services-help-actions .btn{
  text-align:center;
}



/* =========================
   VALUE STRIP
========================= */

.services-value-section{
  padding:70px 0;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.services-value-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}


.services-value-grid > div{
  padding:24px;

  border-top:1px solid #394148;

  background:#0d1114;
}


.services-value-grid span{
  display:block;

  margin-bottom:24px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.services-value-grid h3{
  margin:0 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:23px;

  text-transform:uppercase;
}


.services-value-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FINAL CTA
========================= */

.services-final-cta{
  position:relative;

  overflow:hidden;

  padding:68px 0;

  background:
    radial-gradient(
      circle at 77% 50%,
      rgba(239,35,60,.13),
      transparent 25%
    ),
    #080a0c;
}


.services-final-inner{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:50px;
}


.services-final-inner h2{
  margin:7px 0 12px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    38px,
    4vw,
    56px
  );

  line-height:.95;

  text-transform:uppercase;
}


.services-final-inner h2 span{
  color:var(--red);
}


.services-final-inner p:not(.eyebrow){
  max-width:680px;

  margin:0;

  color:var(--muted);

  line-height:1.7;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .services-page-hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }


  .services-hero-panel{
    max-width:650px;
  }


  .services-overview{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .services-page-heading{
    display:block;
  }


  .services-page-heading > p{
    margin-top:15px;

    max-width:700px;
  }


  .services-help-card,
  .services-final-inner{
    grid-template-columns:1fr;

    align-items:start;
  }


  .services-help-actions{
    flex-direction:row;

    min-width:0;
  }


  .services-value-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .services-page-hero-inner{
    min-height:auto;

    padding-top:68px;
    padding-bottom:54px;
  }


  .services-page-hero-copy h1{
    font-size:48px;
  }


  .services-page-hero-copy .lead{
    font-size:16px;
  }


  .services-overview{
    grid-template-columns:1fr;
  }


  .service-overview-card{
    min-height:310px;
  }


  .service-overview-card .service-icon{
    margin-bottom:38px;
  }


  .services-help-wrap{
    padding-bottom:58px;
  }


  .services-help-card{
    padding:30px 24px;
  }


  .services-help-actions{
    flex-direction:column;

    width:100%;
  }


  .services-help-actions .btn{
    width:100%;
  }


  .services-value-section{
    padding:52px 0;
  }


  .services-value-grid{
    grid-template-columns:1fr;
  }


  .services-final-cta{
    padding:55px 0;
  }


  .services-final-inner .btn{
    width:100%;

    text-align:center;
  }

}

/* =========================================================
   DIAGNOSTICS PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.diag-hero{
  position:relative;
  overflow:hidden;

  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 79% 42%,
      rgba(239,35,60,.12),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0d1114 58%,
      #080a0c 100%
    );
}


.diag-hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}


.diag-hero-inner{
  position:relative;
  z-index:1;

  min-height:560px;

  padding-top:82px;
  padding-bottom:76px;

  display:grid;

  grid-template-columns:
    minmax(0,1.13fr)
    minmax(340px,.87fr);

  align-items:center;

  gap:70px;
}


.diag-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    50px,
    5.8vw,
    78px
  );

  line-height:.93;

  letter-spacing:-.025em;

  text-transform:uppercase;
}


.diag-hero-copy h1 span{
  color:var(--red);
}


.diag-hero-copy .lead{
  max-width:720px;

  margin:0;

  color:#bcc3c8;

  font-size:17px;

  line-height:1.75;
}


.diag-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:27px;
}


.diag-hero-points{
  display:flex;

  flex-wrap:wrap;

  gap:10px 22px;

  margin-top:26px;

  color:#c3c8cc;

  font-size:10px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   DIAGNOSTIC DISPLAY
========================= */

.diag-display{
  padding:22px;

  border:1px solid #30383e;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #151a1e,
      #090c0e
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.3);
}


.diag-display-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);
}


.diag-display-head span,
.diag-display-head strong{
  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.diag-display-head span{
  color:var(--muted);
}


.diag-display-head strong{
  color:var(--red);
}


.diag-module{
  margin-top:18px;

  padding:18px;

  border:1px solid #293137;

  border-radius:6px;

  background:#090c0e;
}


.diag-module-title{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:18px;

  margin-bottom:20px;
}


.diag-module-title span{
  font-size:13px;

  font-weight:600;
}


.diag-module-title strong{
  padding:5px 8px;

  border-radius:4px;

  background:
    rgba(239,35,60,.09);

  color:var(--red);

  font-size:9px;

  letter-spacing:.1em;
}


.diag-data-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:9px 0;

  border-bottom:1px solid #22282d;
}


.diag-data-row:last-child{
  border-bottom:none;
}


.diag-data-row span{
  color:var(--muted);

  font-size:11px;
}


.diag-data-row strong{
  color:#fff;

  font-size:10px;

  letter-spacing:.08em;
}


.diag-status-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin-top:12px;
}


.diag-status-grid > div{
  padding:13px 8px;

  border:1px solid #293137;

  border-radius:5px;

  text-align:center;
}


.diag-status-grid strong{
  display:block;

  margin-bottom:3px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:17px;
}


.diag-status-grid span{
  color:var(--muted);

  font-size:9px;
}



/* =========================
   INTRO
========================= */

.diag-intro{
  display:grid;

  grid-template-columns:
    .78fr 1.22fr;

  gap:75px;

  align-items:start;
}


.diag-intro h2,
.diag-section-heading h2,
.diag-live-inner h2,
.diag-cta h2{
  margin:8px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(
    38px,
    4vw,
    56px
  );

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.diag-intro h2 span,
.diag-section-heading h2 span,
.diag-live-inner h2 span,
.diag-cta h2 span{
  color:var(--red);
}


.diag-intro-copy p{
  margin:0 0 15px;

  color:var(--muted);

  line-height:1.78;
}


.diag-intro-copy p:last-child{
  margin-bottom:0;
}



/* =========================
   ISSUE CARDS
========================= */

.diag-issues-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.diag-section-heading{
  margin-bottom:36px;
}


.diag-issue-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.diag-issue-card{
  position:relative;

  min-height:260px;

  padding:24px;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  overflow:hidden;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.diag-issue-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:
    transform .25s ease;

  box-shadow:
    0 -5px 18px
    rgba(239,35,60,.24);
}


.diag-issue-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.diag-issue-card:hover::after{
  transform:scaleX(1);
}


.diag-icon{
  width:46px;
  height:46px;

  display:grid;

  place-items:center;

  border:1px solid #343c42;

  border-radius:6px;

  background:#12171a;

  color:var(--red);

  font-size:20px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.diag-issue-card:hover .diag-icon{
  transform:
    translateY(-2px)
    scale(1.04);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 0 20px
    rgba(239,35,60,.12);
}


.diag-issue-card h3{
  margin:34px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:25px;

  text-transform:uppercase;
}


.diag-issue-card p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   PROCESS
========================= */

.diag-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.diag-process-step{
  padding-top:18px;

  border-top:1px solid #3c444a;
}


.diag-process-step > span{
  color:var(--red);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;
}


.diag-process-step h3{
  margin:28px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  line-height:1;

  text-transform:uppercase;
}


.diag-process-step p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   LIVE DATA
========================= */

.diag-live-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.diag-live-inner{
  padding-top:75px;
  padding-bottom:75px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:70px;

  align-items:center;
}


.diag-live-inner > div:first-child > p:not(.eyebrow){
  max-width:690px;

  margin:18px 0 0;

  color:var(--muted);

  line-height:1.78;
}


.diag-text-link{
  display:inline-block;

  margin-top:23px;

  color:var(--red);

  font-size:11px;

  font-weight:700;

  letter-spacing:.08em;

  text-decoration:none;

  text-transform:uppercase;
}


.diag-live-panel{
  padding:24px;

  border:1px solid #30383e;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #13181c,
      #090c0e
    );
}


.diag-live-label{
  margin:0 0 22px;

  color:var(--muted);

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;
}


.diag-live-reading{
  margin-bottom:21px;
}


.diag-live-reading:last-child{
  margin-bottom:0;
}


.diag-live-reading > div:first-child{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:8px;
}


.diag-live-reading span{
  font-size:10px;
}


.diag-live-reading strong{
  color:var(--red);

  font-size:9px;

  letter-spacing:.08em;
}


.diag-bar{
  height:5px;

  overflow:hidden;

  border-radius:20px;

  background:#252c31;
}


.diag-bar span{
  display:block;

  height:100%;

  border-radius:20px;

  background:#687077;
}



/* =========================
   WHY RS
========================= */

.diag-why-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.diag-why-grid > div{
  padding-top:18px;

  border-top:1px solid #394148;
}


.diag-why-grid span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.diag-why-grid h3{
  margin:25px 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:22px;

  text-transform:uppercase;
}


.diag-why-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FAQ
========================= */

.diag-faq-section{
  border-top:1px solid var(--line);

  background:#0b0f12;
}


.diag-faq-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}


.diag-faq-item{
  border:1px solid var(--line);

  border-radius:6px;

  background:#0e1215;

  overflow:hidden;
}


.diag-faq-item summary{
  position:relative;

  padding:20px 50px 20px 20px;

  cursor:pointer;

  list-style:none;

  font-family:"Barlow Condensed",sans-serif;

  font-size:20px;

  font-weight:700;

  text-transform:uppercase;
}


.diag-faq-item summary::-webkit-details-marker{
  display:none;
}


.diag-faq-item summary::after{
  content:"+";

  position:absolute;

  right:20px;
  top:50%;

  transform:translateY(-50%);

  color:var(--red);

  font-family:Inter,sans-serif;

  font-size:18px;
}


.diag-faq-item[open] summary::after{
  content:"–";
}


.diag-faq-item p{
  margin:0;

  padding:
    0 20px 20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FINAL CTA
========================= */

.diag-cta-wrap{
  padding-top:72px;
  padding-bottom:80px;
}


.diag-cta{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:45px;

  align-items:center;

  padding:42px 46px;

  border:1px solid #473039;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(239,35,60,.14),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0a0d0f
    );
}


.diag-cta h2{
  font-size:clamp(
    34px,
    3.7vw,
    50px
  );
}


.diag-cta > div > p:not(.eyebrow){
  max-width:720px;

  margin:14px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .diag-hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }


  .diag-display{
    max-width:680px;
  }


  .diag-intro{
    grid-template-columns:1fr;

    gap:28px;
  }


  .diag-issue-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .diag-process-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .diag-live-inner{
    grid-template-columns:1fr;

    gap:38px;
  }


  .diag-live-panel{
    max-width:680px;
  }


  .diag-why-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .diag-cta{
    grid-template-columns:1fr;

    align-items:start;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .diag-hero-inner{
    min-height:auto;

    padding-top:68px;
    padding-bottom:56px;
  }


  .diag-hero-copy h1{
    font-size:48px;
  }


  .diag-hero-copy .lead{
    font-size:16px;
  }


  .diag-hero-points{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }


  .diag-display{
    padding:17px;
  }


  .diag-status-grid{
    grid-template-columns:1fr;
  }


  .diag-intro h2,
  .diag-section-heading h2,
  .diag-live-inner h2{
    font-size:39px;
  }


  .diag-issue-grid{
    grid-template-columns:1fr;
  }


  .diag-issue-card{
    min-height:235px;
  }


  .diag-process-grid{
    grid-template-columns:1fr;
  }


  .diag-live-inner{
    padding-top:58px;
    padding-bottom:58px;
  }


  .diag-why-grid{
    grid-template-columns:1fr;
  }


  .diag-faq-grid{
    grid-template-columns:1fr;
  }


  .diag-cta-wrap{
    padding-top:58px;
    padding-bottom:60px;
  }


  .diag-cta{
    padding:30px 24px;
  }


  .diag-cta .btn{
    width:100%;

    text-align:center;
  }

}
/* =========================================================
   SERVICING PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.serv-hero{
  position:relative;
  overflow:hidden;

  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 79% 42%,
      rgba(239,35,60,.11),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0d1114 58%,
      #080a0c 100%
    );
}


.serv-hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}


.serv-hero-inner{
  position:relative;
  z-index:1;

  min-height:560px;

  padding-top:82px;
  padding-bottom:76px;

  display:grid;

  grid-template-columns:
    minmax(0,1.13fr)
    minmax(340px,.87fr);

  align-items:center;

  gap:70px;
}


.serv-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(50px,5.8vw,78px);

  line-height:.93;

  letter-spacing:-.025em;

  text-transform:uppercase;
}


.serv-hero-copy h1 span{
  color:var(--red);
}


.serv-hero-copy .lead{
  max-width:720px;

  margin:0;

  color:#bcc3c8;

  font-size:17px;

  line-height:1.75;
}


.serv-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:27px;
}


.serv-hero-points{
  display:flex;

  flex-wrap:wrap;

  gap:10px 22px;

  margin-top:26px;

  color:#c3c8cc;

  font-size:10px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   HERO SERVICE DISPLAY
========================= */

.serv-display{
  padding:22px;

  border:1px solid #30383e;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #151a1e,
      #090c0e
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.3);
}


.serv-display-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);
}


.serv-display-head span,
.serv-display-head strong{
  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.serv-display-head span{
  color:var(--muted);
}


.serv-display-head strong{
  color:var(--red);
}


.serv-check-list{
  margin-top:18px;

  display:grid;

  gap:8px;
}


.serv-check-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:14px 15px;

  border:1px solid #293137;

  border-radius:5px;

  background:#090c0e;
}


.serv-check-row span{
  color:#fff;

  font-size:12px;

  font-weight:500;
}


.serv-check-row strong{
  color:var(--red);

  font-size:9px;

  letter-spacing:.08em;

  text-align:right;
}


.serv-status-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin-top:12px;
}


.serv-status-grid > div{
  padding:13px 7px;

  border:1px solid #293137;

  border-radius:5px;

  text-align:center;
}


.serv-status-grid strong{
  display:block;

  margin-bottom:3px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;
}


.serv-status-grid span{
  color:var(--muted);

  font-size:9px;
}



/* =========================
   SHARED PAGE HEADINGS
========================= */

.serv-intro h2,
.serv-section-heading h2,
.serv-mobile-copy h2,
.serv-cta h2{
  margin:8px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(38px,4vw,56px);

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.serv-intro h2 span,
.serv-section-heading h2 span,
.serv-mobile-copy h2 span,
.serv-cta h2 span{
  color:var(--red);
}


.serv-section-heading{
  margin-bottom:36px;
}


.serv-section-heading > p:not(.eyebrow){
  max-width:720px;

  margin:16px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================
   INTRO
========================= */

.serv-intro{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:75px;

  align-items:start;
}


.serv-intro-copy p{
  margin:0 0 15px;

  color:var(--muted);

  line-height:1.78;
}


.serv-intro-copy p:last-child{
  margin-bottom:0;
}



/* =========================
   SERVICE OPTIONS
========================= */

.serv-options-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.serv-options-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.serv-option-card{
  position:relative;

  min-height:350px;

  display:flex;

  flex-direction:column;

  padding:25px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.serv-option-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;

  box-shadow:
    0 -5px 18px
    rgba(239,35,60,.24);
}


.serv-option-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 22px 45px
    rgba(0,0,0,.27);
}


.serv-option-card:hover::after{
  transform:scaleX(1);
}


.serv-option-featured{
  border-color:
    rgba(239,35,60,.38);

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(239,35,60,.08),
      transparent 30%
    ),
    linear-gradient(
      155deg,
      #14191d,
      #090c0e
    );
}


.serv-option-number{
  color:var(--red);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;
}


.serv-option-card h3{
  margin:37px 0 10px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:29px;

  line-height:1;

  text-transform:uppercase;
}


.serv-option-card > p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.72;
}


.serv-option-list{
  display:grid;

  gap:10px;

  margin-top:auto;

  padding-top:20px;

  border-top:1px solid var(--line);

  color:#d6dade;

  font-size:12px;
}


.serv-option-list span{
  display:flex;

  align-items:center;

  gap:8px;
}


.serv-option-list b{
  color:var(--red);
}


.serv-options-note{
  margin:18px 0 0;

  color:#7f888e;

  font-size:11px;

  line-height:1.6;
}



/* =========================
   PROCESS
========================= */

.serv-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.serv-process-step{
  padding-top:18px;

  border-top:1px solid #3c444a;
}


.serv-process-step > span{
  color:var(--red);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;
}


.serv-process-step h3{
  margin:28px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  line-height:1;

  text-transform:uppercase;
}


.serv-process-step p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   MOBILE SERVICING
========================= */

.serv-mobile-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.serv-mobile-inner{
  padding-top:75px;

  padding-bottom:75px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:70px;
}


.serv-mobile-copy > p:not(.eyebrow){
  max-width:690px;

  margin:18px 0 24px;

  color:var(--muted);

  line-height:1.78;
}


.serv-mobile-panel{
  padding:24px;

  border:1px solid #30383e;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #13181c,
      #090c0e
    );
}


.serv-mobile-panel-head{
  display:flex;

  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);

  color:var(--muted);

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;
}


.serv-mobile-panel-head strong{
  color:var(--red);
}


.serv-mobile-row{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:15px 2px;

  border-bottom:1px solid #293137;
}


.serv-mobile-row:last-child{
  border-bottom:none;
}


.serv-mobile-row span{
  font-size:12px;
}


.serv-mobile-row strong{
  color:var(--red);

  font-size:9px;

  letter-spacing:.07em;

  text-align:right;
}



/* =========================
   BENEFITS
========================= */

.serv-benefits-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.serv-benefits-grid > div{
  padding-top:18px;

  border-top:1px solid #394148;
}


.serv-benefits-grid span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.serv-benefits-grid h3{
  margin:25px 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:22px;

  text-transform:uppercase;
}


.serv-benefits-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   RELATED SERVICES
========================= */

.serv-related-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.serv-related-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.serv-related-card{
  position:relative;

  min-height:260px;

  display:flex;

  flex-direction:column;

  padding:24px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  color:#fff;

  text-decoration:none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.serv-related-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;
}


.serv-related-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.serv-related-card:hover::after{
  transform:scaleX(1);
}


.serv-related-number{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.serv-related-card h3{
  margin:35px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:26px;

  text-transform:uppercase;
}


.serv-related-card p{
  margin:0 0 25px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}


.serv-related-card strong{
  margin-top:auto;

  color:var(--red);

  font-size:10px;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   FAQ
========================= */

/*
  Two independent columns are used here instead of
  placing every FAQ directly into the same CSS Grid.

  This means opening a question in one column does not
  stretch or create an empty gap in the other column.
*/

.serv-faq-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  align-items:start;
}


.serv-faq-column{
  display:flex;

  flex-direction:column;

  gap:12px;

  min-width:0;
}


.serv-faq-item{
  width:100%;

  margin:0;

  border:1px solid var(--line);

  border-radius:6px;

  background:#0e1215;

  overflow:hidden;
}


.serv-faq-item summary{
  position:relative;

  display:block;

  padding:20px 50px 20px 20px;

  cursor:pointer;

  list-style:none;

  font-family:"Barlow Condensed",sans-serif;

  font-size:20px;

  font-weight:700;

  line-height:1.25;

  text-transform:uppercase;

  user-select:none;
}


.serv-faq-item summary::-webkit-details-marker{
  display:none;
}


.serv-faq-item summary::marker{
  content:"";
}


.serv-faq-item summary::after{
  content:"+";

  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  color:var(--red);

  font-family:Inter,sans-serif;

  font-size:18px;

  font-weight:700;

  line-height:1;
}


.serv-faq-item[open] summary::after{
  content:"–";
}


.serv-faq-item p{
  margin:0;

  padding:
    0 20px 20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FINAL CTA
========================= */

.serv-cta-wrap{
  padding-top:72px;

  padding-bottom:80px;
}


.serv-cta{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:45px;

  padding:42px 46px;

  border:1px solid #473039;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(239,35,60,.14),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0a0d0f
    );
}


.serv-cta h2{
  font-size:clamp(34px,3.7vw,50px);
}


.serv-cta > div > p:not(.eyebrow){
  max-width:720px;

  margin:14px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .serv-hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }


  .serv-display{
    max-width:680px;
  }


  .serv-intro{
    grid-template-columns:1fr;

    gap:28px;
  }


  .serv-options-grid{
    grid-template-columns:1fr;
  }


  .serv-option-card{
    min-height:300px;
  }


  .serv-process-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .serv-mobile-inner{
    grid-template-columns:1fr;

    gap:38px;
  }


  .serv-mobile-panel{
    max-width:680px;
  }


  .serv-benefits-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .serv-related-grid{
    grid-template-columns:1fr;
  }


  .serv-related-card{
    min-height:230px;
  }


  .serv-cta{
    grid-template-columns:1fr;

    align-items:start;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .serv-hero-inner{
    min-height:auto;

    padding-top:68px;

    padding-bottom:56px;
  }


  .serv-hero-copy h1{
    font-size:48px;
  }


  .serv-hero-copy .lead{
    font-size:16px;
  }


  .serv-hero-points{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }


  .serv-display{
    padding:17px;
  }


  .serv-status-grid{
    grid-template-columns:1fr;
  }


  .serv-check-row{
    align-items:flex-start;

    flex-direction:column;

    gap:7px;
  }


  .serv-intro h2,
  .serv-section-heading h2,
  .serv-mobile-copy h2{
    font-size:39px;
  }


  .serv-option-card{
    min-height:315px;
  }


  .serv-process-grid{
    grid-template-columns:1fr;
  }


  .serv-mobile-inner{
    padding-top:58px;

    padding-bottom:58px;
  }


  .serv-benefits-grid{
    grid-template-columns:1fr;
  }


  .serv-faq-grid{
    grid-template-columns:1fr;
  }


  .serv-cta-wrap{
    padding-top:58px;

    padding-bottom:60px;
  }


  .serv-cta{
    padding:30px 24px;
  }


  .serv-cta .btn{
    width:100%;

    text-align:center;
  }

}
/* =========================================================
   MECHANICAL REPAIRS PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.mech-hero{
  position:relative;
  overflow:hidden;

  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 79% 42%,
      rgba(239,35,60,.11),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0d1114 58%,
      #080a0c 100%
    );
}


.mech-hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}


.mech-hero-inner{
  position:relative;
  z-index:1;

  min-height:560px;

  padding-top:82px;
  padding-bottom:76px;

  display:grid;

  grid-template-columns:
    minmax(0,1.13fr)
    minmax(340px,.87fr);

  align-items:center;

  gap:70px;
}


.mech-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(50px,5.8vw,78px);

  line-height:.93;

  letter-spacing:-.025em;

  text-transform:uppercase;
}


.mech-hero-copy h1 span{
  color:var(--red);
}


.mech-hero-copy .lead{
  max-width:720px;

  margin:0;

  color:#bcc3c8;

  font-size:17px;

  line-height:1.75;
}


.mech-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:27px;
}


.mech-hero-points{
  display:flex;

  flex-wrap:wrap;

  gap:10px 22px;

  margin-top:26px;

  color:#c3c8cc;

  font-size:10px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   HERO REPAIR DISPLAY
========================= */

.mech-display{
  padding:22px;

  border:1px solid #30383e;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #151a1e,
      #090c0e
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.3);
}


.mech-display-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);
}


.mech-display-head span,
.mech-display-head strong{
  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.mech-display-head span{
  color:var(--muted);
}


.mech-display-head strong{
  color:var(--red);
}


.mech-check-list{
  margin-top:18px;

  display:grid;

  gap:8px;
}


.mech-check-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:14px 15px;

  border:1px solid #293137;

  border-radius:5px;

  background:#090c0e;
}


.mech-check-row span{
  color:#fff;

  font-size:12px;

  font-weight:500;
}


.mech-check-row strong{
  color:var(--red);

  font-size:9px;

  letter-spacing:.08em;

  text-align:right;
}


.mech-status-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin-top:12px;
}


.mech-status-grid > div{
  padding:13px 7px;

  border:1px solid #293137;

  border-radius:5px;

  text-align:center;
}


.mech-status-grid strong{
  display:block;

  margin-bottom:3px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;
}


.mech-status-grid span{
  color:var(--muted);

  font-size:9px;
}



/* =========================
   SHARED HEADINGS
========================= */

.mech-intro h2,
.mech-section-heading h2,
.mech-mobile-copy h2,
.mech-cta h2{
  margin:8px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(38px,4vw,56px);

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.mech-intro h2 span,
.mech-section-heading h2 span,
.mech-mobile-copy h2 span,
.mech-cta h2 span{
  color:var(--red);
}


.mech-section-heading{
  margin-bottom:36px;
}



/* =========================
   INTRO
========================= */

.mech-intro{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:75px;

  align-items:start;
}


.mech-intro-copy p{
  margin:0 0 15px;

  color:var(--muted);

  line-height:1.78;
}


.mech-intro-copy p:last-child{
  margin-bottom:0;
}



/* =========================
   REPAIR CARDS
========================= */

.mech-repairs-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.mech-repair-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.mech-repair-card{
  position:relative;

  min-height:270px;

  padding:24px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.mech-repair-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;

  box-shadow:
    0 -5px 18px
    rgba(239,35,60,.24);
}


.mech-repair-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.mech-repair-card:hover::after{
  transform:scaleX(1);
}


.mech-card-number{
  position:absolute;

  right:22px;
  top:20px;

  color:#596168;

  font-family:"Barlow Condensed",sans-serif;

  font-size:14px;

  font-weight:700;
}


.mech-card-icon{
  width:46px;
  height:46px;

  display:grid;

  place-items:center;

  border:1px solid #343c42;

  border-radius:6px;

  background:#12171a;

  color:var(--red);

  font-size:20px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.mech-repair-card:hover .mech-card-icon{
  transform:
    translateY(-2px)
    scale(1.04);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 0 20px
    rgba(239,35,60,.12);
}


.mech-repair-card h3{
  margin:34px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:25px;

  text-transform:uppercase;
}


.mech-repair-card p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   PROCESS
========================= */

.mech-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.mech-process-step{
  padding-top:18px;

  border-top:1px solid #3c444a;
}


.mech-process-step > span{
  color:var(--red);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;
}


.mech-process-step h3{
  margin:28px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  line-height:1;

  text-transform:uppercase;
}


.mech-process-step p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   MOBILE REPAIRS
========================= */

.mech-mobile-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.mech-mobile-inner{
  padding-top:75px;
  padding-bottom:75px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:70px;
}


.mech-mobile-copy > p:not(.eyebrow){
  max-width:690px;

  margin:18px 0 0;

  color:var(--muted);

  line-height:1.78;
}


.mech-mobile-copy .btn{
  margin-top:24px;
}


.mech-mobile-panel{
  padding:24px;

  border:1px solid #30383e;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #13181c,
      #090c0e
    );
}


.mech-mobile-panel-head{
  display:flex;

  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);

  color:var(--muted);

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;
}


.mech-mobile-panel-head strong{
  color:var(--red);
}


.mech-mobile-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:15px 2px;

  border-bottom:1px solid #293137;
}


.mech-mobile-row:last-child{
  border-bottom:none;
}


.mech-mobile-row span{
  font-size:12px;
}


.mech-mobile-row strong{
  color:var(--red);

  font-size:9px;

  letter-spacing:.07em;

  text-align:right;
}



/* =========================
   WHY RS
========================= */

.mech-why-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.mech-why-grid > div{
  padding-top:18px;

  border-top:1px solid #394148;
}


.mech-why-grid span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.mech-why-grid h3{
  margin:25px 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:22px;

  text-transform:uppercase;
}


.mech-why-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   RELATED SERVICES
========================= */

.mech-related-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.mech-related-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.mech-related-card{
  position:relative;

  min-height:260px;

  display:flex;

  flex-direction:column;

  padding:24px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  color:#fff;

  text-decoration:none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.mech-related-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;
}


.mech-related-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.mech-related-card:hover::after{
  transform:scaleX(1);
}


.mech-related-number{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.mech-related-card h3{
  margin:35px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:26px;

  text-transform:uppercase;
}


.mech-related-card p{
  margin:0 0 25px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}


.mech-related-card strong{
  margin-top:auto;

  color:var(--red);

  font-size:10px;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   FAQ
========================= */

/*
  Independent columns prevent the spacing/stretching
  issue we fixed on the Servicing page.
*/

.mech-faq-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  align-items:start;
}


.mech-faq-column{
  display:flex;

  flex-direction:column;

  gap:12px;

  min-width:0;
}


.mech-faq-item{
  width:100%;

  margin:0;

  border:1px solid var(--line);

  border-radius:6px;

  background:#0e1215;

  overflow:hidden;
}


.mech-faq-item summary{
  position:relative;

  display:block;

  padding:20px 50px 20px 20px;

  cursor:pointer;

  list-style:none;

  font-family:"Barlow Condensed",sans-serif;

  font-size:20px;

  font-weight:700;

  line-height:1.25;

  text-transform:uppercase;

  user-select:none;
}


.mech-faq-item summary::-webkit-details-marker{
  display:none;
}


.mech-faq-item summary::marker{
  content:"";
}


.mech-faq-item summary::after{
  content:"+";

  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  color:var(--red);

  font-family:Inter,sans-serif;

  font-size:18px;

  font-weight:700;

  line-height:1;
}


.mech-faq-item[open] summary::after{
  content:"–";
}


.mech-faq-item p{
  margin:0;

  padding:
    0 20px 20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FINAL CTA
========================= */

.mech-cta-wrap{
  padding-top:72px;

  padding-bottom:80px;
}


.mech-cta{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:45px;

  padding:42px 46px;

  border:1px solid #473039;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(239,35,60,.14),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0a0d0f
    );
}


.mech-cta h2{
  font-size:clamp(34px,3.7vw,50px);
}


.mech-cta > div > p:not(.eyebrow){
  max-width:720px;

  margin:14px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .mech-hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }


  .mech-display{
    max-width:680px;
  }


  .mech-intro{
    grid-template-columns:1fr;

    gap:28px;
  }


  .mech-repair-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .mech-process-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .mech-mobile-inner{
    grid-template-columns:1fr;

    gap:38px;
  }


  .mech-mobile-panel{
    max-width:680px;
  }


  .mech-why-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .mech-related-grid{
    grid-template-columns:1fr;
  }


  .mech-related-card{
    min-height:230px;
  }


  .mech-cta{
    grid-template-columns:1fr;

    align-items:start;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .mech-hero-inner{
    min-height:auto;

    padding-top:68px;

    padding-bottom:56px;
  }


  .mech-hero-copy h1{
    font-size:48px;
  }


  .mech-hero-copy .lead{
    font-size:16px;
  }


  .mech-hero-points{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }


  .mech-display{
    padding:17px;
  }


  .mech-status-grid{
    grid-template-columns:1fr;
  }


  .mech-check-row{
    align-items:flex-start;

    flex-direction:column;

    gap:7px;
  }


  .mech-intro h2,
  .mech-section-heading h2,
  .mech-mobile-copy h2{
    font-size:39px;
  }


  .mech-repair-grid{
    grid-template-columns:1fr;
  }


  .mech-process-grid{
    grid-template-columns:1fr;
  }


  .mech-mobile-inner{
    padding-top:58px;

    padding-bottom:58px;
  }


  .mech-why-grid{
    grid-template-columns:1fr;
  }


  .mech-faq-grid{
    grid-template-columns:1fr;
  }


  .mech-cta-wrap{
    padding-top:58px;

    padding-bottom:60px;
  }


  .mech-cta{
    padding:30px 24px;
  }


  .mech-cta .btn{
    width:100%;

    text-align:center;
  }

}
/* =========================================================
   DATALOGGING PAGE
   ========================================================= */


/* =========================
   HERO
========================= */

.data-hero{
  position:relative;
  overflow:hidden;

  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 79% 42%,
      rgba(239,35,60,.11),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #07090b 0%,
      #0d1114 58%,
      #080a0c 100%
    );
}


.data-hero::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.14;

  background:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:42px 42px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}


.data-hero-inner{
  position:relative;
  z-index:1;

  min-height:560px;

  padding-top:82px;
  padding-bottom:76px;

  display:grid;

  grid-template-columns:
    minmax(0,1.13fr)
    minmax(340px,.87fr);

  align-items:center;

  gap:70px;
}


.data-hero-copy h1{
  margin:10px 0 18px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(50px,5.8vw,78px);

  line-height:.93;

  letter-spacing:-.025em;

  text-transform:uppercase;
}


.data-hero-copy h1 span{
  color:var(--red);
}


.data-hero-copy .lead{
  max-width:720px;

  margin:0;

  color:#bcc3c8;

  font-size:17px;

  line-height:1.75;
}


.data-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:27px;
}


.data-hero-points{
  display:flex;

  flex-wrap:wrap;

  gap:10px 22px;

  margin-top:26px;

  color:#c3c8cc;

  font-size:10px;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   HERO DATA DISPLAY
========================= */

.data-display{
  padding:22px;

  border:1px solid #30383e;

  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      #151a1e,
      #090c0e
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.3);
}


.data-display-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);
}


.data-display-head span,
.data-display-head strong{
  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.data-display-head span{
  color:var(--muted);
}


.data-display-head strong{
  color:var(--red);
}


.data-live-list{
  display:grid;

  gap:8px;

  margin-top:18px;
}


.data-live-row{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:14px 15px;

  border:1px solid #293137;

  border-radius:5px;

  background:#090c0e;
}


.data-live-row span{
  color:#fff;

  font-size:12px;

  font-weight:500;
}


.data-live-row strong{
  position:relative;

  padding-left:12px;

  color:var(--red);

  font-size:9px;

  letter-spacing:.08em;
}


.data-live-row strong::before{
  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--red);

  transform:translateY(-50%);

  box-shadow:
    0 0 10px
    rgba(239,35,60,.8);
}


.data-status-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:8px;

  margin-top:12px;
}


.data-status-grid > div{
  padding:13px 7px;

  border:1px solid #293137;

  border-radius:5px;

  text-align:center;
}


.data-status-grid strong{
  display:block;

  margin-bottom:3px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;
}


.data-status-grid span{
  color:var(--muted);

  font-size:9px;
}



/* =========================
   SHARED HEADINGS
========================= */

.data-intro h2,
.data-section-heading h2,
.data-compare-copy h2,
.data-cta h2{
  margin:8px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:clamp(38px,4vw,56px);

  line-height:.96;

  letter-spacing:-.02em;

  text-transform:uppercase;
}


.data-intro h2 span,
.data-section-heading h2 span,
.data-compare-copy h2 span,
.data-cta h2 span{
  color:var(--red);
}


.data-section-heading{
  margin-bottom:36px;
}


.data-section-heading > p:not(.eyebrow){
  max-width:720px;

  margin:16px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================
   INTRO
========================= */

.data-intro{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:75px;

  align-items:start;
}


.data-intro-copy p{
  margin:0 0 15px;

  color:var(--muted);

  line-height:1.78;
}


.data-intro-copy p:last-child{
  margin-bottom:0;
}



/* =========================
   MONITOR CARDS
========================= */

.data-monitor-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.data-monitor-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.data-monitor-card{
  position:relative;

  min-height:270px;

  padding:24px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.data-monitor-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;

  box-shadow:
    0 -5px 18px
    rgba(239,35,60,.24);
}


.data-monitor-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.data-monitor-card:hover::after{
  transform:scaleX(1);
}


.data-card-number{
  position:absolute;

  right:22px;
  top:20px;

  color:#596168;

  font-family:"Barlow Condensed",sans-serif;

  font-size:14px;

  font-weight:700;
}


.data-card-icon{
  width:50px;
  height:46px;

  display:grid;

  place-items:center;

  border:1px solid #343c42;

  border-radius:6px;

  background:#12171a;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:13px;

  font-weight:800;

  letter-spacing:.04em;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.data-monitor-card:hover .data-card-icon{
  transform:
    translateY(-2px)
    scale(1.04);

  border-color:
    rgba(239,35,60,.42);

  box-shadow:
    0 0 20px
    rgba(239,35,60,.12);
}


.data-monitor-card h3{
  margin:34px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:25px;

  text-transform:uppercase;
}


.data-monitor-card p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   BENEFITS
========================= */

.data-benefits-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.data-benefits-grid > div{
  padding-top:18px;

  border-top:1px solid #394148;
}


.data-benefits-grid span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.data-benefits-grid h3{
  margin:25px 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:22px;

  text-transform:uppercase;
}


.data-benefits-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   PROCESS
========================= */

.data-process-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.data-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


.data-process-step{
  padding-top:18px;

  border-top:1px solid #3c444a;
}


.data-process-step > span{
  color:var(--red);

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;
}


.data-process-step h3{
  margin:28px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:24px;

  line-height:1;

  text-transform:uppercase;
}


.data-process-step p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   REQUESTED VS ACTUAL
========================= */

.data-compare-section{
  border-bottom:1px solid var(--line);

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(239,35,60,.08),
      transparent 27%
    ),
    #080b0d;
}


.data-compare-inner{
  padding-top:75px;
  padding-bottom:75px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  align-items:center;

  gap:70px;
}


.data-compare-copy > p:not(.eyebrow){
  max-width:680px;

  margin:18px 0 0;

  color:var(--muted);

  line-height:1.78;
}


.data-graph-panel{
  padding:24px;

  border:1px solid #30383e;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #13181c,
      #090c0e
    );
}


.data-graph-head{
  display:flex;

  justify-content:space-between;

  gap:15px;

  padding-bottom:15px;

  border-bottom:1px solid var(--line);

  color:var(--muted);

  font-size:9px;

  font-weight:700;

  letter-spacing:.13em;
}


.data-graph-head strong{
  color:var(--red);
}


.data-graph-group{
  padding:18px 0;

  border-bottom:1px solid #293137;
}


.data-graph-group:last-of-type{
  border-bottom:none;
}


.data-graph-title{
  margin-bottom:11px;

  color:#fff;

  font-family:"Barlow Condensed",sans-serif;

  font-size:14px;

  font-weight:700;

  letter-spacing:.04em;
}


.data-bar-row{
  display:grid;

  grid-template-columns:
    70px 1fr;

  align-items:center;

  gap:10px;

  margin-top:8px;
}


.data-bar-row > span{
  color:var(--muted);

  font-size:9px;

  text-transform:uppercase;
}


.data-bar-track{
  height:6px;

  overflow:hidden;

  border-radius:20px;

  background:#20272c;
}


.data-bar-track i{
  display:block;

  height:100%;

  border-radius:20px;

  background:
    linear-gradient(
      90deg,
      var(--red-dark),
      var(--red)
    );

  box-shadow:
    0 0 12px
    rgba(239,35,60,.25);
}


.data-graph-note{
  margin:12px 0 0;

  color:#707980;

  font-size:9px;

  line-height:1.5;
}



/* =========================
   USEFUL FOR
========================= */

.data-use-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;
}


.data-use-grid > div{
  padding-top:18px;

  border-top:1px solid #394148;
}


.data-use-grid span{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.data-use-grid h3{
  margin:24px 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:22px;

  text-transform:uppercase;
}


.data-use-grid p{
  margin:0;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   RELATED SERVICES
========================= */

.data-related-section{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  background:#0b0f12;
}


.data-related-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.data-related-card{
  position:relative;

  min-height:260px;

  display:flex;

  flex-direction:column;

  padding:24px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:7px;

  background:
    linear-gradient(
      155deg,
      #12171b,
      #090c0e
    );

  color:#fff;

  text-decoration:none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.data-related-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:var(--red);

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .25s ease;
}


.data-related-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(239,35,60,.4);

  box-shadow:
    0 22px 44px
    rgba(0,0,0,.25);
}


.data-related-card:hover::after{
  transform:scaleX(1);
}


.data-related-number{
  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;

  font-size:16px;

  font-weight:800;
}


.data-related-card h3{
  margin:35px 0 9px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:26px;

  text-transform:uppercase;
}


.data-related-card p{
  margin:0 0 25px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}


.data-related-card strong{
  margin-top:auto;

  color:var(--red);

  font-size:10px;

  letter-spacing:.08em;

  text-transform:uppercase;
}



/* =========================
   FAQ
========================= */

.data-faq-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  align-items:start;
}


.data-faq-column{
  display:flex;

  flex-direction:column;

  gap:12px;

  min-width:0;
}


.data-faq-item{
  width:100%;

  margin:0;

  border:1px solid var(--line);

  border-radius:6px;

  background:#0e1215;

  overflow:hidden;
}


.data-faq-item summary{
  position:relative;

  display:block;

  padding:20px 50px 20px 20px;

  cursor:pointer;

  list-style:none;

  font-family:"Barlow Condensed",sans-serif;

  font-size:20px;

  font-weight:700;

  line-height:1.25;

  text-transform:uppercase;

  user-select:none;
}


.data-faq-item summary::-webkit-details-marker{
  display:none;
}


.data-faq-item summary::marker{
  content:"";
}


.data-faq-item summary::after{
  content:"+";

  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  color:var(--red);

  font-family:Inter,sans-serif;

  font-size:18px;

  font-weight:700;

  line-height:1;
}


.data-faq-item[open] summary::after{
  content:"–";
}


.data-faq-item p{
  margin:0;

  padding:
    0 20px 20px;

  color:var(--muted);

  font-size:13px;

  line-height:1.7;
}



/* =========================
   FINAL CTA
========================= */

.data-cta-wrap{
  padding-top:72px;

  padding-bottom:80px;
}


.data-cta{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:45px;

  padding:42px 46px;

  border:1px solid #473039;

  border-radius:8px;

  background:
    radial-gradient(
      circle at 90% 50%,
      rgba(239,35,60,.14),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #11161a,
      #0a0d0f
    );
}


.data-cta h2{
  font-size:clamp(34px,3.7vw,50px);
}


.data-cta > div > p:not(.eyebrow){
  max-width:720px;

  margin:14px 0 0;

  color:var(--muted);

  line-height:1.75;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .data-hero-inner{
    grid-template-columns:1fr;

    gap:42px;
  }


  .data-display{
    max-width:680px;
  }


  .data-intro{
    grid-template-columns:1fr;

    gap:28px;
  }


  .data-monitor-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .data-benefits-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .data-process-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .data-compare-inner{
    grid-template-columns:1fr;

    gap:38px;
  }


  .data-graph-panel{
    max-width:720px;
  }


  .data-use-grid{
    grid-template-columns:
      repeat(2,1fr);

    row-gap:35px;
  }


  .data-related-grid{
    grid-template-columns:1fr;
  }


  .data-related-card{
    min-height:230px;
  }


  .data-cta{
    grid-template-columns:1fr;

    align-items:start;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .data-hero-inner{
    min-height:auto;

    padding-top:68px;

    padding-bottom:56px;
  }


  .data-hero-copy h1{
    font-size:48px;
  }


  .data-hero-copy .lead{
    font-size:16px;
  }


  .data-hero-points{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }


  .data-display{
    padding:17px;
  }


  .data-status-grid{
    grid-template-columns:1fr;
  }


  .data-live-row{
    align-items:flex-start;

    flex-direction:column;

    gap:7px;
  }


  .data-intro h2,
  .data-section-heading h2,
  .data-compare-copy h2{
    font-size:39px;
  }


  .data-monitor-grid{
    grid-template-columns:1fr;
  }


  .data-benefits-grid{
    grid-template-columns:1fr;
  }


  .data-process-grid{
    grid-template-columns:1fr;
  }


  .data-compare-inner{
    padding-top:58px;

    padding-bottom:58px;
  }


  .data-use-grid{
    grid-template-columns:1fr;
  }


  .data-faq-grid{
    grid-template-columns:1fr;
  }


  .data-bar-row{
    grid-template-columns:
      62px 1fr;
  }


  .data-cta-wrap{
    padding-top:58px;

    padding-bottom:60px;
  }


  .data-cta{
    padding:30px 24px;
  }


  .data-cta .btn{
    width:100%;

    text-align:center;
  }

}
/* =========================================================
   CARBON CLEANING PAGE
========================================================= */

.carbon-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 72% 20%, rgba(239,35,60,.10), transparent 30%),
    linear-gradient(110deg, #070a0c 0%, #0a0e11 58%, #11171b 100%);
}

.carbon-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:36px 36px;
}

.carbon-hero-inner{
  position:relative;
  z-index:1;
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:50px;
  align-items:center;
  padding-top:70px;
  padding-bottom:70px;
}

.carbon-hero-copy h1,
.carbon-section-heading h2,
.carbon-intro h2,
.carbon-decision-card h2,
.carbon-final-cta h2{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.02em;
}

.carbon-hero-copy h1{
  max-width:760px;
  font-size:clamp(54px,7vw,92px);
}

.carbon-hero-copy h1 span,
.carbon-section-heading h2 span,
.carbon-intro h2 span,
.carbon-decision-card h2 span,
.carbon-final-cta h2 span{
  color:var(--red);
}

.carbon-hero-copy .lead{
  max-width:680px;
  margin:24px 0 0;
  color:#d3d8dc;
  line-height:1.75;
  font-size:16px;
}

.carbon-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

.carbon-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:24px;
}

.carbon-hero-points span{
  color:#c8ced3;
  font-size:12px;
  font-weight:700;
}

.carbon-hero-points span::first-letter{
  color:var(--red);
}

.carbon-hero-visual{
  position:relative;
  min-height:470px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#0c1114;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
}

.carbon-machine-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.carbon-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,7,8,.10),rgba(5,7,8,.28) 55%,rgba(5,7,8,.76));
  pointer-events:none;
}

.carbon-condition-panel{
  position:absolute;
  z-index:2;
  top:28px;
  right:28px;
  width:min(330px,calc(100% - 56px));
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;
  background:rgba(8,12,14,.90);
  box-shadow:0 22px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
}

.carbon-panel-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.carbon-panel-head span,
.carbon-panel-head strong{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  letter-spacing:.04em;
}

.carbon-panel-head strong{
  color:var(--red);
}

.carbon-condition-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13px;
}

.carbon-condition-row span{
  color:#d0d5d9;
}

.carbon-condition-row strong{
  color:#fff;
  font-family:"Barlow Condensed",sans-serif;
  letter-spacing:.05em;
}

.carbon-panel-status{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding-top:18px;
  color:#fff;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
}

.carbon-panel-status i{
  color:var(--red);
  font-style:normal;
}

.carbon-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:70px;
  align-items:start;
}

.carbon-intro h2,
.carbon-section-heading h2,
.carbon-decision-card h2,
.carbon-final-cta h2{
  font-size:clamp(38px,5vw,62px);
}

.carbon-intro-copy p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.75;
}

.carbon-before-after{
  margin-top:40px;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  background:var(--panel);
}

.carbon-before-after img{
  display:block;
  width:100%;
  max-height:430px;
  object-fit:cover;
}

.carbon-reasons-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0a0e11;
}

.carbon-section-heading{
  margin-bottom:30px;
}

.carbon-reasons-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.carbon-reason-card{
  position:relative;
  min-height:250px;
  padding:26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),transparent),
    #10161a;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.carbon-reason-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

.carbon-reason-card:hover{
  transform:translateY(-7px);
  border-color:rgba(239,35,60,.48);
  box-shadow:0 20px 42px rgba(0,0,0,.22);
}

.carbon-reason-card:hover::after{
  transform:scaleX(1);
}

.carbon-card-number{
  position:absolute;
  top:20px;
  right:22px;
  color:#555e65;
  font-family:"Barlow Condensed",sans-serif;
  font-size:27px;
  font-weight:800;
}

.carbon-card-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:26px;
  border:1px solid #323b42;
  border-radius:5px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:24px;
  font-weight:800;
  background:#0b1013;
}

.carbon-reason-card h3,
.carbon-process-step h3,
.carbon-why-item h3{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  text-transform:uppercase;
}

.carbon-reason-card h3{
  font-size:26px;
}

.carbon-reason-card p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.carbon-process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.carbon-process-step{
  position:relative;
  min-height:245px;
  padding:25px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#10161a;
}

.carbon-process-number{
  display:block;
  margin-bottom:22px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:32px;
  font-weight:800;
}

.carbon-process-label{
  margin:0 0 6px !important;
  color:#fff !important;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  letter-spacing:.08em;
}

.carbon-process-step h3{
  font-size:23px;
}

.carbon-process-step p{
  margin:13px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.carbon-decision-section{
  padding:0 0 80px;
}

.carbon-decision-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  gap:18px;
}

.carbon-decision-card,
.carbon-why-card{
  border:1px solid var(--line);
  border-radius:7px;
}

.carbon-decision-card{
  position:relative;
  overflow:hidden;
  padding:40px;
  background:
    radial-gradient(circle at 88% 25%,rgba(239,35,60,.08),transparent 30%),
    linear-gradient(135deg,#0b1013,#11181c);
}

.carbon-decision-card::before{
  content:"";
  position:absolute;
  left:0;
  top:40px;
  width:4px;
  height:118px;
  background:var(--red);
}

.carbon-decision-card > p:not(.eyebrow){
  max-width:650px;
  color:var(--muted);
  line-height:1.75;
}

.carbon-service-links{
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
}

.carbon-service-links a{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  color:#fff;
  text-decoration:none;
  transition:background .2s ease;
}

.carbon-service-links a:last-child{
  border-bottom:0;
}

.carbon-service-links a:hover{
  background:#141b20;
}

.carbon-service-links span{
  color:#d3d8dc;
}

.carbon-service-links strong{
  color:var(--red);
  font-size:13px;
}

.carbon-why-card{
  padding:34px;
  background:#11171b;
}

.carbon-why-item{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:14px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}

.carbon-why-item:last-child{
  border-bottom:0;
}

.carbon-why-item > span{
  color:#515b63;
  font-family:"Barlow Condensed",sans-serif;
  font-size:32px;
  font-weight:800;
}

.carbon-why-item h3{
  font-size:21px;
}

.carbon-why-item p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.carbon-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.carbon-faq-column{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.carbon-faq-item{
  width:100%;
  margin:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:#0e1215;
  overflow:hidden;
}

.carbon-faq-item summary{
  position:relative;
  display:block;
  padding:20px 50px 20px 20px;
  cursor:pointer;
  list-style:none;
  font-family:"Barlow Condensed",sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  user-select:none;
}

.carbon-faq-item summary::-webkit-details-marker{
  display:none;
}

.carbon-faq-item summary::marker{
  content:"";
}

.carbon-faq-item summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--red);
  font-family:Inter,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.carbon-faq-item[open] summary::after{
  content:"–";
}

.carbon-faq-item p{
  margin:0;
  padding:0 20px 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.carbon-final-cta{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 20% 50%,rgba(239,35,60,.10),transparent 35%),
    #090d10;
}

.carbon-final-inner{
  min-height:260px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
  padding-top:50px;
  padding-bottom:50px;
}

.carbon-final-inner > div:first-child{
  max-width:800px;
}

.carbon-final-inner p:not(.eyebrow){
  color:var(--muted);
  line-height:1.7;
}

.carbon-final-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

@media(max-width:1050px){
  .carbon-hero-inner{
    grid-template-columns:1fr;
  }

  .carbon-hero-visual{
    min-height:520px;
  }

  .carbon-reasons-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .carbon-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .carbon-decision-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .carbon-hero-inner{
    min-height:auto;
    padding-top:46px;
    padding-bottom:46px;
  }

  .carbon-hero-copy h1{
    font-size:52px;
  }

  .carbon-hero-actions{
    flex-direction:column;
  }

  .carbon-hero-actions .btn{
    width:100%;
  }

  .carbon-hero-visual{
    min-height:430px;
  }

  .carbon-condition-panel{
    left:18px;
    right:18px;
    top:auto;
    bottom:18px;
    width:auto;
  }

  .carbon-intro-grid,
  .carbon-reasons-grid,
  .carbon-process-grid,
  .carbon-faq-grid,
  .carbon-final-inner{
    grid-template-columns:1fr;
  }

  .carbon-intro-grid{
    gap:28px;
  }

  .carbon-reason-card{
    min-height:auto;
  }

  .carbon-process-step{
    min-height:auto;
  }

  .carbon-decision-card,
  .carbon-why-card{
    padding:26px;
  }

  .carbon-service-links a{
    flex-direction:column;
    gap:6px;
  }

  .carbon-final-actions{
    width:100%;
  }

  .carbon-final-actions .btn{
    width:100%;
  }
}
/* =========================================================
   VEHICLE SEARCH PAGE
   Matches the established ECU Remapping visual system
   ========================================================= */

/* HERO */
.vs-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 46%,rgba(239,35,60,.13),transparent 28%),
    linear-gradient(120deg,#07090b 0%,#0c1013 58%,#080a0c 100%);
}

.vs-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 52%,#000 100%);
}

.vs-hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(239,35,60,.14);
  border-radius:50%;
  right:-175px;
  top:50%;
  transform:translateY(-50%);
  box-shadow:
    0 0 0 70px rgba(239,35,60,.025),
    0 0 0 140px rgba(239,35,60,.018);
  pointer-events:none;
}

.vs-hero-inner{
  position:relative;
  z-index:1;
  min-height:630px;
  padding-top:104px;
  padding-bottom:86px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
  align-items:center;
  gap:72px;
}

.vs-breadcrumbs{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.vs-breadcrumbs a{color:var(--muted);}
.vs-breadcrumbs a:hover{color:var(--red);}
.vs-breadcrumbs span:last-child{color:#fff;}

.vs-hero-copy h1,
.vs-section-heading h2,
.vs-info-copy h2,
.vs-cta h2{
  margin:10px 0 18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(44px,5.4vw,76px);
  line-height:.94;
  text-transform:uppercase;
  letter-spacing:-.025em;
}

.vs-hero-copy h1 span,
.vs-section-heading h2 span,
.vs-info-copy h2 span,
.vs-cta h2 span{
  color:var(--red);
}

.vs-hero-copy .lead{
  max-width:720px;
  margin:0 0 30px;
  color:#c3c9ce;
  font-family:Inter,system-ui,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.75;
  text-transform:none;
}

.vs-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.vs-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}

.vs-hero-points span{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#cdd2d6;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* HERO VISUAL */
.vs-hero-visual{
  position:relative;
  padding:24px;
  border:1px solid #323b43;
  border-radius:10px;
  background:linear-gradient(145deg,rgba(22,27,31,.98),rgba(8,11,13,.98));
  box-shadow:0 32px 80px rgba(0,0,0,.38);
  overflow:hidden;
}

.vs-hero-visual::after{
  content:"";
  position:absolute;
  inset:auto -20% -50% -20%;
  height:210px;
  background:radial-gradient(circle,rgba(239,35,60,.16),transparent 62%);
  pointer-events:none;
}

.vs-visual-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.vs-visual-head p,
.vs-visual-head strong{
  margin:0;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.vs-visual-head p{color:var(--muted);}
.vs-visual-head strong{color:#fff;}

.vs-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 14px rgba(239,35,60,.8);
}

.vs-visual-reg{
  position:relative;
  z-index:1;
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.vs-visual-reg::before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border:1px solid rgba(239,35,60,.65);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 10px rgba(239,35,60,.05),
    0 0 0 10px rgba(239,35,60,.05),
    0 0 40px rgba(239,35,60,.08);
}

.vs-visual-reg span,
.vs-visual-reg strong,
.vs-visual-reg small{
  position:relative;
  z-index:1;
}

.vs-visual-reg span{
  color:#737c83;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}

.vs-visual-reg strong{
  margin-top:3px;
  color:#fff;
  font-family:"Barlow Condensed",sans-serif;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
}

.vs-visual-reg small{
  margin-top:7px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.vs-visual-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.vs-visual-grid div{
  padding:14px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.vs-visual-grid span,
.vs-visual-grid strong{display:block;}

.vs-visual-grid span{
  margin-bottom:4px;
  color:#7f8991;
  font-size:9px;
  letter-spacing:.14em;
}

.vs-visual-grid strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  text-transform:uppercase;
}

/* SEARCH */
.vs-search-section{
  padding:92px 0 100px;
  background:#080b0d;
}

.vs-section-heading{
  max-width:800px;
  margin-bottom:38px;
}

.vs-section-heading > p:last-child,
.vs-info-copy > p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.vs-search-box{
  overflow:hidden;
  border:1px solid #323b43;
  border-radius:8px;
  background:#0d1114;
  box-shadow:0 26px 70px rgba(0,0,0,.24);
}

.vs-search-box::before{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg,var(--red),rgba(239,35,60,.15) 62%,transparent);
}

.vs-search-box-top{
  min-height:82px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}

.vs-search-label{
  display:block;
  margin-bottom:4px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.vs-search-box h3{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:26px;
  line-height:1;
  text-transform:uppercase;
}

.vs-live{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  background:#090d0f;
  color:#cdd2d6;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.vs-live span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px rgba(239,35,60,.7);
}

.vs-widget{
  position:relative;
  padding:24px;
  background:#0a0e10;
}

/* Keep the third-party widget functional and let it determine its own height. */
.vs-widget > *{
  max-width:100%;
}

.vs-search-note{
  padding:17px 24px 20px;
  border-top:1px solid var(--line);
  color:#929ba2;
  font-size:12px;
  line-height:1.65;
}

.vs-search-note strong{color:#d8dde0;}

/* PROCESS */
.vs-next{
  padding:92px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(239,35,60,.025),transparent 35%),
    #0b0f12;
}

.vs-process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.vs-process-card{
  min-height:245px;
  padding:26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
}

.vs-process-number{
  margin-bottom:48px;
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  font-weight:800;
}

.vs-process-card h3{
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:25px;
  text-transform:uppercase;
}

.vs-process-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* SUITABILITY */
.vs-info-section{
  padding:92px 0;
  background:#080b0d;
}

.vs-info-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:start;
}

.vs-info-copy h2{
  font-size:clamp(38px,4.1vw,58px);
}

.vs-info-copy > p{
  margin-bottom:18px;
}

.vs-info-copy .text-link{
  display:inline-flex;
  margin-top:8px;
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.vs-info-copy .text-link:hover{color:var(--red);}

.vs-check-list{
  border-top:1px solid var(--line);
}

.vs-check-item{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.vs-check-item > span{
  color:var(--red);
  font-family:"Barlow Condensed",sans-serif;
  font-size:18px;
  font-weight:800;
}

.vs-check-item strong{
  display:block;
  margin-bottom:6px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:23px;
  text-transform:uppercase;
}

.vs-check-item p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* FINAL CTA */
.vs-cta{
  position:relative;
  overflow:hidden;
  padding:76px 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 50%,rgba(239,35,60,.14),transparent 27%),
    #0b0f12;
}

.vs-cta-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.vs-cta-inner > div:first-child{max-width:760px;}

.vs-cta h2{
  font-size:clamp(38px,4.1vw,58px);
}

.vs-cta p:not(.eyebrow){
  max-width:680px;
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.vs-cta-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:205px;
}

/* RESPONSIVE */
@media(max-width:1050px){
  .vs-hero-inner{
    grid-template-columns:1fr;
    gap:48px;
  }

  .vs-hero-visual{
    max-width:620px;
  }

  .vs-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vs-info-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media(max-width:720px){
  .vs-hero-inner{
    min-height:auto;
    padding-top:72px;
    padding-bottom:58px;
  }

  .vs-hero::after{
    width:360px;
    height:360px;
    right:-230px;
  }

  .vs-hero-copy h1{
    font-size:50px;
  }

  .vs-hero-copy .lead{
    font-size:16px;
  }

  .vs-hero-visual{
    padding:18px;
  }

  .vs-visual-reg{
    min-height:205px;
  }

  .vs-search-section,
  .vs-next,
  .vs-info-section{
    padding:68px 0;
  }

  .vs-section-heading h2,
  .vs-info-copy h2,
  .vs-cta h2{
    font-size:40px;
  }

  .vs-process-grid{
    grid-template-columns:1fr;
  }

  .vs-process-card{
    min-height:0;
  }

  .vs-process-number{
    margin-bottom:30px;
  }

  .vs-search-box-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .vs-widget{
    padding:14px;
  }

  .vs-cta{
    padding:60px 0;
  }

  .vs-cta-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:30px;
  }

  .vs-cta-actions{
    width:100%;
  }

  .vs-cta-actions .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .vs-hero-copy h1{
    font-size:46px;
  }

  .vs-hero-points span{
    font-size:10px;
  }

  .vs-visual-grid{
    grid-template-columns:1fr;
  }

  .vs-check-item{
    grid-template-columns:42px 1fr;
  }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.contact-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(239,35,60,.13),
      transparent 34%
    ),
    linear-gradient(
      120deg,
      #090c0e 0%,
      #0c1013 52%,
      #161013 100%
    );
  border-bottom:1px solid var(--line);
}

.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );
  background-size:44px 44px;
}

.contact-hero-inner{
  position:relative;
  z-index:2;
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.8fr);
  align-items:center;
  gap:70px;
  padding-top:75px;
  padding-bottom:75px;
}

.contact-hero-copy h1{
  margin:0;
  max-width:760px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(65px,7vw,100px);
  line-height:.86;
  letter-spacing:-2px;
  font-weight:800;
  text-transform:uppercase;
  color:#fff;
}

.contact-hero-copy h1 span{
  display:block;
  color:var(--red);
}

.contact-hero-lead{
  max-width:640px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.contact-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:27px;
}

.contact-hero-points span{
  position:relative;
  padding:9px 13px 9px 27px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:#d4d9dd;
  font-size:11px;
  font-weight:700;
}

.contact-hero-points span::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  transform:translateY(-50%);
}


/* Hero information panel */

.contact-hero-panel{
  position:relative;
  padding:30px;
  border:1px solid #30383e;
  background:
    linear-gradient(
      145deg,
      rgba(22,27,31,.98),
      rgba(10,13,15,.98)
    );
  box-shadow:0 30px 65px rgba(0,0,0,.35);
}

.contact-hero-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:linear-gradient(
    var(--red),
    rgba(239,35,60,.05)
  );
}

.contact-panel-label{
  margin:0 0 8px;
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
}

.contact-hero-panel h2{
  margin:0 0 23px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:32px;
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}

.contact-panel-list{
  display:flex;
  flex-direction:column;
}

.contact-panel-list > div{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:13px;
  align-items:center;
  min-height:58px;
  border-top:1px solid rgba(255,255,255,.07);
}

.contact-panel-list span{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:800;
  color:var(--red);
}

.contact-panel-list strong{
  color:#fff;
  font-size:13px;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------- */

.contact-section-heading{
  max-width:760px;
  margin-bottom:40px;
}

.contact-section-heading h2,
.contact-quote-copy h2,
.contact-coverage h2,
.contact-final-cta h2{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(44px,5vw,70px);
  line-height:.92;
  letter-spacing:-1px;
  text-transform:uppercase;
  color:#fff;
}

.contact-section-heading h2 span,
.contact-quote-copy h2 span,
.contact-coverage h2 span,
.contact-final-cta h2 span{
  color:var(--red);
}

.contact-section-heading > p:last-child{
  max-width:650px;
  margin:18px 0 0;
  color:var(--muted);
  line-height:1.7;
}


/* ---------------------------------------------------------
   CONTACT OPTIONS
--------------------------------------------------------- */

.contact-options-section{
  padding:90px 0;
  background:var(--bg);
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.contact-option{
  position:relative;
  min-height:275px;
  padding:30px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      var(--panel2),
      var(--panel)
    );
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.contact-option::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--red);
  transition:transform .25s ease;
}

.contact-option:hover{
  transform:translateY(-6px);
  border-color:rgba(239,35,60,.42);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.contact-option:hover::after{
  transform:scaleX(1);
}

.contact-option-number{
  position:absolute;
  right:25px;
  top:22px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:48px;
  line-height:1;
  font-weight:800;
  color:rgba(255,255,255,.035);
}

.contact-option .eyebrow{
  margin:0 0 16px;
}

.contact-option h3{
  margin:0 0 13px;
  max-width:420px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:31px;
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}

.contact-option > p:not(.eyebrow){
  max-width:510px;
  min-height:54px;
  margin:0 0 23px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}


/* ---------------------------------------------------------
   QUOTE FORM
--------------------------------------------------------- */

.contact-quote-section{
  padding:95px 0;
  background:#0d1114;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.contact-quote-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr);
  gap:70px;
  align-items:start;
}

.contact-quote-copy > p:not(.eyebrow){
  margin:22px 0 0;
  max-width:550px;
  color:var(--muted);
  line-height:1.75;
}

.contact-quote-benefits{
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-top:30px;
}

.contact-quote-benefits > div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:start;
}

.contact-quote-benefits span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid rgba(239,35,60,.4);
  background:rgba(239,35,60,.06);
  color:var(--red);
  font-weight:800;
}

.contact-quote-benefits p{
  margin:3px 0 0;
  color:#d2d7da;
  font-size:13px;
  line-height:1.6;
}


/* Form card */

.contact-form-card{
  overflow:hidden;
  border:1px solid #30383e;
  background:#0a0d0f;
  box-shadow:0 28px 60px rgba(0,0,0,.25);
}

.contact-form-heading{
  padding:24px 27px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      100deg,
      rgba(239,35,60,.07),
      transparent 50%
    );
}

.contact-form-heading span{
  display:block;
  margin-bottom:5px;
  color:var(--red);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.7px;
}

.contact-form-heading h3{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:30px;
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}

.contact-form{
  padding:27px;
}

.contact-form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.contact-form-field{
  margin-bottom:17px;
}

.contact-form-field label{
  display:block;
  margin-bottom:8px;
  color:#dce0e3;
  font-size:11px;
  font-weight:700;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea{
  width:100%;
  border:1px solid #343c42;
  outline:none;
  border-radius:0;
  background:#101519;
  color:#fff;
  font:inherit;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.contact-form-field input,
.contact-form-field select{
  height:50px;
  padding:0 14px;
}

.contact-form-field textarea{
  min-height:145px;
  padding:14px;
  resize:vertical;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder{
  color:#697177;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus{
  border-color:rgba(239,35,60,.75);
  background:#12181c;
  box-shadow:0 0 0 3px rgba(239,35,60,.06);
}

.contact-form-field select{
  appearance:auto;
}

.contact-submit{
  min-width:180px;
  margin-top:3px;
}

.contact-form-note{
  margin:13px 0 0;
  color:#737b81;
  font-size:11px;
  line-height:1.5;
}


/* ---------------------------------------------------------
   WHAT TO INCLUDE
--------------------------------------------------------- */

.contact-info-section{
  padding:95px 0;
  background:var(--bg);
}

.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.contact-info-card{
  position:relative;
  min-height:220px;
  padding:26px;
  border:1px solid var(--line);
  background:var(--panel);
  transition:
    transform .2s ease,
    border-color .2s ease;
}

.contact-info-card:hover{
  transform:translateY(-5px);
  border-color:rgba(239,35,60,.4);
}

.contact-info-number{
  display:block;
  margin-bottom:35px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:28px;
  line-height:1;
  font-weight:800;
  color:var(--red);
}

.contact-info-card h3{
  margin:0 0 9px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:25px;
  text-transform:uppercase;
  color:#fff;
}

.contact-info-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}


/* ---------------------------------------------------------
   COVERAGE
--------------------------------------------------------- */

.contact-coverage{
  padding:85px 0;
  background:#0d1114;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.contact-coverage-inner{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:70px;
}

.contact-coverage p:not(.eyebrow){
  max-width:570px;
  margin:20px 0 0;
  color:var(--muted);
  line-height:1.75;
}

.contact-location-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.contact-location-list span{
  position:relative;
  padding:17px 18px 17px 37px;
  border:1px solid var(--line);
  background:#0a0d0f;
  color:#e5e8ea;
  font-size:13px;
  font-weight:600;
}

.contact-location-list span::before{
  content:"";
  position:absolute;
  left:17px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--red);
}


/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.contact-final-cta{
  position:relative;
  overflow:hidden;
  padding:80px 0;
  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(239,35,60,.12),
      transparent 31%
    ),
    #080b0d;
}

.contact-final-cta::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--red),
    transparent
  );
  opacity:.6;
}

.contact-final-inner{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:60px;
}

.contact-final-inner > div:first-child{
  max-width:780px;
}

.contact-final-cta p:last-child{
  margin:18px 0 0;
  color:var(--muted);
}

.contact-final-actions{
  display:flex;
  flex-direction:column;
  min-width:185px;
  gap:10px;
}

.contact-final-actions .btn{
  text-align:center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

  .contact-hero-inner{
    grid-template-columns:1fr 350px;
    gap:40px;
  }

  .contact-quote-grid{
    grid-template-columns:1fr 1.15fr;
    gap:40px;
  }

  .contact-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-coverage-inner{
    gap:40px;
  }

}


@media(max-width:850px){

  .contact-hero-inner{
    grid-template-columns:1fr;
  }

  .contact-hero-panel{
    max-width:600px;
  }

  .contact-quote-grid,
  .contact-coverage-inner{
    grid-template-columns:minmax(0,1fr);
  }

  .contact-final-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .contact-final-actions{
    flex-direction:row;
  }

}


@media(max-width:720px){

  .contact-hero-inner{
    min-height:auto;
    padding-top:55px;
    padding-bottom:60px;
  }

  .contact-hero-copy h1{
    font-size:clamp(54px,17vw,76px);
    letter-spacing:-1px;
  }

  .contact-hero-lead{
    font-size:15px;
  }

  .contact-options-section,
  .contact-quote-section,
  .contact-info-section{
    padding:70px 0;
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-option{
    min-height:250px;
  }

  .contact-section-heading h2,
  .contact-quote-copy h2,
  .contact-coverage h2,
  .contact-final-cta h2{
    font-size:clamp(42px,13vw,58px);
  }

  .contact-form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-form,
  .contact-form-heading{
    padding-left:20px;
    padding-right:20px;
  }

  .contact-info-grid{
    grid-template-columns:1fr;
  }

  .contact-info-card{
    min-height:195px;
  }

  .contact-location-list{
    grid-template-columns:1fr;
  }

  .contact-final-cta{
    padding:65px 0;
  }

  .contact-final-actions{
    flex-direction:column;
    width:100%;
  }

  .contact-final-actions .btn{
    width:100%;
  }

}


@media(max-width:480px){

  .contact-hero-panel{
    padding:24px 20px;
  }

  .contact-option{
    padding:24px 20px;
  }

  .contact-form{
    padding:22px 17px;
  }

  .contact-form-heading{
    padding:21px 17px;
  }

}
/* =========================================================
   LOGIN / REGISTER HEADER BUTTON
   ========================================================= */

.portal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;

  border:1px solid #4a535b;
  border-radius:4px;

  color:#f2f4f5 !important;
  background:transparent;

  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.portal-btn:hover{
  color:#fff !important;
  border-color:var(--red);
  background:rgba(239,35,60,.10);
  transform:translateY(-1px);
}


/* MOBILE */
@media(max-width:980px){

  .portal-btn{
    width:100%;
    min-height:auto;
    padding:10px 0;

    justify-content:flex-start;

    border:0;
    border-radius:0;
    background:transparent;

    color:var(--text) !important;
    font-size:14px;
  }

  .portal-btn:hover{
    color:var(--red) !important;
    background:transparent;
    transform:none;
  }

}
/* =========================================================
   LOGIN / REGISTER HEADER BUTTON
   ========================================================= */

.portal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:48px;
  padding:0 18px;

  border:1px solid #343b41;
  border-radius:4px;

  background:#11161a;
  color:#f7f7f7 !important;

  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.portal-btn:hover{
  background:#181e22;
  border-color:var(--red);
  color:#fff !important;
  transform:translateY(-1px);
}


/* MOBILE */
@media(max-width:980px){

  .portal-btn{
    width:100%;
    height:auto;
    padding:10px 0;

    justify-content:flex-start;

    border:0;
    border-radius:0;
    background:transparent;

    color:var(--text) !important;
    font-size:14px;
  }

  .portal-btn:hover{
    background:transparent;
    color:var(--red) !important;
    transform:none;
  }

}
/* =========================================================
   HEADER VERTICAL ALIGNMENT FIX (desktop only — on phones the ☰ menu handles nav)
   ========================================================= */
@media(min-width:981px){

.nav-wrap{
  display:flex;
  align-items:center;
}

.main-nav{
  display:flex;
  align-items:center;
}

.main-nav > a,
.dropdown-label{
  display:flex;
  align-items:center;
  min-height:48px;
}

.nav-item{
  display:flex;
  align-items:center;
}

.dropdown-label{
  align-items:center;
}

/* Login / Register stays aligned with normal nav */
.portal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Keep Get a Quote vertically centred */
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
}

/* =========================================================
   PUBLIC BOOKINGS PAGE
   ========================================================= */

.booking-page-hero{
  position:relative;

  min-height:560px;

  display:flex;
  align-items:center;

  overflow:hidden;

  border-bottom:1px solid #252c31;

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(239,35,60,.13),
      transparent 26%
    ),
    linear-gradient(
      100deg,
      #06090b 0%,
      #0b0f12 55%,
      #11161a 100%
    );
}

.booking-page-hero::before{
  content:"";

  position:absolute;
  top:-20%;
  right:7%;

  width:420px;
  height:780px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(239,35,60,.055),
      transparent
    );

  transform:rotate(18deg);

  pointer-events:none;
}

.booking-page-hero-content{
  position:relative;
  z-index:2;

  max-width:760px;

  padding:80px 0;
}

.booking-page-eyebrow{
  margin:0 0 15px;

  color:var(--red);

  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.booking-page-hero h1{
  max-width:760px;

  margin:0;

  color:#fff;

  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(64px,8vw,106px);
  font-weight:800;
  line-height:.87;

  letter-spacing:-.025em;
  text-transform:uppercase;
}

.booking-page-hero h1 span{
  display:block;

  color:var(--red);
}

.booking-page-intro{
  max-width:650px;

  margin:27px 0 0;

  color:#abb2b7;

  font-size:16px;
  line-height:1.75;
}

.booking-page-hero-actions{
  margin-top:30px;

  display:flex;
  align-items:center;

  gap:24px;
}

.booking-page-login-link{
  color:#9da5aa !important;

  font-size:13px;
  line-height:1.5;
}

.booking-page-login-link strong{
  margin-left:4px;

  color:#fff;

  transition:color .2s ease;
}

.booking-page-login-link:hover strong{
  color:var(--red);
}

.booking-page-notice{
  max-width:670px;

  margin-top:36px;
  padding:17px 18px;

  display:flex;
  align-items:flex-start;

  gap:13px;

  border:1px solid #283138;
  border-radius:5px;

  background:rgba(14,19,22,.78);
}

.booking-page-notice-icon{
  width:26px;
  height:26px;

  flex:0 0 26px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(239,35,60,.45);
  border-radius:50%;

  color:var(--red);

  font-size:11px;
  font-weight:800;
}

.booking-page-notice p{
  margin:1px 0 0;

  color:#7f898f;

  font-size:12px;
  line-height:1.65;
}


/* =========================================================
   SERVICES SECTION
   ========================================================= */

.booking-page-services{
  padding:95px 0 105px;

  background:#080b0d;
}

.booking-page-section-heading{
  margin-bottom:42px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:45px;
}

.booking-page-section-heading h2,
.booking-page-unsure h2,
.booking-page-account h2{
  margin:0;

  color:#fff;

  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(44px,5vw,66px);
  font-weight:800;
  line-height:.95;

  text-transform:uppercase;
}

.booking-page-section-heading h2 span,
.booking-page-unsure h2 span,
.booking-page-account h2 span{
  color:var(--red);
}

.booking-page-section-heading > p{
  max-width:440px;

  margin:0;

  color:#8d969c;

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   SERVICE GRID
   ========================================================= */

.booking-page-service-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:16px;
}

.booking-page-service-card{
  position:relative;

  min-height:440px;

  padding:27px;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid #293138;
  border-radius:7px;

  background:
    linear-gradient(
      150deg,
      #11171a,
      #0c1013
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.booking-page-service-card::before{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:3px;

  background:var(--red);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .3s ease;
}

.booking-page-service-card::after{
  content:"";

  position:absolute;
  top:0;
  left:-130%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );

  transform:skewX(-15deg);

  transition:left .65s ease;

  pointer-events:none;
}

.booking-page-service-card:hover{
  transform:translateY(-8px);

  border-color:#3a444b;

  box-shadow:
    0 20px 45px rgba(0,0,0,.35),
    0 10px 28px rgba(239,35,60,.05);
}

.booking-page-service-card:hover::before{
  transform:scaleX(1);
}

.booking-page-service-card:hover::after{
  left:140%;
}

.booking-page-service-number{
  position:absolute;
  top:25px;
  right:25px;

  color:#384147;

  font-family:'Barlow Condensed',sans-serif;
  font-size:25px;
  font-weight:800;
}

.booking-page-service-icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #333c42;
  border-radius:5px;

  background:#0a0e11;

  color:#9da5aa;

  font-size:23px;

  transition:
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.booking-page-service-card:hover
.booking-page-service-icon{
  border-color:rgba(239,35,60,.6);

  color:var(--red);

  transform:translateY(-2px);
}

.booking-page-service-content{
  margin-top:29px;

  flex:1;
}

.booking-page-service-type{
  display:block;

  margin-bottom:8px;

  color:var(--red);

  font-size:9px;
  font-weight:800;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.booking-page-service-content h3{
  margin:0;

  color:#fff;

  font-family:'Barlow Condensed',sans-serif;
  font-size:34px;
  font-weight:800;

  text-transform:uppercase;
}

.booking-page-service-content > p{
  min-height:74px;

  margin:13px 0 18px;

  color:#8b959b;

  font-size:12px;
  line-height:1.65;
}

.booking-page-service-content ul{
  margin:0;
  padding:0;

  list-style:none;
}

.booking-page-service-content li{
  position:relative;

  margin:9px 0;
  padding-left:16px;

  color:#747f85;

  font-size:11px;
}

.booking-page-service-content li::before{
  content:"";

  position:absolute;
  left:0;
  top:6px;

  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--red);
}

.booking-page-service-button{
  min-height:49px;

  margin-top:24px;
  padding:0 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-top:1px solid #283138;

  color:#d9dddf !important;

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;

  transition:color .2s ease;
}

.booking-page-service-button span{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #343e44;
  border-radius:50%;

  color:#8d969b;

  transition:
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.booking-page-service-card:hover
.booking-page-service-button{
  color:var(--red) !important;
}

.booking-page-service-card:hover
.booking-page-service-button span{
  border-color:var(--red);

  color:#fff;

  transform:translateX(3px);

  box-shadow:
    0 0 18px rgba(239,35,60,.18);
}


/* =========================================================
   UNSURE SECTION
   ========================================================= */

.booking-page-unsure{
  padding:0 0 100px;

  background:#080b0d;
}

.booking-page-unsure-box{
  padding:46px 48px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:50px;

  border:1px solid #2c353b;
  border-radius:8px;

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(239,35,60,.09),
      transparent 30%
    ),
    #0f1417;
}

.booking-page-unsure-box > div:first-child{
  max-width:700px;
}

.booking-page-unsure-box p:last-child{
  max-width:630px;

  margin:17px 0 0;

  color:#899299;

  font-size:13px;
  line-height:1.7;
}

.booking-page-unsure-actions{
  display:flex;
  flex-direction:column;

  gap:10px;

  min-width:200px;
}

.booking-page-outline-button{
  min-height:47px;

  padding:0 21px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #3a444a;
  border-radius:4px;

  background:#0b0f12;

  color:#c9ced1 !important;

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;

  transition:.2s ease;
}

.booking-page-outline-button:hover{
  border-color:var(--red);

  color:#fff !important;

  background:rgba(239,35,60,.05);
}


/* =========================================================
   PROCESS
   ========================================================= */

.booking-page-process{
  padding:95px 0 100px;

  border-top:1px solid #222a30;
  border-bottom:1px solid #222a30;

  background:#0c1013;
}

.booking-page-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}

.booking-page-process-grid article{
  min-height:225px;

  padding:27px;

  border:1px solid #293138;
  border-radius:6px;

  background:#101519;
}

.booking-page-process-grid article > span{
  color:var(--red);

  font-family:'Barlow Condensed',sans-serif;
  font-size:25px;
  font-weight:800;
}

.booking-page-process-grid h3{
  margin:27px 0 10px;

  color:#fff;

  font-family:'Barlow Condensed',sans-serif;
  font-size:25px;
  font-weight:800;

  text-transform:uppercase;
}

.booking-page-process-grid p{
  margin:0;

  color:#7f898f;

  font-size:11px;
  line-height:1.7;
}


/* =========================================================
   CUSTOMER ACCOUNT CTA
   ========================================================= */

.booking-page-account{
  padding:90px 0;

  background:#080b0d;
}

.booking-page-account-inner{
  padding:48px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:50px;

  border:1px solid #2c353b;
  border-radius:8px;

  background:
    linear-gradient(
      120deg,
      #101519,
      #0d1114
    );
}

.booking-page-account-inner > div:first-child{
  max-width:670px;
}

.booking-page-account-inner p:last-child{
  max-width:590px;

  margin:16px 0 0;

  color:#879198;

  font-size:13px;
  line-height:1.7;
}

.booking-page-account-actions{
  min-width:190px;

  display:flex;
  flex-direction:column;

  gap:10px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .booking-page-service-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .booking-page-process-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .booking-page-section-heading{
    align-items:flex-start;
    flex-direction:column;

    gap:20px;
  }

  .booking-page-unsure-box,
  .booking-page-account-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .booking-page-unsure-actions,
  .booking-page-account-actions{
    width:100%;

    flex-direction:row;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .booking-page-hero{
    min-height:auto;
  }

  .booking-page-hero-content{
    padding:68px 0;
  }

  .booking-page-hero h1{
    font-size:58px;
  }

  .booking-page-intro{
    font-size:14px;
  }

  .booking-page-hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .booking-page-services{
    padding:70px 0 75px;
  }

  .booking-page-service-grid{
    grid-template-columns:1fr;
  }

  .booking-page-service-card{
    min-height:auto;
  }

  .booking-page-service-content > p{
    min-height:0;
  }

  .booking-page-unsure{
    padding-bottom:75px;
  }

  .booking-page-unsure-box,
  .booking-page-account-inner{
    padding:30px 24px;
  }

  .booking-page-unsure-actions,
  .booking-page-account-actions{
    flex-direction:column;
  }

  .booking-page-unsure-actions > *,
  .booking-page-account-actions > *{
    width:100%;
  }

  .booking-page-process{
    padding:70px 0 75px;
  }

  .booking-page-process-grid{
    grid-template-columns:1fr;
  }

  .booking-page-account{
    padding:70px 0;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .booking-page-hero h1{
    font-size:51px;
  }

  .booking-page-service-card{
    padding:22px;
  }

  .booking-page-unsure-box,
  .booking-page-account-inner{
    padding:26px 20px;
  }

}

/* =========================================================
   HOMEPAGE PRODUCTION / MOBILE REFINEMENTS
   Keeps the approved design while accommodating the longer
   local-SEO homepage heading on smaller screens.
   ========================================================= */

@media(max-width:720px){
  .hero{
    min-height:680px;
  }

  .hero h1{
    font-size:clamp(50px,14vw,66px);
    line-height:.88;
    letter-spacing:-1.5px;
    overflow-wrap:normal;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero-actions .btn{
    min-height:50px;
  }
}

@media(max-width:480px){
  .hero{
    min-height:640px;
  }

  .hero h1{
    font-size:clamp(44px,13vw,56px);
    line-height:.9;
    letter-spacing:-1px;
  }

  .lead{
    font-size:19px;
    line-height:1.25;
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions .btn{
    width:100%;
  }

  .service-inline{
    gap:8px 12px;
  }
}

/* Avoid hover-only movement on touch-oriented devices. */
@media(hover:none){
  .service-card:hover{
    transform:none;
  }

  .service-card:hover .service-icon{
    transform:none;
  }
}

/* Respect reduced-motion preferences across interactive effects. */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* =========================================================
   ECU FAQ - FIXED INDEPENDENT COLUMNS
   ========================================================= */

.ecu-faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}

.ecu-faq-column{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.ecu-faq-item{
  width:100%;
  margin:0;
  align-self:auto;
}

/* Mobile */
@media(max-width:720px){
  .ecu-faq-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   ECU TUNING OPTIONS & ADD-ONS
   ========================================================= */

.ecu-addons-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(239,35,60,.08),
      transparent 31%
    ),
    #090d0f;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}


/* HEADING */

.ecu-addons-heading{
  max-width:780px;
  margin-bottom:42px;
}

.ecu-addons-heading h2{
  margin:8px 0 14px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(44px,5vw,68px);
  line-height:.95;
  text-transform:uppercase;
}

.ecu-addons-heading h2 span{
  color:var(--red);
}

.ecu-addons-intro{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}


/* CARD GRID */

.ecu-addons-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}


/* CARD */

.ecu-addon-card{
  position:relative;
  min-height:270px;
  padding:28px 26px 26px;
  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(21,26,30,.96),
      rgba(11,15,18,.98)
    );

  border:1px solid #303941;
  border-radius:7px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.ecu-addon-card:hover{
  transform:translateY(-4px);
  border-color:rgba(239,35,60,.65);

  background:
    linear-gradient(
      145deg,
      rgba(25,29,33,.98),
      rgba(11,15,18,.98)
    );
}


/* ICON */

.ecu-addon-icon{
  width:48px;
  height:48px;
  margin-bottom:19px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--red);
}

.ecu-addon-icon svg{
  width:46px;
  height:46px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ecu-addon-icon-text{
  border:3px solid var(--red);
  border-radius:50%;
  font-family:"Barlow Condensed",sans-serif;
  font-size:26px;
  font-weight:800;
}


/* CARD TEXT */

.ecu-addon-card h3{
  margin:0 0 10px;

  color:var(--text);

  font-family:"Inter",sans-serif;
  font-size:18px;
  line-height:1.25;
}

.ecu-addon-card p{
  margin:0 0 32px;

  color:var(--muted);

  font-size:15px;
  line-height:1.6;
}


/* SMALL RED LINE */

.ecu-addon-line{
  position:absolute;
  left:26px;
  bottom:24px;

  width:30px;
  height:3px;

  background:var(--red);
}


/* =========================================================
   EMISSIONS INFORMATION PANEL
   ========================================================= */

.ecu-emissions-panel{
  display:grid;
  grid-template-columns:1.45fr .9fr;

  margin-top:26px;

  overflow:hidden;

  background:
    linear-gradient(
      110deg,
      rgba(239,35,60,.08),
      rgba(15,19,22,.96) 46%,
      rgba(15,19,22,.98)
    );

  border:1px solid rgba(239,35,60,.7);
  border-radius:8px;
}


/* LEFT SIDE */

.ecu-emissions-main{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:22px;

  padding:30px;
}

.ecu-emissions-icon{
  width:58px;
  height:58px;

  color:var(--red);
}

.ecu-emissions-icon svg{
  width:100%;
  height:100%;

  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ecu-emissions-label{
  margin:0 0 7px;

  color:#d9dde0;

  font-size:11px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
}

.ecu-emissions-main h3{
  margin:0 0 9px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
}

.ecu-emissions-main p:last-child{
  max-width:700px;
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.65;
}


/* RIGHT SIDE */

.ecu-emissions-info{
  margin:26px 0;
  padding:8px 30px;

  border-left:1px solid rgba(239,35,60,.45);
}

.ecu-info-title{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:14px;
}

.ecu-info-circle{
  width:29px;
  height:29px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:2px solid #d9dde0;
  border-radius:50%;

  color:#fff;

  font-family:Georgia,serif;
  font-weight:700;
}

.ecu-info-title strong{
  color:#d9dde0;

  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
}

.ecu-emissions-info p{
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

  .ecu-addons-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ecu-emissions-panel{
    grid-template-columns:1fr;
  }

  .ecu-emissions-info{
    margin:0 30px 30px;
    padding:25px 0 0;

    border-left:0;
    border-top:1px solid rgba(239,35,60,.4);
  }

}


@media(max-width:620px){

  .ecu-addons-heading{
    margin-bottom:30px;
  }

  .ecu-addons-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .ecu-addon-card{
    min-height:0;
    padding:24px 22px 58px;
  }

  .ecu-addon-line{
    left:22px;
    bottom:22px;
  }

  .ecu-emissions-main{
    grid-template-columns:1fr;
    padding:25px 22px;
  }

  .ecu-emissions-icon{
    width:48px;
    height:48px;
  }

  .ecu-emissions-main h3{
    font-size:30px;
  }

  .ecu-emissions-info{
    margin:0 22px 24px;
    padding-top:22px;
  }

}


@media(hover:none){

  .ecu-addon-card:hover{
    transform:none;
  }

}
/* =========================================================
   MOBILE MECHANIC - COMMON JOBS
   ========================================================= */

.mm-common-jobs{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(239,35,60,.08),
      transparent 32%
    ),
    #080b0d;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.mm-common-jobs-head{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:60px;
  align-items:end;
  margin-bottom:38px;
}

.mm-common-jobs-head h2{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(42px,5vw,64px);
  line-height:.95;
  text-transform:uppercase;
  margin:10px 0 0;
}

.mm-common-jobs-head h2 span{
  color:var(--red);
}

.mm-common-jobs-head > p{
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

.mm-common-jobs-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.mm-job-card{
  position:relative;
  min-height:270px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:7px;
  background:
    linear-gradient(
      145deg,
      rgba(15,19,22,.98),
      rgba(9,13,16,.98)
    );
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.mm-job-number{
  position:absolute;
  top:20px;
  right:22px;
  color:#596168;
  font-family:"Barlow Condensed",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
}

.mm-job-icon{
  width:42px;
  height:42px;
  margin-bottom:20px;
  color:var(--red);
}

.mm-job-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mm-job-card h3{
  margin:0 0 11px;
  font-size:18px;
}

.mm-job-card p{
  color:var(--muted);
  line-height:1.65;
  margin:0;
}

.mm-job-card::after{
  content:"";
  position:absolute;
  left:26px;
  bottom:22px;
  width:30px;
  height:3px;
  background:var(--red);
}

.mm-job-card-cta{
  border-color:rgba(239,35,60,.55);
  background:
    linear-gradient(
      145deg,
      rgba(74,10,20,.32),
      rgba(10,14,17,.98)
    );
}

.mm-job-card-cta::after{
  display:none;
}

.mm-job-link{
  display:inline-block;
  margin-top:18px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
}

.mm-job-link:hover{
  color:var(--red);
}

@media(hover:hover){

  .mm-job-card:hover{
    transform:translateY(-3px);
    border-color:rgba(239,35,60,.55);
    background:
      linear-gradient(
        145deg,
        #12171b,
        #0b0f12
      );
  }

}

@media(max-width:1000px){

  .mm-common-jobs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:720px){

  .mm-common-jobs-head{
    grid-template-columns:1fr;
    gap:18px;
  }

  .mm-common-jobs-grid{
    grid-template-columns:1fr;
  }

  .mm-job-card{
    min-height:0;
    padding-bottom:48px;
  }

}

@media(hover:none){

  .mm-job-card:hover{
    transform:none;
  }

}
/* =========================================================
   MOBILE MECHANIC — SKETCH MATCH POLISH
   Safe page-specific overrides only
   ========================================================= */


/* ---------------------------------------------------------
   COMMON / POPULAR JOBS
   --------------------------------------------------------- */

.mm-common-jobs{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(239,35,60,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #090c0e 0%,
      #080b0d 100%
    );
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mm-common-jobs .section-pad{
  padding-top:78px;
  padding-bottom:82px;
}

.mm-common-jobs-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:70px;
  align-items:end;
  margin-bottom:30px;
}

.mm-common-jobs-head h2{
  max-width:720px;
  margin:8px 0 0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(42px,4.8vw,62px);
  font-weight:800;
  line-height:.91;
  letter-spacing:-1px;
  text-transform:uppercase;
}

.mm-common-jobs-head h2 span{
  display:block;
  color:var(--red);
}

.mm-common-jobs-head > p{
  max-width:480px;
  margin:0 0 3px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}


/* Job grid */

.mm-common-jobs-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}


/* Individual job */

.mm-job-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  min-height:215px;
  padding:24px 22px 28px;

  display:flex;
  flex-direction:column;

  border:1px solid #272e34;
  border-radius:4px;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255,255,255,.035),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #11161a 0%,
      #0b0f12 65%,
      #090c0e 100%
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}


/* subtle red atmosphere */

.mm-job-card::before{
  content:"";
  position:absolute;
  z-index:-1;

  width:150px;
  height:150px;

  right:-70px;
  bottom:-85px;

  border-radius:50%;

  background:rgba(239,35,60,.12);
  filter:blur(42px);

  opacity:.35;

  transition:
    opacity .22s ease,
    transform .22s ease;
}


/* red detail line */

.mm-job-card::after{
  content:"";
  position:absolute;

  left:22px;
  bottom:18px;

  width:26px;
  height:2px;

  background:var(--red);

  transition:width .22s ease;
}


/* Number */

.mm-job-number{
  position:absolute;
  top:18px;
  right:20px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;

  color:#596168;
}


/* Icon */

.mm-job-icon{
  width:38px;
  height:38px;

  margin:0 0 23px;

  color:var(--red);

  opacity:.95;
}

.mm-job-icon svg{
  display:block;
  width:100%;
  height:100%;

  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Job heading */

.mm-job-card h3{
  margin:0 0 8px;

  font-family:Inter,system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.25;

  color:#f4f6f7;
}


/* Job copy */

.mm-job-card p{
  margin:0;

  max-width:270px;

  color:#929ba2;
  font-size:12.5px;
  line-height:1.55;
}


/* CTA card */

.mm-job-card-cta{
  border-color:rgba(239,35,60,.38);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(239,35,60,.15),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #151014,
      #0b0e11 72%
    );
}

.mm-job-card-cta::after{
  display:none;
}

.mm-job-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:18px;

  color:#fff;
  font-size:13px;
  font-weight:700;
  text-decoration:none;

  transition:
    color .2s ease,
    gap .2s ease;
}

.mm-job-link:hover{
  color:var(--red);
  gap:12px;
}


/* Desktop hover */

@media(hover:hover){

  .mm-job-card:hover{
    transform:translateY(-4px);

    border-color:rgba(239,35,60,.48);

    box-shadow:
      0 18px 38px rgba(0,0,0,.32),
      0 0 0 1px rgba(239,35,60,.05);
  }

  .mm-job-card:hover::before{
    opacity:.75;
    transform:scale(1.15);
  }

  .mm-job-card:hover::after{
    width:46px;
  }

}


/* ---------------------------------------------------------
   HOW IT WORKS
   More compact like the concept
   --------------------------------------------------------- */

.mm-process-section{
  position:relative;

  background:
    linear-gradient(
      180deg,
      #0d1114 0%,
      #0a0d10 100%
    );

  border-bottom:1px solid rgba(255,255,255,.06);
}

.mm-process-section .section-pad{
  padding-top:72px;
  padding-bottom:76px;
}

.mm-process-heading{
  margin-bottom:30px;
}

.mm-process-heading h2{
  font-size:clamp(42px,4.7vw,60px);
  line-height:.92;
}

.mm-process-grid{
  gap:0;
  border-top:1px solid #293036;
  border-bottom:1px solid #293036;
}

.mm-process-step{
  position:relative;

  min-height:170px;
  padding:25px 26px 27px;

  background:transparent;

  border-top:0;
  border-bottom:0;
  border-left:1px solid #293036;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.mm-process-step:first-child{
  border-left:0;
}

.mm-process-step > span{
  display:block;

  margin-bottom:24px;

  color:var(--red);

  font-family:"Barlow Condensed",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.15em;
}

.mm-process-step h3{
  margin:0 0 7px;

  font-size:15px;
  line-height:1.25;
}

.mm-process-step p{
  margin:0;

  color:#929ba2;
  font-size:12.5px;
  line-height:1.55;
}

@media(hover:hover){

  .mm-process-step:hover{
    background:rgba(255,255,255,.018);
  }

}


/* ---------------------------------------------------------
   WHY MOBILE / CONVENIENCE
   --------------------------------------------------------- */

.mm-convenience{
  padding-top:80px;
  padding-bottom:80px;
}

.mm-convenience-grid{
  align-items:stretch;
}

.mm-convenience-copy h2{
  font-size:clamp(44px,4.7vw,62px);
  line-height:.92;
}

.mm-convenience-copy h2 span{
  color:var(--red);
}

.mm-convenience-list{
  margin-top:28px;
}

.mm-convenience-list li{
  padding-top:13px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07);
}


/* ---------------------------------------------------------
   DIAGNOSTIC BAND
   --------------------------------------------------------- */

.mm-diagnostic-band{
  position:relative;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(239,35,60,.055),
      transparent 31%
    ),
    #0b0f12;

  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mm-diagnostic-inner{
  padding-top:76px;
  padding-bottom:76px;
}

.mm-diagnostic-inner h2{
  font-size:clamp(42px,4.6vw,60px);
  line-height:.93;
}

.mm-diagnostic-display{
  box-shadow:
    0 20px 55px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* ---------------------------------------------------------
   PAGE RHYTHM
   --------------------------------------------------------- */

.mm-services-section .section-pad{
  padding-top:80px;
  padding-bottom:80px;
}

.mm-intro{
  padding-top:80px;
  padding-bottom:80px;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1000px){

  .mm-common-jobs-head{
    grid-template-columns:1fr;
    gap:18px;
  }

  .mm-common-jobs-head > p{
    max-width:700px;
  }

  .mm-common-jobs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mm-process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-bottom:0;
  }

  .mm-process-step{
    border-bottom:1px solid #293036;
  }

  .mm-process-step:nth-child(odd){
    border-left:0;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

  .mm-intro,
  .mm-convenience{
    padding-top:62px;
    padding-bottom:62px;
  }

  .mm-services-section .section-pad,
  .mm-common-jobs .section-pad,
  .mm-process-section .section-pad{
    padding-top:62px;
    padding-bottom:62px;
  }

  .mm-diagnostic-inner{
    padding-top:62px;
    padding-bottom:62px;
  }

  .mm-common-jobs-head{
    margin-bottom:25px;
  }

  .mm-common-jobs-head h2{
    font-size:42px;
  }

  .mm-common-jobs-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .mm-job-card{
    min-height:190px;
    padding:22px 20px 27px;
  }

  .mm-job-card::after{
    left:20px;
  }

  .mm-process-grid{
    grid-template-columns:1fr;
    border-top:1px solid #293036;
  }

  .mm-process-step{
    min-height:0;
    padding:23px 20px;

    border-left:0;
    border-bottom:1px solid #293036;
  }

  .mm-process-step > span{
    margin-bottom:14px;
  }

}


/* ---------------------------------------------------------
   TOUCH DEVICES
   --------------------------------------------------------- */

@media(hover:none){

  .mm-job-card:hover{
    transform:none;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  .mm-job-card,
  .mm-job-card::before,
  .mm-job-card::after,
  .mm-job-link,
  .mm-process-step{
    transition:none;
  }

}
/* =========================================================
   MOBILE MECHANIC — HERO VISUAL TEST ONLY
   ========================================================= */

.mm-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(5,7,8,.98) 0%,
      rgba(5,7,8,.93) 35%,
      rgba(5,7,8,.62) 58%,
      rgba(5,7,8,.20) 100%
    ),
    url("assets/mobile-mechanic-golf.jpg")
    65% 60% / cover no-repeat;
}


/* Remove old grid effect */

.mm-hero::before{
  content:"";
  position:absolute;
  inset:0;

  opacity:1;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 55%,
      rgba(8,11,13,.72) 100%
    );

  mask-image:none;

  pointer-events:none;
}


/* Remove old large red circle */

.mm-hero::after{
  display:none;
}


/* Keep existing layout but tighten it slightly */

.mm-hero-inner{
  min-height:630px;

  padding-top:90px;
  padding-bottom:76px;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(330px,.85fr);

  gap:58px;
}


/* Stronger hero title */

.mm-hero-copy h1{
  margin:10px 0 20px;

  font-size:clamp(
    48px,
    5.8vw,
    82px
  );

  line-height:.90;

  letter-spacing:-.03em;
}


/* Keep red location line */

.mm-hero-copy h1 span{
  color:var(--red);
}


/* Improve readability over photo */

.mm-hero-copy .lead{
  max-width:670px;

  color:#d3d8dc;

  font-size:17px;

  line-height:1.65;

  text-shadow:
    0 2px 14px rgba(0,0,0,.65);
}


/* Slightly cleaner service pills */

.mm-hero-points span{
  border-color:rgba(255,255,255,.16);

  background:rgba(8,11,13,.58);

  backdrop-filter:blur(5px);
}


/* =========================================================
   RIGHT HERO PANEL
   Turn existing panel into photographic visual
   ========================================================= */

.mm-hero-panel{
  position:relative;

  min-height:410px;

  padding:0;

  border:1px solid rgba(255,255,255,.16);

  border-radius:6px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(8,11,13,.03) 20%,
      rgba(8,11,13,.25) 55%,
      rgba(8,11,13,.94) 100%
    ),
    url("assets/mobile-mechanic-driveway.jpg")
    center 30% / cover no-repeat;

  box-shadow:
    0 28px 65px rgba(0,0,0,.40);
}


/* Remove old red panel glow */

.mm-hero-panel::after{
  display:none;
}


/* Small label across top of image */

.mm-panel-top{
  position:absolute;

  z-index:3;

  top:16px;
  left:16px;
  right:16px;

  padding:11px 13px;

  border:1px solid rgba(255,255,255,.13);

  background:rgba(8,11,13,.68);

  backdrop-filter:blur(6px);
}


/* Hide the artificial van graphic */

.mm-panel-main{
  display:none;
}


/* Put information at bottom of photograph */

.mm-panel-grid{
  position:absolute;

  z-index:3;

  left:16px;
  right:16px;
  bottom:16px;

  background:rgba(8,11,13,.76);

  border:1px solid rgba(255,255,255,.13);

  backdrop-filter:blur(7px);
}


/* =========================================================
   HERO TABLET
   ========================================================= */

@media(max-width:980px){

  .mm-hero{
    background-position:65% center;
  }

  .mm-hero-inner{
    grid-template-columns:1fr;

    gap:38px;
  }

  .mm-hero-panel{
    max-width:none;

    min-height:350px;
  }

}


/* =========================================================
   HERO MOBILE
   ========================================================= */

@media(max-width:720px){

  .mm-hero{
    background-position:62% center;
  }

  .mm-hero-inner{
    min-height:auto;

    padding-top:64px;
    padding-bottom:56px;

    gap:32px;
  }

  .mm-hero-copy h1{
    font-size:clamp(
      46px,
      13vw,
      60px
    );

    line-height:.91;
  }

  .mm-hero-copy .lead{
    font-size:16px;
    line-height:1.55;
  }

  .mm-hero-panel{
    min-height:310px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .mm-hero-panel{
    min-height:275px;
  }

  .mm-panel-top{
    top:12px;
    left:12px;
    right:12px;
  }

  .mm-panel-grid{
    left:12px;
    right:12px;
    bottom:12px;
  }

}
/* =========================================================
   MOBILE MECHANIC — COMMON JOBS REFINEMENT
   Compact / professional / existing artwork retained
   ========================================================= */


/* Tighten overall section */

.mm-common-jobs .section-pad{
  padding-top:72px;
  padding-bottom:76px;
}


/* Refine heading proportions */

.mm-common-jobs-head{
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.65fr);

  gap:72px;

  margin-bottom:30px;
}


.mm-common-jobs-head h2{
  max-width:720px;

  font-size:clamp(
    42px,
    4.6vw,
    60px
  );

  line-height:.92;
}


.mm-common-jobs-head > p{
  max-width:480px;

  font-size:14px;

  line-height:1.65;
}


/* Slightly tighter 4 x 2 grid */

.mm-common-jobs-grid{
  gap:12px;
}


/* Main card */

.mm-job-card{
  min-height:220px;

  padding:22px 22px 46px;

  border-color:#252d33;

  border-radius:5px;

  background:
    linear-gradient(
      145deg,
      #111518 0%,
      #0b0f12 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


/* Individual existing SVG icons */

.mm-job-icon{
  width:38px;
  height:38px;

  margin-bottom:24px;

  color:var(--red);
}


.mm-job-icon svg{
  stroke-width:1.6;
}


/* Number */

.mm-job-number{
  top:19px;
  right:20px;

  color:#535c63;

  font-size:13px;
}


/* Card heading */

.mm-job-card h3{
  margin:0 0 8px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:21px;

  line-height:1;

  letter-spacing:.01em;

  text-transform:uppercase;
}


/* Description */

.mm-job-card p{
  max-width:95%;

  color:#9fa7ad;

  font-size:12px;

  line-height:1.55;
}


/* Red detail at bottom */

.mm-job-card::after{
  left:22px;
  bottom:19px;

  width:26px;
  height:2px;

  transition:width .2s ease;
}


/* Final enquiry card remains distinct */

.mm-job-card-cta{
  border-color:
    rgba(239,35,60,.42);

  background:
    linear-gradient(
      145deg,
      rgba(239,35,60,.10) 0%,
      #101316 45%,
      #0a0e11 100%
    );
}


.mm-job-link{
  margin-top:14px;

  font-size:12px;

  letter-spacing:.04em;

  text-transform:uppercase;
}


/* Desktop interaction — restrained */

@media(hover:hover){

  .mm-job-card:hover{
    transform:translateY(-3px);

    border-color:
      rgba(239,35,60,.45);

    background:
      linear-gradient(
        145deg,
        #151a1e,
        #0c1013
      );
  }


  .mm-job-card:hover::after{
    width:42px;
  }

}


/* Tablet */

@media(max-width:1000px){

  .mm-common-jobs-head{
    gap:38px;
  }

}


/* Mobile */

@media(max-width:720px){

  .mm-common-jobs .section-pad{
    padding-top:58px;
    padding-bottom:62px;
  }


  .mm-common-jobs-head{
    grid-template-columns:1fr;

    gap:16px;

    margin-bottom:24px;
  }


  .mm-common-jobs-head h2{
    font-size:clamp(
      40px,
      11vw,
      52px
    );
  }


  .mm-job-card{
    min-height:0;

    padding:
      20px
      20px
      44px;
  }


  .mm-job-icon{
    width:36px;
    height:36px;

    margin-bottom:20px;
  }


  .mm-job-card::after{
    left:20px;
    bottom:17px;
  }

}

/* ===== Contact form: status banner + honeypot ===== */
.form-status {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.45;
}
.form-status[hidden] { display: none; }
.form-status.is-success { background: rgba(46, 160, 67, 0.15); border: 1px solid #2ea043; color: #7ee787; }
.form-status.is-error { background: rgba(248, 81, 73, 0.12); border: 1px solid #f85149; color: #ffa198; }
.form-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   SMALL-SCREEN SAFETY: never let a long heading word
   push the page wider than the phone screen
   ========================================================= */

@media(max-width:720px){
  h1, h2, h3{
    overflow-wrap:break-word;
  }
}

/* =========================================================
   HOME PAGE HERO (Option A: framed photo + info strip)
   ========================================================= */

.home-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 30%, rgba(239,35,60,.08), transparent 45%),
    var(--bg);
}

.home-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:56px;
  align-items:center;
  padding:64px 0 60px;
}

.home-hero h1{
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(56px,6.4vw,92px);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.5px;
  text-transform:uppercase;
  color:#fff;
}

.home-hero h1 em{
  font-style:normal;
  color:var(--red);
}

.home-hero-eyebrow{
  display:block;
  margin-bottom:18px;
  font-family:Inter,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:3px;
  color:var(--red);
}

.home-hero-lead{
  max-width:540px;
  margin:24px 0 0;
  font-size:19px;
  line-height:1.6;
  color:var(--muted);
}

.home-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.home-hero-actions .btn{
  gap:10px;
  min-height:52px;
}

.home-hero-photo{
  position:relative;
  margin:0;
  aspect-ratio:1 / 1;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--panel);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}

.home-hero-photo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:4px;
  background:var(--red);
}

.home-hero-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-hero-strip{
  border-top:1px solid var(--line);
  background:#0b0f12;
}

.home-hero-strip-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.home-hero-strip-grid > div{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:26px 22px;
  border-right:1px solid var(--line);
}

.home-hero-strip-grid > div:first-child{
  padding-left:0;
}

.home-hero-strip-grid > div:last-child{
  border-right:0;
}

.home-hero-strip strong{
  font-size:16px;
  color:#fff;
}

.home-hero-strip span{
  font-size:13px;
  color:var(--muted);
}

/* Tablet: stack text above photo */
@media(max-width:900px){
  .home-hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:36px;
    padding:44px 0 40px;
  }

  .home-hero-photo{
    aspect-ratio:4 / 3;
  }

  .home-hero-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-hero-strip-grid > div{
    padding:20px 16px;
    border-bottom:1px solid var(--line);
  }

  .home-hero-strip-grid > div:nth-child(odd){
    padding-left:0;
  }

  .home-hero-strip-grid > div:nth-child(even){
    border-right:0;
  }

  .home-hero-strip-grid > div:nth-last-child(-n+2){
    border-bottom:0;
  }
}

/* Phone */
@media(max-width:520px){
  .home-hero h1{
    font-size:clamp(46px,13vw,58px);
  }

  .home-hero-lead{
    font-size:17px;
  }

  .home-hero-actions .btn{
    width:100%;
  }

  .home-hero-eyebrow{
    font-size:11px;
    letter-spacing:2px;
  }
}

.btn-icon{
  flex:0 0 auto;
  color:#fff;
}


/* =========================================================
   HOME FEATURE CARDS: three across on desktop
   ========================================================= */

@media(min-width:981px){
  .split-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .split-cards .feature-card{
    display:flex;
    align-items:flex-end;
  }

  .split-cards .feature-content{
    padding:30px;
  }

  .split-cards .feature-card h2{
    font-size:38px;
  }
}

/* Carbon card: the machine's own lettering sits behind the text,
   so this card gets a slightly stronger shade */
.carbon-card .feature-shade{
  background:linear-gradient(90deg, rgba(8,11,13,.96), rgba(8,11,13,.72));
}


/* =========================================================
   HOME: VEHICLE TUNING SEARCH (live Bensky widget)
   ========================================================= */

.gains.tuning-search{
  background:
    radial-gradient(circle at 80% 40%, rgba(239,35,60,.10), transparent 45%),
    #0b0f12;
}

.tuning-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;
  align-items:start;
}

.tuning-copy h2 span{
  color:var(--red);
}

.tuning-steps{
  list-style:none;
  margin:26px 0 28px;
  padding:0;
  display:grid;
  gap:10px;
}

.tuning-steps li{
  display:flex;
  align-items:center;
  gap:14px;
  color:#e5e8ea;
  font-size:15px;
  font-weight:600;
}

.tuning-steps li span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:4px;
  background:var(--panel);
  font-size:13px;
  color:#fff;
}

.tuning-panel{
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#0a0e10;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

.tuning-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;
}

.tuning-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(239,35,60,.18);
}

.tuning-widget{
  padding:20px;
  min-height:240px;
}

.tuning-widget iframe{
  display:block;
  width:100%;
  border:0;
  transition:height .5s;
  color-scheme:normal;
}

.tuning-panel-note{
  margin:0;
  padding:14px 20px 16px;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.6;
  color:#929ba2 !important;
}

@media(max-width:980px){
  .tuning-grid{
    grid-template-columns:minmax(0,1fr);
    gap:36px;
  }
}

@media(max-width:520px){
  .tuning-widget{
    padding:12px;
  }

  .tuning-search .hero-actions .btn{
    width:100%;
  }
}

.tuning-missing{
  margin:18px 0 0;
  font-size:14px;
  color:#c4cacf !important;
}

.tuning-missing a{
  color:#fff;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:3px;
}

.tuning-missing a:hover{
  color:var(--red);
}

/* =========================================================
   PHONE-ONLY CALL / WHATSAPP BAR
   ========================================================= */

.mobile-contact-bar{
  display:none;
}

@media(max-width:720px){
  .mobile-contact-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,11,13,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }

  .mobile-contact-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    border-radius:4px;
    font-weight:700;
    font-size:15px;
    color:#fff;
  }

  .mcb-call{
    background:var(--red);
  }

  .mcb-whatsapp{
    background:#1f8f4e;
  }

  /* Leave room so the bar never covers the footer */
  body{
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   MOBILE MECHANIC HERO — CLEAN VERSION
   Plain dark background (matches the home page) so the
   framed photo panel is the single focal image.
   ========================================================= */

.mm-hero,
.mm-hero[class]{
  background:
    radial-gradient(circle at 82% 45%, rgba(239,35,60,.10), transparent 42%),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.03), transparent 40%),
    #0b0f12;
}

.mm-hero::before{
  display:none;
}

/* Intro paragraph: normal sentence case, easy to read */
.mm-hero .mm-hero-copy p.lead{
  font-family:Inter,sans-serif;
  text-transform:none;
  font-weight:400;
  letter-spacing:normal;
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  text-shadow:none;
  max-width:580px;
}

.mm-hero-points span{
  background:var(--panel);
  backdrop-filter:none;
}

/* Photo panel: subtle frame + red base line like the home page */
.mm-hero-panel{
  border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}

.mm-hero-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:var(--red);
  z-index:4;
  border-radius:0 0 6px 6px;
}

@media(max-width:720px){
  .mm-hero .mm-hero-copy p.lead{
    font-size:16px;
  }
}

/* Stop long words widening the hero column on small screens */
@media(max-width:980px){
  .mm-hero .mm-hero-inner{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Phones: taller panel so the photo isn't hidden behind the info boxes */
@media(max-width:720px){
  .mm-hero .mm-hero-panel{
    min-height:470px;
  }
}

@media(max-width:480px){
  .mm-hero .mm-hero-panel{
    min-height:440px;
  }
}

/* =========================================================
   MOBILE MECHANIC PANEL — photo no longer covered
   Label bar on top, full photo, info boxes underneath.
   ========================================================= */

.mm-hero .mm-hero-panel{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius:6px;
  background:var(--panel);
}

.mm-hero .mm-panel-top{
  position:static;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0;
  padding:14px 18px;
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:none;
}

.mm-hero .mm-panel-photo{
  display:block;
  width:100%;
  height:auto;
  flex:0 0 auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center 40%;
}

.mm-hero .mm-panel-grid{
  position:static;
  margin:0;
  border:0;
  border-top:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:none;
}

@media(max-width:720px){
  .mm-hero .mm-hero-panel{
    min-height:0;
  }
}

@media(max-width:480px){
  .mm-hero .mm-hero-panel{
    min-height:0;
  }

  .mm-hero .mm-panel-top{
    padding:12px 14px;
  }
}

/* Diagnostics-style page heroes (Diagnostics, Pre-Purchase Inspection):
   intro paragraph in normal sentence case for readability */
.diag-hero .diag-hero-copy p.lead{
  font-family:Inter,sans-serif;
  text-transform:none;
  font-weight:400;
  letter-spacing:normal;
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  max-width:580px;
}

@media(max-width:720px){
  .diag-hero .diag-hero-copy p.lead{
    font-size:16px;
  }
}

/* =========================================================
   PRE-PURCHASE INSPECTION PACKAGES
   ========================================================= */

.ppi-packages{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.ppi-package{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:32px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}

.ppi-package-featured{
  border-color:rgba(239,35,60,.55);
  background:
    radial-gradient(circle at 100% 0%, rgba(239,35,60,.10), transparent 45%),
    var(--panel);
  box-shadow:0 24px 50px rgba(0,0,0,.35);
}

.ppi-badge{
  position:absolute;
  top:-12px;
  right:24px;
  padding:5px 12px;
  border-radius:3px;
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.ppi-package-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
}

.ppi-package-head h3{
  margin:10px 0 8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:36px;
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}

.ppi-package-head p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.ppi-price{
  margin:22px 0 0;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:18px;
  font-weight:700;
  color:#fff;
}

.ppi-includes{
  margin:20px 0 0;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.ppi-list{
  list-style:none;
  margin:18px 0 28px;
  padding:0;
  display:grid;
  gap:12px;
}

.ppi-list li{
  position:relative;
  padding-left:28px;
  color:#d7dce0;
  font-size:15px;
  line-height:1.5;
}

.ppi-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--red);
  font-weight:800;
}

.ppi-btn{
  margin-top:auto;
  align-self:flex-start;
}

.ppi-note{
  margin:22px 0 0;
  font-size:14px;
  color:var(--muted);
}

@media(max-width:820px){
  .ppi-packages{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
}

@media(max-width:520px){
  .ppi-package{
    padding:26px 20px;
  }

  .ppi-btn{
    align-self:stretch;
  }
}

/* =========================================================
   HOME SERVICE CARDS: 7 cards
   Flex rows so any part-filled row sits centred
   ========================================================= */

#mechanic-services.service-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

#mechanic-services > .service-card{
  flex:0 0 calc((100% - 6 * 12px) / 7);
  min-width:0;
}

@media(max-width:1180px){
  #mechanic-services > .service-card{
    flex-basis:calc((100% - 3 * 12px) / 4);
  }
}

@media(max-width:720px){
  #mechanic-services > .service-card{
    flex-basis:calc((100% - 12px) / 2);
  }
}

@media(max-width:480px){
  #mechanic-services > .service-card{
    flex-basis:100%;
  }
}

@media(min-width:1181px){
  #mechanic-services .service-link span:first-child{
    white-space:nowrap;
    letter-spacing:.06em;
    font-size:11px;
  }
}

.ppi-price{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.ppi-from{
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

.ppi-amount{
  font-family:"Barlow Condensed",sans-serif;
  font-size:40px;
  font-weight:800;
  line-height:1;
  color:#fff;
}

.ppi-package-featured .ppi-amount{
  color:var(--red);
}

/* In-page jumps land below the sticky header */
#packages{
  scroll-margin-top:80px;
}

/* FAQ boxes keep their own height when a neighbour is opened */
.diag-faq-grid{
  align-items:start;
}

/* Two independent FAQ columns: opening one question never
   leaves gaps or moves the other column */
.diag-faq-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

/* =========================================================
   SEO: the small label above each page heading now sits
   inside the <h1> (so Google reads it as part of the main
   heading). These rules keep it looking exactly as before.
   ========================================================= */

h1:has(> .h1-eyebrow){
  margin-top:0 !important;
  padding-top:13px !important;
}

h1:has(> .h1-eyebrow.booking-page-eyebrow),
h1:has(> .h1-eyebrow.eb-vehicle-search){
  padding-top:0 !important;
}

h1 > .h1-eyebrow{
  display:block !important;
  margin:0 0 13px !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:19.5px !important;
  letter-spacing:5px !important;
  text-transform:uppercase !important;
  color:rgb(223,228,232) !important;
  -webkit-text-fill-color:currentColor;
}

h1 > .h1-eyebrow.eb-about{
  margin-bottom:15px !important;
}

h1 > .h1-eyebrow.booking-page-eyebrow{
  margin-bottom:15px !important;
  font-family:Inter,sans-serif !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:18px !important;
  letter-spacing:1.68px !important;
  color:var(--red) !important;
}

/* =========================================================
   404 PAGE
   ========================================================= */

.notfound{
  padding:120px 0 140px;
  max-width:760px;
}

.notfound h1{
  margin:14px 0 20px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(52px,8vw,96px);
  line-height:.92;
  text-transform:uppercase;
  color:#fff;
}

.notfound h1 span{
  color:var(--red);
}

.notfound-lead{
  max-width:560px;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.notfound-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

@media(max-width:520px){
  .notfound{
    padding:72px 0 96px;
  }

  .notfound-actions .btn{
    width:100%;
  }
}

/* Home: remap quote panel (replaces the vehicle search widget) */
.tuning-quote{
  padding:24px;
}

.tuning-quote-intro{
  margin:0 0 14px;
  color:#fff !important;
  font-weight:600;
}

.tuning-quote-list{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:12px;
}

.tuning-quote-list li{
  position:relative;
  padding-left:28px;
  color:#d7dce0;
  font-size:15px;
  line-height:1.5;
}

.tuning-quote-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--red);
  font-weight:800;
}

.tuning-quote-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

@media(max-width:520px){
  .tuning-quote{
    padding:18px;
  }

  .tuning-quote-actions .btn{
    width:100%;
  }
}

/* =========================================================
   PRIVACY POLICY PAGE
   ========================================================= */

.legal-page{
  padding:90px 0 110px;
  max-width:820px;
}

.legal-page h1{
  margin:18px 0 8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(48px,7vw,80px);
  line-height:.95;
  text-transform:uppercase;
  color:#fff;
}

.legal-page h1 span{
  color:var(--red);
}

.legal-updated{
  margin:0 0 40px;
  color:var(--muted);
  font-size:14px;
}

.legal-body h2{
  margin:40px 0 12px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:30px;
  text-transform:uppercase;
  color:#fff;
}

.legal-body p,
.legal-body li{
  color:#d0d5d9;
  font-size:16px;
  line-height:1.7;
}

.legal-body ul{
  margin:0 0 16px;
  padding-left:22px;
}

.legal-body li{
  margin-bottom:6px;
}

.legal-body a,
.contact-form-note a,
.footer-bottom a{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:3px;
}

.legal-body a:hover,
.contact-form-note a:hover,
.footer-bottom a:hover{
  color:var(--red);
}

.footer-sep{
  margin:0 6px;
  color:#5c656c;
}

/* Highlight details still to be filled in */
mark.fill-in{
  background:#ffe14d;
  color:#111;
  padding:0 4px;
  border-radius:2px;
}

@media(max-width:520px){
  .legal-page{
    padding:56px 0 80px;
  }

  .legal-body h2{
    font-size:26px;
  }
}