/*
Theme Name: Toyota Commonwealth Child
Template: zerif-pro
Version: 2.2.0
Description: Toyota Commonwealth — Toyota Red #C8102E / Cinematic Dark / Premium automotive redesign.
*/


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --tr:          #C8102E;
    --tr-dark:     #9E0B23;
    --tr-light:    #e8274a;
    --black:       #0D0D0D;
    --surface:     #1A1A1A;
    --surface-2:   #222222;
    --gray-dk:     #3A3A3A;
    --gray-md:     #888888;
    --gray-lt:     #D8D8D8;
    --gray-bg:     #F5F5F5;
    --white:       #FFFFFF;
    --font-head:   'Barlow Condensed', 'Open Sans', sans-serif;
    --font-body:   'Jost', 'Open Sans', sans-serif;
    --radius:      6px;
    --radius-lg:   12px;
    --ease:        .22s ease;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --shadow:      0 2px 14px rgba(0,0,0,.09);
    --shadow-r:    0 6px 28px rgba(200,16,46,.20);
    --shadow-dk:   0 4px 24px rgba(0,0,0,.5);
}

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

body { font-family: var(--font-body); color: var(--black); background: var(--white); }

a { color: var(--tr); transition: color var(--ease); }
a:hover { color: var(--tr-dark); text-decoration: none; }

/* Heading font — Barlow Condensed gives automotive character */
h1,h2,h3 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
}
h4,h5,h6 { font-family: var(--font-body); font-weight: 700; }

img { max-width: 100%; height: auto; }

/* ============================================================
   GLOBAL BUTTON OVERRIDE — kill plugin blue, use Toyota Red
   ============================================================ */
.page button:not(.tc-filter-btn):not(.navbar-toggle):not(.dropdownmenu):not(.dropdown-toggle),
.page input[type="button"],
.page input[type="submit"] {
    background-color: #C8102E !important;
    border-color: #C8102E !important;
    color: #ffffff !important;
}
.page button:not(.tc-filter-btn):not(.navbar-toggle):not(.dropdownmenu):not(.dropdown-toggle):hover,
.page input[type="button"]:hover,
.page input[type="submit"]:hover {
    background-color: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.zerif-top-bar {
    display: none !important;
}
.zerif-top-bar,
.zerif-top-bar .pull-left,
.zerif-top-bar .pull-right { color: var(--white) !important; }
.zerif-top-bar a { color: var(--white) !important; }
.zerif-top-bar a:hover { color: rgba(255,255,255,.75) !important; }
/* Vertical center the hotline text inside the Bootstrap 3 float row */
.zerif-top-bar .row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    min-height: 36px !important;
}
.zerif-top-bar .pull-left,
.zerif-top-bar .pull-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   MAIN NAVIGATION — COMPACT FIT
   ============================================================ */

/* Hide zerif's unstyled "Skip to content" link */
.skip-link.screen-text-reader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

/* Collapse header wrapper — no gap above sticky nav */
header.header {
    min-height: 0 !important;
    padding: 0 !important;
}

#main-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

#main-nav.navbar.navbar-inverse,
.navbar.navbar-inverse {
    background: var(--white) !important;
    border: none !important;
    border-bottom: 3px solid var(--gray-lt) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
    min-height: 64px !important;
    margin-top: 0 !important;
}

.navbar-brand { padding: 10px 0 !important; }
.navbar-brand img { max-height: 48px !important; }

/* Nav links — tighter to fit all items */
.navbar-inverse .navbar-nav > li > a,
.navbar.navbar-inverse .primary-menu a,
.navbar.navbar-inverse .primary-menu > li > a {
    color: var(--black) !important;
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    padding: 22px 10px !important;
    border-bottom: 3px solid transparent !important;
    transition: all var(--ease) !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar.navbar-inverse .nav.navbar-nav a:hover,
.navbar-inverse .navbar-nav > li.current-menu-item > a:not(.page-anchor),
.navbar.navbar-inverse .nav.navbar-nav > li.current > a {
    color: var(--tr) !important;
    background: transparent !important;
    border-bottom-color: var(--tr) !important;
}

/* Hide nav items that overflow/clutter */
#menu-item-525,   /* Privacy Policy — in footer, not nav */
#menu-item-6577   /* Dealer Activities — stray item */
{ display: none !important; }

/* Desktop: force-show primary-menu — beats jQuery slideToggle inline display:none */
@media (min-width: 992px) {
    .primary-menu { display: block !important; }
    #main-nav .navbar-toggle { display: none !important; }
}

/* Dropdown: inline-block only on desktop so sub-menu top:100% lands correctly */
@media (min-width: 992px) {
    .navbar-inverse .navbar-nav > li.menu-item-has-children {
        position: relative !important;
        display: inline-block !important;
        vertical-align: bottom !important;
    }
}

/* Dropdown menus — desktop only (mobile overrides these in the 991px block) */
@media (min-width: 992px) {
    .navbar-inverse .navbar-nav ul.sub-menu {
        background: #FFFFFF !important;
        border-top: 3px solid #C8102E !important;
        border-radius: 0 0 6px 6px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,.13) !important;
        min-width: 210px !important;
        padding: 4px 0 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 9999 !important;
    }
    /* Remove zerif-pro's per-li padding (stacks on top of li a padding) */
    .navbar-inverse .navbar-nav ul.sub-menu li {
        padding: 0 !important;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li a {
        color: var(--gray-dk) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        padding: 9px 18px !important;
        border-bottom: 1px solid var(--gray-lt) !important;
        transition: all var(--ease) !important;
        display: block !important;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
        border-bottom: none !important;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li a:hover {
        color: var(--tr) !important;
        background: var(--gray-bg) !important;
        padding-left: 24px !important;
    }
}

.main-navigation ul ul a,
.navbar.navbar-inverse .primary-menu ul ul a {
    background: #fff;
    padding: 0;
    padding: 8px !important;
}

.navbar.navbar-inverse .primary-menu ul ul {
    top: 3em !important;
}

/* Mobile toggle — #main-nav scope gives 1-1-0 specificity, beats zerif .page button (0-1-1) */
#main-nav .navbar-toggle { border-color: var(--tr) !important; margin-top: 14px !important; }
#main-nav .navbar-toggle .icon-bar { background: var(--tr) !important; }

/* ============================================================
   FULL-WIDTH ELEMENTOR PAGE FIX
   ============================================================ */
.elementor-page .site-content > .container,
.page-template-template-fullwidth-no-title-php .site-content > .container,
.page-template-template-fullwidth-php .site-content > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-page .content-left-wrap,
.page-template-template-fullwidth-no-title-php .content-left-wrap {
    padding: 0 !important;
}
.elementor-page .entry-content,
.page-template-template-fullwidth-no-title-php .entry-content { margin: 0 !important; padding: 0 !important; }
.elementor-page #primary,
.page-template-template-fullwidth-no-title-php #primary { padding: 0 !important; }

/* ============================================================
   HOMEPAGE — ZERIF-PRO SECTIONS
   ============================================================ */

/* Hero slider — cinematic treatment */
.n2-section-smartslider {
    border-bottom: 4px solid var(--tr) !important;
    position: relative !important;
}
/* gradient overlay at bottom for blending into next section */
.n2-section-smartslider::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(200,16,46,.08));
    pointer-events: none;
    z-index: 2;
}

/* Nav heading font */
.navbar-inverse .navbar-nav > li > a,
.navbar.navbar-inverse .primary-menu a,
.navbar.navbar-inverse .primary-menu > li > a {
    font-family: var(--font-head) !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}

/* Big title / hero fallback */
.big-title-container { background: linear-gradient(135deg, var(--black) 0%, #2d0a10 60%, var(--tr) 100%) !important; }
.big-title-container .intro-text { color: var(--white) !important; }
.big-title-container .red-btn { background: var(--tr) !important; border-radius: var(--radius) !important; font-weight: 700 !important; }
.big-title-container .red-btn:hover { background: var(--tr-dark) !important; }

/* ── EXPLORE MORE HERE (Focus) ── dark cinematic ── */
section.focus,
#focus {
    background: var(--surface) !important;
    padding: 80px 0 !important;
    border-bottom: 3px solid var(--tr) !important;
    position: relative !important;
}
/* subtle red glow top-left */
section.focus::before,
#focus::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(200,16,46,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Section header */
section.focus .section-header,
#focus .section-header { margin-bottom: 48px !important; }
section.focus .section-header h2,
#focus .section-header h2 {
    font-family: var(--font-head) !important;
    color: var(--white) !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}
