/* =========================================================
REXUS88 GARAGE
MOTO GARAGE DARK — GLOBAL STYLESHEET
========================================================= */

/* =========================================================
01. ROOT
========================================================= */

:root {


--bg: #080808;
--bg-soft: #101010;
--bg-card: #121212;
--bg-card-2: #171717;

--white: #ffffff;
--text: #e7e7e7;
--muted: #929292;
--muted-light: #b6b6b6;

--red: #e10600;
--red-bright: #ff241d;
--red-dark: #a90400;

--border: rgba(255,255,255,.10);
--border-light: rgba(255,255,255,.16);

--shadow: 0 25px 70px rgba(0,0,0,.45);

--container: 1240px;

--radius-sm: 4px;
--radius: 10px;
--radius-lg: 18px;

--transition: .3s ease;


}

/* =========================================================
02. RESET
========================================================= */

*,
*::before,
*::after {


margin: 0;
padding: 0;

box-sizing: border-box;


}

html {


scroll-behavior: smooth;


}

body {


background: var(--bg);

color: var(--text);

font-family: "Inter",
    Arial,
    Helvetica,
    sans-serif;

font-size: 15px;

line-height: 1.7;

overflow-x: hidden;


}

body::selection {


background: var(--red);

color: var(--white);


}

img {


display: block;

width: 100%;

max-width: 100%;


}

a {


color: inherit;

text-decoration: none;


}

button,
input,
select,
textarea {


font: inherit;


}

button {


border: 0;


}

ul,
ol {


list-style: none;


}

/* =========================================================
03. GLOBAL CONTAINER
========================================================= */

.container {


width: min(
    calc(100% - 48px),
    var(--container)
);

margin-inline: auto;


}

/* =========================================================
04. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {


font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

color: var(--white);

line-height: .95;

text-transform: uppercase;

letter-spacing: -.02em;


}

h1 {


font-size: clamp(
    4rem,
    8vw,
    8rem
);


}

h2 {


font-size: clamp(
    3rem,
    5vw,
    5.8rem
);


}

h3 {


font-size: 2rem;


}

p {


color: var(--muted-light);


}

.eyebrow {


display: inline-flex;

align-items: center;

gap: 10px;

color: var(--red-bright);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 13px;

font-weight: 800;

letter-spacing: .18em;

text-transform: uppercase;


}

.eyebrow::before {


content: "";

display: inline-block;

width: 28px;

height: 2px;

background: var(--red);


}

.section-space {


padding-block: 110px;


}

.section-heading {


display: flex;

align-items: end;

justify-content: space-between;

gap: 30px;

margin-bottom: 55px;


}

.section-heading.centered {


display: block;

text-align: center;


}

.section-heading h2 {


margin-top: 14px;


}

.section-heading h2 span,
.page-hero h1 span,
.contact-info h2 span,
.form-heading h2 span,
.garage-location-content h2 span,
.contact-final-inner h2 span,
.faq-intro-content h2 span {


color: var(--red);


}

/* =========================================================
05. BUTTONS
========================================================= */

.btn {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 18px;

min-height: 54px;

padding: 0 28px;

border: 1px solid transparent;

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 16px;

font-weight: 800;

letter-spacing: .08em;

text-transform: uppercase;

cursor: pointer;

transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    color var(--transition);


}

.btn span {


font-size: 20px;

transition:
    transform var(--transition);


}

.btn:hover span {


transform: translateX(5px);


}

.btn:hover {


transform: translateY(-2px);


}

.btn-primary {


background: var(--red);

color: var(--white);


}

.btn-primary:hover {


background: var(--red-bright);


}

.btn-outline {


border-color: var(--border-light);

color: var(--white);

background: rgba(255,255,255,.02);


}

.btn-outline:hover {


border-color: var(--red);

color: var(--white);

background: rgba(225,6,0,.08);


}

.text-link {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 15px;

font-weight: 800;

letter-spacing: .08em;

text-transform: uppercase;

transition: color var(--transition);


}

