.brand{gap:11px}
.brand-mark{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
.brand span{justify-items:center}
.brand strong{font-family:Georgia,"Times New Roman",serif;font-size:1.7rem;font-weight:500;letter-spacing:.12em}
.brand small{display:flex;align-items:center;gap:7px;font-family:Georgia,"Times New Roman",serif;font-size:.58rem;font-weight:700;letter-spacing:.22em;white-space:nowrap}
.brand small:before,.brand small:after{content:"";width:14px;height:1px;background:var(--accent)}
.footer-brand{width:max-content}

.hero{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(90deg,rgba(8,27,45,.98) 0%,rgba(8,27,45,.93) 39%,rgba(8,27,45,.68) 67%,rgba(8,27,45,.30) 100%),
    url("ycs-road-hero.webp");
  background-position:center;
  background-size:cover;
  color:white;
}
.hero:after{
  content:"I-71  •  OHIO  •  KENTUCKY  •  INDIANA";
  position:absolute;
  right:28px;
  bottom:20px;
  z-index:-1;
  color:rgba(255,255,255,.72);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.2em;
}
.hero h1{color:white;text-shadow:0 2px 24px rgba(0,0,0,.15)}
.hero .eyebrow{color:#d9b66d}
.hero .lead{color:#d9e6ed}
.hero .text-link{color:white}
.field-line{
  margin:0 0 28px;
  color:#f1d28d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;
  font-style:italic;
  letter-spacing:.03em;
}
.credential-card{
  background:rgba(8,27,45,.88);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:16px 16px 0 rgba(211,155,59,.28);
  backdrop-filter:blur(7px);
}
.service-strip{border-top:1px solid rgba(255,255,255,.1)}
.coverage{position:relative;overflow:hidden}
.coverage:before{
  content:"FIELD ROUTE";
  position:absolute;
  right:-22px;
  top:50%;
  transform:rotate(90deg);
  color:rgba(255,255,255,.09);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.35em;
}

@media(max-width:900px){
  .hero{background-position:62% center}
  .hero:after{right:20px}
}
@media(max-width:580px){
  .brand{gap:7px}
  .brand-mark{width:48px;height:48px}
  .brand strong{font-size:1.3rem}
  .brand small{font-size:.46rem;gap:4px;letter-spacing:.17em}
  .brand small:before,.brand small:after{width:8px}
  .hero{background-position:67% center}
  .hero:after{content:"OHIO  •  KENTUCKY  •  INDIANA";font-size:.6rem;letter-spacing:.12em}
  .field-line{font-size:1rem}
}