section.focus .section-header h2:after,
#focus .section-header h2:after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--tr);
    margin: 14px auto 0;
}

/* Focus cards */
.focus-box {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-top: 3px solid var(--tr) !important;
    border-radius: var(--radius-lg) !important;
    padding: 36px 24px 32px !important;
    margin: 0 8px !important;
    box-shadow: var(--shadow-dk) !important;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-top-color .3s !important;
    text-align: center !important;
    height: 100% !important;
}
.focus-box:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 40px rgba(200,16,46,.22) !important;
}

/* Icon — number badge style */
.service-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--tr) 0%, var(--tr-dark) 100%) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(200,16,46,.35) !important;
}
.our-focus-widget-image {
    width: 34px !important;
    height: 34px !important;
    background-size: contain !important;
    background-position: center !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
}

.focus-box h5,
.focus-box h5.red-border-bottom {
    font-family: var(--font-head) !important;
    color: var(--white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 12px !important;
    border-bottom: none !important;
}
.focus-box h5:before,
.focus-box h5.red-border-bottom:before { display: none !important; }
.focus-box p {
    color: var(--gray-md) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}
.focus-box a { color: inherit !important; text-decoration: none !important; }
.focus-box a:hover { color: inherit !important; }

/* ── VEHICLES CAROUSEL (Packages) ── */
section.packages,
#pricingtable {
    background: linear-gradient(175deg, #0D0D0D 0%, #1a0408 60%, #2d0a10 100%) !important;
    padding: 80px 0 90px !important;
    border-bottom: 3px solid var(--tr) !important;
    position: relative !important;
}
/* ambient red glow bottom-right */
section.packages::after,
#pricingtable::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 500px; height: 300px;
    background: radial-gradient(circle, rgba(200,16,46,.10) 0%, transparent 70%);
    pointer-events: none;
}
section.packages .section-header h2,
#pricingtable .section-header h2 {
    font-family: var(--font-head) !important;
    color: var(--white) !important;
    font-size: 42px !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}
section.packages .section-header h2:after,
#pricingtable .section-header h2:after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--tr);
    margin: 14px auto 0;
}

/* SmartSlider inside packages — white bg so car images show cleanly */
#pricingtable .n2-section-smartslider,
section.packages .n2-section-smartslider {
    background: transparent !important;
    border-bottom: none !important;
}
#pricingtable .n2-ss-slider,
section.packages .n2-ss-slider {
    background: transparent !important;
}

/* SmartSlider nav arrows */
.n2-ss-arrow { color: var(--tr) !important; }
.n2-ss-arrow:hover { opacity: .8 !important; }

/* Car name text on carousel */
#pricingtable .n2-font-3a6a84dfbfe02a61f71e5e7a2304e33b-hover,
section.packages [class*="n2-font"] { color: var(--white) !important; }

/* "More Details" button */
#pricingtable .n2-ss-button-container a,
section.packages .n2-ss-button-container a {
    background: var(--tr) !important;
    color: var(--white) !important;
    border: 2px solid var(--tr) !important;
    border-radius: var(--radius) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 8px 22px !important;
    letter-spacing: .5px !important;
    transition: background var(--ease) !important;
}
#pricingtable .n2-ss-button-container a:hover,
section.packages .n2-ss-button-container a:hover {
    background: transparent !important;
    color: var(--white) !important;
}

/* Dot navigation */
.n2-ss-dots .n2-ss-dot { background: rgba(255,255,255,.3) !important; }
.n2-ss-dots .n2-ss-dot.n2-active { background: var(--tr) !important; }

/* ── TESTIMONIALS ── */
.testimonial {
    background: var(--surface) !important;
    padding: 80px 0 !important;
    border-bottom: 3px solid rgba(200,16,46,.3) !important;
}
.testimonial .section-header h2 {
    font-family: var(--font-head) !important;
    color: var(--white) !important;
    font-size: 36px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}
.testimonial .section-header h2:after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--tr);
    margin: 14px auto 0;
}
.testimonial .feedback-box {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-top: 3px solid var(--tr) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    margin: 0 12px !important;
    box-shadow: var(--shadow-dk) !important;
    transition: transform .3s var(--ease-out) !important;
}
.testimonial .feedback-box:hover { transform: translateY(-4px) !important; }
.testimonial .feedback-box img { border-radius: var(--radius) !important; }

/* ── PURCHASE NOW / CTA STRIP ── */
.purchase-now,
#ribbon_right {
    background: linear-gradient(135deg, var(--tr) 0%, var(--tr-dark) 100%) !important;
    padding: 36px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}
.purchase-now h3,
#ribbon_right h3 {
    font-family: var(--font-head) !important;
    color: var(--white) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
.purchase-now .red-btn,
#ribbon_right .red-btn,
.purchase-now a.red-btn {
    background: var(--white) !important;
    color: var(--tr) !important;
    border: 2px solid var(--white) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 32px !important;
    transition: all var(--ease) !important;
}
.purchase-now .red-btn:hover,
#ribbon_right .red-btn:hover {
    background: transparent !important;
    color: var(--white) !important;
}

/* Separators */
.separator-one { background: var(--tr) !important; }
.separator-one h3 { color: var(--white) !important; }
.separator-one .green-btn { background: var(--tr-dark) !important; border-radius: var(--radius) !important; }

/* Contact section */
.contact-us { background: linear-gradient(135deg, var(--black), #2d0a10) !important; }
.contact-us .section-header h2,
.contact-us .section-header h6,
.contact-us form.wpcf7-form p label { color: var(--white) !important; }
.contact-us button { background: var(--tr) !important; border-radius: var(--radius) !important; }
.contact-us button:hover { background: var(--tr-dark) !important; }

/* About us section */
.about-us { background: var(--black) !important; }
.about-us .section-header h2 { color: var(--white) !important; }
.about-us .section-header h6 { color: var(--tr) !important; }

/* Section headers global */
.section-header .red-border-bottom:before,
.entry-title:before,
.widget-title:before { background: var(--tr) !important; }

/* ============================================================
   INDIVIDUAL CAR PAGES (Overview / Gallery / Specs)
   template-fullwidth-no-title.php
   ============================================================ */

/* Hero banner image full-bleed */
.page-template-template-fullwidth-no-title-php .elementor-widget-image img {
    width: 100% !important; display: block !important;
}

/* Sub-nav (Overview / Specification / Gallery) */
.page-template-template-fullwidth-no-title-php .elementor-widget-nav-menu {
    background: var(--white) !important;
    border-bottom: 2px solid var(--gray-lt) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.page-template-template-fullwidth-no-title-php .elementor-nav-menu--main {
    justify-content: center !important;
}
.page-template-template-fullwidth-no-title-php .elementor-item {
    color: var(--gray-dk) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 16px 28px !important;
    border-bottom: 3px solid transparent !important;
    transition: all var(--ease) !important;
}
.page-template-template-fullwidth-no-title-php .elementor-item:hover,
.page-template-template-fullwidth-no-title-php .elementor-item.elementor-item-active {
    color: var(--tr) !important;
    border-bottom-color: var(--tr) !important;
}

/* Animated headline on car pages */
.elementor-widget-animated-headline .elementor-headline {
    color: var(--black) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 24px 0 !important;
}
.elementor-headline-plain-text,
.elementor-headline-dynamic-text { color: var(--tr) !important; }

/* Car page content sections */
.page-template-template-fullwidth-no-title-php .elementor-section {
    margin-bottom: 0 !important;
}
/* Neutralise legacy -73px negative top margin that was set in Elementor to
   pull hero sections under the old full-height header. With the sticky nav
   (64px) that approach overshoots and buries the top of the hero behind the
   navbar. Zeroing it out puts the first section exactly below the nav. */
.page-template-template-fullwidth-no-title-php .elementor-top-section:first-of-type {
    margin-top: 0 !important;
}
.page-template-template-fullwidth-no-title-php .elementor-text-editor p {
    color: var(--gray-dk) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}
.page-template-template-fullwidth-no-title-php .elementor-widget-heading .elementor-heading-title {
    color: var(--black) !important;
    font-weight: 700 !important;
}

/* Inquiry / CTA buttons on car pages */
.page-template-template-fullwidth-no-title-php .elementor-button {
    background: var(--tr) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    transition: background var(--ease) !important;
}
.page-template-template-fullwidth-no-title-php .elementor-button:hover {
    background: var(--tr-dark) !important;
}

/* Color swatch sections */
.page-template-template-fullwidth-no-title-php .elementor-image-box-wrapper {
    text-align: center !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius) !important;
    padding: 12px !important;
    transition: border-color var(--ease) !important;
    cursor: pointer;
}
.page-template-template-fullwidth-no-title-php .elementor-image-box-wrapper:hover {
    border-color: var(--tr) !important;
}
.page-template-template-fullwidth-no-title-php .elementor-image-box-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--gray-md) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-top: 6px !important;
}