.text-link:hover {


color: var(--red);


}

/* =========================================================
06. HEADER
========================================================= */

.site-header {


position: absolute;

top: 0;
left: 0;

width: 100%;

z-index: 100;

border-bottom: 1px solid
    rgba(255,255,255,.08);

background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.8),
        transparent
    );

transition:
    background var(--transition),
    backdrop-filter var(--transition);


}

.site-header.scrolled {


position: fixed;

background:
    rgba(7,7,7,.9);

backdrop-filter:
    blur(16px);


}

.header-inner {


display: flex;

align-items: center;

justify-content: space-between;

min-height: 84px;

gap: 30px;


}

/* LOGO */

.logo {


display: inline-flex;

align-items: center;

gap: 11px;

flex-shrink: 0;


}

.logo-mark {


display: grid;

place-items: center;

width: 43px;

height: 43px;

background: var(--red);

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 27px;

font-weight: 900;

font-style: italic;

transform: skew(-8deg);


}

.logo-text {


display: flex;

flex-direction: column;

line-height: 1;


}

.logo-text strong {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 26px;

font-weight: 900;

letter-spacing: -.02em;


}

.logo-text strong span {


color: var(--red);


}

.logo-text small {


margin-top: 4px;

color: var(--muted);

font-size: 7px;

font-weight: 700;

letter-spacing: .19em;


}

/* NAV */

.main-nav {


display: flex;

align-items: center;

gap: 30px;


}

.main-nav a {


position: relative;

color: #bdbdbd;

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 15px;

font-weight: 700;

letter-spacing: .08em;

text-transform: uppercase;

transition:
    color var(--transition);


}

.main-nav a::after {


content: "";

position: absolute;

left: 0;

bottom: -9px;

width: 0;

height: 2px;

background: var(--red);

transition:
    width var(--transition);


}

.main-nav a:hover,
.main-nav a.active {


color: var(--white);


}

.main-nav a:hover::after,
.main-nav a.active::after {


width: 100%;


}

.header-button {


display: inline-flex;

align-items: center;

gap: 12px;

padding: 12px 18px;

border: 1px solid
    rgba(255,255,255,.2);

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 13px;

font-weight: 800;

letter-spacing: .08em;

text-transform: uppercase;

transition:
    border-color var(--transition),
    background var(--transition);


}

.header-button span {


color: var(--red);

font-size: 18px;


}

.header-button:hover {


border-color: var(--red);

background:
    rgba(225,6,0,.08);


}

/* =========================================================
07. HERO
========================================================= */

.hero {


position: relative;

min-height: 900px;

display: flex;

align-items: center;

overflow: hidden;

background: var(--bg);


}

.hero-background,
.page-hero-background {


position: absolute;

inset: 0;


}

.hero-background img,
.page-hero-background img {


width: 100%;

height: 100%;

object-fit: cover;

object-position: center;


}

.hero-overlay,
.page-hero-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.72) 42%,
        rgba(0,0,0,.25) 100%
    );


}

.hero-overlay::after,
.page-hero-overlay::after {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        0deg,
        var(--bg) 0%,
        transparent 25%,
        transparent 75%,
        rgba(0,0,0,.4)
    );


}

.hero-content {


position: relative;

z-index: 2;

max-width: 850px;

padding-top: 100px;


}

.hero-content h1 {


margin: 22px 0 28px;

max-width: 850px;


}

.hero-content h1 span {


display: block;

color: var(--red);


}

.hero-content p {


max-width: 590px;

font-size: 17px;

line-height: 1.8;


}

.hero-buttons {


display: flex;

flex-wrap: wrap;

gap: 14px;

margin-top: 35px;


}

/* HERO DECORATION */

.hero-number {


position: absolute;

right: 5%;

bottom: 4%;

color: rgba(255,255,255,.04);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 18rem;

font-weight: 900;

line-height: .7;

user-select: none;


}

