/* =========================================
   MHA-AUTO		HERO
========================================= */

/* =========================================
   MHA-AUTO HERO
========================================= */


.row-1 .hero-copy {
   display: grid;
   align-content: center;
   gap: 1.25rem;
   background: var(--gradient-4);
}

.row-1 .hero-copy p {
   margin: 0;
}

.row-1 .hero-copy p:first-child {
   font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--shade-2);
}

.row-1 .hero-copy h1 {
   margin: 0;
}

.row-1 .hero-image-card {
   padding: 0;
   overflow: hidden;
}

.row-1 .hero-image-card .image-wrap {
   height: 100%;
   min-height: 420px;
   margin: 0;
   border-radius: var(--radius-xl);
}

.row-1 .hero-image-card .image-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: var(--radius-xl);
   
     border: 5px solid var(--light-1);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

/* =========================================
   SHARED
========================================= */

.row-links {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     gap: 0.9rem;
     justify-content: start;
     margin: 0;
}

.row-card {
     background: var(--light-1);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
     padding: 1.75rem;
}

.image-wrap {
     display: grid;
     place-items: center;
     overflow: hidden;
}

.image-wrap img {
     display: block;
     width: 100%;
     height: auto;
}

/* =========================================
   ROW 1
========================================= */


/* =========================================
   ROW 2
========================================= */

.row-2 article {
   display: grid;
   gap: 0.75rem;
   align-content: start;
}

.row-2 .owner-card {
   text-align: center;
}

.row-2 .owner-card p {
   margin: 0;
}

.row-2 .owner-photo {
   margin: 0 auto 0.5rem;
}

.row-2 .owner-photo img {
   width: 125px;
   height: 125px;
   object-fit: cover;
   border-radius: 50%;
   border: 5px solid var(--light-1);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.row-2 .owner-title {
   font-weight: 700;
   color: var(--color-2);
}

.row-2 .why-card {
   text-align: left;
   align-content: center;
}

.row-2 .why-kicker {
   margin: 0;
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--color-2);
}

.row-2 .why-card h2 {
   margin: 0;
}

.row-2 .why-list {
   display: grid;
   gap: 0.65rem;
}

.row-2 .why-list p {
   margin: 0;
   display: grid;
   grid-template-columns: 1.75rem 1fr;
   gap: 0.65rem;
   align-items: start;
}

.row-2 .why-list i {
   color: var(--accent-1);
   font-size: 1.15rem;
   line-height: 1.5;
}

/* =========================================
   ROW 3
========================================= */


/* =========================================
   ROW 4
========================================= */

.row-4 {
     background: var(--gradient-5);
     text-align: center;
     margin-bottom: 1.5rem;
}

.row-4 h2,
.row-4 p {
     color: var(--light-1);
}

.row-4 .row-links {
     justify-content: center;
     gap: 1rem;
     margin-top: 1rem;
}

/* .row-4 .row-links {
     justify-content: center;
     margin-top: 1rem;
} */

/* =========================================
   TABLET
========================================= */

@media (max-width: 960px) {

     .row-2 article:nth-child(1),
     .row-2 article:nth-child(2),
     .row-2 article:nth-child(3),
     .row-3 article {
          grid-column: 1 / span 12;
     }

     .row-2 .image-wrap img {
          height: 210px;
     }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {
 
    .row-links {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

     .row-links .btn {
          width: 100%;
          text-align: center;
     }

     .row-1 .image-wrap img {
          width: 130px;
          height: 130px;
     }
}/* =========================
   BUTTONS  (Grid-based, no flex)
========================= */

.btn-primary {
     background: var(--accent-2);
     color: var(--color-1);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.btn-primary:hover {
     color: var(--shade-4);
     transform: translateY(-1px);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.23);
}

.btn-outline {
     background: transparent;
     color: var(--color-1);
     border-color: var(--color-1);
}

.btn-outline:hover {
     background: var(--shade-6);
}

.home-cta-row {
     background: transparent;
     color: var(--light-1);
     border-color: var(--light-1);
}

.home-cta-row:hover {
     background: var(--color-2);
}.btn-pg1-1 {
     background: var(--accent-2);
     color: var(--color-1);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.btn-pg1-1:hover {
     color: var(--shade-4);
     transform: translateY(-1px);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.23);
}

.btn-pg1-2 {
     background: transparent;
     color: var(--color-1);
     border-color: var(--color-1);
}

.btn-pg1-2:hover {
     background: var(--shade-6);
}

.btn-pg1-3 {
     background: transparent;
     color: var(--light-1);
     border-color: var(--light-1);
}

.btn-pg1-3:hover {
     background: var(--color-2);
}.vehicle-card {
	overflow: hidden;
}

.vehicle-photo {
	width: 100%;
	height: auto;
	display: block;
}

.vehicle-body {
	padding: 1rem;
}

.vehicle-body h3 {
	margin-bottom: .5rem;
}

.price {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--color-1);
}

.specs {
	font-size: .9rem;
	color: #555;
}