/* ============================================================
   SPEC PAGE — ACCORDION
   ============================================================ */
.eael-adv-accordion { border: none !important; }

.eael-accordion-header,
.elementor-tab-title.eael-accordion-header {
    background: var(--gray-bg) !important;
    border: 1px solid var(--gray-lt) !important;
    border-radius: var(--radius) !important;
    color: var(--black) !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all var(--ease) !important;
}
.eael-accordion-header:hover,
.eael-accordion-header.active,
.eael-accordion-header.active-default {
    background: var(--tr) !important;
    color: var(--white) !important;
    border-color: var(--tr) !important;
}
.eael-accordion-header .eael-accordion-tab-title { color: inherit !important; font-weight: 700 !important; }
.eael-accordion-header .fa-toggle { color: inherit !important; }

.eael-accordion-content,
.eael-accordion-content.active-default {
    display: block !important;
    background: var(--white) !important;
    border: 1px solid var(--gray-lt) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    padding: 24px !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 12px !important;
}
.eael-accordion-content .elementor img,
.eael-accordion-content img {
    width: 80% !important;
    max-width: 900px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border: 1px solid var(--gray-lt) !important;
    border-radius: var(--radius) !important;
}

/* ============================================================
   GLOBAL TABLES (spec/battery pages)
   ============================================================ */
.tablepress { width: 100% !important; border-collapse: collapse !important; margin-bottom: 24px !important; }
.tablepress th,
.tablepress td { padding: 10px 16px !important; border: 1px solid var(--gray-lt) !important; font-size: 13px !important; vertical-align: middle !important; }
.tablepress thead th { background: var(--black) !important; color: var(--white) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: .5px !important; }
.tablepress thead th:first-child { background: var(--tr) !important; }
.tablepress tbody tr:nth-child(odd) td { background: var(--white) !important; }
.tablepress tbody tr:nth-child(even) td { background: var(--gray-bg) !important; }
.tablepress tbody tr:hover td { background: #FFF0F2 !important; }
.tablepress td:first-child { font-weight: 600 !important; color: var(--black) !important; background: var(--gray-bg) !important; width: 35% !important; }

/* ============================================================
   GENUINE ACCESSORIES PAGE
   ============================================================ */
.page-id-3247 h1[data-elementor-setting-key="title"] {
    font-size: 17px !important; font-weight: 700 !important; color: var(--black) !important;
    margin: 16px 0 8px !important; text-transform: uppercase !important;
}
.page-id-3247 .elementor-image-box-wrapper {
    border: 1px solid var(--gray-lt) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    box-shadow: var(--shadow) !important;
    transition: box-shadow var(--ease), border-color var(--ease) !important;
    background: var(--white) !important;
}
.page-id-3247 .elementor-image-box-wrapper:hover {
    box-shadow: var(--shadow-r) !important; border-color: var(--tr) !important;
}

/* ============================================================
   GENUINE BATTERY PAGE — TAB NAV
   ============================================================ */
.page-id-3251 .elementor-widget-nav-menu .elementor-nav-menu,
.page-id-3258 .elementor-widget-nav-menu .elementor-nav-menu,
.page-id-3260 .elementor-widget-nav-menu .elementor-nav-menu {
    display: flex !important; justify-content: center !important;
    border-bottom: 2px solid var(--gray-lt) !important;
    background: var(--white) !important;
    margin-bottom: 0 !important;
}
.page-id-3251 .elementor-item,
.page-id-3258 .elementor-item,
.page-id-3260 .elementor-item {
    display: block !important;
    padding: 14px 28px !important;
    color: var(--gray-md) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 3px solid transparent !important;
    transition: all var(--ease) !important;
}
.page-id-3251 .elementor-item:hover,
.page-id-3251 .elementor-item.elementor-item-active,
.page-id-3258 .elementor-item:hover,
.page-id-3258 .elementor-item.elementor-item-active,
.page-id-3260 .elementor-item:hover,
.page-id-3260 .elementor-item.elementor-item-active {
    color: var(--tr) !important; border-bottom-color: var(--tr) !important;
}

/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */
.elementor-button,
a.elementor-button,
.elementor-button-wrapper a {
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    transition: all var(--ease) !important;
}
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button-primary {
    background: var(--tr) !important;
    border-color: var(--tr) !important;
    color: var(--white) !important;
}
.elementor-button.elementor-button-primary:hover { background: var(--tr-dark) !important; }

.wpcf7-submit, .wpforms-submit {
    background: var(--tr) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 12px 32px !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: var(--radius) !important;
    cursor: pointer !important;
    transition: background var(--ease) !important;
}
.wpcf7-submit:hover, .wpforms-submit:hover { background: var(--tr-dark) !important; }

/* ============================================================
   FORMS (global)
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
    border: 1.5px solid var(--gray-lt) !important;
    border-radius: var(--radius) !important;
    padding: 10px 14px !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    color: var(--black) !important;
    width: 100% !important;
    transition: border-color var(--ease) !important;
}
.wpcf7 input:focus, .wpcf7 textarea:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus {
    border-color: var(--tr) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(200,16,46,.10) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer,
#colophon,
.zerif-footer-top { border-top: 4px solid var(--tr) !important; }

#footer { background: var(--black) !important; }
.copyright { background: #111 !important; }

#footer .company-details,
#footer .company-details a,
#footer .footer-widget p,
#footer .footer-widget a { color: #aaa !important; font-size: 13px !important; }
#footer .footer-widget h1 { color: var(--white) !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
#footer .footer-widget h1:before { background: var(--tr) !important; }
#footer .company-details a:hover,
#footer .footer-widget a:hover { color: var(--tr) !important; }
#footer .social li a { color: #aaa !important; }
#footer .social li a:hover { color: var(--tr) !important; }
.copyright p { color: #888 !important; font-size: 12px !important; }

/* ============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================ */
#wpfront-scroll-top-container a {
    background: var(--tr) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(200,16,46,.35) !important;
}

/* ============================================================
   GALLERY PAGES
   ============================================================ */
.elementor-widget-image-gallery .gallery-item {
    overflow: hidden !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--gray-lt) !important;
    transition: box-shadow var(--ease) !important;
}
.elementor-widget-image-gallery .gallery-item:hover {
    box-shadow: var(--shadow-r) !important;
}
.elementor-widget-image-gallery .gallery-item img {
    transition: transform .35s ease !important;
}
.elementor-widget-image-gallery .gallery-item:hover img { transform: scale(1.07) !important; }

/* ============================================================
   ELEMENTOR DIVIDERS
   ============================================================ */
.elementor-widget-divider .elementor-divider-separator { border-color: var(--tr) !important; }

/* ============================================================
   MEGAMENU
   ============================================================ */
.wp-megamenu li .wp-megamenu-sub-menu {
    border-top: 3px solid var(--tr) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.13) !important;
}

/* ============================================================
   VEHICLES PAGE — custom template tc-* classes
   (already in page-vehicles.php inline, but keep globals here too)
   ============================================================ */
.tc-filter-btn.active { color: var(--tr) !important; border-bottom-color: var(--tr) !important; }
.tc-card__btn { background: var(--tr) !important; }
.tc-card:hover { border-color: var(--tr) !important; }

/* ============================================================
   GLOBAL ELEMENTOR TYPOGRAPHY — all inner pages
   ============================================================ */

