
:root{--navy:#07192d;--navy2:#0d2745;--yellow:#f3bb2f;--orange:#f28d21;--ink:#142235;--muted:#617289;--line:#d9e3ec;--shadow:0 18px 55px rgba(5,23,43,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 2rem));margin-inline:auto}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.7rem 1rem;border-radius:8px}
.top-strip{background:#061426;color:#d7e3ef;font-size:.9rem}.top-strip .container{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.55rem 0;flex-wrap:wrap}.top-strip strong{color:var(--yellow);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem}.top-links{display:flex;gap:1rem;flex-wrap:wrap}.top-links a{text-decoration:none;font-weight:800;color:#fff}
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(7,25,45,.1)}.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}.brand{display:flex;align-items:center;text-decoration:none;gap:.75rem}.brand-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#07192d;font-weight:1000}.brand-copy strong{display:block;font-weight:1000;font-size:1.3rem;letter-spacing:-.04em;color:#07192d;line-height:1}.brand-copy span{display:block;text-transform:uppercase;font-size:.67rem;font-weight:900;letter-spacing:.14em;color:#57708c;margin-top:.2rem}
.nav-links{display:flex;align-items:center;gap:.4rem}.nav-links a{font-weight:850;text-decoration:none;color:#17304b;padding:.65rem .8rem;border-radius:999px;font-size:.95rem}.nav-links a:hover{background:#eef4f8}.menu-toggle{display:none;border:0;border-radius:999px;background:#07192d;color:#fff;padding:.65rem .95rem;font-weight:900}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#061426;text-decoration:none;font-weight:1000;padding:.9rem 1.15rem;box-shadow:0 12px 26px rgba(242,141,33,.22)}.button.dark{background:#07192d;color:#fff;box-shadow:none}.button.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:none}.button.light-outline{background:transparent;color:#07192d;border:1px solid #b9cadb;box-shadow:none}
.hero{position:relative;overflow:hidden;background:#07192d;color:#fff}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,25,45,.96) 0%,rgba(7,25,45,.88) 47%,rgba(7,25,45,.35) 100%),radial-gradient(circle at 68% 42%,rgba(243,187,47,.16),transparent 35%),url('images/mechanic-wheel.jpg') center/cover no-repeat;transform:scale(1.02)}.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:8px;background:linear-gradient(90deg,var(--yellow),var(--orange),#145a93)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;min-height:680px;padding:4rem 0}.eyebrow{margin:0 0 .7rem;color:var(--yellow);font-size:.78rem;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.9;letter-spacing:-.075em;margin:.2rem 0 1.1rem}.hero p{font-size:1.18rem;color:#dce7f1;max-width:720px;margin:0 0 1.5rem}.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap}
.hero-card{border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07));padding:1.1rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 32px 95px rgba(0,0,0,.34)}.logo-panel{background:#101820;border-radius:26px;padding:1.4rem;border:1px solid rgba(255,255,255,.16)}.quick-panel{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.85rem}.quick-tile{border-radius:22px;background:rgba(255,255,255,.95);color:#07192d;padding:1.15rem;min-height:112px}.quick-tile strong{display:block;font-size:1.5rem;letter-spacing:-.03em}.quick-tile span{color:#52677d;font-weight:850;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em}.truck-image{position:relative;overflow:hidden;border-radius:24px;margin-top:.85rem;height:210px;background:#0d2745}.truck-image img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 26px rgba(0,0,0,.28))}
.section{padding:5rem 0}.section-heading{max-width:760px;margin-bottom:2rem}.section-heading.center{text-align:center;margin-inline:auto}.section-heading h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:-.055em;margin:.2rem 0 .8rem;color:#07192d}.section-heading p{font-size:1.1rem;color:var(--muted);margin:0}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.service-card{border:1px solid #dce6ef;border-radius:26px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}.service-card .visual{height:170px;background:#07192d;position:relative;overflow:hidden}.service-card .visual img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.02) brightness(.78)}.service-card .body{padding:1.25rem}.service-card h3{margin:.1rem 0 .55rem;font-size:1.35rem;color:#07192d}.service-card p{color:var(--muted);margin:0 0 1rem}.service-card a{color:#0b4d82;font-weight:1000;text-decoration:none}
.tire-strip{background:linear-gradient(135deg,#07192d,#0d2745);color:#fff;position:relative;overflow:hidden}.tire-strip:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px);opacity:.55}.split{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}.split h2{font-size:clamp(2.2rem,4.6vw,4.3rem);line-height:.95;letter-spacing:-.06em;margin:.2rem 0 1rem}.split p{font-size:1.12rem;color:#d7e3ef}.check-list{display:grid;gap:.75rem;margin:1.5rem 0}.check-list span{display:flex;gap:.7rem;align-items:flex-start;font-weight:850}.check-list span:before{content:"✓";display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:var(--yellow);color:#061426;font-weight:1000}.tire-card{background:#fff;color:#07192d;border-radius:30px;padding:1rem;box-shadow:0 25px 75px rgba(0,0,0,.26)}.tire-card img{border-radius:22px;width:100%;height:310px;object-fit:cover}.tire-card .caption{padding:1rem}.tire-card strong{font-size:1.5rem;display:block}.tire-card span{color:#60738a;font-weight:750}
.location-panel,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.info-card{background:#fff;border:1px solid #dce6ef;border-radius:28px;padding:1.5rem;box-shadow:var(--shadow)}.info-card h3{font-size:1.55rem;color:#07192d;margin:0 0 .5rem}.info-card p{color:#5f7186;margin:.2rem 0}.info-card .big{font-size:1.8rem;font-weight:1000;color:#07192d;text-decoration:none}.map-card{background:linear-gradient(135deg,#0d2745,#07192d);border-radius:28px;padding:1.5rem;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.map-card:before{content:"I-70";position:absolute;right:1.2rem;top:1rem;font-weight:1000;font-size:4.5rem;color:rgba(255,255,255,.07)}.map-card h3{font-size:1.75rem;margin:0 0 .7rem}.map-card p{color:#d7e3ef}.local-note{border-left:6px solid var(--yellow);background:#fff8e6;border-radius:20px;padding:1rem 1.2rem;margin-top:1.2rem;color:#3c2b02}
.contact-section{background:#f4f8fb}form{background:#fff;border:1px solid #dce6ef;border-radius:30px;padding:1.5rem;box-shadow:var(--shadow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}label{font-weight:900;color:#17304b;display:grid;gap:.35rem;margin-bottom:1rem}input,select,textarea{font:inherit;border:1px solid #cbd8e4;border-radius:14px;padding:.85rem;background:#fff;color:#07192d}textarea{min-height:140px;resize:vertical}.hidden{display:none}
.footer{background:#061426;color:#d7e3ef;padding:2.2rem 0}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;align-items:center}.footer a{color:#fff;font-weight:900}.footer small{display:block;color:#92a8bd;margin-top:.35rem}.footer .credit{text-align:right}
@media(max-width:980px){.hero-grid,.split,.location-panel,.contact-grid,.footer-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}.nav-links{display:none;position:absolute;left:1rem;right:1rem;top:86px;background:#fff;border:1px solid #dce6ef;border-radius:22px;padding:.7rem;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-toggle{display:block}.footer .credit{text-align:left}}@media(max-width:640px){.card-grid,.form-row,.quick-panel{grid-template-columns:1fr}.hero-grid{min-height:auto;padding:3.2rem 0}.hero-card{display:none}.section{padding:3.4rem 0}}


/* Official FleetMaster logo integration */
.logo-brand{gap:0}
.header-logo{
  width:210px;
  max-height:76px;
  object-fit:contain;
}
.official-logo-panel{
  background:#101820;
  display:grid;
  place-items:center;
  min-height:300px;
  padding:1.2rem;
}
.official-logo-panel img{
  width:min(100%,430px);
  max-height:270px;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.32));
}
.hero-logo-showcase{
  display:grid;
  place-items:center;
  height:260px;
  background:linear-gradient(135deg,#081827,#112b49);
  padding:1rem;
}
.hero-logo-showcase img{
  width:min(100%,360px);
  height:auto;
  max-height:235px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.28));
}
.footer-logo-lockup{
  display:flex;
  align-items:center;
  gap:1rem;
}
.footer-logo-lockup img{
  width:86px;
  height:auto;
  flex:0 0 auto;
}
.thank-logo{
  width:170px;
  max-width:80%;
  margin:0 0 1rem;
}
@media(max-width:640px){
  .header-logo{width:160px;max-height:58px}
  .official-logo-panel{min-height:240px}
  .hero-logo-showcase{height:220px}
  .footer-logo-lockup{align-items:flex-start}
}


/* Revised official logo lockups: keep the text to the right of the logo mark. */
.logo-brand{
  gap:.8rem;
}
.brand-logo-mark{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#101820;
  padding:.25rem;
  box-shadow:0 10px 22px rgba(5,23,43,.18);
  overflow:hidden;
  flex:0 0 auto;
}
.brand-logo-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.hero-brand-lockup{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:1.15rem;
  min-height:210px;
  padding:1.35rem;
  background:#101820;
}
.hero-brand-lockup img{
  width:150px;
  max-height:170px;
  object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.35));
}
.hero-brand-copy strong{
  display:block;
  color:#fff;
  font-size:clamp(2.15rem,4vw,3.65rem);
  line-height:.88;
  letter-spacing:-.07em;
}
.hero-brand-copy span{
  display:block;
  margin-top:.45rem;
  color:#f3bb2f;
  text-transform:uppercase;
  font-size:1.05rem;
  font-weight:1000;
  letter-spacing:.1em;
}
.hero-brand-copy em{
  display:block;
  margin-top:.5rem;
  color:#b9cadb;
  font-style:normal;
  font-weight:850;
}
.hero-service-lockup{
  grid-template-columns:118px 1fr;
  gap:1rem;
  justify-items:start;
  align-items:center;
  padding:1rem 1.1rem;
}
.hero-service-lockup img{
  width:118px;
  max-height:132px;
}
.hero-service-lockup div strong{
  display:block;
  color:#fff;
  font-size:1.35rem;
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero-service-lockup div span{
  display:block;
  color:#d7e3ef;
  margin-top:.35rem;
  font-weight:800;
}
@media(max-width:760px){
  .brand-logo-mark{width:54px;height:54px}
  .hero-brand-lockup{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-brand-lockup img{
    margin:auto;
    width:170px;
  }
  .hero-service-lockup{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
}


/* Header logo refinement: no background/border, larger official logo mark. */
.brand-logo-mark{
  width:94px!important;
  height:94px!important;
  border-radius:0!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.brand-logo-mark img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 14px rgba(5,23,43,.14));
}
.logo-brand{
  gap:1rem!important;
}
@media(max-width:760px){
  .brand-logo-mark{
    width:72px!important;
    height:72px!important;
  }
}


/* Hero lower image carousel */
.hero-card-carousel{
  position:relative;
  overflow:hidden;
  height:260px;
  background:#07192d;
  display:block;
}
.hero-card-carousel .carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
}
.hero-card-carousel .carousel-slide.is-active{
  opacity:1;
  z-index:1;
}
.hero-card-carousel .carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.06) contrast(1.04) brightness(.76);
}
.hero-card-carousel:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(7,25,45,.06),rgba(7,25,45,.64)),linear-gradient(90deg,rgba(243,187,47,.18),transparent 58%);
}
.hero-card-carousel .carousel-caption{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:3;
  display:inline-flex;
  width:max-content;
  max-width:calc(100% - 2rem);
  color:#fff;
  background:rgba(6,20,38,.76);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:.55rem .8rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  backdrop-filter:blur(8px);
}
@media(prefers-reduced-motion:reduce){
  .hero-card-carousel .carousel-slide{transition:none}
}