/* =========================================================
08. PAGE HERO
========================================================= */

.page-hero {


position: relative;

min-height: 570px;

display: flex;

align-items: end;

overflow: hidden;


}

.page-hero-content {


position: relative;

z-index: 2;

width: 100%;

padding-bottom: 80px;


}

.page-hero-content h1 {


max-width: 850px;

margin-top: 18px;


}

.page-hero-content p {


max-width: 620px;

margin-top: 25px;

font-size: 16px;


}

.breadcrumbs {


position: relative;

z-index: 5;

border-bottom: 1px solid var(--border);

background: #0b0b0b;


}

.breadcrumbs .container {


min-height: 58px;

display: flex;

align-items: center;


}

.breadcrumbs ol {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 10px;

color: var(--muted);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 13px;

font-weight: 700;

letter-spacing: .07em;

text-transform: uppercase;


}

.breadcrumbs li:not(:last-child)::after {


content: "/";

margin-left: 10px;

color: #555;


}

.breadcrumbs a:hover {


color: var(--red);


}

/* =========================================================
09. FEATURED / GENERAL CARDS
========================================================= */

.card-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 22px;


}

.card {


position: relative;

overflow: hidden;

background: var(--bg-card);

border: 1px solid var(--border);

transition:
    border-color var(--transition),
    transform var(--transition);


}

.card:hover {


transform: translateY(-6px);

border-color:
    rgba(225,6,0,.45);


}

/* =========================================================
10. PRODUCT / MOTORCYCLE CARDS
========================================================= */

.products-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 22px;


}

.product-card {


position: relative;

overflow: hidden;

background: var(--bg-card);

border: 1px solid var(--border);

transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);


}

.product-card:hover {


transform: translateY(-7px);

border-color:
    rgba(225,6,0,.55);

box-shadow:
    0 22px 60px
    rgba(0,0,0,.35);


}

.product-image {


position: relative;

aspect-ratio: 4 / 3;

overflow: hidden;

background: #0d0d0d;


}

.product-image img {


width: 100%;

height: 100%;

object-fit: cover;

transition:
    transform .7s ease;


}

.product-card:hover
.product-image img {


transform: scale(1.06);


}

.product-badge {


position: absolute;

top: 15px;

left: 15px;

z-index: 2;

padding: 7px 10px;

background: var(--red);

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 11px;

font-weight: 800;

letter-spacing: .08em;

text-transform: uppercase;


}

.product-info {


padding: 25px;


}

.product-category {


display: block;

margin-bottom: 7px;

color: var(--red);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 12px;

font-weight: 800;

letter-spacing: .15em;

text-transform: uppercase;


}

.product-info h3 {


margin-bottom: 10px;

font-size: 31px;


}

.product-info p {


font-size: 13px;

line-height: 1.7;


}

.product-meta {


display: flex;

justify-content: space-between;

align-items: center;

gap: 15px;

margin-top: 22px;

padding-top: 18px;

border-top: 1px solid var(--border);


}

.product-price {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 24px;

font-weight: 800;


}

.product-link {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 13px;

font-weight: 800;

letter-spacing: .07em;

text-transform: uppercase;


}

.product-link:hover {


color: var(--red);


}

/* =========================================================
11. FILTERS
========================================================= */

.product-filters {


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

margin-bottom: 35px;


}

.filter-list {


display: flex;

flex-wrap: wrap;

gap: 8px;


}

.filter-button {


padding: 9px 15px;

border: 1px solid var(--border);

background: transparent;

color: var(--muted);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 13px;

font-weight: 700;

letter-spacing: .06em;

text-transform: uppercase;

cursor: pointer;


}

.filter-button:hover,
.filter-button.active {


border-color: var(--red);

background:
    rgba(225,6,0,.08);

color: var(--white);


}

/* =========================================================
12. PRODUCT DETAIL
========================================================= */

.product-detail {


padding-block: 110px;


}

