/* ===================================================================
   TOKENS
   =================================================================== */
   :root {
    /* COLORS */
    
/* ADA Updated Gradient */

    --orange: #C9500D;
    --orange-card: #EB7533;
    --orange-dark: var(--orange);
    --gold: #e3a034;
    --black: #000000;
    --dark: #050505;
    --charcoal: #3a3a3a;
    --charcoal-2: #2e2e2e;
    --dark-card: #313232;
    --footer: #222423;
    --hero-dark: #1a1613;
    --white: #ffffff;
    --cdf7: #f7f7f7;
    --cdf0: #f0f0f0;
    --ink: #000000;
    --muted: #52525b;
    --muted-2: #4d4d4d;
    --map-label: #d98664;
    --line: #e4e4e4;
    --line-dark: #4a4a4a;
    --asphalt: #2c2c2c;
    --road-line: #e9e9e9;
    --gradient1: linear-gradient(180deg, var(--orange) 0%,var(--orange-card) 100%);
    --gradient2: linear-gradient(180deg, var(--orange-card) 0%, var(--orange) 100%);
    --white-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(65deg) brightness(99%) contrast(109%);
    --orange-filter: brightness(0) saturate(100%) invert(45%) sepia(84%) saturate(5541%) hue-rotate(13deg) brightness(92%) contrast(90%);


    /* ROLE ALIASES */
    --text: var(--ink);
    --primary: var(--orange);

    /* FONTS */
    --font-staarliches: "Staatliches", Impact, sans-serif;
    --font-montserrat: "Montserrat", system-ui, sans-serif;
    

    /* RAW TYPE SCALE (name==value) */
    --f12: 12px;
    --f14: 14px;
    --f16: 16px;
    --f18: 18px;
    --f20: 20px;
    --f22: 22px;
    --f24: 24px;
    --f28: 28px;
    --f30: 30px;
    --f35: 35px;
    --f40: 40px;
    --f50: clamp(2.5rem, 2.375rem + 0.625vw, 3.125rem);   /* 50 - 40 */
    --f60: clamp(2.8125rem, 2.625rem + 0.9375vw, 3.75rem); /* 60 - 45 */
    --f65: clamp(3.125rem, 2.9375rem + 0.9375vw, 4.0625rem); /* h1 65 - 50 */
    --f100: 100px;
    --f120: 120px;
    --f160: 160px;

    --bodyLh: 1.4;
    --lhTight: 1.15;

    /* CONTAINER & SPACE */
    --container: 1500px;
    --gutter: 20px;
    --sectionGap: 100px;
    --sectiongapHalf: 50px;
    --sp4: 4px;
    --sp8: 8px;
    --sp10: 10px;
    --sp15: 15px;
    --sp20: 20px;
    --sp25: 25px;
    --sp30: 30px;
    --sp35: 35px;
    --sp40: 40px;
    --sp50: 50px;
    --sp55: 55px;
    --sp65: 65px;
    --sp80: 80px;
    --sp100: 100px;
    --g40: 40px;

    /* RADIUS / SHADOW / Z / EASE */
    --r-btn: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 10px 30px rgba(20, 20, 20, .12);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .18);
    --overlay: rgba(0, 0, 0, .55);
    --overlay-deep: rgba(0, 0, 0, .92);
    --z-sticky: 200;
    --z-drop: 210;
    --z-modal: 300;
    --ease: .25s ease;
    --ease-out: .3s cubic-bezier(.2, .7, .3, 1);
    --transition: all .3s ease-in-out;

    /* SCROLLBAR */
    --scrollbar-width: 10px;
    --scrollbar-thumb: var(--orange);
    --scrollbar-thumb-hover: var(--orange-dark);

    --road-height: 140px;
    --truck-width: 460px;
    --start-x: -460px;
    --end-x: 100vw;
    --truck-dur: 20s;
    --spin-dur: 1.2s;

    /* ---------------------------------------------------------------
       GLOBAL BREAKPOINTS — the container/gutter/gap tokens step down
       here, so every layout using .container or these tokens follows
       automatically. Nested inside :root so all token values for a
       given name live in one place.
       --------------------------------------------------------------- */

    /* Large desktop — 1600 and below */
    @media (max-width: 1599.98px) {
        --container: 1440px;
    }

    /* Desktop — 1440 and below */
    @media (max-width: 1439.98px) {        
            --container: 1320px;
            --sp50: 40px;        
    }

    /* Small desktop / large laptop — 1366 and below */
    @media (max-width: 1365.98px) {        
            --container: 1200px;
            --sp50: 40px;        
    }

    /* Laptop — 1200 and below */
    @media (max-width: 1199.98px) {        
        --container: 1140px;
        --sectionGap: 60px;
        --sectiongapHalf:30px;
        --g40: 30px;
        --sp50: 40px;
       
        --sectionGap: 60px;        

       
        
        --f20: 18px;
        --f22: 20px;
        --f24: 22px;
        --f28: 26px;
        --f30: 28px;
        --f35: 30px;
        --f40: 34px;


        --f160: 120px;
        --f120: 100px;
        --f100: 80px;

        --f50: 40px;
        --f60: 45px;
        --f65: 50px;

        --sp25: 20px;
        --sp30: 25px;        
        --sp35: 30px;
        --sp40: 30px;
        --sp50: 40px;
        --sp55: 45px;

        --sp65: 50px;
        --sp80: 60px;
        --sp100: 80px;
        --g40: 30px;


    }

    /* Tablet — 991 and below */
    @media (max-width: 991.98px) {
        --container: 960px; 
        --sp25: 15px;
        --sp20: 15px;
        --sp30: 20px;
        --sp50: 30px;    
        --sp65: 50px;
        --sp80: 40px;
        --sp100: 60px;        

        --f160: 100px;
        --f120: 80px;
        --f100: 70px;

        --f18: 16px;
        --f20: 18px;
        --f22: 20px;
        --f24: 22px;
        --f28: 24px;
        --f30: 26px;
        --f35: 28px;
        --f40: 30px;

        --f50: 40px;
        --f60: 45px;
        --f65: 50px;
    }

    /* Mobile landscape / small tablet — 767 and below */
    @media (max-width: 767.98px) {
        --container: 100%;
        --sectionGap: 50px;
        
        --sp50: 25px; 
        --sp65: 40px;        
        --sp100: 50px; 

        --f20: 16px;
        --f22: 18px;
        --f120: 60px;
        --f100: 50px;
        --f40: 30px;
        --f30: 24px;

        --f50: 30px;
        --f60: 34px;
        --f65: 40px;
    }

    /* Mobile portrait — 575 and below */
    @media (max-width: 575.98px) {
        --container: 100%;

       
        --f120: 50px;
        --f100: 40px;
        --f65: 36px;
        --f60: 30px;
        --f50: 30px;
    }
}