/* New full FleetMaster logo treatment */
.full-logo-brand{
  gap:0!important;
}
.header-full-logo{
  width:260px;
  max-height:92px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(5,23,43,.12));
}
.hero-full-logo-panel{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center;
  text-align:center;
  min-height:310px;
  padding:1.15rem;
  background:#101820;
}
.hero-full-logo-panel img{
  width:min(100%,500px)!important;
  max-height:260px!important;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.36));
}
.hero-full-logo-panel em{
  display:block;
  margin-top:.25rem;
  color:#b9cadb;
  font-style:normal;
  font-weight:850;
  letter-spacing:.04em;
}
.footer-logo-lockup img{
  width:110px;
}
.thank-logo{
  width:230px;
}
@media(max-width:760px){
  .header-full-logo{
    width:200px;
    max-height:74px;
  }
  .hero-full-logo-panel{
    min-height:260px;
  }
  .hero-full-logo-panel img{
    max-height:220px!important;
  }
}


/* Bigger FleetMaster logo pass */
.header-full-logo{
  width:360px!important;
  max-height:132px!important;
}
.nav{
  padding:.55rem 0!important;
}
.hero-full-logo-panel{
  min-height:390px!important;
  padding:.35rem!important;
}
.hero-full-logo-panel img{
  width:min(100%,650px)!important;
  max-height:365px!important;
}
.hero-full-logo-panel em{
  margin-top:0!important;
  font-size:.95rem;
}
@media(max-width:980px){
  .header-full-logo{
    width:285px!important;
    max-height:104px!important;
  }
}
@media(max-width:640px){
  .header-full-logo{
    width:230px!important;
    max-height:86px!important;
  }
  .hero-full-logo-panel{
    min-height:315px!important;
  }
  .hero-full-logo-panel img{
    max-height:295px!important;
  }
}


