: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;
}

/* About Page */

.aboutHero {
    padding:5.2rem 1.5rem 3.8rem;
    background:linear-gradient(135deg,#0b0b0b 0%,#050505 65%);
    border-bottom:1px solid #171717;
}
.aboutHero-inner {
    max-width:1050px;
    margin:0 auto;
    text-align:center;
}
.aboutHero h1 {
    font-size:clamp(2.6rem,6vw,3.6rem);
    margin:0 0 1rem;
    letter-spacing:.6px;
    color:var(--secondary);
}
.aboutHero-lead {
    max-width:860px;
    margin:0 auto 2.1rem;
    font-size:1.05rem;
    line-height:1.55;
    color:var(--secondary);
    opacity:.85;
}
.aboutHero-cta {
    display:inline-block;
    font-weight:700;
    padding:.95rem 2.4rem;
    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;
}
.aboutHero-cta:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.aboutHero-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;
}
.aboutHero-cta:hover::after { opacity:.7; }

/* Story */
.aboutStory {
    padding:3.8rem 1.5rem 3.6rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.aboutContainer {
    max-width:1150px;
    margin:0 auto;
    display:grid;
    gap:2.4rem;    /* Center stats horizontally and place Story + Stats side‑by‑side on desktop */
    .aboutContainer {
        display: grid;
        gap: 2.4rem;
        grid-template-columns: 1fr; /* mobile default */
    }
    @media (min-width: 900px){
        .aboutContainer {
            grid-template-columns: 1fr auto; /* text | stats */
            align-items: start;
        }
    }
    
    /* Make the stats row centered horizontally */
    .aboutStats {
        display: flex;              /* override previous grid */
        justify-content: center;
        align-items: stretch;
        gap: 1.2rem;
        flex-wrap: wrap;            /* allow wrap on smaller widths */
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
    }
    .statCard {
        width:170px;                /* consistent width */
        flex: 0 0 170px;
    }
    
    /* OPTIONAL: single horizontal scroll row (uncomment to force one line)
    .aboutStats {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .5rem;
    }
    */
}
.aboutText p {
    margin:0 0 1.2rem;
    font-size:1.15rem;
    line-height:1.6;
    color:var(--secondary);
    opacity:.85;
}
.aboutStats {
    display:grid;
    gap:1.2rem;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    align-items:start;
}
.statCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.1rem 1rem 1.25rem;
    text-align:center;
    position:relative;
    transition:border-color .4s ease,transform .4s ease;
}
.statCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.statNum {
    display:block;
    font-size:1.9rem;
    font-weight:700;
    color:var(--tertiary);
    letter-spacing:.5px;
}
.statLabel {
    font-size:.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.6;
    color:var(--secondary);
}
.statFootnote {
    grid-column:1 / -1;
    font-size:.55rem;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.45;
    margin:.4rem 0 0;
}

