/* =========================
COLOUR SYSTEM
========================= */

:root {

```
--black: #080808;
--dark: #111111;
--dark-card: #171717;

--gold: #d4af37;
--gold-light: #f1d477;

--white: #ffffff;

--text: #222222;
--muted: #707070;

--light: #f5f5f5;

--border: #dddddd;

--danger: #dc2626;
--success: #16a34a;
```

}

/* =========================
RESET
========================= */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

```
scroll-behavior: smooth;
```

}

body {

```
font-family:
    Arial,
    Helvetica,
    sans-serif;

color: var(--text);

background: var(--white);

line-height: 1.6;

overflow-x: hidden;
```

}

img {

```
display: block;

max-width: 100%;
```

}

a {

```
color: inherit;

text-decoration: none;
```

}

button,
input,
textarea {

```
font: inherit;
```

}

/* =========================
ACCESSIBILITY
========================= */

.skip-link {

```
position: fixed;

left: 15px;

top: -100px;

z-index: 9999;

background: var(--gold);

color: #111;

padding: 12px 18px;

border-radius: 5px;

font-weight: 800;
```

}

.skip-link:focus {

```
top: 15px;
```

}

:focus-visible {

```
outline:
    3px solid var(--gold);

outline-offset: 3px;
```

}

/* =========================
NAVIGATION
========================= */

.navbar {

```
position: sticky;

top: 0;

z-index: 1000;

width: 100%;

min-height: 78px;

padding: 15px 6%;

display: flex;

align-items: center;

justify-content: space-between;

background:
    rgba(8, 8, 8, 0.96);

border-bottom:
    1px solid
    rgba(212, 175, 55, 0.2);

box-shadow:
    0 4px 20px
    rgba(0, 0, 0, 0.2);
```

}

.logo {

```
display: flex;

flex-direction: column;

line-height: 1;
```

}

.logo span {

```
color: var(--gold);

font-size: 25px;

font-weight: 900;

letter-spacing: 3px;
```

}

.logo small {

```
color: white;

font-size: 9px;

letter-spacing: 4px;

margin-top: 5px;
```

}

.nav-links {

```
display: flex;

align-items: center;

gap: 28px;
```

}

.nav-links a {

```
color: #eeeeee;

font-size: 14px;

font-weight: 600;

position: relative;

transition:
    color 0.3s ease;
```

}

.nav-links a:not(.nav-call)::after {

```
content: "";

position: absolute;

left: 0;

bottom: -7px;

width: 0;

height: 2px;

background: var(--gold);

transition:
    width 0.3s ease;
```

}

.nav-links a:not(.nav-call):hover {

```
color: var(--gold);
```

}

.nav-links a:not(.nav-call):hover::after {

```
width: 100%;
```

}

.nav-call {

```
background: var(--gold);

color: #111111 !important;

padding: 11px 18px;

border-radius: 6px;

font-weight: 800 !important;

transition:
    transform 0.3s ease,
    background 0.3s ease;
```

}

.nav-call:hover {

```
background: var(--gold-light);

transform:
    translateY(-2px);
```

}

.menu-button {

```
display: none;

background: transparent;

color: white;

border: none;

font-size: 30px;

cursor: pointer;
```

}

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

.hero {

```
min-height: 760px;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

color: white;

padding: 120px 6%;

background-image:

    linear-gradient(
        rgba(0, 0, 0, 0.68),
        rgba(0, 0, 0, 0.72)
    ),

    url("images/car.jpg");

background-size: cover;

background-position: center;

background-attachment: fixed;
```

}

.hero-content {

```
max-width: 950px;

animation:
    heroFade 1s ease;
```

}

.eyebrow {

```
color: var(--gold);

font-size: 13px;

font-weight: 800;

letter-spacing: 3px;

margin-bottom: 14px;
```

}

.hero h1 {

```
font-size:
    clamp(42px, 7vw, 76px);

line-height: 1.05;

margin-bottom: 25px;

font-weight: 900;
```

}

.hero h1 span {

```
color: var(--gold);

display: block;
```

}

.hero-description {

```
max-width: 680px;

margin:
    0 auto 35px;

color: #dddddd;

font-size: 19px;
```

}

.hero-buttons {

```
display: flex;

justify-content: center;

gap: 15px;

flex-wrap: wrap;
```

}