/* Tighten hero logo panel to remove excess empty space below the logo. */
.hero-full-logo-panel{
  min-height:300px!important;
  padding:.45rem .7rem!important;
  align-content:center!important;
  gap:.25rem!important;
}
.hero-full-logo-panel img{
  width:min(100%,720px)!important;
  max-height:292px!important;
  object-fit:contain!important;
}
.hero-full-logo-panel em{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:.65rem;
  margin-top:0!important;
  padding:.3rem .5rem;
  border-radius:999px;
  background:rgba(6,20,38,.68);
  color:#d7e3ef!important;
  font-size:.88rem;
  line-height:1.1;
}
.official-logo-panel{
  position:relative;
  overflow:hidden;
}
@media(max-width:760px){
  .hero-full-logo-panel{
    min-height:255px!important;
  }
  .hero-full-logo-panel img{
    max-height:248px!important;
  }
  .hero-full-logo-panel em{
    font-size:.78rem;
  }
}


/* FleetMaster logo prop 2: use the tighter art and fill the hero panel cleanly. */
.header-full-logo{
  width:380px!important;
  max-height:126px!important;
}
.hero-full-logo-panel{
  min-height:350px!important;
  padding:.4rem!important;
  overflow:hidden!important;
  background:#101820!important;
}
.hero-full-logo-panel img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:342px!important;
  object-fit:contain!important;
  object-position:center!important;
}
.hero-full-logo-panel em{
  display:none!important;
}
@media(max-width:980px){
  .header-full-logo{
    width:310px!important;
    max-height:104px!important;
  }
}
@media(max-width:640px){
  .header-full-logo{
    width:245px!important;
    max-height:84px!important;
  }
  .hero-full-logo-panel{
    min-height:290px!important;
  }
  .hero-full-logo-panel img{
    max-height:282px!important;
  }
}