/* All Elementor section headings use Barlow Condensed */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    line-height: 1.15 !important;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: 48px !important; }
.elementor-widget-heading h2.elementor-heading-title { font-size: 36px !important; }
.elementor-widget-heading h3.elementor-heading-title { font-size: 26px !important; }
.elementor-widget-heading h4.elementor-heading-title { font-size: 20px !important; }
.elementor-widget-heading h5.elementor-heading-title { font-size: 16px !important; }
.elementor-widget-heading h6.elementor-heading-title { font-size: 13px !important; }

/* Animated headline — large bold display */
.elementor-widget-animated-headline .elementor-headline {
    font-family: var(--font-head) !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
}
.elementor-widget-animated-headline .elementor-headline-plain-text {
    color: var(--black) !important;
}
.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper {
    color: var(--tr) !important;
}

/* Text editor — clean readable body */
.elementor-widget-text-editor .elementor-widget-container {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--gray-dk) !important;
}
.elementor-widget-text-editor p { margin-bottom: 1em !important; }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { padding-left: 1.5em !important; margin-bottom: 1em !important; }
.elementor-widget-text-editor li { margin-bottom: .4em !important; line-height: 1.7 !important; }
.elementor-widget-text-editor a { color: var(--tr) !important; font-weight: 600 !important; }
.elementor-widget-text-editor strong { color: var(--black) !important; }

/* Elementor sections — sensible padding defaults */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px !important;
}

/* ============================================================
   SERVICES PAGE — Call-to-Action Cards
   ============================================================ */
.elementor-widget-call-to-action .elementor-cta {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: var(--shadow-dk) !important;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out) !important;
    cursor: pointer !important;
    min-height: 320px !important;
}
.elementor-widget-call-to-action .elementor-cta:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
}

/* Darken the BG image overlay */
.elementor-cta__bg-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%) !important;
    transition: background .3s ease !important;
}
.elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__bg-overlay {
    background: linear-gradient(to top, rgba(200,16,46,.8) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.2) 100%) !important;
}

/* Card text */
.elementor-cta__content {
    padding: 28px 24px !important;
    position: relative !important;
    z-index: 2 !important;
}
.elementor-cta__title {
    font-family: var(--font-head) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    /* color intentionally NOT set here — let Elementor inline color and
       body.home override handle each context separately */
}
.elementor-cta__description {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    /* color intentionally NOT set here — same reason as above */
}

/* Red accent bar at bottom of card */
.elementor-cta__content::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--tr);
    margin-bottom: 12px;
    border-radius: 2px;
    transition: width .3s ease;
}
.elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__content::before {
    width: 80px !important;
}

/* CTA button inside card */
.elementor-cta__button {
    background: var(--tr) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-head) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    margin-top: 16px !important;
    display: inline-block !important;
    transition: background .2s ease !important;
}
.elementor-cta__button:hover { background: var(--tr-dark) !important; color: var(--white) !important; }

/* ============================================================
   CREATIVE BUTTON (eael-creative-button)
   ============================================================ */
.eael-creative-button,
.eael-creative-button a,
.elementor-widget-eael-creative-button .eael-creative-btn {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: var(--radius) !important;
    transition: all .25s var(--ease-out) !important;
}
.eael-creative-button .eael-creative-btn-inner,
.elementor-widget-eael-creative-button a {
    background: var(--tr) !important;
    color: var(--white) !important;
    border: 2px solid var(--tr) !important;
    padding: 12px 32px !important;
    font-size: 14px !important;
}
.eael-creative-button .eael-creative-btn-inner:hover,
.elementor-widget-eael-creative-button a:hover {
    background: transparent !important;
    color: var(--tr) !important;
}

/* ============================================================
   INNER PAGE HEADER (non-homepage pages with Elementor)
   ============================================================ */

/* First Elementor section on inner pages — use as page hero */
.page-template-template-fullwidth-no-title-php .elementor-top-section:first-of-type
.elementor-widget-animated-headline .elementor-headline {
    font-size: clamp(32px, 5vw, 56px) !important;
    line-height: 1.1 !important;
}

/* ── Section color context classes (reliable, class-based) ──
   tc-dark / tc-light / tc-red added via css_classes in Elementor JSON
   ─────────────────────────────────────────────────────────────── */

/* Dark sections: force white headings, muted body */
.tc-dark .elementor-widget-heading .elementor-heading-title {
    color: #FFFFFF !important;
}
.tc-dark .elementor-widget-text-editor,
.tc-dark .elementor-widget-text-editor p {
    color: #888888 !important;
}

/* Overline labels stay Toyota Red even inside dark sections */
.tc-overline .elementor-heading-title {
    color: #C8102E !important;
}

/* Stat labels (rendered as <p>) stay muted even inside tc-dark */
.tc-stat-col p.elementor-heading-title {
    color: #505050 !important;
}

/* Light sections: dark headings */
.tc-light .elementor-widget-heading .elementor-heading-title {
    color: #0D0D0D !important;
}

/* Red CTA strip: white headings */
.tc-red .elementor-widget-heading .elementor-heading-title {
    color: #FFFFFF !important;
}

/* Legacy: data-settings fallback (kept but secondary) */
.elementor-section[data-settings*='"background_color":"#1A1A1A"'] .elementor-heading-title,
.elementor-section[data-settings*='"background_color":"#0D0D0D"'] .elementor-heading-title,
.elementor-section[data-settings*='"background_color":"#000000"'] .elementor-heading-title {
    color: var(--white) !important;
}

/* ============================================================
   PARTS & ACCESSORIES PAGE  /  DEALER ACTIVITIES  /  INFO
   content pages with image + text-editor
   ============================================================ */
.page-id-353 .elementor-widget-image img,
.page-id-6552 .elementor-widget-image img,
.page-id-3367 .elementor-widget-image img {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

.page-id-353 .elementor-widget-heading .elementor-heading-title,
.page-id-6552 .elementor-widget-heading .elementor-heading-title,
.page-id-3367 .elementor-widget-heading .elementor-heading-title {
    color: var(--black) !important;
    font-size: 32px !important;
}

/* ============================================================
   REQUEST A QUOTE / CONTACT FORM PAGES
   ============================================================ */
.page-id-507 .elementor-section,
.page-id-18 .elementor-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* WPForms page-level overrides */
.wpforms-container { max-width: 680px !important; margin: 0 auto !important; }
.wpforms-form .wpforms-field-label { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--gray-dk) !important; margin-bottom: 6px !important; }
.wpforms-form .wpforms-field-description { font-size: 12px !important; color: var(--gray-md) !important; margin-top: 4px !important; }
.wpforms-page-indicator { background: var(--gray-bg) !important; }
.wpforms-page-indicator-page-title { font-family: var(--font-head) !important; }

/* ============================================================
   CUSTOMER RELATIONS PAGE
   ============================================================ */
.page-id-63 .elementor-widget-heading .elementor-heading-title {
    font-size: 40px !important;
    color: var(--black) !important;
}
.page-id-63 .elementor-widget-text-editor { max-width: 720px !important; margin: 0 auto !important; }

/* ============================================================
   SERVICES / APPOINTMENT PAGES — Elementor canvas variant
   ============================================================ */
.elementor-template-canvas .elementor-widget-heading .elementor-heading-title,
.elementor-template-full-width .elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-head) !important;
    letter-spacing: .5px !important;
}

/* ============================================================
   GLOBAL ELEMENTOR SECTION PADDING
   ============================================================ */
.elementor-section.elementor-section-boxed.elementor-top-section {
    padding-top: 60px;
    padding-bottom: 60px;
}
/* Full-width stretched sections: no side padding */
.elementor-section.elementor-section-stretched {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   IMAGE BOX WIDGET — global
   ============================================================ */
.elementor-widget-image-box .elementor-image-box-wrapper {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out) !important;
    border: 1px solid var(--gray-lt) !important;
}
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    box-shadow: var(--shadow-r) !important;
    transform: translateY(-4px) !important;
    border-color: var(--tr) !important;
}
.elementor-widget-image-box .elementor-image-box-title {
    font-family: var(--font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--black) !important;
}
.elementor-widget-image-box .elementor-image-box-description {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--gray-md) !important;
    line-height: 1.7 !important;
}

/* ============================================================
   ICON LIST WIDGET
   ============================================================ */
.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--gray-dk) !important;
}
.elementor-widget-icon-list .elementor-icon-list-icon { color: var(--tr) !important; }

