.why-choose-garage {
  
  background: var(--cbs-ink, #15101b);
  color: var(--text-primary, #ffffff);
  
  padding: 0;
}


.why-choose-garage__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  
  max-width: none;
  margin: 0;
}

@media (min-width: 768px) {
  .why-choose-garage__split {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}


.why-choose-garage__media {
  position: relative;
  display: block;
  margin: 0;
  
  aspect-ratio: 16 / 9;
  overflow: hidden;
  
  border-radius: 0;
  background: var(--cbs-ink-soft, #201728);
}

@media (min-width: 768px) {
  .why-choose-garage__media {
    
    aspect-ratio: auto;
    height: 100%;
    min-height: 28rem;
  }
}

.why-choose-garage__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.why-choose-garage__img,
.why-choose-garage__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  background: var(--cbs-ink-soft, #201728);
}


.why-choose-garage__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  background: var(--cbs-ink, #15101b);
  
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
  .why-choose-garage__copy {
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  }
}


.why-choose-garage__head {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  
  max-width: 32rem;
}

.why-choose-garage__title {
  
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  
  color: var(--text-primary, #ffffff);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.why-choose-garage__standfirst {
  font-size: 1rem;
  line-height: 1.6;
  
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.88));
  margin: 0;
  max-width: 30rem;
}


.why-choose-garage__ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  
  border-left: 0.1875rem solid var(--cbs-purple, #6f3a91);
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
}

.why-choose-garage__credential {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.75rem, 2vw, 1rem);
  align-items: baseline;
  
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--section-divider-line, rgba(255, 255, 255, 0.12));
}

.why-choose-garage__credential:last-child {
  border-bottom: 0;
  
  padding-bottom: 0;
}

.why-choose-garage__credential-index {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  
  color: var(--cbs-lavender, #c6a3d9);
  
  align-self: baseline;
  line-height: 1;
}

.why-choose-garage__credential-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.why-choose-garage__credential-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  
  color: var(--text-primary, #ffffff);
  margin: 0;
  letter-spacing: 0;
}

.why-choose-garage__credential-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.88));
  margin: 0;
  max-width: 32rem;
}


.why-choose-garage a:focus-visible,
.why-choose-garage button:focus-visible {
  outline: 2px solid var(--cbs-lavender, #c6a3d9);
  outline-offset: 2px;
  border-radius: 0.125rem;
}


@media (prefers-reduced-motion: reduce) {
  .why-choose-garage,
  .why-choose-garage * {
    transition: none !important;
    animation: none !important;
  }
}

.why-choose-garage__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1ebf7;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.why-choose-garage__more:hover,
.why-choose-garage__more:focus-visible {
  border-color: #c6a3d9;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.why-choose-garage__more-icon { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .why-choose-garage__more { transition: none; }
}


.why-choose-garage .why-choose-garage__more {
  display: inline-flex;
  width: fit-content;
  align-self: flex-start;
}



.why-choose-garage:not(:has(.why-choose-garage__media)) {
  
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.why-choose-garage:not(:has(.why-choose-garage__media)) .why-choose-garage__split {
  grid-template-columns: 1fr;
  max-width: 75rem;                 
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 768px) {
  
  .why-choose-garage:not(:has(.why-choose-garage__media)) .why-choose-garage__ladder {
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    
    border-left: 0;
    padding-left: 0;
  }

  .why-choose-garage:not(:has(.why-choose-garage__media)) .why-choose-garage__credential {
    break-inside: avoid;
    border-left: 0.1875rem solid var(--cbs-purple, #6f3a91);
    padding-left: clamp(1rem, 2.5vw, 1.5rem);
  }
}


.why-choose-garage:not(:has(.why-choose-garage__media)) .why-choose-garage__copy {
  padding-block: 0;
}


html.cbs-motion:not(.cbs-motion-reduce) .why-choose-garage__credential:not(.cbs-in-view) {
  opacity: 0;
  transform: translateY(2.5rem);
}
html.cbs-motion .why-choose-garage__credential {
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.cbs-motion .why-choose-garage__credential:nth-child(2) { transition-delay: 120ms; }
html.cbs-motion .why-choose-garage__credential:nth-child(3) { transition-delay: 240ms; }
html.cbs-motion .why-choose-garage__credential:nth-child(n+4) { transition-delay: 360ms; }
html.cbs-motion:not(.cbs-motion-reduce) .why-choose-garage__title:not(.cbs-in-view),
html.cbs-motion:not(.cbs-motion-reduce) .why-choose-garage__standfirst:not(.cbs-in-view) {
  opacity: 0;
  transform: translateY(2.5rem);
}
html.cbs-motion .why-choose-garage__title,
html.cbs-motion .why-choose-garage__standfirst {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  
  .why-choose-garage__credential,
  .why-choose-garage__title,
  .why-choose-garage__standfirst {
    animation: none;
    opacity: 1;
    transform: none;
  }
}



.why-choose-garage__credential {
  
  transition: background-color 180ms ease, border-left-color 180ms ease;
}

.why-choose-garage__credential:hover {
  background-color: rgba(198, 163, 217, 0.06);   
  border-left-color: var(--cbs-lavender, #c6a3d9);
}

.why-choose-garage__credential:hover .why-choose-garage__credential-index {
  color: var(--cbs-lavender, #c6a3d9);
}

@media (prefers-reduced-motion: no-preference) {
  
  .why-choose-garage__credential {
    transition: background-color 180ms ease, border-left-color 180ms ease,
                transform 180ms ease;
  }
  .why-choose-garage__credential:hover {
    transform: translateX(0.25rem);
  }
}


html.cbs-motion:not(.cbs-motion-reduce) .why-choose-garage:not(.cbs-in-view) {
  transform: translateY(3.5rem);
}
html.cbs-motion .why-choose-garage {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@supports (animation-timeline: view()) {
  @media (min-width: 768px) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes cbs-why-choose-garage-seam-out {
        from { opacity: 1; }
        to   { opacity: 0.35; }
      }
      .why-choose-garage {
        animation: cbs-why-choose-garage-seam-out linear both;
        animation-timeline: view();
        animation-range: exit 40% exit 100%;
      }
    }
  }
}