/* ==========================================
   GLOBAL FONT + BRAND VARIABLES
========================================== */

:root {
  --global-body-font-family: "Exo", sans-serif !important;
  --global-heading-font-family: "Exo", sans-serif !important;

  --mechanic-navy: #1f2426;
  --mechanic-navy-2: #30383b;
  --mechanic-ink: #2f3639;
  --mechanic-muted: #667174;
  --mechanic-soft: #f4f5f5;
  --mechanic-border: #e3e6e7;
  --mechanic-white: #ffffff;
  --mechanic-shadow: 0 18px 45px rgba(31, 36, 38, 0.1);
  --mechanic-shadow-lg: 0 28px 70px rgba(31, 36, 38, 0.22);
  --mechanic-radius: 24px;
  --mechanic-radius-lg: 32px;
}

body,
button,
input,
textarea,
select,
.site,
.mechanic-home,
.custom-site-footer,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Exo", sans-serif !important;
}

/* ==========================================
   KADENCE PAGE CLEANUP
========================================== */

body.home .site-main,
body.front-page .site-main {
  overflow: hidden;
}

body.home .content-container,
body.front-page .content-container,
body.home .content-area,
body.front-page .content-area,
body.home .site-container,
body.front-page .site-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .entry-content,
body.front-page .entry-content,
body.home .entry,
body.front-page .entry {
  margin: 0 !important;
  padding: 0 !important;
}

body.home .entry-header,
body.front-page .entry-header {
  display: none !important;
}

.mechanic-home,
.mechanic-home * {
  box-sizing: border-box;
}

.mechanic-home {
  width: 100%;
  overflow-x: hidden; /* was overflow-x: clip — that triggers a WebKit repaint bug where inputs nested inside a clipped ancestor stop updating on keystroke */
  background: var(--mechanic-white);
  color: var(--mechanic-ink);
}

.mechanic-home img,
.mechanic-home svg {
  max-width: 100%;
}

.mechanic-home a {
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.mechanic-home .container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* ==========================================
   GLOBAL SECTIONS
========================================== */

.section {
  padding: clamp(64px, 8vw, 96px) 0;
}

.section--gray {
  background: var(--mechanic-soft);
}

.text-center {
  text-align: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mechanic-navy);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.section-label::before,
.text-center .section-label::after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--mechanic-navy);
  opacity: 0.55;
}

.section-header {
  width: min(760px, 100%);
  margin: 0 auto clamp(34px, 5vw, 52px);
}

.section-header h2,
.quote-section h2 {
  color: var(--mechanic-navy);
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.06;
  margin: 0 0 16px;
  letter-spacing: -0.045em;
}

.section-sub,
.quote-section p {
  color: var(--mechanic-muted);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.75;
}

.mt-8 {
  margin-top: 32px;
}

/* ==========================================
   BUTTONS
========================================== */

/* One button system for the whole site: every .btn shares the same size,
   shape, type and hover behaviour; variants only change colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 850;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* White button (for dark backgrounds) */
