/* ----- GLOBAL RESET / VARIABLES ------------------ */
:root{
  /* house colours */
  --wot-dark: #212529;   /* navbar/footer bg */
  --wot-mid : #343a40;   /* section bg alt   */
  --wot-gold: #ffc107;   /* accent           */
  --wot-grey: #f8f9fa;   /* page bg          */
  --wot-text: #343a40;   /* body text        */
  --wot-radius: .5rem;
}
*,
*::before,
*::after{box-sizing:border-box}

html,body{
  scroll-behavior:smooth;
}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--wot-grey);
  color:var(--wot-text);
  line-height:1.6;
}

/* ----- NAVBAR ------------------------------------ */
.navbar-dark .navbar-brand{
  letter-spacing:.5px;
}
.navbar-dark .nav-link{
  transition:color .2s;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active{
  color:var(--wot-gold) !important;
}

/* ----- HERO -------------------------------------- */
.hero{
  min-height:60vh;
  background:url("../img/hero-tire.jpg") center/cover no-repeat;
  position:relative;
}
.hero::after{          /* subtle overlay */
  content:"";
  position:absolute; inset:0;
  background:rgba(33,37,41,.55);
}
.hero > .container{
  position:relative; z-index:2;
}
.hero h1,.hero p{
  color:#fff;
}
.hero .btn-warning{
  background:var(--wot-gold);
  border:none;
}
.hero .btn-outline-light:hover{
  color:#212529; background:#fff;
}

/* ----- SECTION GENERICS -------------------------- */
section{
  padding:4rem 0;
}
section.bg-light{
  background:#fff;
}
.section-title{
  font-weight:700;
  text-align:center;
  margin-bottom:2.5rem;
}

/* ----- SERVICE CARDS ----------------------------- */
.service-card{
  background:#fff;
  border:none;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  border-radius:var(--wot-radius);
  transition:transform .2s, box-shadow .2s;
  text-align:center;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.service-card i{
  font-size:2.2rem;
  color:var(--wot-gold);
  margin-bottom:.75rem;
}

/* ----- BRAND LOGOS ------------------------------- */
.brand-logos img{
  filter:grayscale(100%) opacity(.8);
  max-height:70px;
  transition:filter .3s, transform .3s;
}
.brand-logos img:hover{
  filter:none; transform:scale(1.07);
}

/* ----- CONTACT CARD ------------------------------ */
.contact-card{
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  border-radius:var(--wot-radius);
}
.contact-card .btn-primary{
  background:var(--wot-gold); border:none;
}
.contact-card .btn-primary:hover{
  filter:brightness(.9);
}

/* ----- FOOTER ------------------------------------ */
footer{
  font-size:.85rem;
}

/* ----- MEDIA QUERIES ----------------------------- */
@media (max-width: 767.98px){
  .hero{
    min-height:50vh;
    text-align:center;
  }
}

/* ----- SELECTABLE CARDS ----------------------------- */
.selectable-card input[type=radio] { display:none; }          /* hide radio   */
.selectable-card { cursor:pointer; border:2px solid #ced4da;} /* default      */
.selectable-card input:checked + .card-body,
.selectable-card:hover  { border-color:#0d6efd; }             /* blue outline */

/* Coverage chips */
.chip{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background:#f2f4f7; border:1px solid #e5e7eb; font-size:.875rem;
}

/* Testimonials */
#trust .avatar{ width:44px; height:44px; }
.brand-logo{ max-height:48px; object-fit:contain; filter:grayscale(10%); }
.brand-logo:hover{ filter:none; }