.product-detail-grid {


display: grid;

grid-template-columns:
    minmax(0, 1.2fr)
    minmax(360px, .8fr);

gap: 60px;

align-items: start;


}

.product-detail-gallery {


position: sticky;

top: 110px;


}

.product-detail-main-image {


aspect-ratio: 4 / 3;

overflow: hidden;

background: #111;

border: 1px solid var(--border);


}

.product-detail-main-image img {


width: 100%;

height: 100%;

object-fit: cover;


}

.product-detail-info .eyebrow {


margin-bottom: 17px;


}

.product-detail-info h1 {


font-size: clamp(
    4rem,
    6vw,
    7rem
);


}

.product-detail-info > p {


margin-top: 25px;

line-height: 1.9;


}

.detail-price {


margin-top: 30px;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 38px;

font-weight: 800;


}

.detail-actions {


display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 30px;


}

.spec-grid {


display: grid;

grid-template-columns:
    repeat(2, 1fr);

margin-top: 35px;

border-top: 1px solid var(--border);

border-left: 1px solid var(--border);


}

.spec-item {


padding: 20px;

border-right: 1px solid var(--border);

border-bottom: 1px solid var(--border);


}

.spec-item span {


display: block;

margin-bottom: 4px;

color: var(--muted);

font-size: 10px;

font-weight: 700;

letter-spacing: .12em;

text-transform: uppercase;


}

.spec-item strong {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 20px;


}

/* =========================================================
13. ABOUT
========================================================= */

.about-story-grid {


display: grid;

grid-template-columns:
    1fr 1fr;

gap: 70px;

align-items: center;


}

.about-image {


position: relative;


}

.about-image img {


aspect-ratio: 4 / 5;

object-fit: cover;


}

.about-image::after {


content: "";

position: absolute;

right: -18px;

bottom: -18px;

width: 70%;

height: 70%;

border: 1px solid var(--red);

z-index: -1;


}

.about-content h2 {


margin: 16px 0 25px;


}

.about-content p + p {


margin-top: 18px;


}

.about-stats {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 15px;

margin-top: 40px;


}

.about-stat {


padding: 24px;

border-top: 2px solid var(--red);

background: var(--bg-card);


}

.about-stat strong {


display: block;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 42px;

line-height: 1;


}

.about-stat span {


display: block;

margin-top: 7px;

color: var(--muted);

font-size: 11px;

font-weight: 700;

letter-spacing: .1em;

text-transform: uppercase;


}

/* =========================================================
14. REVIEWS
========================================================= */

.reviews-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 20px;


}

.review-card {


position: relative;

padding: 32px;

background: var(--bg-card);

border: 1px solid var(--border);


}

.review-card::before {


content: "“";

position: absolute;

top: 10px;

right: 20px;

color: rgba(225,6,0,.16);

font-family: Georgia, serif;

font-size: 90px;

line-height: 1;


}

.review-stars {


color: var(--red);

font-size: 13px;

letter-spacing: 4px;


}

.review-card blockquote {


position: relative;

z-index: 1;

margin: 22px 0 28px;

color: #ddd;

font-size: 15px;

line-height: 1.9;


}

.reviewer {


display: flex;

align-items: center;

gap: 13px;

padding-top: 20px;

border-top: 1px solid var(--border);


}

.reviewer-avatar {


display: grid;

place-items: center;

width: 43px;

height: 43px;

border-radius: 50%;

background: var(--red);

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-weight: 800;


}

.reviewer strong {


display: block;

color: var(--white);

font-size: 13px;


}

.reviewer span {


display: block;

color: var(--muted);

font-size: 11px;


}

/* =========================================================
15. FAQ
========================================================= */

.faq-intro-grid {


display: grid;

grid-template-columns:
    .9fr 1.1fr;

gap: 70px;

align-items: center;


}

.faq-intro-content h2 {


margin: 17px 0 25px;


}