/* ============================================================
   ICON BOX WIDGET
   ============================================================ */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    padding: 28px 20px !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--gray-lt) !important;
    transition: all .25s var(--ease-out) !important;
    background: var(--white) !important;
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
    border-color: var(--tr) !important;
    box-shadow: var(--shadow-r) !important;
    transform: translateY(-4px) !important;
}
.elementor-widget-icon-box .elementor-icon { color: var(--tr) !important; }
.elementor-widget-icon-box .elementor-icon-box-title a,
.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--font-head) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--black) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}
.elementor-widget-icon-box .elementor-icon-box-description {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--gray-md) !important;
    line-height: 1.7 !important;
}

/* ============================================================
   FOOTER — enhanced headings
   ============================================================ */
#footer .footer-widget h1,
#footer .footer-widget h2,
#footer .footer-widget h3,
#footer .footer-widget .widget-title {
    font-family: var(--font-head) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--white) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

/* ============================================================
   REDUCED MOTION — accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {

    /* ── White bg on nav (clean light style) ── */
    #main-nav.navbar,
    #main-nav.navbar .navbar-collapse,
    #main-nav.navbar .bs-navbar-collapse {
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
    }

    /* ── Hide primary-menu by default — slideToggle inline style overrides on open ── */
    .primary-menu {
        display: none;
        background: #ffffff;
        border-top: 2px solid #C8102E;
        padding: 0;
    }

    /* ── Hamburger: dark bg + white bars — #main-nav scope (1-1-0) beats zerif .page button (0-1-1) ── */
    #main-nav .navbar-toggle {
        background: #111 !important;
        background-color: #111 !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: 4px !important;
        padding: 9px 11px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
    #main-nav .navbar-toggle .icon-bar {
        background: #fff !important;
        height: 2px !important;
        width: 20px !important;
        border-radius: 1px !important;
        display: block !important;
    }
    #main-nav .navbar-toggle:hover,
    #main-nav .navbar-toggle:focus { background: #1e1e1e !important; background-color: #1e1e1e !important; outline: none !important; }

    /* ── ul.menu: full-width block ── */
    #main-nav .primary-menu .menu,
    .navbar.navbar-inverse .primary-menu .menu {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* ── Each top-level li: FLEX ROW — a + button side-by-side, sub-menu wraps below ── */
    #main-nav .primary-menu .menu > li,
    #main-nav .primary-menu .menu > li.menu-item-has-children,
    .navbar.navbar-inverse .primary-menu .menu > li,
    .navbar.navbar-inverse .primary-menu .menu > li.menu-item-has-children {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: 100% !important;
        position: static !important;
        vertical-align: unset !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }

    /* ── Sub-menu li: plain block (not flex) ── */
    #main-nav .primary-menu .menu > li > ul.sub-menu > li,
    .navbar.navbar-inverse .primary-menu .menu > li > ul.sub-menu > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── Nav link: flex-grow fills row beside the button ── */
    #main-nav .primary-menu .menu > li > a,
    .navbar.navbar-inverse .primary-menu .menu > li > a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: block !important;
        color: #111111 !important;
        font-family: 'Barlow Condensed','Barlow',sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        padding: 16px 20px !important;
        border-bottom: none !important;
        border-top: none !important;
        background: #ffffff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #main-nav .primary-menu .menu > li > a:hover,
    #main-nav .primary-menu .menu > li.current-menu-item > a,
    .navbar.navbar-inverse .primary-menu .menu > li > a:hover,
    .navbar.navbar-inverse .primary-menu .menu > li.current-menu-item > a {
        color: #C8102E !important;
        background: #fdf0f2 !important;
    }

    /* ── Sub-menu: takes full width, wraps to new row inside flex li ── */
    #main-nav .primary-menu .menu > li > ul.sub-menu,
    .navbar.navbar-inverse .primary-menu .menu > li > ul.sub-menu {
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 3 !important;
    }

    /* ── Zerif dropdownmenu button: flex sibling of <a>, auto-sizes to match row height ── */
    #main-nav .primary-menu button.dropdownmenu {
        position: static !important;
        flex: 0 0 56px !important;
        width: 56px !important;
        height: auto !important;
        min-height: 52px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-left: 1px solid #e8e8e8 !important;
        color: transparent !important;
        font-size: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        order: 2 !important;
        transition: background .15s ease !important;
    }
    /* CSS chevron ∨ */
    #main-nav .primary-menu button.dropdownmenu::after {
        content: '' !important;
        display: block !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid #888888 !important;
        border-bottom: 2px solid #888888 !important;
        transform: rotate(45deg) !important;
        margin-top: -4px !important;
        transition: transform .2s ease, border-color .15s ease !important;
    }
    #main-nav .primary-menu button.dropdownmenu:hover { background: #fdf0f2 !important; background-color: #fdf0f2 !important; }
    #main-nav .primary-menu button.dropdownmenu:hover::after { border-color: #C8102E !important; }
    /* Rotate chevron when sub-menu open */
    #main-nav .primary-menu li.this-open > button.dropdownmenu::after {
        transform: rotate(225deg) !important;
        margin-top: 2px !important;
    }

    /* ── Sub-menus ── */
    .primary-menu ul.sub-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        background: #f8f8f8 !important;
        border: none !important;
        border-top: 1px solid #e8e8e8 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .primary-menu ul.sub-menu li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    .primary-menu ul.sub-menu li a {
        display: block !important;
        padding: 12px 20px 12px 36px !important;
        color: #555555 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        border-bottom: none !important;
        float: none !important;
        width: auto !important;
        background: transparent !important;
    }
    .primary-menu ul.sub-menu li a:hover { color: #C8102E !important; background: #fdf0f2 !important; }
}
@media (max-width: 768px) {
    .zerif-top-bar { text-align: center !important; font-size: 11px !important; }
    .focus .focus-box { margin-bottom: 16px !important; }
    .elementor-widget-call-to-action .elementor-cta { min-height: 240px !important; }
    section.packages,
    #pricingtable { padding: 48px 0 56px !important; }
    section.focus,
    #focus { padding: 48px 0 !important; }
    .elementor-widget-heading h1.elementor-heading-title { font-size: 34px !important; }
    .elementor-widget-heading h2.elementor-heading-title { font-size: 26px !important; }
}

/* Override Zerif Pro 767px rules — target ul.menu (actual HTML, not ul.navbar-nav) */
@media (max-width: 767px) {
    #main-nav .primary-menu li,
    #main-nav .primary-menu li.menu-item-has-children,
    .navbar.navbar-inverse .primary-menu li,
    .navbar.navbar-inverse .primary-menu li.menu-item-has-children {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        position: relative !important;
        vertical-align: unset !important;
        box-sizing: border-box !important;
    }
    #main-nav .primary-menu .menu,
    .navbar.navbar-inverse .primary-menu .menu {
        text-align: left !important;
    }
}

/* ============================================================
   ADMIN BAR OFFSET
   ============================================================ */
body.admin-bar .zerif-top-bar { margin-top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .zerif-top-bar { margin-top: 46px; } }

/* ============================================================
   HOMEPAGE v3 — MODERN AUTOMOTIVE DESIGN
   ============================================================ */

/* ── CTA Cards: cinematic, flush (no radius, no lift shadow) */
body.home .elementor-widget-call-to-action .elementor-cta {
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Image zoom on hover (transform on bg instead of card) */
body.home .elementor-cta__bg {
    transition: transform .6s cubic-bezier(0.16,1,0.3,1) !important;
    will-change: transform !important;
}
body.home .elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__bg {
    transform: scale(1.06) !important;
}

/* Cinematic gradient overlay — heavier at bottom, very light at top */
body.home .elementor-cta__bg-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.50) 40%,
        rgba(0,0,0,.08) 100%
    ) !important;
    transition: background .45s ease !important;
}
body.home .elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__bg-overlay {
    background: linear-gradient(
        to top,
        rgba(200,16,46,.93) 0%,
        rgba(160,10,25,.60) 50%,
        rgba(0,0,0,.12) 100%
    ) !important;
}

/* Card text block */
body.home .elementor-cta__content {
    padding: 0 32px 36px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Red accent line */
body.home .elementor-cta__content::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 3px !important;
    background: var(--tr) !important;
    margin-bottom: 14px !important;
    transition: width .35s ease !important;
    border-radius: 0 !important;
}
body.home .elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__content::before {
    width: 72px !important;
}

body.home .elementor-cta__title {
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}
body.home .elementor-cta__description {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.72) !important;
}
body.home .elementor-cta__button {
    display: none !important;
}