.btn--accent {
  background: var(--mechanic-white);
  color: var(--mechanic-navy);
  border-color: var(--mechanic-white);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.btn--accent:hover {
  background: #e2e7e8;
  border-color: #e2e7e8;
  color: var(--mechanic-navy);
}

/* Dark button (for light backgrounds) */
.btn--dark {
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
  border-color: var(--mechanic-navy);
}

.btn--dark:hover {
  background: #3a4245;
  border-color: #3a4245;
  color: var(--mechanic-white);
  box-shadow: 0 14px 30px rgba(31, 36, 38, 0.22);
}

/* Outline button (secondary action on dark backgrounds) */
.btn--outline {
  background: transparent;
  color: var(--mechanic-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mechanic-white);
  color: var(--mechanic-white);
}

/* Keep button text colours after a click. Kadence's global a:focus / a:active
   colour otherwise wins and turns the text dark on dark buttons. */
a.btn--dark:focus,
a.btn--dark:active,
a.btn--dark:visited,
a.btn--outline:focus,
a.btn--outline:active,
a.btn--outline:visited {
  color: var(--mechanic-white);
}

a.btn--accent:focus,
a.btn--accent:active,
a.btn--accent:visited {
  color: var(--mechanic-navy);
}

/* Same for form <button>s, which Kadence's button:focus rule recolours. */
.the-form .btn--dark:focus,
.the-form .btn--dark:active {
  color: var(--mechanic-white);
}

.the-form .btn--accent:focus,
.the-form .btn--accent:active {
  color: var(--mechanic-navy);
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The homepage form button sits on a white card, where the light grey
   accent hover is invisible, so it inverts to the dark brand colour. */
.the-form .btn--accent:hover,
.the-form .btn--accent:focus-visible {
  background: var(--mechanic-navy);
  border-color: var(--mechanic-navy);
  color: var(--mechanic-white);
  box-shadow: 0 18px 36px rgba(31, 36, 38, 0.28);
}

.the-form .btn[disabled],
.the-form .btn[disabled]:hover {
  transform: none;
}

/* Kept for existing markup; large buttons now match the standard size. */
.btn--lg {
  min-height: 52px;
  padding: 14px 24px;
}

.btn--full {
  width: 100%;
}

/* ==========================================
   HERO
========================================== */

.hero {
  position: relative;
  min-height: clamp(660px, 78vh, 820px);
  padding: clamp(140px, 16vw, 200px) 0 clamp(74px, 8vw, 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--mechanic-white);
  background:
    linear-gradient(
      90deg,
      rgba(31, 36, 38, 0.78) 0%,
      rgba(31, 36, 38, 0.6) 48%,
      rgba(31, 36, 38, 0.35) 100%
    ),
    url("../images/hero-1920.jpg") center/cover no-repeat;
}

@media (max-width: 768px) {
  .hero {
    background:
      linear-gradient(
        90deg,
        rgba(31, 36, 38, 0.78) 0%,
        rgba(31, 36, 38, 0.6) 48%,
        rgba(31, 36, 38, 0.35) 100%
      ),
      url("../images/hero-960.jpg") center/cover no-repeat;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.75fr);
  gap: clamp(34px, 5vw, 60px);
  align-items: center;
}

.hero__copy {
  max-width: 780px;
}

.hero__eyebrow {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--mechanic-white);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__heading {
  margin: 0 0 24px;
  color: var(--mechanic-white);
  font-size: clamp(2.85rem, 6.8vw, 5.7rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
  overflow-wrap: anywhere;
}

.hero__sub {
  max-width: 650px;
  margin: 0 0 34px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.75;
}

.hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__panel {
  display: grid;
  gap: 18px;
}

.hero__panel-card {
  background: var(--mechanic-white);
  color: var(--mechanic-navy);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--mechanic-shadow-lg);
}

.hero__panel-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--mechanic-muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__panel-card strong {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.hero__panel-card p {
  margin: 0;
  color: var(--mechanic-muted);
  line-height: 1.65;
}

/* ==========================================
   QUOTE / FORM
========================================== */

.quote-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: linear-gradient(
    135deg,
    var(--mechanic-navy),
    var(--mechanic-navy-2)
  );
  color: var(--mechanic-white);
}

.quote-section__inner,
.why-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 62px);
  align-items: center;
}

/* The text starts level with the top of the form, and stays put when a taller form tab opens. */
.quote-section__inner {
  align-items: start;
}

.quote-section h2,
.quote-section p,
.quote-section .section-label {
  color: var(--mechanic-white);
}

.quote-section .section-label::before {
  background: rgba(255, 255, 255, 0.55);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.check-list svg {
  color: var(--mechanic-white);
  flex: 0 0 auto;
  margin-top: 3px;
}

.contact-card {
  background: var(--mechanic-white);
  color: var(--mechanic-navy);
  border-radius: var(--mechanic-radius-lg);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--mechanic-shadow-lg);
}

.contact-card h3 {
  margin: 0 0 22px;
  color: var(--mechanic-navy);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -0.035em;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--mechanic-ink);
  font-weight: 850;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--mechanic-border);
  border-radius: 13px;
  background: var(--mechanic-white);
  color: var(--mechanic-ink);
  -webkit-text-fill-color: var(--mechanic-ink);
  opacity: 1;
  font: inherit;
}