/* ===================================================================
   RESET / BASE
   =================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    background-color: var(--black);
}

/* NOT nested under html on purpose — see note below. */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--r-full);

    &:hover {
        background: var(--scrollbar-thumb-hover);
    }
}

body {
    font-family: var(--font-montserrat);
    font-size: var(--f16);
    line-height: var(--bodyLh);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    background: var(--white) url(../images/body-background.webp);
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: fixed;
    /* --headerouter: 146px;
    --headertop: 58px; */
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
    transition: var(--transition);
}

main section {
    margin-bottom: var(--sectionGap);
    overflow-x: clip;
}

/* Anchor links (#section-id) would otherwise land with the top of the target
   behind the header: it is position:fixed once .is-stuck is set, and the page
   scrolls the target flush to the viewport edge, not to the edge of what is
   visible. The offset is the pinned bar's own height — --headerouter minus the
   top bar the sticky header hides, both measured onto body in vendor.js so this
   tracks the real bar at every width — plus a gap so the heading is not welded
   to the underside of it. Nothing scrolls the page from JS, so this is the whole
   of the anchor behaviour; the fallbacks match the resting desktop bar. */
[id] {
    scroll-margin-top: calc(var(--headerouter, 146px) - var(--headertop, 58px) + var(--sp30));
}
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--orange);
    /* outline: none; */
    outline-offset: 2px;
}

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1 {
    font-size: var(--f65);
    font-weight: 400;
    font-family: var(--font-staarliches);
    line-height: var(--lhTight);
}

h2 {
    font-size: var(--f50);
    font-weight: 400;
    line-height: var(--lhTight);
    font-family: var(--font-staarliches);
}

h3 {
    font-size: var(--f30);
    font-weight: 400;
    line-height: var(--lhTight);
    font-family: var(--font-staarliches);
}

h4 {
    font-size: var(--f24);
    font-weight: 400;
    line-height: var(--lhTight);
    font-family: var(--font-staarliches);
}

h5 {
    font-size: var(--f22);
    line-height: var(--lhTight);
    font-family: var(--font-montserrat);
}

h6 {
    font-size: var(--f18);
    line-height: var(--lhTight);
    font-family: var(--font-montserrat);
}

p {
    font-size: var(--f18);
    font-family: var(--font-montserrat);
    line-height: var(--bodyLh);
}
p + p {
    margin-top: var(--sp20);
}

/* Global CSS  */
p {

    a,
    strong a {
        word-break: break-word;
        color: var(--orange) !important;
        text-decoration: underline;

        &:hover {
            text-decoration-thickness: 2px !important;
        }
    }
}

.section-mb-0 {
    margin-bottom: 0;
}

/* ===================================================================
   LAYOUT UTILITIES
   =================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.skip-link {
    color: var(--orange);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100000;
    width: 0px;
    height: 0px;
    border: 0;
    word-wrap: normal !important;
    overflow: hidden;
    transition: none;
    background-color: var(--white);
}

/* .skip-content / .skip-footer sit alongside .skip-link on the same element,
   so these stay flat rather than nesting as descendants. */