/* ── Stats bar column: red top border ─────────────────────── */
.tc-stat-col {
    border-top: 3px solid var(--tr);
    position: relative;
}
.tc-stat-col + .tc-stat-col::after {
    content: '';
    position: absolute;
    left: 0; top: 24%; bottom: 24%;
    width: 1px;
    background: rgba(255,255,255,.08);
}

/* ── Button widget: base polish ──────────────────────────── */
body.home .elementor-widget-button .elementor-button {
    letter-spacing: 2px !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: background .22s ease, color .22s ease, border-color .22s ease !important;
}

/* ── About section image ─────────────────────────────────── */
body.home .elementor-widget-image img {
    filter: brightness(.9) !important;
    transition: filter .3s ease !important;
}
body.home .elementor-widget-image:hover img {
    filter: brightness(1) !important;
}

/* ── Divider: ensure correct color/size ─────────────────── */
body.home .elementor-widget-divider .elementor-divider-separator {
    border-top-color: var(--tr) !important;
    border-top-width: 3px !important;
}

/* ── Inner section width fix (if any remain) ──────────────── */
body.home .elementor-inner-section > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
}
body.home .elementor-inner-section .elementor-column > .elementor-column-wrap {
    padding: 0 !important;
}

/* ── Card grid sections: columns flush, no default padding ── */
.tc-card-grid > .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
}
.tc-card-grid > .elementor-container > .elementor-row {
    flex-wrap: wrap !important;
    margin: 0 !important;
}
.tc-card-grid .elementor-column > .elementor-column-wrap {
    padding: 0 !important;
}

/* ── RESPONSIVE: Tablet (769–1180px) ─────────────────────── */
@media (max-width: 1180px) and (min-width: 769px) {
    /* 3-col card grids → 1 column each */
    .tc-card-grid .elementor-column.elementor-col-33,
    .tc-card-grid .elementor-column.elementor-col-34 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    body.home .elementor-widget-call-to-action .elementor-cta { min-height: 360px !important; }
    /* Stats: 2×2 grid */
    body.home .tc-stat-col { width: 50% !important; flex: 0 0 50% !important; }
}

/* ── RESPONSIVE: Mobile (≤768px) ─────────────────────────── */
@media (max-width: 768px) {
    /* Card grid: all cols stack */
    .tc-card-grid .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Outer section cols stack (about, CTA strip) — but NOT stat cols */
    body.home .elementor-top-section > .elementor-container > .elementor-row > .elementor-column:not(.tc-stat-col) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Stats stay 2×2 */
    body.home .tc-stat-col { width: 50% !important; flex: 0 0 50% !important; }
    /* CTA card height */
    body.home .elementor-widget-call-to-action .elementor-cta { min-height: 290px !important; }
    /* Heading scale */
    body.home .elementor-widget-heading .elementor-heading-title { font-size: clamp(24px,7.5vw,44px) !important; }
    /* CTA content */
    body.home .elementor-cta__content { padding: 0 20px 24px !important; }
    /* Toyota logo: shrink */
    body.home .elementor-widget-image img { max-width: 60% !important; margin: 0 auto !important; display: block !important; }
    /* Buttons: center on mobile */
    body.home .elementor-widget-button { text-align: center !important; }
    body.home .elementor-widget-button .elementor-button {
        display: inline-block !important;
        min-width: 220px !important;
    }
    /* CTA strip: center all */
    body.home .elementor-top-section:last-of-type .elementor-heading-title { text-align: center !important; }
    body.home .elementor-top-section:last-of-type .elementor-widget-button { text-align: center !important; margin-top: 16px !important; }
}


/* ============================================================
   TC-HOME CUSTOM TEMPLATE — zeekrlife-inspired
   Scoped to .tc-home — no Elementor dependency
   ============================================================ */

/* Skip link: visually hidden on homepage (keep for a11y, remove visual) */
body.home a.sr-only.sr-only-focusable,
body.home a.skip-link,
body.home .zerif-skip-link {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

.tc-home {
    --tc-bg1:    #f5f5f5;
    --tc-bg2:    #ffffff;
    --tc-bg3:    #f0f0f0;
    --tc-red:    #C8102E;
    --tc-red-dk: #9E0B23;
    --tc-lt:     #e8e8e8;
    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── HERO ─────────────────────────────────────────────────── */
.tc-hero { width: 100%; line-height: 0; overflow: hidden; }

/* ── STATS BAR ────────────────────────────────────────────── */
.tc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--tc-bg1);
}
.tc-stat {
    padding: 52px 32px;
    text-align: center;
    border-top: 2px solid var(--tc-red);
    position: relative;
}
.tc-stat + .tc-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: rgba(0,0,0,0.08);
}
.tc-stat__num {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(42px, 4.5vw, 64px);
    font-weight: 800;
    color: #111111;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 14px;
}
.tc-stat__num sup, .tc-stat__num small {
    font-size: 0.5em;
    letter-spacing: 0;
    font-weight: 700;
    vertical-align: baseline;
}
.tc-stat__label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* ── SECTION COMMON ───────────────────────────────────────── */
.tc-section { }
.tc-section--dark     { background: var(--tc-bg2); }
.tc-section--dark-alt { background: var(--tc-bg3); }
.tc-section--light    { background: var(--tc-lt); }
.tc-section--pb       { padding-bottom: 96px; }
/* vehicles section: no bottom-pad (tc-section-cta provides it) */
.tc-section--vehicles { background: var(--tc-bg1); }

.tc-section-head {
    padding: 96px 48px 60px;
    text-align: center;
}
.tc-home .tc-overline {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--tc-red);
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 16px;
}
.tc-home .tc-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
    margin: 0 0 24px;
}
.tc-section--dark .tc-section-title,
.tc-section--dark-alt .tc-section-title,
.tc-section--vehicles .tc-section-title { color: #111111; }
.tc-section--light .tc-section-title { color: #0D0D0D; }

.tc-home .tc-rule {
    width: 44px; height: 3px;
    background: var(--tc-red);
    margin: 0 auto;
}

/* ── CARD GRID ────────────────────────────────────────────── */
.tc-cards { display: grid; }
.tc-cards--3 { grid-template-columns: repeat(3, 1fr); }
.tc-cards--2 { grid-template-columns: repeat(2, 1fr); }

/* ── IMAGE CARD ───────────────────────────────────────────── */
.tc-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 480px;
    text-decoration: none;
    color: inherit;
}
.tc-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.65s var(--ease);
    z-index: 0;
    transform: translateZ(0);          /* GPU layer — prevents blur */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tc-card:hover .tc-card__img { transform: translateZ(0) scale(1.04); }
.tc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.50) 40%, rgba(0,0,0,0.08) 100%);
    transition: background 0.45s ease;
    z-index: 1;
}
.tc-card:hover::after {
    background: linear-gradient(to top, rgba(200,16,46,0.88) 0%, rgba(120,0,16,0.55) 50%, rgba(0,0,0,0.10) 100%);
}
.tc-card__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 32px 36px;
    z-index: 2;
}
.tc-card__accent {
    width: 36px; height: 3px;
    background: var(--tc-red);
    margin-bottom: 14px;
    transition: width 0.35s ease, background 0.35s ease;
}
.tc-card:hover .tc-card__accent { width: 72px; background: #ffffff; }
.tc-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
    line-height: 1.2;
}
.tc-card__desc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    margin: 0;
    line-height: 1.65;
}
.tc-card--tall   { min-height: 520px; }
.tc-card--medium { min-height: 400px; }