/* Grows with what's typed, then scrolls. The form scripts do this where field-sizing isn't supported. */
.form-group textarea {
  min-height: 104px;
  max-height: 260px;
  overflow-y: auto;
  resize: none;
  field-sizing: content;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--mechanic-muted);
  opacity: 0.45;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--mechanic-navy);
  box-shadow: 0 0 0 4px rgba(31, 36, 38, 0.12);
}

.req {
  color: var(--mechanic-navy);
}

/* ==========================================
   ABOUT / IMAGE BLOCKS
========================================== */

.why-image__frame {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 45vw, 430px);
  border-radius: var(--mechanic-radius-lg);
  background: #e5e8e9;
  box-shadow: var(--mechanic-shadow);
}

.why-image__frame img,
.img-placeholder {
  width: 100%;
  min-height: clamp(320px, 45vw, 430px);
}

.why-image__frame img {
  height: 100%;
  object-fit: cover;
}

.img-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--mechanic-muted);
  padding: 34px;
}

.img-placeholder span {
  display: block;
  max-width: 260px;
}

/* ==========================================
   CARDS / GRIDS
========================================== */

.services-grid,
.blog-grid,
.gallery-grid,
.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-grid,
.blog-grid {
  gap: 24px;
}

.gallery-grid {
  gap: 18px;
}

.testimonials-track {
  gap: 22px;
}

.service-card,
.blog-card,
.testimonial-card,
.why-card {
  min-width: 0;
  background: var(--mechanic-white);
  border: 1px solid var(--mechanic-border);
  border-radius: var(--mechanic-radius);
  box-shadow: 0 14px 35px rgba(31, 36, 38, 0.06);
}

.service-card,
.testimonial-card {
  padding: clamp(24px, 3vw, 30px);
}

.service-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(31, 36, 38, 0.12);
}

.service-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 18px;
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
}

.service-card__title,
.why-card h3 {
  margin: 0 0 10px;
  color: var(--mechanic-navy);
}

.service-card__title {
  font-size: 1.25rem;
}

.service-card__desc,
.why-card p,
.testimonial-card__text,
.blog-card__excerpt {
  color: var(--mechanic-muted);
  line-height: 1.65;
}

.service-card__desc {
  margin-bottom: 18px;
}

.service-card__link,
.blog-card__readmore {
  color: var(--mechanic-navy);
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-card__link:hover,
.blog-card__readmore:hover {
  color: var(--mechanic-muted);
}

/* ==========================================
   WHY / STATS / AREAS
========================================== */

.why-reasons {
  display: grid;
  gap: 18px;
}

.why-card {
  display: flex;
  gap: 18px;
  padding: clamp(22px, 3vw, 26px);
}

.why-card p {
  margin: 0;
}

.stats-section {
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
  padding: clamp(46px, 6vw, 64px) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  text-align: center;
  gap: 20px;
}

.stat-number,
.stat-suffix {
  color: var(--mechanic-white);
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1;
  font-weight: 950;
}

.stat-label {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 850;
}

.stat-divider {
  width: 1px;
  height: 72px;
  background: rgba(255, 255, 255, 0.28);
}

.areas-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.area-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid var(--mechanic-border);
  border-radius: 14px;
  background: var(--mechanic-white);
  color: var(--mechanic-navy);
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(31, 36, 38, 0.05);
}

.area-chip svg {
  color: var(--mechanic-navy);
  flex: 0 0 auto;
}

/* ==========================================
   GALLERY / TESTIMONIALS / BLOG
========================================== */

.gallery-item {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border-radius: var(--mechanic-radius);
  background: #e5e8e9;
}

.gallery-item img {
  min-height: 240px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.testimonials-slider {
  overflow: visible;
}

.testimonial-card__stars {
  margin-bottom: 14px;
}

.testimonial-card__text {
  line-height: 1.75;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
  font-weight: 950;
  flex: 0 0 auto;
}

.blog-card {
  padding: 0;
  overflow: hidden;
}

.blog-card__image-link {
  display: block;
}

.blog-card__image-link img,
.blog-card__no-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #e5e8e9;
  display: grid;
  place-items: center;
}

