/* Value My Cars — premium typography and uploaded automotive hero */
:root{
  --font-display:"Manrope","Inter",Arial,sans-serif;
  --font-body:"Inter",Arial,sans-serif;
}

html,
body,
button,
input,
select,
textarea{
  font-family:var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-copy,
.main-nav,
.header-link,
.header-cta,
.btn,
.audit-form button,
.lead-tool-tab,
.lead-tool-button{
  font-family:var(--font-display);
}

body{
  font-weight:400;
  letter-spacing:-.005em;
}

p,
li,
label,
input,
select,
textarea{
  letter-spacing:-.008em;
}

.site-header .brand-copy{
  font-weight:800;
  letter-spacing:.055em;
}

.main-nav a,
.header-link,
.header-cta{
  font-weight:700;
  letter-spacing:-.015em;
}

.hero{
  display:block;
  position:relative;
  min-height:650px;
  isolation:isolate;
  background-color:#061326;
  background-image:
    linear-gradient(90deg,rgba(2,10,24,.74) 0%,rgba(2,10,24,.50) 38%,rgba(2,10,24,.12) 66%,rgba(2,10,24,.02) 100%),
    var(--hero-car-image,linear-gradient(135deg,#061326 0%,#0a2349 58%,#0b2f68 100%));
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  transition:background-image .18s ease-out;
}

.hero::after{
  content:none;
  display:none;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:780px;
  padding:82px 64px 78px;
}

.hero h1{
  max-width:680px;
  margin:24px 0 22px;
  font-family:var(--font-display);
  font-size:clamp(50px,4.9vw,72px);
  font-weight:800;
  line-height:.99;
  letter-spacing:-.058em;
}

.hero h1 em{
  color:#96dfff;
}

.hero p{
  max-width:610px;
  font-size:18px;
  line-height:1.62;
  letter-spacing:-.012em;
}

.hero .btn{
  font-weight:750;
}

.hero-float{
  display:none;
}

.section-head h2,
.feature-copy h2,
.dark-panel h2,
.cta-box h2,
.lead-tool-heading h2,
.lead-tool-step h3{
  font-family:var(--font-display);
  font-weight:750;
}

.lead-tool-field span,
.lead-tool-progress-top,
.lead-tool-option span{
  font-family:var(--font-body);
}

@media(max-width:1120px){
  .hero-content{
    padding:72px 46px 70px;
    max-width:700px;
  }

  .hero h1{
    font-size:clamp(46px,5.8vw,64px);
  }
}

@media(max-width:900px){
  .hero{
    min-height:auto;
    background:#061326;
  }

  .hero::after{
    content:"";
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:370px;
    z-index:0;
    background-image:
      linear-gradient(180deg,#061326 0%,rgba(6,19,38,.18) 22%,rgba(2,10,24,.06) 100%),
      var(--hero-car-image,linear-gradient(135deg,#071a36,#0a2c5e));
    background-size:cover;
    background-position:center 58%;
    background-repeat:no-repeat;
  }

  .hero-content{
    max-width:720px;
    padding:62px 38px 410px;
  }
}

@media(max-width:600px){
  .hero-content{
    padding:52px 24px 315px;
  }

  .hero h1{
    font-size:clamp(41px,12vw,54px);
    line-height:1.01;
  }

  .hero p{
    font-size:16px;
  }

  .hero::after{
    height:285px;
    background-position:62% 58%;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero{
    transition:none;
  }
}