/* Values */
.aboutValues {
    padding:3.9rem 1.5rem 3.6rem;
    background:#060606;
    border-bottom:1px solid #141414;
}
.valuesGrid {
    max-width:1150px;
    margin:0 auto;
    display:grid;
    gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Force About Values to 2 rows of 3 (6 items) on desktop */
.valuesGrid {
    grid-template-columns: repeat(3, minmax(0,1fr)); /* was auto-fit */
    max-width: 1150px;
}

/* Tablet: 2 columns */
@media (max-width: 880px){
    .valuesGrid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* Mobile: 1 column */
@media (max-width: 560px){
    .valuesGrid {
        grid-template-columns: 1fr;
    }
}
.valueCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:16px;
    padding:1.35rem 1.1rem 1.55rem;
    transition:border-color .4s ease,transform .4s ease;
}
.valueCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.valueCard h3 {
    margin:0 0 .55rem;
    font-size:1.05rem;
    color:var(--tertiary);
}
.valueCard p {
    margin:0;
    font-size:.82rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}

/* Approach */
.aboutApproach {
    padding:3.9rem 1.5rem 3.7rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.approachSplit {
    grid-template-columns:minmax(0,1fr) 340px;
}
.approachText p {
    margin:0 0 1.1rem;
    font-size:1.25rem;
    line-height:1.55;
    opacity:.85;
    color:var(--secondary);
}
.checkList {
    list-style:none;
    margin:1.2rem 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    font-size:1.25rem;
    color:var(--secondary);
}
.checkList li {
    position:relative;
    padding-left:1.05rem;
}
.checkList li:before {
    content:"";
    position:absolute;
    left:0;
    top:.5rem;
    width:.45rem;
    height:.45rem;
    background:var(--tertiary);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.approachSide {
    display:flex;
    flex-direction:column;
    gap:1.1rem;
}
.miniPanel {
    background:#141414;
    border:1px solid #232323;
    border-radius:14px;
    padding:1rem .95rem 1.1rem;
    transition:border-color .35s ease,transform .35s ease;
}
.miniPanel:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.miniPanel h3 {
    margin:0 0 .45rem;
    font-size:1.2rem;
    color:var(--tertiary);
}
.miniPanel p {
    margin:0;
    font-size:1rem;
    line-height:1.45;
    opacity:.85;
    color:var(--secondary);
}

/* Service Area */
.aboutArea {
    padding:3.8rem 1.5rem 3.6rem;
    background:#060606;
    border-bottom:1px solid #141414;
    position:relative;
}
.serviceAreaGrid {
    max-width:1150px;
    margin:0 auto;
    display:grid;
    gap:2rem;
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    align-items:start;
}
.mapEmbed {
    background:#131313;
    border:1px solid #232323;
    border-radius:18px;
    overflow:hidden;
    aspect-ratio:16/10;
    position:relative;
}
.mapEmbed iframe {
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(.15) brightness(.95) contrast(1.05);
}
.coveragePanel {
    background:#141414;
    border:1px solid #232323;
    border-radius:18px;
    padding:1.4rem 1.15rem 1.6rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:border-color .4s ease,transform .4s ease;
}
.coveragePanel:hover { border-color:var(--tertiary); transform:translateY(-6px); }
.coveragePanel h3 {
    margin:0;
    font-size:1rem;
    letter-spacing:.5px;
    color:var(--tertiary);
    text-transform:uppercase;
}
.coverageCities {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:.45rem .9rem;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    font-size:.78rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.coverageCities li {
    position:relative;
    padding-left:.75rem;
}
.coverageCities li:before {
    content:"";
    position:absolute;
    left:0;
    top:.45rem;
    width:.4rem;
    height:.4rem;
    background:var(--tertiary);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
.coverageCities.extended li:before { background:var(--quaternary); box-shadow:0 0 0 3px rgba(215,0,0,.18); }
.coverageNote {
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.5;
    margin:.25rem 0 0;
    color: var(--light-gray);
}
.coverageCTA {
    align-self:flex-start;
    margin-top:.25rem;
    display:inline-block;
    font-weight:700;
    letter-spacing:.5px;
    padding:.7rem 1.6rem;
    font-size:.8rem;
    text-decoration:none;
    background:linear-gradient(135deg,var(--tertiary) 0%,var(--tertiary-dark) 55%,#7a6015 100%);
    color:var(--primary-dark);
    border:1px solid var(--tertiary-dark);
    border-radius:30px;
    background-size:140% 140%;
    background-position:0 50%;
    transition:background-position .6s ease,transform .4s ease,box-shadow .4s ease;
    box-shadow:0 8px 24px -12px rgba(0,0,0,.65);
    position:relative;
    overflow:hidden;
}
.coverageCTA:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 16px 38px -16px rgba(0,0,0,.75);
    color:var(--secondary);
}
.coverageCTA::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;
}
.coverageCTA:hover::after { opacity:.7; }

@media (max-width:900px){
    .serviceAreaGrid { grid-template-columns:1fr; }
    .coveragePanel { order:2; }
}
/* Testimonials */
.aboutTestimonials {
    padding:3.9rem 1.5rem 3.8rem;
    background:#090909;
    border-bottom:1px solid #161616;
}
.testGrid {
    max-width:1150px;
    margin:0 auto;
    display:grid;
    gap:1.6rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.testCard {
    background:#141414;
    border:1px solid #232323;
    border-radius:18px;
    padding:1.4rem 1.15rem 1.55rem;
    font-size:.8rem;
    line-height:1.5;
    color:var(--secondary);
    opacity:.9;
    position:relative;
    transition:border-color .4s ease,transform .4s ease;
}
.testCard:hover {
    border-color:var(--tertiary);
    transform:translateY(-6px);
}
.testCard span {
    display:block;
    margin-top:.9rem;
    font-size:.65rem;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.55;
}

/* CTA */
.aboutCTA {
    padding:3.6rem 1.5rem 4rem;
    background:#090909;
    text-align:center;
}
.aboutCTA h2 {
    font-size:clamp(2rem,5vw,2.5rem);
    margin:0 0 .85rem;
    letter-spacing:.5px;
    color:var(--secondary);
}
.aboutCTA p {
    margin:0 0 1.6rem;
    font-size:1rem;
    line-height:1.5;
    opacity:.85;
    color:var(--secondary);
}
.aboutCTA-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;
}
.aboutCTA-btn:hover {
    background-position:100% 50%;
    transform:translateY(-4px);
    box-shadow:0 18px 46px -18px rgba(0,0,0,.8);
    color:var(--secondary);
}
.aboutCTA-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;
}
.aboutCTA-btn:hover::after { opacity:.7; }

/* Shared section title override (reuse global tokens but consistent style) */
.sectionTitle {
    text-align:center;
    font-size:clamp(2rem,4.5vw,2.7rem);
    margin:0 0 1.1rem;
    letter-spacing:.5px;
    color:var(--secondary);
}

/* 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:980px){
    .approachSplit { grid-template-columns:1fr; }
    .approachSide { flex-direction:row; flex-wrap:wrap; }
    .miniPanel { flex:1 1 200px; }
}
@media (max-width:780px){
    .aboutStats { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}
@media (max-width:560px){
    .aboutHero-cta,
    .aboutCTA-btn { width:100%; text-align:center; }
    .approachSide { flex-direction:column; }
}

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