.primary-button,
.secondary-button {

```
display: inline-flex;

align-items: center;

justify-content: center;

padding: 15px 25px;

border-radius: 6px;

font-weight: 800;

transition:
    transform 0.3s ease,
    background 0.3s ease;
```

}

.primary-button {

```
background: var(--gold);

color: #111111;
```

}

.primary-button:hover {

```
background: var(--gold-light);

transform:
    translateY(-3px);
```

}

.secondary-button {

```
border:
    1px solid white;

color: white;
```

}

.secondary-button:hover {

```
background: white;

color: #111111;

transform:
    translateY(-3px);
```

}

.hero-trust {

```
display: flex;

justify-content: center;

gap: 50px;

margin-top: 65px;

padding-top: 25px;

border-top:
    1px solid
    rgba(255,255,255,0.2);
```

}

.hero-trust div {

```
display: flex;

flex-direction: column;
```

}

.hero-trust strong {

```
color: var(--gold);

font-size: 21px;
```

}

.hero-trust span {

```
color: #cccccc;

font-size: 12px;
```

}

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

.section {

```
padding: 100px 6%;
```

}

.section-heading {

```
max-width: 750px;

margin:
    0 auto 55px;

text-align: center;
```

}

.section-heading h2 {

```
font-size:
    clamp(32px, 5vw, 48px);

line-height: 1.15;

margin-bottom: 15px;
```

}

.section-heading > p:last-child {

```
color: var(--muted);

font-size: 17px;
```

}

/* =========================
SERVICES
========================= */

.services-section {

```
background: var(--light);
```

}

.services {

```
max-width: 1200px;

margin: auto;

display: grid;

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

gap: 25px;
```

}

.service-card {

```
position: relative;

overflow: hidden;

background: white;

border-radius: 10px;

box-shadow:
    0 10px 30px
    rgba(0,0,0,0.08);

transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
```

}

.service-card:hover {

```
transform:
    translateY(-10px);

box-shadow:
    0 20px 40px
    rgba(0,0,0,0.15);
```

}

.service-image {

```
position: relative;

height: 230px;

overflow: hidden;
```

}

.service-image img {

```
width: 100%;

height: 100%;

object-fit: cover;

transition:
    transform 0.5s ease;
```

}

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

```
transform:
    scale(1.08);
```

}

.service-number {

```
position: absolute;

top: 15px;

left: 15px;

background: var(--gold);

color: #111;

padding: 6px 10px;

font-size: 12px;

font-weight: 900;

border-radius: 4px;
```

}

.service-content {

```
padding: 28px;
```

}

.service-content h3 {

```
font-size: 25px;

margin-bottom: 10px;
```

}

.service-content p {

```
color: var(--muted);

margin-bottom: 20px;
```

}

.service-price {

```
color: var(--muted);

margin-bottom: 20px;
```

}

.service-price strong {

```
color: #111;

font-size: 24px;
```

}

.service-button {

```
width: 100%;

background: #111;

color: white;

border: none;

padding: 13px;

border-radius: 6px;

cursor: pointer;

font-weight: 700;

transition:
    background 0.3s ease;
```

}

.service-button:hover {

```
background: var(--gold);

color: #111;
```

}

.featured-service {

```
border:
    2px solid var(--gold);
```

}

.popular-badge {

```
position: absolute;

top: 15px;

right: 15px;

z-index: 5;

background: var(--gold);

color: #111;

padding: 7px 12px;

border-radius: 4px;

font-size: 10px;

font-weight: 900;

letter-spacing: 1px;
```

}

/* =========================
PRICING
========================= */

.pricing-section {

```
padding: 100px 6%;

background: #0d0d0d;

color: white;
```

}

.pricing-section
.section-heading > p:last-child {

```
color: #aaa;
```

}

.pricing-grid {

```
max-width: 1100px;

margin: auto;

display: grid;

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

gap: 25px;
```

}

.pricing-card {

```
position: relative;

background: #181818;

border:
    1px solid #2d2d2d;

padding: 40px 30px;

border-radius: 10px;

transition:
    transform 0.3s ease,
    border-color 0.3s ease;
```

}

.pricing-card:hover {

```
transform:
    translateY(-8px);

border-color:
    var(--gold);
```

}

.pricing-card.premium {

```
border:
    2px solid var(--gold);

transform:
    scale(1.03);
```

}

.pricing-card.premium:hover {

```
transform:
    scale(1.03)
    translateY(-8px);
```

}

