
/* Major Driving School - About page isolated styles */

body.about-page {
  margin: 0;
  background: #fff;
  color: #161616;
}

/* Hero */
body.about-page .about-hero {
  display: block !important;
  background: #fff !important;
  overflow: hidden !important;
}

body.about-page .about-hero-grid {
  display: grid !important;
  grid-template-columns: 40% 60% !important;
  min-height: 430px !important;
}

body.about-page .about-hero-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 42px 34px 42px 0 !important;
}

body.about-page .about-kicker {
  color: #d00000 !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

body.about-page .about-hero-copy h1 {
  margin: 0 !important;
  font-size: clamp(43.5px, 4.2vw, 66.5px) !important;
  line-height: 1.02 !important;
}

body.about-page .about-hero-copy h1 span {
  display: block !important;
  color: #d00000 !important;
}

body.about-page .about-red-line {
  width: 42px !important;
  height: 3px !important;
  background: #d00000 !important;
  margin: 17px 0 20px !important;
}

body.about-page .about-hero-media {
  position: relative !important;
  min-height: 430px !important;
  overflow: hidden !important;
  clip-path: polygon(15% 0,100% 0,100% 100%,0 100%) !important;
  border-left: 4px solid #d00000 !important;
}

body.about-page .about-hero-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 430px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Story and four equal photos */
body.about-page .about-story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.55fr 1fr !important;
  gap: 34px !important;
  align-items: center !important;
}

body.about-page .about-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}

body.about-page .about-photo-grid img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.14) !important;
}

body.about-page .about-round-icon {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #d00000 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
}

/* Experience */
body.about-page .about-experience {
  display: block !important;
  padding: 34px 0 40px !important;
  color: #fff !important;
  background:
    linear-gradient(rgba(7,7,8,.91),rgba(7,7,8,.91)),
    url("../images/slider/02.jpg") center/cover no-repeat !important;
}

body.about-page .about-experience-title {
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 28px !important;
}

body.about-page .about-experience-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
}

body.about-page .about-experience-item {
  display: flex !important;
  gap: 15px !important;
  padding: 4px 24px !important;
  border-right: 1px solid rgba(255,255,255,.28) !important;
}

body.about-page .about-experience-item:last-child {
  border-right: 0 !important;
}

body.about-page .about-experience-item strong {
  display: block !important;
  color: #ee111d !important;
  font-size: 33.5px !important;
  line-height: 1.05 !important;
}

body.about-page .about-experience-item span {
  display: block !important;
  color: #fff !important;
  font-weight: 800 !important;
  margin: 7px 0 9px !important;
}

body.about-page .about-experience-item p {
  color: #eee !important;
}

/* What we teach */
body.about-page .about-teach {
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

body.about-page .about-teach-grid {
  display: grid !important;
  grid-template-columns: 66% 34% !important;
  min-height: 260px !important;
}

body.about-page .about-teach-grid > div:first-child {
  padding: 36px 28px 34px 0 !important;
}

body.about-page .about-teach-list {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 20px 28px !important;
}

body.about-page .about-teach-media {
  position: relative !important;
  overflow: hidden !important;
  clip-path: polygon(17% 0,100% 0,100% 100%,0 100%) !important;
  border-left: 4px solid #d00000 !important;
}

body.about-page .about-teach-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* CTA - force correct red band */
body.about-page .cta-strip {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(90deg,#b70010,#e30016) !important;
  color: #fff !important;
  padding: 0 !important;
}

body.about-page .cta-strip .cta-inner {
  min-height: 108px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

body.about-page .cta-strip .cta-copy {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

body.about-page .cta-strip .cta-wheel {
  width: 64px !important;
  height: 64px !important;
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 32px !important;
}

body.about-page .cta-strip h2,
body.about-page .cta-strip p {
  color: #fff !important;
}

body.about-page .cta-strip h2 {
  margin: 0 0 4px !important;
  font-size: 30px !important;
}

body.about-page .cta-strip p {
  margin: 0 !important;
}

body.about-page .cta-strip .btn-light {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 230px !important;
  min-height: 52px !important;
  padding: 12px 24px !important;
  background: #fff !important;
  color: #111 !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Footer - isolated from legacy footer styles */
body.about-page .site-footer {
  display: block !important;
  width: 100% !important;
  background: #101011 !important;
  color: #fff !important;
  padding: 26px 0 10px !important;
}

body.about-page .site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr 1.35fr !important;
  gap: 28px !important;
}

body.about-page .site-footer .footer-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding-right: 24px !important;
  border-right: 1px solid #323235 !important;
}

body.about-page .site-footer .footer-item:last-child {
  border-right: 0 !important;
}

body.about-page .site-footer .footer-item strong,
body.about-page .site-footer .footer-item a,
body.about-page .site-footer .footer-item span,
body.about-page .site-footer .footer-item small {
  display: block !important;
  color: #f5f5f5 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.about-page .site-footer .footer-item strong {
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.about-page .site-footer .footer-item a,
body.about-page .site-footer .footer-item span {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

body.about-page .site-footer .footer-red {
  color: #ff172a !important;
}

body.about-page .site-footer .copyright {
  display: flex !important;
  border-top: 1px solid #313133 !important;
  margin-top: 20px !important;
  padding: 12px 0 4px !important;
  color: #bfbfc4 !important;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  body.about-page .about-hero-grid,
  body.about-page .about-story-grid,
  body.about-page .about-teach-grid {
    grid-template-columns: 1fr !important;
  }

  body.about-page .about-hero-media,
  body.about-page .about-teach-media {
    clip-path: none !important;
    border-left: 0 !important;
  }

  body.about-page .about-experience-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  body.about-page .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  body.about-page .about-photo-grid,
  body.about-page .about-experience-grid,
  body.about-page .about-teach-list,
  body.about-page .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }

  body.about-page .cta-strip .cta-inner,
  body.about-page .cta-strip .cta-copy {
    flex-direction: column !important;
    text-align: center !important;
  }

  body.about-page .cta-strip .cta-inner {
    padding: 26px 0 !important;
  }

  body.about-page .site-footer .footer-item {
    border-right: 0 !important;
    border-bottom: 1px solid #323235 !important;
    padding: 0 0 18px !important;
  }
}