.blog-card__body {
  padding: 24px;
}

.blog-card__title {
  margin: 8px 0 10px;
  font-size: 1.2rem;
  line-height: 1.25;
}

.blog-card__title a {
  color: var(--mechanic-navy);
  text-decoration: none;
}

/* ==========================================
   HEADER ADJUSTMENT
========================================== */

#masthead {
  margin-top: -10px;
}

/* Same full-width header container on every page as on the homepage,
   so the logo and menu sit in the same place site-wide. */
#masthead .site-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#masthead .site-header-row-container-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

#masthead .site-branding,
#masthead .header-navigation,
#masthead .main-navigation {
  margin-top: -20px !important;
}

#masthead .site-branding {
  margin-bottom: 0 !important;
}

/* ==========================================
   FOOTER
========================================== */

.custom-site-footer {
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
  padding: 24px;
}

.footer-gallery,
.custom-footer__inner,
.custom-footer__bottom {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.footer-gallery {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
  justify-items: center;
}

.footer-gallery img {
  width: 100%;
  max-width: 180px;
  height: 100px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 0;
  transition: transform 0.25s ease;
}

.footer-gallery img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.custom-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
}

.custom-footer__col h3,
.custom-footer__col h4 {
  color: var(--mechanic-white);
  margin: 0 0 16px;
}

.custom-footer__col p,
.custom-footer__col a,
.custom-footer__bottom p,
.custom-footer__bottom a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  line-height: 1.6;
}

.custom-footer__col p,
.custom-footer__col a {
  display: block;
  margin: 0 0 9px;
}

.custom-footer__col a:hover,
.custom-footer__bottom a:hover {
  color: var(--mechanic-white);
}

.custom-footer__bottom {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.custom-footer__bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
}

.custom-footer__bottom nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-contact-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px !important;
}

.footer-contact-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--mechanic-white);
}

.footer-location {
  cursor: pointer;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {
  .mechanic-home .container {
    width: min(100% - 36px, 960px);
  }

  .hero__inner,
  .quote-section__inner,
  .why-inner {
    grid-template-columns: 1fr;
  }

  .hero__panel {
    max-width: 680px;
  }

  .why-image {
    max-width: 760px;
    width: 100%;
  }

  .services-grid,
  .gallery-grid,
  .testimonials-track,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .footer-gallery,
  .custom-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-gallery img {
    height: 180px;
  }

  .custom-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .mechanic-home .container {
    width: min(100% - 28px, 560px);
  }

  .section {
    padding: 62px 0;
  }

  .section-header {
    margin-bottom: 32px;
  }

  .section-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .section-label::before,
  .text-center .section-label::after {
    width: 20px;
  }

  .section-header h2,
  .quote-section h2 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .hero {
    min-height: auto;
    padding: 74px 0 58px;
  }

  .hero__heading {
    font-size: clamp(2.65rem, 13vw, 4rem);
    letter-spacing: -0.06em;
  }

  .hero__sub {
    font-size: 1.02rem;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .hero__panel-card,
  .contact-card {
    border-radius: 22px;
  }

  .form-row,
  .services-grid,
  .gallery-grid,
  .testimonials-track,
  .blog-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    gap: 28px;
  }

  .stat-divider {
    display: none;
  }

  .area-chip {
    width: 100%;
    justify-content: center;
  }

  .why-image__frame,
  .why-image__frame img,
  .img-placeholder {
    min-height: 320px;
  }

  .gallery-item,
  .gallery-item img {
    min-height: 220px;
  }
}

@media (max-width: 600px) {
  .footer-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 18px;
    text-align: center;
  }

  .footer-gallery img {
    max-width: 140px;
    height: 80px;
  }

  .custom-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .custom-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .mechanic-home .container {
    width: min(100% - 24px, 100%);
  }

  .footer-gallery {
    grid-template-columns: repeat(2, 1fr); /* four logos: two rows of two */
  }

  .footer-gallery img {
    max-width: 130px;
    height: 72px;
  }

  .hero {
    padding: 64px 0 52px;
  }

  .hero__heading {
    font-size: clamp(2.35rem, 14vw, 3.25rem);
  }

  .hero__eyebrow {
    font-size: 0.7rem;
    padding: 8px 12px;
  }

  .btn,
  .btn--lg {
    width: 100%;
    padding: 14px 18px;
  }

  .contact-card,
  .service-card,
  .testimonial-card,
  .why-card,
  .hero__panel-card {
    padding: 22px;
  }

  .why-card {
    flex-direction: column;
  }

  .blog-card__body {
    padding: 22px;
  }
}