.pricing-label {

```
color: var(--gold);

font-size: 12px;

font-weight: 900;

letter-spacing: 2px;

margin-bottom: 10px;
```

}

.pricing-card h3 {

```
font-size: 27px;

margin-bottom: 15px;
```

}

.price {

```
color: var(--gold);

font-size: 55px;

font-weight: 900;

line-height: 1;

margin-bottom: 20px;
```

}

.price span {

```
font-size: 25px;
```

}

.pricing-card > p {

```
color: #aaa;

margin-bottom: 25px;
```

}

.pricing-card ul {

```
list-style: none;

margin-bottom: 30px;
```

}

.pricing-card li {

```
padding: 8px 0;

color: #ddd;

border-bottom:
    1px solid #292929;
```

}

.pricing-button {

```
width: 100%;

padding: 14px;

background: var(--gold);

color: #111;

border: none;

border-radius: 6px;

font-weight: 800;

cursor: pointer;
```

}

.pricing-button:hover {

```
background:
    var(--gold-light);
```

}

/* =========================
GALLERY
========================= */

.gallery-section {

```
background: white;
```

}

.gallery-grid {

```
max-width: 1200px;

margin: auto;

display: grid;

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

gap: 15px;
```

}

.gallery-item {

```
position: relative;

height: 300px;

overflow: hidden;

border-radius: 8px;
```

}

.gallery-item img {

```
width: 100%;

height: 100%;

object-fit: cover;

transition:
    transform 0.5s ease;
```

}

.gallery-item:hover img {

```
transform:
    scale(1.1);
```

}

.gallery-overlay {

```
position: absolute;

left: 0;

right: 0;

bottom: 0;

padding: 20px;

color: white;

font-weight: 800;

background:
    linear-gradient(
        transparent,
        rgba(0,0,0,0.8)
    );
```

}

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

.reviews-section {

```
padding: 100px 6%;

background: var(--light);
```

}

.reviews-grid {

```
max-width: 1100px;

margin: auto;

display: grid;

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

gap: 25px;
```

}

.review-card {

```
background: white;

padding: 35px;

border-radius: 10px;

box-shadow:
    0 8px 25px
    rgba(0,0,0,0.06);
```

}

.stars {

```
color: var(--gold);

font-size: 20px;

letter-spacing: 3px;

margin-bottom: 20px;
```

}

.review-card p {

```
color: #555;

font-style: italic;

margin-bottom: 25px;
```

}

.review-card strong {

```
display: block;
```

}

.review-card span {

```
color: var(--muted);

font-size: 13px;
```

}

/* =========================
ABOUT
========================= */

.about {

```
background: #111;

color: white;
```

}

.about-content {

```
max-width: 1100px;

margin: auto;

display: grid;

grid-template-columns:
    1.5fr 1fr;

gap: 80px;

align-items: center;
```

}

.about-text h2 {

```
font-size:
    clamp(35px,5vw,55px);

line-height: 1.1;

margin-bottom: 25px;
```

}

.about-text h2 span {

```
color: var(--gold);

display: block;
```

}

.about-text > p:not(.eyebrow) {

```
color: #bbb;

margin-bottom: 20px;
```

}

.about-text .primary-button {

```
margin-top: 15px;
```

}

.about-stats {

```
display: grid;

gap: 15px;
```

}

.stat {

```
padding: 25px;

border:
    1px solid #333;

border-radius: 8px;

background: #181818;
```

}

.stat strong {

```
display: block;

color: var(--gold);

font-size: 30px;
```

}

.stat span {

```
color: #aaa;

font-size: 14px;
```

}

/* =========================
CONTACT
========================= */

.contact-section {

```
padding: 100px 6%;

background:
    linear-gradient(
        135deg,
        #f4f4f4,
        #fff
    );
```

}

.contact-container {

```
max-width: 1150px;

margin: auto;

display: grid;

grid-template-columns:
    1fr 1fr;

gap: 70px;

align-items: start;
```

}

.contact-info h2 {

```
font-size:
    clamp(35px,5vw,55px);

line-height: 1.1;

margin-bottom: 25px;
```

}

.contact-info h2 span {

```
display: block;

color: var(--gold);
```

}

.contact-info > p:not(.eyebrow) {

```
color: var(--muted);

font-size: 17px;

margin-bottom: 35px;
```

}

.contact-details {

```
display: grid;

gap: 18px;
```

}

.contact-details > * {

```
display: flex;

align-items: center;

gap: 15px;
```

}