/* ── PRODUCT CARD: image top, text panel below (vehicles) ── */
.tc-card--product {
    min-height: auto;
    display: flex;
    flex-direction: column;
}
.tc-card--product .tc-card__img {
    position: relative;
    top: 0; right: 0; bottom: auto; left: 0;
    width: 100%;
    height: 240px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #e8e8e8;
    transition: none;
    transform: none;
    backface-visibility: visible;
}
.tc-card--product:hover .tc-card__img { transform: none; }
.tc-card--product::after { display: none; }
.tc-card--product .tc-card__body {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    padding: 22px 24px 28px;
    flex: 1;
    background: #ffffff;
    border-top: 2px solid rgba(200,16,46,0.25);
    z-index: 1;
    transition: background 0.25s ease;
}
.tc-card--product:hover .tc-card__body { background: #f5f5f5; }
.tc-card--product .tc-card__title { font-size: 19px; color: #111111; }
.tc-card--product .tc-card__desc { color: rgba(0,0,0,0.50); font-size: 12px; }

/* ── ICON CARD (services, promos — typography-first) ─────── */
.tc-cards--icons { gap: 1px; background: rgba(0,0,0,0.06); }

.tc-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 44px 52px;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.25s ease;
}
.tc-section--dark-alt .tc-icon-card { background: #f8f8f8; }
.tc-icon-card:hover { background: #eeeeee; text-decoration: none; }

.tc-icon-card__icon {
    width: 52px;
    height: 52px;
    color: var(--tc-red);
    margin-bottom: 32px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.tc-icon-card__icon svg { width: 100%; height: 100%; display: block; }
.tc-icon-card:hover .tc-icon-card__icon { transform: translateY(-6px); }

.tc-icon-card__accent {
    width: 32px;
    height: 2px;
    background: var(--tc-red);
    margin: 0 auto 22px;
    transition: width 0.3s ease;
}
.tc-icon-card:hover .tc-icon-card__accent { width: 56px; }

.tc-icon-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px;
    line-height: 1.15;
}
.tc-icon-card__desc {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    line-height: 1.78;
    margin: 0 0 28px;
    flex: 1;
    max-width: 260px;
    transition: color 0.25s ease;
}
.tc-icon-card:hover .tc-icon-card__desc { color: #707070; }

.tc-icon-card__link {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--tc-red);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: auto;
}
.tc-icon-card__link::after { content: ' \2192'; }

/* wider variant (2-col promos) */
.tc-icon-card--wide .tc-icon-card__desc { max-width: 340px; }

/* ── SECTION CTA ROW ──────────────────────────────────────── */
.tc-section-cta {
    text-align: center;
    padding: 52px 20px 96px;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.tc-home .tc-btn {
    display: inline-block;
    padding: 16px 44px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
}
.tc-btn--red  { background: var(--tc-red); color: #fff; border-color: var(--tc-red); }
.tc-btn--red:hover { background: var(--tc-red-dk); border-color: var(--tc-red-dk); color: #fff; }
.tc-btn--white { background: #fff; color: #080808; border-color: #fff; }
.tc-btn--white:hover { background: #e5e5e5; border-color: #e5e5e5; color: #080808; }
.tc-btn--dark  { background: #0D0D0D; color: #fff; border-color: #0D0D0D; }
.tc-btn--dark:hover { background: #222; border-color: #222; color: #fff; }
.tc-btn--ghost { background: transparent; color: #111111; border-color: rgba(0,0,0,0.25); }
.tc-btn--ghost:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.45); color: #111111; }

/* ── ABOUT ────────────────────────────────────────────────── */
.tc-about {
    background: var(--tc-bg1);
    display: grid;
    grid-template-columns: 58fr 42fr;
}
.tc-about__content { padding: 108px 64px 108px 80px; }
.tc-about__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 80px 80px 40px;
}
.tc-about__visual img {
    max-width: 72%;
    height: auto;
    opacity: 0.88;
    filter: drop-shadow(0 4px 24px rgba(200,16,46,0.18));
}
.tc-about .tc-overline { text-align: left; }
.tc-about__heading {
    text-align: left;
    font-size: clamp(26px, 3.0vw, 44px) !important;
    color: #111111 !important;
    margin-bottom: 28px !important;
}
.tc-about__text {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 40px;
    max-width: 520px;
}
.tc-btn-group { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── CTA STRIP ────────────────────────────────────────────── */
.tc-cta-strip {
    background: var(--tc-red);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 52px 80px;
    gap: 24px;
}
.tc-cta-strip__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.15;
}

/* ── LARGE SCREEN ─────────────────────────────────────────── */
@media (min-width: 1440px) {
    .tc-section-head { padding: 100px 15% 64px; }
    .tc-about__content { padding: 120px 72px 120px 10%; }
    .tc-about__visual  { padding: 80px 10% 80px 48px; }
    .tc-cta-strip { padding: 60px 10%; }
}

/* ── TABLET (769–1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .tc-cards--3 { grid-template-columns: 1fr; }
    .tc-card { min-height: 380px; }
    .tc-card--tall { min-height: 380px; }
    .tc-card--product { min-height: auto; }
    .tc-card--product .tc-card__img { height: 280px; }
    .tc-cards--icons.tc-cards--3,
    .tc-cards--icons.tc-cards--2 { grid-template-columns: 1fr; }
    .tc-icon-card { padding: 48px 36px 44px; }
    .tc-about { grid-template-columns: 1fr; }
    .tc-about__content { padding: 72px 48px; }
    .tc-about__visual { padding: 0 48px 72px; }
    .tc-about__visual img { max-width: 35%; }
    .tc-about__heading { font-size: clamp(28px, 4vw, 42px) !important; }
    .tc-cta-strip { flex-direction: column; text-align: center; padding: 48px 40px; }
}

/* ── MOBILE (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .tc-stats { grid-template-columns: repeat(2, 1fr); }
    .tc-stat  { padding: 36px 20px; }
    .tc-stat__num { font-size: 40px; margin-bottom: 10px; }
    .tc-stat + .tc-stat::before { display: none; }

    .tc-section-head { padding: 64px 24px 40px; }
    .tc-cards--2 { grid-template-columns: 1fr; }
    .tc-card   { min-height: 300px; }
    .tc-card--tall   { min-height: 320px; }
    .tc-card--medium { min-height: 280px; }
    .tc-card--product { min-height: auto; }
    .tc-card--product .tc-card__img { height: 220px; }
    .tc-icon-card { padding: 40px 24px 36px; }
    .tc-icon-card__icon { width: 44px; height: 44px; margin-bottom: 24px; }
    .tc-icon-card__desc { max-width: none; font-size: 13.5px; }
    .tc-card__body { padding: 0 20px 24px; }
    .tc-card__title { font-size: 18px; }

    .tc-about__content { padding: 56px 24px; }
    .tc-about__visual  { display: none; }
    .tc-btn-group { flex-direction: column; }
    .tc-btn-group .tc-btn { text-align: center; }

    .tc-section-cta { padding: 36px 24px 64px; }
    .tc-cta-strip { padding: 40px 24px; gap: 20px; }
}

/* ============================================================
   SCROLL-REVEAL SYSTEM
   ============================================================ */
.tc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
                transform 0.65s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
}
.tc-reveal.tc-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .tc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   SPOTLIGHT — full-bleed featured vehicle
   ============================================================ */
.tc-spotlight {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.tc-spotlight__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    transition: transform 0.08s linear;
    will-change: transform;
}
.tc-spotlight__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.10) 100%
    );
    z-index: 1;
}
.tc-spotlight__content {
    position: relative;
    z-index: 2;
    padding: 0 80px 80px;
    max-width: 680px;
}
.tc-spotlight__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(72px, 9vw, 130px);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 0.9;
    margin: 12px 0 20px;
}
.tc-spotlight__sub {
    font-family: 'Jost', sans-serif;
    font-size: clamp(14px, 1.6vw, 17px);
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 420px;
}
.tc-spotlight__aside {
    position: absolute;
    right: 80px;
    bottom: 80px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.tc-spotlight__badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.15);
}
.tc-spotlight__badge--accent {
    color: #ffffff;
    border-color: var(--tc-red, #C8102E);
    background: var(--tc-red, #C8102E);
}

/* outline-white button (used in spotlight) */
.tc-btn--outline-white {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.6);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tc-btn--outline-white:hover {
    background: rgba(255,255,255,0.1);
    border-color: #ffffff;
    color: #ffffff;
}
.tc-arr {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}
.tc-arr svg { width: 18px; height: 18px; }
.tc-btn:hover .tc-arr { transform: translateX(4px); }

/* ============================================================
   VEHICLE SHOWCASE GRID — asymmetric Zeekrlife layout
   ============================================================ */
.tc-vgrid {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 3px;
    background: #000;
}
.tc-vgrid__col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Base vehicle card */
.tc-vcard {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tc-vcard--lg  { min-height: 600px; }
.tc-vcard--sm  { min-height: 298px; flex: 1; }

.tc-vcard__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.70s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
}
.tc-vcard:hover .tc-vcard__bg { transform: scale(1.05); }

.tc-vcard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.05) 100%
    );
    transition: background 0.45s ease;
    z-index: 1;
}
.tc-vcard:hover .tc-vcard__overlay {
    background: linear-gradient(
        to top,
        rgba(200,16,46,0.90) 0%,
        rgba(120,0,16,0.55) 45%,
        rgba(0,0,0,0.08) 100%
    );
}

.tc-vcard__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 36px 36px;
    z-index: 2;
}
.tc-vcard__tag {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tc-red, #C8102E);
    margin-bottom: 12px;
    opacity: 0.9;
}
.tc-vcard__rule {
    width: 32px;
    height: 2px;
    background: var(--tc-red, #C8102E);
    margin-bottom: 14px;
    transition: width 0.35s ease, background 0.35s ease;
}
.tc-vcard:hover .tc-vcard__rule { width: 60px; background: #fff; }

.tc-vcard__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0 0 8px;
}
.tc-vcard--sm .tc-vcard__title { font-size: clamp(18px, 2vw, 26px); }

.tc-vcard__desc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.60);
    margin: 0 0 18px;
    line-height: 1.55;
}
.tc-vcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    transition: color 0.25s ease;
}
.tc-vcard__cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.tc-vcard:hover .tc-vcard__cta { color: #fff; }
.tc-vcard:hover .tc-vcard__cta svg { transform: translateX(4px); }

/* .tc-icon-arrow used by $ico_arrow in vcard */
.tc-icon-arrow { display: block; }

/* ============================================================
   ABOUT — glow accent behind logo
   ============================================================ */
.tc-about__visual { position: relative; }
.tc-about__glow { display: none; }

/* ============================================================
   SPOTLIGHT RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tc-spotlight { min-height: 70vh; }
    .tc-spotlight__content { padding: 0 48px 64px; }
    .tc-spotlight__aside   { right: 48px; bottom: 64px; }
}
@media (max-width: 768px) {
    .tc-spotlight { min-height: 60vh; }
    .tc-spotlight__content { padding: 0 24px 52px; max-width: 100%; }
    .tc-spotlight__aside   { display: none; }
    .tc-spotlight__title   { font-size: clamp(52px, 14vw, 80px); }
    .tc-spotlight__sub     { font-size: 14px; }
}

/* ============================================================
   GLOBAL LIGHT PALETTE OVERRIDE
   All custom page backgrounds → off-white / light theme.
   Targets every tc-* page wrapper so one edit covers all 13 templates.
   ============================================================ */

/* --- Palette tokens ---------------------------------------- */
:root {
    --tc-page-bg:    #f5f5f5;   /* primary page background  */
    --tc-sect-bg:    #ffffff;   /* secondary section bg     */
    --tc-surf-bg:    #f0f0f0;   /* card / surface bg        */
    --tc-surf-lt:    #e8e8e8;   /* lighter surface          */
    --tc-border:     rgba(0,0,0,.08);
    --tc-hero-grad:  linear-gradient(160deg, #ebebeb 0%, #f5f5f5 100%);
}

/* --- Page shells ------------------------------------------- */
.tc-inner-page,
.tc-appt-page,
.tc-career-page,
.tc-contact-page,
.tc-quote-page,
.tc-services-page,
.tc-vehicles-page { background: var(--tc-page-bg) !important; }

/* --- Hero / banner sections -------------------------------- */
.tc-inner-hero,
.tc-contact-hero,
.tc-quote-hero { background: var(--tc-hero-grad) !important; }

/* --- Body / content sections ------------------------------- */
.tc-placeholder-section,
.tc-appt-body,
.tc-career-body,
.tc-contact-body,
.tc-quote-body,
.tc-services-wrap,
.tc-vp-grid-wrap,
.tc-customer-body { background: var(--tc-sect-bg) !important; }

/* --- Cards / form boxes / surfaces ------------------------- */
.tc-placeholder-card,
.tc-appt-form-box,
.tc-career-form-box,
.tc-contact-form-box,
.tc-quote-form-box,
.tc-career-info-card { background: var(--tc-surf-bg) !important; border-color: var(--tc-border) !important; }

/* --- CTA strips -------------------------------------------- */
.tc-inner-cta,
.tc-services-cta { background: var(--tc-sect-bg) !important; border-top-color: var(--tc-border) !important; }

/* --- Vehicles hero + filter bar ---------------------------- */
.tc-vehicles-hero { background: var(--tc-page-bg) !important; border-bottom-color: var(--tc-border) !important; }
.tc-filter-bar { background: var(--tc-sect-bg) !important; border-bottom-color: var(--tc-border) !important; }

/* --- Spec accordion ---------------------------------------- */
.tc-spec-page .elementor-widget-eael-adv-accordion { background: var(--tc-sect-bg) !important; }
.tc-spec-page .eael-accordion-header,
.tc-spec-page .elementor-tab-title.eael-accordion-header { background: var(--tc-surf-bg) !important; }
.tc-spec-page .eael-accordion-header.active,
.tc-spec-page .eael-accordion-header.active-default { background: var(--tc-surf-lt) !important; }
.tc-spec-page .eael-accordion-content { background: var(--tc-sect-bg) !important; }
.tc-spec-page .elementor-widget-button { background: var(--tc-page-bg) !important; }

/* --- Spec nav section bg ----------------------------------- */
.tc-spec-page .elementor-nav-menu--main { background: var(--tc-surf-bg) !important; }

/* --- Aside / sidebar panels -------------------------------- */
.tc-appt-aside,
.tc-quote-aside { background: var(--tc-surf-bg) !important; }

/* --- Text colors: flip white text for light backgrounds ---- */
.tc-inner-hero__title { color: #111111 !important; }
.tc-inner-hero__sub   { color: rgba(0,0,0,.55) !important; }
.tc-inner-hero        { border-bottom-color: var(--tc-border) !important; }
.tc-placeholder-title { color: #111111 !important; }
.tc-placeholder-desc  { color: rgba(0,0,0,.55) !important; }
.tc-placeholder-card  { color: rgba(0,0,0,.6) !important; }
.tc-inner-cta__label  { color: rgba(0,0,0,.6) !important; }
.tc-vehicles-hero__title { color: #111111 !important; }
.tc-vehicles-hero__sub   { color: rgba(0,0,0,.55) !important; }
.tc-vehicles-hero    { border-bottom-color: var(--tc-border) !important; }
.tc-filter-btn       { color: rgba(0,0,0,.38) !important; }
.tc-filter-btn:hover,
.tc-filter-btn:focus { color: rgba(0,0,0,.75) !important; }
.tc-filter-btn.active { color: #111111 !important; }
.tc-vp-grid-wrap     { background: var(--tc-page-bg) !important; }

/* --- About-us page (ID 17) --------------------------------- */
body.page-id-17,
body.elementor-page-17 { background: #f5f5f5 !important; }
body.page-id-17 .elementor-section,
body.page-id-17 .elementor-column,
body.page-id-17 .elementor-widget-wrap,
body.elementor-page-17 .elementor-section,
body.elementor-page-17 .elementor-column,
body.elementor-page-17 .elementor-widget-wrap { background-color: #f5f5f5 !important; background-image: none !important; }
body.page-id-17 .elementor-heading-title,
body.elementor-page-17 .elementor-heading-title { color: #111111 !important; }
body.page-id-17 .elementor-widget-text-editor,
body.page-id-17 .elementor-widget-text-editor p,
body.elementor-page-17 .elementor-widget-text-editor,
body.elementor-page-17 .elementor-widget-text-editor p { color: #444444 !important; }
body.page-id-17 #page,
body.page-id-17 .site,
body.page-id-17 .hentry { background: #f5f5f5 !important; }

/* ============================================================
   VEHICLE GRID RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tc-vgrid { grid-template-columns: 1fr; }
    .tc-vcard--lg  { min-height: 420px; }
    .tc-vcard--sm  { min-height: 260px; }
    .tc-vgrid__col { flex-direction: row; }
    .tc-vgrid__col .tc-vcard { flex: 1; }
}
@media (max-width: 640px) {
    .tc-vgrid__col { flex-direction: column; }
    .tc-vgrid__col .tc-vcard { min-height: 220px; }
    .tc-vcard--lg  { min-height: 360px; }
    .tc-vcard__body { padding: 0 20px 24px; }
    .tc-vcard__title { font-size: 20px; }
}