.custom-footer__services {
  max-height: none;
}

.custom-footer__services a {
  line-height: 1.35;
}

.custom-footer__services h4 a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================
   FOOTER LOCATION - MAP APP CHOICE
========================================== */

.footer-map-choice summary {
  list-style: none;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.footer-map-choice summary::-webkit-details-marker {
  display: none;
}

.footer-map-choice summary:hover,
.footer-map-choice[open] summary {
  color: var(--mechanic-white);
}

.footer-map-choice__options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px 30px;
}

/* Compact version of the outline button (fits under the address). */
.custom-footer__col a.footer-map-choice__link {
  display: inline-block;
  margin: 0;
  padding: 9px 16px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  color: var(--mechanic-white);
  font-size: 0.9em;
  font-weight: 850;
  line-height: 1.2;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.custom-footer__col a.footer-map-choice__link:hover,
.custom-footer__col a.footer-map-choice__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mechanic-white);
  color: var(--mechanic-white);
  transform: translateY(-2px);
}

/* ==========================================
   GOOGLE REVIEWS
========================================== */

.testimonial-card {
  position: relative;
}

.testimonial-card__google {
  position: absolute;
  top: clamp(20px, 3vw, 26px);
  right: clamp(20px, 3vw, 26px);
  display: inline-flex;
  line-height: 0;
}

/* Cards: shorter excerpts (the Google "G" links to the full review),
   author pinned to the bottom so cards line up. */
.testimonials-section .testimonial-card {
  display: flex;
  flex-direction: column;
}

.testimonial-card .testimonial-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonials-section .testimonial-card__author {
  margin-top: auto;
  padding-top: 18px;
}

.testimonial-card__time {
  display: block;
  font-size: 0.85em;
  color: var(--mechanic-muted);
}

/* Layout: rating tile + up to 5 reviews fill a 3 x 2 grid. Flex-wrap keeps
   rows centred if Google returns fewer reviews. */
.testimonials-section .testimonials-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.testimonials-section .testimonials-track > .testimonial-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
}

.testimonials-section .testimonials-track:focus-visible {
  outline: 2px solid var(--mechanic-navy);
  outline-offset: 6px;
  border-radius: var(--mechanic-radius);
}

/* Rating summary tile */
.testimonial-summary {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--mechanic-navy);
  border-color: var(--mechanic-navy);
  color: var(--mechanic-white);
}

.testimonial-summary__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  font-weight: 700;
}

.testimonial-summary__source svg {
  padding: 3px;
  border-radius: 999px;
  background: var(--mechanic-white);
  box-sizing: content-box;
}

.testimonials-section .testimonial-summary__score {
  margin: 18px 0 4px;
  color: var(--mechanic-white);
  font-size: clamp(3.2rem, 6vw, 4.2rem);
  font-weight: 950;
  line-height: 1;
}

.testimonial-summary__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  color: #fbbc05;
}

.testimonials-section .testimonial-summary__count {
  margin: 10px 0 22px;
  color: rgba(255, 255, 255, 0.78);
}

.testimonial-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 260px;
}

.testimonial-summary__actions .btn {
  width: 100%;
}

@media (max-width: 1100px) {
  .testimonials-section .testimonials-track > .testimonial-card {
    flex-basis: calc((100% - 22px) / 2);
  }
}

/* Phones: one swipeable row instead of a long stack; the next card peeks in. */
@media (max-width: 720px) {
  .testimonials-section .testimonials-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    margin-inline: -18px;
    padding: 4px 18px 18px;
    gap: 14px;
    scrollbar-width: thin;
  }

  .testimonials-section .testimonials-track > .testimonial-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
}