.faq-intro-content p + p {


margin-top: 16px;


}

.faq-intro-content .btn {


margin-top: 30px;


}

.faq-intro-image {


position: relative;


}

.faq-intro-image img {


aspect-ratio: 4 / 3;

object-fit: cover;


}

.faq-image-label {


position: absolute;

left: 25px;

bottom: 25px;

display: flex;

align-items: center;

gap: 13px;

padding: 13px 16px;

background: rgba(0,0,0,.82);

border-left: 3px solid var(--red);


}

.faq-image-label strong {


color: var(--red);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 24px;


}

.faq-image-label span {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 10px;

font-weight: 700;

letter-spacing: .12em;


}

.faq-category {


display: grid;

grid-template-columns:
    280px 1fr;

gap: 50px;

padding-block: 50px;

border-top: 1px solid var(--border);


}

.faq-category:last-child {


border-bottom: 1px solid var(--border);


}

.faq-category-heading {


display: flex;

gap: 18px;


}

.faq-category-heading > span {


color: var(--red);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 17px;

font-weight: 800;


}

.faq-category-heading h2 {


margin-top: 10px;

font-size: 40px;


}

.faq-list {


border-top: 1px solid var(--border);


}

.faq-item {


border-bottom: 1px solid var(--border);


}

.faq-item summary {


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding: 23px 0;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 21px;

font-weight: 700;

cursor: pointer;

list-style: none;


}

.faq-item summary::-webkit-details-marker {


display: none;


}

.faq-item summary i {


display: grid;

place-items: center;

flex-shrink: 0;

width: 30px;

height: 30px;

border: 1px solid var(--border);

color: var(--red);

font-style: normal;

font-size: 18px;

transition:
    background var(--transition);


}

.faq-item[open] summary i {


background: var(--red);

color: var(--white);


}

.faq-answer {


padding:
    0 50px 25px 0;


}

.faq-answer p {


max-width: 750px;

font-size: 14px;

line-height: 1.9;


}

/* FAQ BANNER */

.faq-feature-banner {


position: relative;

min-height: 570px;

display: flex;

align-items: center;

overflow: hidden;


}

.faq-feature-image {


position: absolute;

inset: 0;


}

.faq-feature-image img {


width: 100%;

height: 100%;

object-fit: cover;


}

.faq-feature-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.93),
        rgba(0,0,0,.35)
    );


}

.faq-feature-content {


position: relative;

z-index: 2;


}

.faq-feature-content h2 {


max-width: 700px;

margin: 17px 0 25px;


}

.faq-feature-content h2 span {


display: block;

color: var(--red);


}

.faq-feature-content p {


max-width: 540px;


}

.faq-feature-content .btn {


margin-top: 30px;


}

.faq-links-grid {


display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 15px;


}

.faq-link-card {


min-height: 170px;

padding: 25px;

display: flex;

flex-direction: column;

justify-content: space-between;

border: 1px solid var(--border);

background: var(--bg-card);

transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);


}

.faq-link-card:hover {


transform: translateY(-5px);

border-color: var(--red);

background:
    rgba(225,6,0,.06);


}

.faq-link-card > span {


color: var(--red);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 12px;

font-weight: 800;


}

.faq-link-card strong {


color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 28px;

text-transform: uppercase;


}

.faq-link-card small {


color: var(--muted);

font-size: 11px;

font-weight: 700;

letter-spacing: .06em;

text-transform: uppercase;


}

/* =========================================================
16. CONTACT
========================================================= */

.contact-section {


background:
    linear-gradient(
        180deg,
        #080808,
        #0d0d0d
    );


}

.contact-grid {


display: grid;

grid-template-columns:
    .8fr 1.2fr;

gap: 80px;

align-items: start;


}

.contact-info h2 {


margin: 17px 0 25px;


}

.contact-intro {


max-width: 520px;

margin-bottom: 40px;


}

.contact-item {


display: flex;

gap: 17px;

padding-block: 20px;

border-top: 1px solid var(--border);


}