/* Parts support section */
.parts-support-section{
  background:
    radial-gradient(circle at 92% 50%, rgba(0,92,180,.12), transparent 28%),
    radial-gradient(circle at 83% 22%, rgba(243,187,47,.10), transparent 24%),
    #f4f8fb;
}
.parts-support-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2.5rem;
  align-items:center;
}
.parts-support-copy h2{
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1;
  letter-spacing:-.055em;
  margin:.2rem 0 1rem;
  color:#07192d;
}
.parts-support-copy p:not(.eyebrow){
  max-width:680px;
  color:#41566f;
  font-size:1.08rem;
}
.vendor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.vendor-grid span{
  display:grid;
  place-items:center;
  min-height:70px;
  padding:.95rem 1rem;
  border-radius:16px;
  background:#fff;
  border:1px solid #d9e3ec;
  border-left:6px solid #145a93;
  color:#17304b;
  font-weight:1000;
  font-size:1.03rem;
  box-shadow:0 16px 38px rgba(5,23,43,.10);
}
@media(max-width:980px){
  .parts-support-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .vendor-grid{grid-template-columns:1fr}
}


/* FleetMaster top hero video background */
.hero{
  position:relative!important;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  filter:saturate(1.05) contrast(1.05) brightness(.66);
}
.hero:before{
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(7,25,45,.96) 0%,rgba(7,25,45,.88) 47%,rgba(7,25,45,.46) 100%),
    radial-gradient(circle at 68% 42%,rgba(243,187,47,.16),transparent 35%)!important;
  transform:none!important;
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:2!important;
}
.hero:after{
  z-index:3!important;
}
@media(prefers-reduced-motion:reduce){
  .hero-bg-video{display:none}
  .hero:before{
    background:
      linear-gradient(90deg,rgba(7,25,45,.96) 0%,rgba(7,25,45,.88) 47%,rgba(7,25,45,.46) 100%),
      radial-gradient(circle at 68% 42%,rgba(243,187,47,.16),transparent 35%),
      url('images/fleetmaster-hero-poster.jpg') center/cover no-repeat!important;
  }
}