.contact-details a:hover {

```
color: #9c7c19;
```

}

.contact-icon {

```
width: 45px;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

background: #111;

border-radius: 50%;
```

}

.contact-details strong,
.contact-details span {

```
display: block;
```

}

.contact-details div span {

```
color: var(--muted);

font-size: 14px;
```

}

/* =========================
WHATSAPP
========================= */

.whatsapp-button {

```
display: inline-flex;

align-items: center;

gap: 10px;

margin-top: 30px;

padding: 14px 20px;

background: #25d366;

color: white;

border-radius: 7px;

font-weight: 800;

transition:
    transform 0.3s ease;
```

}

.whatsapp-button:hover {

```
transform:
    translateY(-3px);
```

}

.floating-whatsapp {

```
position: fixed;

right: 22px;

bottom: 22px;

z-index: 999;

width: 58px;

height: 58px;

display: flex;

align-items: center;

justify-content: center;

background: #25d366;

color: white;

border-radius: 50%;

font-size: 27px;

box-shadow:
    0 5px 20px
    rgba(0,0,0,0.25);

transition:
    transform 0.3s ease;
```

}

.floating-whatsapp:hover {

```
transform:
    scale(1.1);
```

}

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

.form-wrapper {

```
background: white;

padding: 35px;

border-radius: 10px;

box-shadow:
    0 15px 40px
    rgba(0,0,0,0.1);
```

}

.form-wrapper h3 {

```
font-size: 28px;

margin-bottom: 5px;
```

}

.form-wrapper > p {

```
color: var(--muted);

margin-bottom: 25px;
```

}

.contact-section form {

```
display: flex;

flex-direction: column;

gap: 5px;
```

}

.contact-section label {

```
font-weight: 700;

margin-top: 10px;

margin-bottom: 2px;
```

}

.contact-section input,
.contact-section textarea {

```
width: 100%;

padding: 14px;

border:
    1px solid #ccc;

border-radius: 6px;

font-size: 16px;

outline: none;
```

}

.contact-section input:focus,
.contact-section textarea:focus {

```
border-color:
    var(--gold);

box-shadow:
    0 0 0 3px
    rgba(212,175,55,0.12);
```

}

.contact-section textarea {

```
resize: vertical;
```

}

.field-error {

```
color:
    var(--danger);

font-size: 13px;

min-height: 0;
```

}

.form-submit {

```
margin-top: 15px;

padding: 15px;

background: #111;

color: white;

border: none;

border-radius: 6px;

font-weight: 800;

cursor: pointer;
```

}

.form-submit:hover {

```
background: var(--gold);

color: #111;
```

}

#formMessage {

```
margin-top: 15px;

text-align: center;

font-weight: 700;
```

}

.success-message {

```
color: var(--success);
```

}

.error-message {

```
color: var(--danger);
```

}

/* =========================
HONEYPOT
========================= */

.honeypot {

```
position: absolute !important;

left: -9999px !important;

width: 1px !important;

height: 1px !important;

overflow: hidden !important;
```

}

/* =========================
GOOGLE MAP
========================= */

.map-section {

```
width: 100%;

height: 400px;
```

}

.map-section iframe {

```
width: 100%;

height: 100%;

border: 0;

display: block;
```

}

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

footer {

```
background: #050505;

color: white;

padding:
    55px 6% 20px;
```

}

.footer-content {

```
max-width: 1200px;

margin: auto;

display: grid;

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

gap: 40px;

padding-bottom: 40px;

border-bottom:
    1px solid #222;
```

}

.footer-logo {

```
color: var(--gold);

font-size: 27px;

font-weight: 900;

letter-spacing: 3px;
```

}

.footer-content p {

```
color: #888;

margin-top: 8px;
```

}

.footer-links {

```
display: flex;

flex-direction: column;

gap: 8px;
```

}

.footer-links a {

```
color: #aaa;
```

}

.footer-links a:hover {

```
color: var(--gold);
```

}

.footer-call {

```
color: var(--gold);

font-weight: 800;
```

}

.copyright {

```
max-width: 1200px;

margin:
    20px auto 0;

color: #666;

font-size: 13px;
```

}

/* =========================
ANIMATION
========================= */

.reveal {

```
opacity: 0;

transform:
    translateY(35px);

transition:
    opacity 0.7s ease,
    transform 0.7s ease;
```

}

.reveal.visible {

```
opacity: 1;

transform:
    translateY(0);
```

}