.skip-content:focus,
.skip-footer:focus {
    width: auto;
    height: auto;
    padding: 15px 23px 14px;
    font-weight: 600;
    line-height: normal;
    background-color: var(--white);
    clip: auto;
}

.skip-nav {
    display: none;
    /* Hide initially */
}

.bg-noice {
    background-image: url(../images/background-pattern.webp);
    background-size: auto;
    background-position: top left;
    background-repeat: repeat;
    /* background-attachment: fixed; */
}


/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
    font-size: var(--f16);
    text-transform: uppercase;
    font-weight: 700;
    padding: 20px 32px;
    line-height: 1;
    font-family: var(--font-montserrat);
    display: block;
    width: max-content;
    max-width: 100%;
    transition: var(--transition);

    &.btn-primary {
        background: var(--gradient2);
        color: var(--white);
        & svg {
            filter: var(--white-filter);
        }
        &:hover {
            background: var(--gradient1);
        }
    }

    &.btn-white {
        background: var(--white);
        color: var(--black);
        transition: var(--transition);
        & svg {
            filter: var(--orange-filter);
        }
        &:hover {
            background: var(--gradient2);
            color: var(--white);            
            & svg  {
                filter: var(--white-filter);
            }  
        }
    }

    &.btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        & svg{
            max-height: 18px;
            max-width: 22px;
        }       
    }

    @media (max-width: 575.98px) {
        padding: 16px 24px;
        width: 100%;
        text-align: center;
    }
}

.btn-link {
    font-size: var(--f24);
    font-family: var(--font-staarliches);
    width: max-content;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;

    &:after {
        content: '';
        flex: 0 0 auto;
        width: 22px;
        height: 10px;
        margin-left: 10px;
        transition: var(--transition);
        background-color: currentColor;
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
        mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    &:hover:after {
        margin-left: 20px;
    }

    &.btn-black {
        color: var(--black);
    }

    &.btn-orange {
        color: var(--orange);
    }
}


/* ===================================================================
   SECTION TITLES
   =================================================================== */
.section-title {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;

    & span {
        color: var(--orange);
    }

    &::before,
    &::after {
        content: "";
        height: 1px;
        background: var(--black);
        flex: 1;
        max-width: min(50vw, 820px);
    }

    /* Modifiers now win on specificity (0,2,0 vs 0,1,0), so the old
       "keep this block BELOW the base" ordering requirement is gone. */
    &.section-title--left {
        justify-content: flex-start;
        gap: 0;
        text-align: left;

        &::before,
        &::after {
            display: none;
        }
    }

    &.section-title--orange {
        justify-content: center;
        gap: 0;

        &::before,
        &::after {
            background: transparent;
        }
    }

    &.section-title--white {
        --rule-color: #444;

        &::before,
        &::after {
            background: var(--rule-color, #444);
        }
    }
}

.heading-orange span {
    color: var(--orange);
}

.section-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin-bottom: var(--sp65);
    &:last-child { margin-bottom: 0; }
    & .title-eyebrow {
        font-weight: 700;
        color: var(--orange);
        text-transform: uppercase;
    }
    h2:not(.section-title) span {
        color: var(--orange);
    }
    
    & .section-title-desc {
        max-width: 1000px;
        margin-top: 10px;
        font-size: var(--f20);

        & p {
            font-size: var(--f20);
        }
    }
    &.section-title-left{
        align-items: flex-start;
        text-align: left;
    }
}

/* shared lead / eyebrow */
.section-lead {
    max-width: 900px;
    margin: 18px auto 0;
    text-align: center;
    font-size: var(--f20);
    color: var(--ink);

    &.section-lead--light {
        color: #d8d8d8;
    }
}

.eyebrow {
    font-family: var(--font-montserrat);
    font-weight: 700;
    font-size: var(--f16);
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .06em;
}


/* ===================================================================
   HELPERS
   =================================================================== */
.ico {
    width: auto;
    height: 45px;
    fill: currentColor;
    flex: none;

    &.ico--orange {
        fill: var(--orange);
    }

    @media (max-width: 1199.98px) {
        height: 35px;
    }
}

.txt-orange {
    color: var(--orange);
}


/* ---- ACF WYSIWYG rich text ----
   A class never goes on a <p>. It sits on a wrapper (or on the section) and the
   bare markup the editor emits inherits from it. Add new wrappers here.
   Stays flat: these wrappers live in different sections, so there's no shared
   parent to nest them under. */
.hero__lead>p,
.section-lead>p,
.locations__hint>p,
.loccard__seats>p,
.eyebrow>p,
.financing__lead>p,
.story__quote>p,
.story__name>p,
.review__name>p,
.cta__eyebrow>p,
.cta__lead>p,
.footer__corp>p {
    font: inherit;
    color: inherit;
}

.hero__lead>p+p,
.section-lead>p+p,
.financing__lead>p+p,
.cta__lead>p+p,
.story__quote>p+p {
    margin-top: 1em;
}