/* Tire sales & service section */
.tire-sales-section{
  background:
    linear-gradient(135deg,rgba(7,25,45,.96),rgba(10,36,64,.94)),
    radial-gradient(circle at 82% 22%,rgba(243,187,47,.22),transparent 34%);
  color:#fff;
}
.tire-sales-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:2rem;
  align-items:stretch;
}
.tire-sales-card,
.tire-service-list{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.tire-sales-card{
  padding:2rem;
}
.tire-sales-card h2{
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:.98;
  letter-spacing:-.055em;
  margin:.2rem 0 1rem;
}
.tire-sales-card p:not(.eyebrow){
  max-width:720px;
  color:#d7e3ef;
  font-size:1.08rem;
}
.tire-brand-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
  margin-top:1.5rem;
}
.tire-brand-grid span{
  display:grid;
  place-items:center;
  min-height:64px;
  padding:.85rem;
  border-radius:16px;
  background:#fff;
  color:#092039;
  font-weight:1000;
  letter-spacing:.01em;
  box-shadow:0 16px 32px rgba(0,0,0,.20);
}
.tire-service-list{
  padding:2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tire-service-list h3{
  margin:0 0 1rem;
  font-size:1.55rem;
}
.tire-service-list ul{
  margin:0 0 1.5rem;
  padding-left:1.15rem;
  color:#d7e3ef;
  line-height:1.8;
}
@media(max-width:980px){
  .tire-sales-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tire-brand-grid{grid-template-columns:1fr 1fr}
}


/* Tire Support card image background */
.tire-service-list{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(6,20,38,.86),rgba(6,20,38,.72)),
    url('images/truck-tire-support-bg.png') center/cover no-repeat!important;
}
.tire-service-list::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 42%,rgba(20,90,147,.26),transparent 38%),
    linear-gradient(90deg,rgba(6,20,38,.92),rgba(6,20,38,.56));
  z-index:0;
}
.tire-service-list > *{
  position:relative;
  z-index:1;
}
.tire-service-list h3{
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}
.tire-service-list ul{
  color:#ecf4fb!important;
  text-shadow:0 2px 12px rgba(0,0,0,.52);
}
.tire-service-list .button{
  align-self:flex-start;
}


/* Brighten Truck Tire Support background image slightly while keeping text readable */
.tire-service-list{
  background:
    linear-gradient(135deg,rgba(6,20,38,.68),rgba(6,20,38,.48)),
    url('images/truck-tire-support-bg.png') center/cover no-repeat!important;
}
.tire-service-list::before{
  background:
    radial-gradient(circle at 30% 42%,rgba(20,90,147,.18),transparent 40%),
    linear-gradient(90deg,rgba(6,20,38,.76),rgba(6,20,38,.28))!important;
}