@keyframes heroFade {

```
from {

    opacity: 0;

    transform:
        translateY(20px);

}

to {

    opacity: 1;

    transform:
        translateY(0);

}
```

}

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

@media (max-width: 900px) {

```
.nav-links {

    gap: 18px;

}


.services,
.pricing-grid,
.reviews-grid {

    grid-template-columns:
        1fr;

}


.pricing-card.premium {

    transform: none;

}


.pricing-card.premium:hover {

    transform:
        translateY(-8px);

}


.gallery-grid {

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

}


.about-content,
.contact-container {

    grid-template-columns:
        1fr;

    gap: 45px;

}
```

}

@media (max-width: 768px) {

```
.navbar {

    min-height: 70px;

    padding:
        13px 20px;

}


.menu-button {

    display: block;

}


.nav-links {

    display: none;

    position: absolute;

    top: 70px;

    left: 0;

    width: 100%;

    padding: 25px;

    background: #080808;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    border-top:
        1px solid #222;

}


.nav-links.active {

    display: flex;

    animation:
        menuSlide 0.3s ease;

}


.nav-call {

    width: 100%;

    text-align: center;

}


.hero {

    min-height: 700px;

    padding:
        90px 20px;

}


.hero-description {

    font-size: 17px;

}


.hero-trust {

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 45px;

}


.section,
.pricing-section,
.reviews-section,
.contact-section {

    padding:
        75px 20px;

}


.gallery-grid {

    grid-template-columns:
        1fr;

}


.gallery-item {

    height: 260px;

}


.form-wrapper {

    padding: 25px;

}


.footer-content {

    grid-template-columns:
        1fr;

    gap: 25px;

}


.map-section {

    height: 320px;

}


.floating-whatsapp {

    right: 15px;

    bottom: 15px;

}
```

}

@keyframes menuSlide {

```
from {

    opacity: 0;

    transform:
        translateY(-10px);

}

to {

    opacity: 1;

    transform:
        translateY(0);

}
```

}

/* =========================
REDUCED MOTION
========================= */

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

```
html {

    scroll-behavior: auto;

}


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

    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0.01ms !important;

    scroll-behavior:
        auto !important;

}
```

}
/* =========================================================
   MOBILE / SAFARI VISUAL FIXES
========================================================= */

/* Hide accessibility skip link until it is actually focused */
.skip-link {
    position: fixed !important;
    top: -100px !important;
    left: 15px !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 15px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
   LOGO FIX
========================================================= */

.navbar .logo,
.navbar .logo:visited,
.navbar .logo:hover,
.navbar .logo:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.navbar .logo span {
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
}

.navbar .logo small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   HERO BUTTON FIX
========================================================= */

.hero .primary-button,
.hero .primary-button:visited {
    background: #d4af37 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d4af37 !important;
}

.hero .primary-button:hover,
.hero .primary-button:active {
    background: #f1d477 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}


/* =========================================================
   SECONDARY CALL BUTTON
========================================================= */

.hero .secondary-button,
.hero .secondary-button:visited {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.hero .secondary-button:hover,
.hero .secondary-button:active {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}


/* =========================================================
   HERO TEXT COLOUR
========================================================= */

.hero .eyebrow {
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
}

.hero h1,
.hero h1 span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hero h1 span {
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
}

.hero .hero-description {
    color: #dddddd !important;
    -webkit-text-fill-color: #dddddd !important;
}

.hero-trust strong {
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
}

.hero-trust span {
    color: #cccccc !important;
    -webkit-text-fill-color: #cccccc !important;
}


/* =========================================================
   FORM SELECT FIX
========================================================= */

.contact-section input,
.contact-section textarea,
.contact-section select {
    width: 100%;
    font: inherit;
    color: #222222;
    background: #ffffff;
}

.contact-section select {
    min-height: 50px;
    padding: 13px 15px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    cursor: pointer;
}

.contact-section input:focus,
.contact-section textarea:focus,
.contact-section select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}


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

@media (max-width: 768px) {

    .hero {
        background-attachment: scroll;
    }

    .hero-buttons {
        width: 100%;
    }

    .hero .primary-button,
    .hero .secondary-button {
        width: 100%;
        max-width: 320px;
    }

    .navbar .logo span {
        font-size: 25px;
    }

    .navbar .logo small {
        font-size: 8px;
        letter-spacing: 3px;
    }

}