.contact-icon {


display: grid;

place-items: center;

flex-shrink: 0;

width: 40px;

height: 40px;

border: 1px solid var(--red);

color: var(--red);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 12px;

font-weight: 800;


}

.contact-item > div:last-child {


min-width: 0;


}

.contact-item span {


display: block;

margin-bottom: 3px;

color: var(--muted);

font-size: 9px;

font-weight: 800;

letter-spacing: .14em;


}

.contact-item strong,
.contact-item a {


display: block;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 21px;

font-weight: 700;


}

.contact-item a:hover {


color: var(--red);


}

.contact-item p {


margin-top: 2px;

font-size: 11px;


}

/* FORM */

.contact-form-wrapper {


padding: 45px;

border: 1px solid var(--border);

background: var(--bg-card);


}

.form-heading h2 {


margin-top: 15px;

font-size: clamp(
    3rem,
    5vw,
    5rem
);


}

.contact-form {


margin-top: 35px;


}

.form-row {


display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 17px;


}

.form-group {


margin-bottom: 20px;


}

.form-group label {


display: block;

margin-bottom: 8px;

color: #ccc;

font-size: 11px;

font-weight: 700;

letter-spacing: .08em;

text-transform: uppercase;


}

.form-group input,
.form-group select,
.form-group textarea {


width: 100%;

padding: 15px 16px;

border: 1px solid var(--border);

outline: none;

background: #0b0b0b;

color: var(--white);

border-radius: 0;

transition:
    border-color var(--transition),
    background var(--transition);


}

.form-group input::placeholder,
.form-group textarea::placeholder {


color: #555;


}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {


border-color: var(--red);

background: #101010;


}

.form-group select {


appearance: none;

cursor: pointer;


}

.form-group textarea {


resize: vertical;

min-height: 150px;


}

.form-submit {


display: flex;

align-items: center;

gap: 18px;

flex-wrap: wrap;

margin-top: 5px;


}

.form-submit small {


max-width: 300px;

color: #666;

font-size: 10px;

line-height: 1.5;


}

button:disabled {


opacity: .65;

cursor: not-allowed;


}

/* LOCATION */

.garage-location {


position: relative;

min-height: 650px;

display: flex;

align-items: center;

overflow: hidden;


}

.garage-location-image {


position: absolute;

inset: 0;


}

.garage-location-image img {


width: 100%;

height: 100%;

object-fit: cover;


}

.garage-location-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.94),
        rgba(0,0,0,.45)
    );


}

.garage-location-content {


position: relative;

z-index: 2;

max-width: 650px;


}

.garage-location-content h2 {


margin: 17px 0 25px;


}

.garage-location-content p {


max-width: 540px;


}

.location-meta {


display: flex;

flex-wrap: wrap;

gap: 45px;

margin: 35px 0;

padding-block: 25px;

border-block: 1px solid var(--border);


}

.location-meta span {


display: block;

color: var(--muted);

font-size: 9px;

font-weight: 800;

letter-spacing: .15em;


}

.location-meta strong {


display: block;

margin-top: 5px;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 19px;


}

.contact-faq {


background: #0a0a0a;


}

.contact-faq-grid {


display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 0 30px;

border-top: 1px solid var(--border);


}

.mini-faq {


border-bottom: 1px solid var(--border);


}

.mini-faq summary {


display: flex;

justify-content: space-between;

gap: 15px;

padding: 22px 0;

color: var(--white);

font-family:
    "Barlow Condensed",
    sans-serif;

font-size: 19px;

font-weight: 700;

cursor: pointer;

list-style: none;


}

.mini-faq summary::-webkit-details-marker {


display: none;


}

.mini-faq summary i {


color: var(--red);

font-style: normal;


}

.mini-faq p {


padding:
    0 35px 22px 0;

font-size: 13px;

line-height: 1.8;


}

/* FINAL CTA */