/* ==========================================
   NAVIGATION HOVER / FOCUS STATES
   Kadence's default hover colours are almost
   identical to the resting colours, so hovering
   or tabbing through the menu gave no visible
   feedback. These make it obvious, for mouse
   and keyboard users alike.
========================================== */

/* Top-level items: underline on hover/focus, and keep the parent
   underlined while its dropdown is open. */
#masthead .primary-menu-container > ul > li.menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

#masthead .primary-menu-container > ul > li.menu-item > a:hover,
#masthead .primary-menu-container > ul > li.menu-item > a:focus-visible,
#masthead .primary-menu-container > ul > li.menu-item-has-children:hover > a,
#masthead .primary-menu-container > ul > li.menu-item-has-children:focus-within > a {
  color: #ffffff;
  text-decoration-color: currentColor;
}

/* "You are here" marker for the current page or section. */
#masthead .primary-menu-container > ul > li.current-menu-item > a,
#masthead .primary-menu-container > ul > li.current-menu-ancestor > a {
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* Dropdown items: dark highlight with white text. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
  transition: background-color 0.15s ease, color 0.15s ease;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible,
#masthead .header-navigation .header-menu-container ul ul li.menu-item-has-children:hover > a,
#masthead .header-navigation .header-menu-container ul ul li.menu-item-has-children:focus-within > a {
  background-color: #1f2426;
  color: #ffffff;
}

#masthead .header-navigation .header-menu-container ul ul li.current-menu-item > a {
  background-color: #f1f3f3;
  font-weight: 700;
}

#masthead .header-navigation .header-menu-container ul ul li.current-menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.current-menu-item > a:focus-visible {
  background-color: #1f2426;
  color: #ffffff;
}

/* Visible keyboard focus ring everywhere in the header and mobile menu. */
#masthead a:focus-visible,
#masthead button:focus-visible,
#mobile-drawer a:focus-visible,
#mobile-drawer button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Mobile menu: subtle highlight on tap/hover. */
#mobile-drawer .mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li > a:focus-visible,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap:hover > a {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* ==========================================
   HOMEPAGE: HERO RATING, SHOP HOURS, ICONS, AREAS
========================================== */

/* Google rating under the hero buttons (light text on the dark hero) */
.hero .rating-badge {
  justify-content: flex-start;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.9);
}

.hero .rating-badge strong {
  color: #ffffff;
}

.hero .rating-badge__stars {
  color: #fbbc05;
}

/* Shop hours card in the hero */
.hero-hours__list {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
  color: var(--mechanic-ink);
}

.hero-hours__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
}

.hero-hours__list li span {
  color: var(--mechanic-muted);
  font-weight: 600;
}

/* "Open now" / "Closed" badge (filled in by open-status.js) */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
}

.open-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.open-status.is-open {
  background: #e3f4e8;
  color: #1e6b35;
}

.open-status.is-closed {
  background: #f1f3f3;
  color: #5f6a6d;
}

.open-status[hidden] {
  display: none;
}

/* Line icons in the About / Why cards (replace the emojis) */
.why-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
}

.why-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.why-actions__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mechanic-navy);
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.why-actions__link:hover svg,
.why-actions__link:focus-visible svg {
  transform: translateX(3px);
}

.why-actions__link svg {
  transition: transform 0.2s ease;
}

