:root{
    --green:#0f7b3f;
    --green-dark:#064e35;
    --green-soft:#e9f5ee;
    --gold:#d4a62a;
    --gold-soft:#f8efd6;
    --ink:#0e1726;
    --muted:#5d6877;
    --white:#fff;
    --off-white:#f7f8f6;
    --shadow:0 20px 60px rgba(10,26,18,.12);
    --transition:.3s ease
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:92px
}
body{
    font-family:"Manrope",sans-serif;color:var(--ink);
    background:var(--white);
    overflow-x:hidden
}
body.menu-open{
    overflow:hidden
}
img{
    display:block;
    width:100%
}
a{
    color:inherit
}
.section{
    padding:110px 6%
}
.section-shell{
    width:min(1180px,100%);
    margin:0 auto
}
.section-label,.eyebrow{
    display:inline-block;
    margin-bottom:16px;
    color:var(--gold);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase
}
.section-heading{
    max-width:720px;
    margin:0 auto 58px;
    text-align:center
}
.section-heading h2,.about-copy h2,.charity-copy h2,.careers-copy h2{
    font-size:clamp(2.3rem,5vw,4.25rem);
    line-height:1.05;
    letter-spacing:-.04em
}
.section-heading p,.about-copy p,.charity-copy p,.careers-copy p{
    color:var(--muted);
    font-size:1.05rem;
    line-height:1.8
}
.section-heading p{
    max-width:640px;
    margin:20px auto 0
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 28px;
    border:1px solid transparent;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    transition:transform var(--transition),background var(--transition),color var(--transition)
}
.btn:hover{
    transform:translateY(-3px)
}
.btn-primary{
    background:var(--gold);
    color:#15120a
}
.btn-primary:hover{
    background:#e2b942
}
.btn-outline{
    border-color:rgba(255,255,255,.45);
    color:var(--white)
}
.btn-outline:hover{
    background:var(--white);
    color:var(--ink)
}
.btn-dark{
    background:var(--ink);
    color:var(--white)
}
.btn-light{
    background:var(--white);
    color:var(--green-dark)
}
.header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    height:88px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:36px;
    padding:0 5%;
    background:rgba(7,17,13,.35);
    border-bottom:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(16px);
    transition:background var(--transition),box-shadow var(--transition)
}
.header.scrolled{
    background:rgba(7,17,13,.94);
    box-shadow:0 10px 30px rgba(0,0,0,.16)
}
.logo img{
    width:auto;
    height:70px;
    object-fit:contain
}
.nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px
}
.nav a{
    position:relative;
    color:var(--white);
    text-decoration:none;
    font-size:.86rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em
}
.nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width var(--transition)
}
.nav a:hover::after,.nav a.active::after{
    width:100%
}
.nav a:hover,.nav a.active{
    color:var(--gold)
}
.header-btn{
    padding:14px 22px;
    border-radius:999px;
    background:var(--green);
    color:var(--white);
    text-decoration:none;
    font-size:.86rem;
    font-weight:800
}
.header-btn:hover{
    background:var(--gold);
    color:var(--ink)
}
.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    cursor:pointer
}
.menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    margin:5px auto;
    background:var(--white);
    transition:var(--transition)
}
.menu-toggle.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg)
}
.menu-toggle.open span:nth-child(2){
    opacity:0
}
.menu-toggle.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)
}
/* .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    padding:140px 6% 90px;
    overflow:hidden;
    background:linear-gradient(90deg,rgba(5,13,9,.86) 0%,rgba(5,13,9,.68) 44%,rgba(5,13,9,.22) 100%),url("images/hero-cars.jpeg") center/cover no-repeat
} */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image 1s ease-in-out;
} 
/* .hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:160px;
    background:linear-gradient(transparent,rgba(0,0,0,.28))
} */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
/* .hero-content{
    position:relative;
    z-index:2;
    width:min(760px,100%)
} */
.hero-content {
    position: relative;
    z-index: 2;
} 
.hero h1{
    color:var(--white);
    font-family:"Playfair Display",serif;
    font-size:clamp(3.8rem,7.8vw,7.4rem);
    line-height:.94;
    letter-spacing:-.04em
}
.hero h1 span{
    display:block;
    margin-top:10px;
    color:var(--gold)
}
.hero-content p{
    max-width:640px;
    margin:30px 0 36px;
    color:rgba(255,255,255,.88);
    font-size:1.18rem;
    line-height:1.8
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px
}
.hero-stats{
    position:absolute;
    right:6%;
    bottom:45px;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:1px;
    overflow:hidden;
    border-radius:18px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(14px)
}
.hero-stats div{
    min-width:150px;
    padding:22px 26px;
    background:rgba(6,78,53,.72)
}
.hero-stats strong,.hero-stats span{
    display:block
}
.hero-stats strong{
    color:var(--white);
    font-size:1.7rem
}
.hero-stats span{
    margin-top:4px;
    color:rgba(255,255,255,.74);
    font-size:.82rem
}
.about-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:78px;
    align-items:center
}
.about-image{
    position:relative
}
.about-image img{
    height:620px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:var(--shadow)
}
.experience-card{
    position:absolute;
    right:-28px;
    bottom:34px;
    width:190px;
    padding:28px;
    border-radius:20px;
    background:var(--green-dark);
    color:var(--white);
    box-shadow:var(--shadow)
}
.experience-card strong,.experience-card span{
    display:block
}
.experience-card strong{
    color:var(--gold);
    font-size:1.5rem
}
.experience-card span{
    margin-top:5px;
    color:rgba(255,255,255,.72)
}
.about-copy h2,.charity-copy h2,.careers-copy h2{
    margin-bottom:28px
}
.about-copy p+p{
    margin-top:18px
}
.about-highlights{
    display:grid;
    gap:16px;
    margin-top:34px
}
.about-highlights div{
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:14px;
    background:var(--off-white)
}
.about-highlights span{
    color:var(--gold);
    font-weight:800
}
.about-highlights p{
    color:var(--ink);
    font-weight:700
}
.brands{
    background:var(--off-white)
}
.brand-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px
}
.brand-card{
    overflow:hidden;
    border-radius:24px;
    background:var(--white);
    color:inherit;
    text-decoration:none;
    box-shadow:0 16px 45px rgba(10,26,18,.08);
    transition:transform var(--transition),box-shadow var(--transition)
}
.brand-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow)
}
.brand-card img{
    height:300px;
    object-fit:cover
}
.brand-content{
    position:relative;
    padding:34px
}
.brand-number{
    position:absolute;
    top:-30px;
    right:28px;
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:18px;
    background:var(--gold);
    color:var(--ink);
    font-weight:800;
    box-shadow:0 14px 30px rgba(212,166,42,.3)
}
.brand-content h3{
    margin-bottom:14px;
    font-size:1.55rem
}
.brand-content p{
    min-height:58px;
    color:var(--muted);
    line-height:1.7
}
.learn-more{
    display:inline-flex;
    gap:8px;
    margin-top:25px;
    color:var(--green);
    font-weight:800
}
.values{
    background:radial-gradient(circle at top right,rgba(212,166,42,.17),transparent 32%),var(--green-dark)
}
.section-heading.light h2,.section-heading.light p{
    color:var(--white)
}
.section-heading.light p{
    color:rgba(255,255,255,.7)
}
.value-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.value-card{
    position:relative;
    min-height:310px;
    padding:34px 28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:rgba(255,255,255,.07);
    color:var(--white);
    transition:transform var(--transition),background var(--transition)
}
.value-card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.12)
}
.value-index{
    position:absolute;
    top:24px;
    right:24px;
    color:rgba(255,255,255,.25);
    font-weight:800
}
.value-icon{
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    margin-bottom:28px;
    border-radius:18px;
    background:var(--gold);
    color:var(--ink);
    font-size:1.8rem
}
.value-card h3{
    margin-bottom:14px;
    font-size:1.35rem
}
.value-card p{
    color:rgba(255,255,255,.72);
    line-height:1.75
}
.charity-grid,.careers-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center
}
.charity-points{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin:34px 0
}
.charity-points div{
    padding:18px;
    border-radius:16px;
    background:var(--gold-soft)
}
.charity-points strong,.charity-points span{
    display:block
}
.charity-points strong{
    color:var(--green-dark)
}
.charity-points span{
    margin-top:6px;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.4
}
.charity-visual{
    position:relative
}
.charity-visual img{
    height:610px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:var(--shadow)
}
.charity-badge{
    position:absolute;
    left:-30px;
    bottom:30px;
    padding:24px 28px;
    border-radius:18px;
    background:var(--gold);
    color:var(--ink);
    box-shadow:var(--shadow)
}
.charity-badge span,.charity-badge strong{
    display:block
}
.charity-badge span{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.14em
}
.charity-badge strong{
    margin-top:4px;
    font-size:1.35rem
}
.careers{
    background:var(--green-soft)
}
.careers-image img{
    height:560px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:var(--shadow)
}
.career-benefits{
    display:grid;gap:12px;
    margin:28px 0 32px;
    list-style:none
}
.career-benefits li{
    position:relative;
    padding-left:30px;
    color:var(--ink);
    font-weight:700
}
.career-benefits li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--green)
}
.cta{
    padding:0 6% 90px;
    background:var(--green-soft)
}
.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:46px 52px;
    border-radius:24px;
    background:linear-gradient(120deg,var(--green-dark),var(--green));color:var(--white);
    box-shadow:var(--shadow)
}
.cta-inner span{
    color:var(--gold);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase
}
.cta-inner h2{
    margin-top:8px;
    font-size:clamp(2rem,4vw,3.4rem)
}
.footer{
    padding:78px 6% 26px;
    background:#071610;
    color:var(--white)
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr .8fr .9fr 1fr;
    gap:50px
}
.footer-logo{
    width:auto;
    height:72px;
    margin-bottom:20px
}
.footer h3{
    margin-bottom:20px;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.08em
}
.footer p,.footer a{
    color:rgba(255,255,255,.68);
    line-height:1.75
}
.footer a{
    display:block;
    margin-bottom:10px;
    text-decoration:none
}
.footer a:hover{
    color:var(--gold)
}
.footer-brand p{
    max-width:340px
}
.copyright{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:56px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.55);
    font-size:.88rem
}
.copyright a{
    margin:0
}
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .7s ease,transform .7s ease
}
.reveal.visible{
    opacity:1;
    transform:translateY(0)
}
@media(max-width:1100px){
    .nav{gap:18px}
    .nav a{font-size:.76rem}
    .header-btn{display:none}
    .value-grid{grid-template-columns:repeat(2,1fr)}
    .hero-stats{right:4%}
}
@media(max-width:900px){
    html{scroll-padding-top:78px}
    .header{height:78px;grid-template-columns:auto 1fr auto;padding:0 20px}
    .logo img{height:60px}
    .menu-toggle{display:block;grid-column:3}
    .nav{position:fixed;top:78px;left:0;width:100%;max-height:calc(100svh - 78px);display:none;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;padding:18px 20px 28px;background:rgba(7,22,16,.98)}
    .nav.open{display:flex}
    .nav a{padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.88rem}
    .nav a::after{display:none}
    .hero{padding:130px 24px 170px;text-align:center;background:linear-gradient(rgba(5,13,9,.72),rgba(5,13,9,.72)),url("images/hero-cars.jpeg") center/cover no-repeat}
    .hero-content{margin:0 auto}
    .hero-content p{margin-right:auto;margin-left:auto}
    .hero-actions{justify-content:center}
    .hero-stats{right:24px;left:24px;bottom:28px;grid-template-columns:repeat(3,1fr)}
    .hero-stats div{min-width:0;padding:18px 12px}
    .about-grid,.charity-grid,.careers-grid{grid-template-columns:1fr;gap:50px}
    .about-image{order:2}
    .experience-card{right:18px}
    .brand-cards{grid-template-columns:1fr}
    .brand-card img{height:360px}
    .charity-visual{order:-1}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .section{padding:82px 20px}
    .hero{padding-right:20px;padding-left:20px}
    .hero h1{font-size:clamp(3.1rem,14vw,4.6rem)}
    .hero-content p{font-size:1rem}
    .hero-actions{flex-direction:column}
    .hero-actions 
    .btn{width:100%}
    .hero-stats strong{font-size:1.2rem}
    .hero-stats span{font-size:.67rem}
    .about-image img,.charity-visual img,.careers-image img{height:430px}
    .experience-card,.charity-badge{right:14px;left:14px;bottom:14px;width:auto}
    .value-grid{grid-template-columns:1fr}
    .charity-points{grid-template-columns:1fr}
    .brand-card img{height:250px}
    .cta{padding:0 20px 70px}
    .cta-inner{flex-direction:column;align-items:flex-start;padding:34px 26px}
    .footer{padding:64px 20px 24px}
    .footer-grid{grid-template-columns:1fr}
    .copyright{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.about{
    background:#f8fafc;
}

.section-heading{
    max-width:900px;
    margin:0 auto 80px;
    text-align:center;
}

.section-intro{
    margin-top:25px;
    font-size:1.1rem;
    line-height:1.9;
    color:#555;
}

.founder-card{
    display:grid;
    grid-template-columns:400px 1fr;
    gap:60px;
    align-items:start;
    margin-bottom:120px;
}

.founder-card.reverse{
    grid-template-columns:1fr 400px;
}

.founder-card.reverse .founder-image{
    order:2;
}

.founder-card.reverse .founder-content{
    order:1;
}

.founder-image{
    display:flex;
    justify-content:center;
}

.founder-image img{
    width:100%;
    max-width:400px;
    height:580px;
    object-fit:cover;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    transition:.4s ease;
}

.founder-image img:hover{
    transform:translateY(-8px);
}

.founder-role{
    color:#0B4F9C;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    font-size:.85rem;
}

.founder-content h3{
    margin:10px 0 30px;
    font-size:2.5rem;
    color:#14213d;
}

.founder-content p{
    margin-bottom:22px;
    line-height:1.9;
    color:#555;
    font-size:1rem;
}

.leader-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:35px;
}

.stat{
    background:white;
    padding:25px;
    border-radius:12px;
    border-left:4px solid #0B4F9C;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.stat h4{
    margin-bottom:10px;
    color:#0B4F9C;
}

.stat p{
    margin:0;
    line-height:1.5;
}

@media(max-width:992px){

    .founder-card,
    .founder-card.reverse{

        grid-template-columns:1fr;
        gap:40px;
    }

    .founder-card.reverse .founder-image,
    .founder-card.reverse .founder-content{
        order:initial;
    }

    .founder-image img{
        max-width:300px;
        height:400px;
    }

    .leader-stats{
        grid-template-columns:1fr;
    }

}
#siteHeader {
    transition: transform 0.3s ease;
}

#siteHeader.nav-hidden {
    transform: translateY(-100%);
}