.contact-final-cta {


padding-block: 110px;

border-top: 1px solid var(--border);

background:
    radial-gradient(
        circle at center,
        rgba(225,6,0,.10),
        transparent 48%
    ),
    #090909;


}

.contact-final-inner {


max-width: 850px;

margin-inline: auto;

text-align: center;


}

.contact-final-inner h2 {


margin: 18px auto 25px;


}

.contact-final-inner h2 span {


display: block;


}

.contact-final-inner p {


max-width: 620px;

margin-inline: auto;


}

.cta-buttons {


display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 12px;

margin-top: 32px;


}

/* =========================================================
17. GENERIC IMAGE BANNER
========================================================= */

.image-banner {


position: relative;

min-height: 500px;

display: flex;

align-items: center;

overflow: hidden;


}

.image-banner img {


position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: cover;


}

.image-banner::after {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.9),
        rgba(0,0,0,.3)
    );


}

.image-banner-content {


position: relative;

z-index: 2;


}

/* =========================================================
18. FOOTER
========================================================= */

.site-footer {


background: #050505;

border-top: 1px solid var(--border);


}

.footer-main {


display: grid;

grid-template-columns:
    1.7fr
    1fr
    1fr
    1.1fr;

gap: 50px;

padding-block: 75px;


}

.footer-brand p {


max-width: 330px;

margin-top: 22px;

font-size: 12px;

line-height: 1.9;


}

.footer-column {


display: flex;

flex-direction: column;

align-items: flex-start;

gap: 11px;


}

.footer-column h3 {


margin-bottom: 8px;

color: var(--white);

font-size: 20px;


}

.footer-column a {


color: var(--muted);

font-size: 12px;

transition:
    color var(--transition);


}

.footer-column a:hover {


color: var(--red);


}

.footer-contact p {


font-size: 12px;

line-height: 1.8;


}

.footer-contact-link {


margin-top: 5px;

color: var(--white) !important;

font-family:
    "Barlow Condensed",
    sans-serif;

font-weight: 700;

text-transform: uppercase;

letter-spacing: .05em;


}

.footer-bottom {


min-height: 65px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

border-top: 1px solid var(--border);

color: #555;

font-size: 10px;


}

.footer-legal {


display: flex;

gap: 20px;


}

.footer-legal a:hover {


color: var(--white);


}

/* =========================================================
19. UTILITY
========================================================= */

.centered {


text-align: center;


}

.mt-20 {


margin-top: 20px;


}

.mt-30 {


margin-top: 30px;


}

.mt-50 {


margin-top: 50px;


}

.hidden {


display: none !important;


}

/* =========================================================
20. SCROLLBAR
========================================================= */

::-webkit-scrollbar {


width: 8px;


}

::-webkit-scrollbar-track {


background: #050505;


}

::-webkit-scrollbar-thumb {


background: #2a2a2a;


}

::-webkit-scrollbar-thumb:hover {


background: var(--red);


}

/* =========================================================
21. FOCUS
========================================================= */

:focus-visible {


outline: 2px solid var(--red);

outline-offset: 3px;


}

/* =========================================================
22. IMAGE LOADING
========================================================= */

img {


background: #101010;


}

/* =========================================================
23. RED ACCENT DETAILS
========================================================= */

::selection {


background: var(--red);

color: var(--white);


}

/* =========================================================
24. MOBILE BASE SAFETY
========================================================= */

@media (max-width: 1100px) {


.main-nav {

    gap: 18px;

}


.header-button {

    display: none;

}


.product-detail-grid {

    grid-template-columns:
        1fr;

}


.product-detail-gallery {

    position: static;

}


.footer-main {

    grid-template-columns:
        1.5fr 1fr 1fr;

}


.footer-contact {

    grid-column: 1 / -1;

}


}

/* =========================================================
25. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


html {

    scroll-behavior: auto;

}


*,
*::before,
*::after {

    transition-duration: .01ms !important;

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

}


}