/* Service area names are now links */
a.area-chip {
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.area-chip:hover,
a.area-chip:focus-visible {
  border-color: var(--mechanic-navy);
  box-shadow: 0 14px 28px rgba(31, 36, 38, 0.1);
  transform: translateY(-2px);
}

a.area-chip:focus,
a.area-chip:visited {
  color: var(--mechanic-navy);
}

/* Inside the hero card, override its generic span/strong styles */
.hero__panel-card .open-status {
  display: inline-flex;
  margin-bottom: 4px;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.hero__panel-card .open-status[hidden] {
  display: none;
}

.hero__panel-card .hero-hours__list li span {
  display: inline;
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================
   HELPFUL TIPS CARDS (homepage, listing, related)
========================================== */

.tip-card .blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-card__tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f2;
  color: var(--mechanic-navy);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tip-card .blog-card__title {
  margin: 0;
}

.tip-card .blog-card__title a {
  color: var(--mechanic-navy);
  text-decoration: none;
}

.tip-card .blog-card__title a:hover,
.tip-card .blog-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tip-card .blog-card__excerpt {
  margin: 0;
  color: #5f6a6d;
}

.tip-card__meta {
  margin: 0;
  color: #5f6a6d;
  font-size: 0.85rem;
  font-weight: 700;
}

.tip-card__meta span {
  margin: 0 6px;
}

.tip-card .blog-card__readmore {
  margin-top: auto;
}

.tip-card .blog-card__image-link img {
  transition: transform 0.3s ease;
}

.tip-card:hover .blog-card__image-link img {
  transform: scale(1.03);
}

.tip-card .blog-card__image-link {
  overflow: hidden;
}

/* ==========================================
   HOMEPAGE HOURS CARD: TAP FOR DIRECTIONS
   Same Google / Apple Maps choice as the Contact page.
   Selectors start with .hero__panel-card to beat the card's
   generic span styles (uppercase labels).
========================================== */

.hero__panel-card .hero-map-choice {
  margin-top: 4px;
  border: 1px solid var(--mechanic-border);
  border-radius: 16px;
  background: #f4f5f5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero__panel-card .hero-map-choice:hover,
.hero__panel-card .hero-map-choice[open] {
  border-color: var(--mechanic-navy);
  box-shadow: 0 10px 22px rgba(31, 36, 38, 0.08);
}

.hero__panel-card .hero-map-choice summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: var(--mechanic-navy);
  cursor: pointer;
  list-style: none;
}

.hero__panel-card .hero-map-choice summary::-webkit-details-marker {
  display: none;
}

.hero__panel-card .hero-map-choice summary svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.hero__panel-card .hero-map-choice summary:focus-visible {
  outline: 2px solid var(--mechanic-navy);
  outline-offset: 2px;
  border-radius: 14px;
}

.hero__panel-card .hero-map-choice__text,
.hero__panel-card .hero-map-choice__address,
.hero__panel-card .hero-map-choice__hint {
  display: block;
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.hero__panel-card .hero-map-choice__address {
  color: var(--mechanic-ink);
  font-weight: 700;
  line-height: 1.4;
}

.hero__panel-card .hero-map-choice__hint {
  margin-top: 2px;
  color: var(--mechanic-navy);
  font-size: 0.85rem;
  font-weight: 850;
}

.hero__panel-card .hero-map-choice__hint::after {
  content: " \25BE";
}

.hero__panel-card .hero-map-choice[open] .hero-map-choice__hint::after {
  content: " \25B4";
}

.hero-map-choice__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}

.hero-map-choice__options a,
.hero-map-choice__options a:visited,
.hero-map-choice__options a:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  border: 2px solid var(--mechanic-navy);
  border-radius: 14px;
  background: var(--mechanic-navy);
  color: var(--mechanic-white);
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-map-choice__options a:hover,
.hero-map-choice__options a:focus-visible {
  background: #3a4245;
  border-color: #3a4245;
  color: var(--mechanic-white);
  transform: translateY(-2px);
}

/* Text links that act as buttons ("Read tip", "Learn about our approach"): a full 44px to tap on a phone. */
.blog-card__readmore,
.why-actions__link {
  min-height: 44px;
}

/* The header menu: type and spacing scale so its items stay on one row beside the logo, and
   narrower laptops get the phone menu (Kadence switches at 1024px; eight items don't fit that small). */
@media (min-width: 1260px) {
  #primary-menu > li > a {
    font-size: clamp(14px, 1.22vw, 17px) !important;
    padding-left: clamp(6px, 0.62vw, 13px) !important;
    padding-right: clamp(6px, 0.62vw, 13px) !important;
    white-space: nowrap;
  }
}

@media (min-width: 1025px) and (max-width: 1259px) {
  #main-header {
    display: none !important;
  }

  #mobile-header {
    display: block !important;
  }
}