:root {
    /* Colors */
    --primary: #111111;       /* Jet Black */
    --primary-light: #333333; /* Dark Gray */
    --primary-dark: #000000;  /* Pure Black */
    --secondary: #E0E0E0;     /* Metallic Silver */
    --tertiary: #D4AF37;      /* Luxury Gold Accent */
    --tertiary-light: #ddc062;
    --tertiary-dark: #af8f25;
    --quaternary: #d70000;    /* Vivid Red Accent */
    --quaternary-light: #ff0202;
    --quaternary-dark: #ac0000;
    --text-clr: #000000;
    --dark-gray: #333333;
    --gray: #B0B0B0;
    --light-gray: #F2F2F2;
/* Font */
    --ff:'Figtree', sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --big: 1.25rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff);
    --small: 0.75rem/2em var(--ff);

    /* Spacing */
    font-size: 16px;
    --margin-xxs: .25rem;
    --margin-xs: .5rem;
    --margin-s: .75rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 1.75rem;
    --margin-xxl: 2.5rem;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
main {
    padding-top: 0;
}
body {
    font-family: var(--ff);
    background-color: var(--primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main { 
    flex: 1;
}
/* Hero image */
.background-image {
    width:100%;
    margin-top:5rem;
}
.background-image img {
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    object-position:center;
}

/* Hero */
.fogHero {
    padding:5.2rem 1.5rem 3.6rem;
    background:linear-gradient(135deg,#0b0b0b 0%,#050505 65%);
    border-bottom:1px solid #171717;
}
.fogHero-inner {
    max-width:1050px;
    margin:0 auto;
    text-align:center;
}
.fogHero h1 {
    font-size:clamp(2.5rem,6vw,3.4rem);
    margin:0 0 1rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.fogHero-lead {
    max-width:860px;
    margin:0 auto 1.9rem;
    font-size:1.05rem;
    line-height:1.55;
    color:var(--secondary);
    opacity:.85;
}
.fogHero-cta {
    display:inline-block;
    font-weight:700;
    padding:.95rem 2.3rem;
    border-radius:40px;
    text-decoration:none;
    letter-spacing:.5px;
    font-size:1rem;
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 55%,#7a6015 100%);
    color:var(--primary-dark);
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    background-size:140% 140%;
    background-position:0% 50%;
    transition:background-position .6s ease,transform .4s ease,box-shadow .4s ease;
    position:relative;
    overflow:hidden;
}
.fogHero-cta:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.fogHero-cta::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 70%);
    mix-blend-mode:overlay;
    opacity:0;
    transition:opacity .45s ease;
}
.fogHero-cta:hover::after { opacity:.7; }
.fogHero-note {
    margin:.9rem 0 0;
    font-size:.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.5;
}

/* Shared titles */
.sectionTitle {
    text-align:center;
    font-size:clamp(2rem,4.5vw,2.7rem);
    margin:0 0 1rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.sectionLead {
    text-align:center;
    max-width:820px;
    margin:0 auto 2.3rem;
    font-size:1rem;
    line-height:1.55;
    opacity:.85;
    color:var(--secondary);
}

/* Benefits */
.fogBenefits {
    padding:3.8rem 1.5rem 3.5rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.benefitsGrid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
    max-width:1150px;
    margin:0 auto;
}
.benefitCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    transition:border-color .4s ease,transform .4s ease;
}
.benefitCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.benefitCard h3 {
    margin:0 0 .55rem;
    font-size:1.05rem;
    color:var(--tertiary);
}
.benefitCard p {
    margin:0;
    font-size:.82rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}

/* Process */
.fogProcess {
    padding:3.9rem 1.5rem 3.4rem;
    background:#060606;
    border-bottom:1px solid #151515;
}
.processGrid {
    display:grid;
    grid-template-columns:repeat(6,minmax(170px,1fr));
    gap:1.6rem;
    max-width:100%;
}
.processStep {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    position:relative;
    min-height:230px;
    transition:border-color .35s ease,transform .35s ease;
    display:flex;
    flex-direction:column;
}
.processStep:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.stepNum {
    position:absolute;
    top:.85rem;
    right:.9rem;
    font-size:1rem;
    font-weight:700;
    background:var(--tertiary);
    color:var(--primary-dark);
    padding:.35rem .55rem .3rem;
    border-radius:50px;
    letter-spacing:.5px;
}
.processStep h4 {
    margin:0 0 .55rem;
    font-size:1.25rem;
    color:var(--tertiary);
}
.processStep p {
    margin:0;
    font-size:1rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}
@media (max-width:1150px){
    .processGrid {
        grid-template-columns:repeat(6,200px);
        overflow-x:auto;
        padding-bottom:.5rem;
        scrollbar-width:thin;
    }
    .processGrid::-webkit-scrollbar { height:8px; }
    .processGrid::-webkit-scrollbar-track { background:#161616; }
    .processGrid::-webkit-scrollbar-thumb { background:#333; border-radius:4px; }
}
@media (max-width:560px){
    .processGrid { grid-template-columns:repeat(2,1fr); overflow-x:hidden; }
}

/* Packages */
.fogPackages {
    padding:3.8rem 1.5rem 3.5rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.packageGrid {
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    max-width:1150px;
    margin:0 auto;
}
.packageCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:20px;
    padding:1.7rem 1.4rem 2.1rem;
    display:flex;
    flex-direction:column;
    position:relative;
    transition:border-color .4s ease,transform .4s ease,box-shadow .4s ease;
}
.packageCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-8px);
    box-shadow:0 18px 40px -20px rgba(0,0,0,.75);
}
.packageCard.popular { background:linear-gradient(160deg,#181818 0%,#121212 70%); }
.packageCard.bundle { background:linear-gradient(150deg,#1a1a1a 0%,#0f0f0f 70%); }
.pkgHead {
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:.8rem;
}
.pkgHead h3 {
    margin:0;
    font-size:1.3rem;
    letter-spacing:.4px;
    color:var(--tertiary);
}
.pkgTag {
    font-size:.6rem;
    font-weight:700;
    text-transform:uppercase;
    background:#333;
    color:var(--secondary);
    padding:.35rem .55rem .3rem;
    border-radius:6px;
    letter-spacing:1px;
}
.popularTag { background:var(--quaternary); color:#fff; }
.bundleTag { background:var(--tertiary); color:var(--primary-dark); }
.pkgPrice {
    margin:0 0 1rem;
    font-size:.95rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.pkgList {
    list-style:none;
    margin:0 0 1.4rem;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    font-size:.85rem;
    line-height:1.45;
    color:var(--secondary);
}
.pkgList li {
    position:relative;
    padding-left:1.05rem;
}
.pkgList li:before {
    content:"";
    position:absolute;
    left:0;
    top:.55rem;
    width:.45rem;
    height:.45rem;
    background:var(--tertiary);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.pkgBtn {
    text-decoration:none;
    display:inline-block;
    align-self:flex-start;
    background:#222;
    color:var(--secondary);
    font-weight:600;
    padding:.75rem 1.5rem;
    border-radius:30px;
    font-size:.85rem;
    letter-spacing:.5px;
    border:1px solid #2d2d2d;
    transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.pkgBtn.primary { background:var(--tertiary); color:var(--primary-dark); border-color:var(--tertiary-dark); }
.pkgBtn.bundleBtn { background:var(--quaternary); border-color:var(--quaternary-dark); color:var(--secondary); }
.pkgBtn:hover {
    background:var(--quaternary);
    transform:translateY(-4px);
    box-shadow:0 12px 28px -12px rgba(0,0,0,.7);
    color:var(--secondary);
}
.pkgBtn.primary:hover { background:var(--quaternary); color:var(--secondary); }
.pkgBtn.bundleBtn:hover { background:var(--tertiary); color:var(--primary-dark); }
.pkgDisclaimer {
    margin:1rem auto 0;
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.5;
    text-align:center;
}

/* Dealer / Fleet */
.fogDealer {
    padding:4rem 1.5rem 3.7rem;
    background:linear-gradient(165deg,#0d0d0d 0%,#050505 70%);
    border-bottom:1px solid #171717;
}
.dealerGrid {
    max-width:1100px;
    margin:0 auto 2.1rem;
    display:grid;
    gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.dealerCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    transition:border-color .4s ease,transform .4s ease;
}
.dealerCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.dealerCard h3 {
    margin:0 0 .55rem;
    font-size:1.05rem;
    color:var(--tertiary);
}
.dealerCard p {
    margin:0;
    font-size:.82rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}
.dealerCTA {
    display:block;
    width:fit-content;
    margin:0 auto;
    font-weight:700;
    letter-spacing:.5px;
    padding:.85rem 2.2rem;
    border-radius:40px;
    font-size:1rem;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 55%,#7a6015 100%);
    color:var(--primary-dark);
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 28px -12px rgba(0,0,0,.7);
    background-size:140% 140%;
    background-position:0% 50%;
    transition:background-position .6s ease,transform .4s ease,box-shadow .4s ease;
}
.dealerCTA:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.dealerCTA::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 70%);
    mix-blend-mode:overlay;
    opacity:0;
    transition:opacity .45s ease;
}
.dealerCTA:hover::after { opacity:.7; }

/* CTA Band */
.fogCTA {
    padding:3.6rem 1.5rem 4rem;
    background:#090909;
    text-align:center;
}
.fogCTA h2 {
    font-size:clamp(2rem,5vw,2.5rem);
    margin:0 0 .85rem;
    color:var(--secondary);
    letter-spacing:.5px;
}
.fogCTA p {
    margin:0 0 1.6rem;
    font-size:1rem;
    line-height:1.5;
    opacity:.85;
    color:var(--secondary);
}
.fogCTA-btn {
    display:inline-block;
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 55%,#7a6015 100%);
    color:var(--primary-dark);
    font-weight:700;
    letter-spacing:.5px;
    padding:.9rem 2.2rem;
    border-radius:40px;
    font-size:1rem;
    text-decoration:none;
    border:1px solid var(--tertiary-dark);
    box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
    position:relative;
    overflow:hidden;
    background-size:140% 140%;
    background-position:0 50%;
    transition:background-position .6s ease,transform .4s ease,box-shadow .4s ease;
}
.fogCTA-btn:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.fogCTA-btn::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 35%,rgba(255,255,255,0) 70%);
    mix-blend-mode:overlay;
    opacity:0;
    transition:opacity .45s ease;
}
.fogCTA-btn:hover::after { opacity:.7; }

/* Fade utility */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.fade-in.in-view { opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width:860px){
    .benefitsGrid { grid-template-columns:repeat(2,1fr); }
    .packageGrid { gap:1.4rem; }
}
@media (max-width:560px){
    .benefitsGrid { grid-template-columns:1fr; }
    .fogHero-cta,
    .fogCTA-btn,
    .dealerCTA,
    .pkgBtn { width:100%; text-align:center; }
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
    * { transition:none !important; animation:none !important; }
}
@media (max-width: 768px){
    .background-image { margin-top: 4.25rem; }
}