/* Decorative tire graphic on Tire Sales & Service blue card */
.tire-sales-card{
  position:relative;
  overflow:hidden;
}
.tire-sales-card::before{
  content:"";
  position:absolute;
  right:-92px;
  bottom:-150px;
  width:min(58%,520px);
  aspect-ratio:1/1;
  background:url('images/tire-sales-graphic.png') center/contain no-repeat;
  opacity:.22;
  filter:brightness(1.35) contrast(1.05);
  z-index:0;
  pointer-events:none;
}
.tire-sales-card > *{
  position:relative;
  z-index:1;
}
@media(max-width:980px){
  .tire-sales-card::before{
    right:-80px;
    bottom:-130px;
    width:min(54%,440px);
    opacity:.18;
  }
}
@media(max-width:640px){
  .tire-sales-card::before{
    right:-100px;
    bottom:-95px;
    width:330px;
    opacity:.14;
  }
}


/* Move tire tread graphic out of the card and onto the Tire Sales section panel */
.tire-sales-card::before{
  content:none!important;
  display:none!important;
}
.tire-sales-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.tire-sales-section::before{
  content:"";
  position:absolute;
  left:-165px;
  top:50%;
  width:min(48vw,620px);
  aspect-ratio:1/1;
  transform:translateY(-50%);
  background:url('images/tire-sales-graphic.png') center/contain no-repeat;
  opacity:.16;
  filter:brightness(1.45) contrast(1.08);
  z-index:0;
  pointer-events:none;
}
.tire-sales-section .container{
  position:relative;
  z-index:1;
}
@media(max-width:980px){
  .tire-sales-section::before{
    left:-180px;
    top:32%;
    width:540px;
    opacity:.12;
  }
}
@media(max-width:640px){
  .tire-sales-section::before{
    left:-150px;
    top:170px;
    width:410px;
    opacity:.10;
  }
}


/* Tire Sales & Service: bring back the striped panel feel from the old Tire-First Positioning section */
.tire-sales-section{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 16px),
    linear-gradient(135deg,rgba(7,25,45,.96),rgba(10,36,64,.94)),
    radial-gradient(circle at 82% 22%,rgba(243,187,47,.22),transparent 34%)!important;
}
.tire-sales-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(118deg,transparent 0 54%,rgba(255,255,255,.075) 54.4%,rgba(255,255,255,.075) 55.4%,transparent 55.8%),
    linear-gradient(118deg,transparent 0 61%,rgba(255,255,255,.045) 61.3%,rgba(255,255,255,.045) 62.2%,transparent 62.6%),
    linear-gradient(118deg,transparent 0 68%,rgba(255,255,255,.035) 68.3%,rgba(255,255,255,.035) 69.1%,transparent 69.5%);
  z-index:0;
  pointer-events:none;
}
.tire-sales-section .container{
  position:relative;
  z-index:1;
}
.tire-sales-card,
.tire-service-list{
  position:relative;
  z-index:2;
}


/* Location map replacement */
.location-map-card{
  position:relative;
  overflow:hidden;
  min-height:338px;
  border-radius:28px;
  border:1px solid rgba(7,25,45,.12);
  background:#dfe7ef;
  box-shadow:0 24px 70px rgba(5,23,43,.16);
}
.location-map-card iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  filter:saturate(.95) contrast(1.02);
}
.map-directions-link{
  position:absolute;
  left:1rem;
  bottom:1rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.75rem 1rem;
  border-radius:999px;
  background:#fff;
  color:#07192d;
  font-weight:1000;
  text-decoration:none;
  box-shadow:0 16px 38px rgba(5,23,43,.18);
}
.map-directions-link:hover{
  transform:translateY(-1px);
}
@media(max-width:760px){
  .location-map-card{
    min-height:290px;
  }
}
