/* ================================================================
   CARTER POWER SYSTEMS — Master Stylesheet
   Brand: Modern, minimal, professional, technical
   Accent: #FFCC00 (Carter brand gold)
   Font: Inter (Google Fonts)
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================ */

:root {
    /* Brand Colors — Carter Brand Palette v2 (design direction) */
    --gold:             #FFCE10;               /* Carter brand yellow — primary accent */
    --gold-text:        #C89E00;               /* Darker gold for text on white (WCAG AA) */
    --gold-hover:       #C89E00;               /* Gold hover — deeper readable gold */
    --gold-light:       rgba(255, 206, 16, 0.12);
    --gold-border:      rgba(255, 206, 16, 0.30);
    --gold-light-hover: #FFD633;               /* Lighter gold — urgent box hover */
    --gold-glow:        rgba(255, 206, 16, 0.45); /* Gold border glow on dark surfaces */
    --gold-bg-tint:     rgba(255, 206, 16, 0.12); /* Gold tinted icon background */
    --header-total:     112px;             /* emergency-banner (~40px) + navbar (~72px) */
    --brand-gray:       #88969F;               /* CAT Corporate Gray (secondary) */

    /* Brand accents */
    --icon-accent:      #E07A1F;               /* Orange — icons only */
    --eyebrow-color:    #5A5F66;               /* Neutral gray — eyebrow labels */

    /* Companion surfaces */
    --khaki:            #E9E2C4;
    --khaki-soft:       #F5F1E0;
    --surface-gray:     #F4F4F4;
    --surface-warm:     #F4F3EF;
    --surface-cool:     #EDEDED;

    /* Neutrals */
    --charcoal:         #1B1B1B;               /* Primary dark — near-black */
    --body-text:        #5A5A5A;
    --text-light:       #777777;
    --white:            #FFFFFF;
    --off-white:        #FAFAFA;
    --light-gray:       #F5F5F5;
    --border:           #E0E0E0;
    --border-light:     #E5E5E5;
    --dark:             #1B1B1B;
    --dark-mid:         #2A2A2A;
    --dark-soft:        #3A3A3A;

    /* Functional */
    --success:          #2E7D5B;
    --error:            #C0392B;
    --info:             #2980B9;

    /* Shadows */
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow:           0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:        0 12px 40px rgba(0, 0, 0, 0.16);
    --shadow-gold:      0 4px 14px rgba(255, 206, 16, 0.30);

    /* Layout */
    --container-max:    1200px;
    --container-wide:   1400px;
    --section-pad:      52px;
    --section-pad-sm:   32px;
    --radius:           0;
    --radius-md:        0;
    --radius-lg:        0;

    /* Transitions */
    --transition:       all 0.25s ease;
    --transition-slow:  all 0.4s ease;

    /* Typography — Arial (Brand Book p.18) */
    --font:             Arial, Helvetica, sans-serif;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.65;
    color: var(--body-text);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--charcoal);
    font-weight: 700;
    line-height: 1.25;
}

/* Typography Scale — H1=48 · H2=36 · H3=30 · H4=24 · H5=18 · p=16 */
h1 { font-size: 40px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: 36px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 28px; line-height: 1.3; }
h4 { font-size: 24px; line-height: 1.4; }
h5 { font-size: 20px; line-height: 1.4; }
h6 { font-size: 16px;}
p  { font-size: 16px; line-height: 1.5; }

p {
    margin-bottom: 0;
}

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

input, select, textarea {
    font-family: var(--font);
}

::selection {
    background-color: var(--gold);
    color: var(--white);
}


/* ================================================================
   3. CONTAINER & LAYOUT UTILITIES
   ================================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .container {
        padding: 0 32px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}


/* ================================================================
   4. SECTION HEADERS
   ================================================================ */

.section-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 18px;
    position: relative;
    padding-bottom: 22px;
}
.section-header::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--gold);
}
/* Suppress bar in dark/hero sections */
.ind-dark .section-header::after,
.hero .section-header::after { display: none; }

@media (min-width: 768px) {
    .section-label {
        font-size: 1.125rem;
    }
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 0;
    line-height: 1.2;
}

.section-desc {
    font-size: 1rem;
    color: var(--body-text);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .section-header h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-header h2 {
        font-size: 2.0rem;
    }

    .section-header {
        margin-bottom: 40px;
    }
}


/* ================================================================
   5. BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.btn i {
    font-size: 0.8em;
    transition: transform 0.25s ease;
}

.btn:hover i {
    transform: translateX(2px);
}

/* Primary — Gold background */
.btn-primary {
    background-color: var(--gold);
    color: var(--charcoal);
    border-color: var(--gold);
}

.btn-primary:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    box-shadow: var(--shadow-gold);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Outline — Charcoal border */
.btn-outline {
    background-color: transparent;
    color: var(--charcoal);
    border-color: var(--border);
}

.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    background-color: var(--gold-light);
}

/* Outline Light — White border (for dark backgrounds) */
.btn-outline-light {
    background-color: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    color: var(--white);
}

/* Sizes */
.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
}

.btn-sm {
    padding: 8px 18px;
    font-size: 0.8125rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Nav CTA */
.btn-nav-cta {
    background-color: var(--gold);
    color: var(--dark);
    border-color: var(--gold);
    padding: 10px 22px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius);
}

.btn-nav-cta:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    box-shadow: var(--shadow-gold);
}

@media (max-width: 1023px) {
    .btn-nav-cta {
        display: none;
    }
}


/* ================================================================
   6. EMERGENCY BANNER
   ================================================================ */

.emergency-banner {
    background-color: var(--dark);
    color: var(--white);
    padding: 10px 0;
    font-size: 0.8125rem;
    position: relative;
    z-index: 1100;
}

.emergency-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.emergency-inner > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.emergency-inner > span i {
    color: var(--gold);
}

.emergency-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.emergency-phone:hover {
    color: var(--white);
}

.emergency-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 4px;
    transition: var(--transition);
}

.emergency-close:hover {
    color: var(--white);
}

.emergency-banner.hidden {
    display: none;
}


/* ================================================================
   7. NAVBAR
   ================================================================ */

.navbar {
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
    border-bottom: 1px solid var(--border-light);
}

.navbar.scrolled {
    border-bottom-color: var(--border-light);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    min-height: 72px;
}

/* Logo */
.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 40px;
}

/* Logo image in header */
.logo-img {
    height: 52px;
    width: auto;
    display: block;
}

/* Logo image in footer 
.footer-logo-img {
    height: 48px;
    width: auto;
    display: block;
    margin-bottom: 20px;
}*/

/* Legacy text logo (kept for fallback) */
.logo-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-carter {
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    text-transform: uppercase;
}

.logo-divider {
    width: 2px;
    height: 28px;
    background-color: var(--gold);
    flex-shrink: 0;
}

.logo-ps {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Nav Search Button */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--body-text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition);
}

.nav-search-btn:hover {
    background: var(--light-gray);
    color: var(--gold);
    border-color: var(--gold);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-overlay-inner {
    padding: 24px 0;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-bar:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.15);
}

.search-bar-icon {
    color: var(--gold);
    font-size: 1rem;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--charcoal);
    font-family: var(--font);
    font-size: 1.05rem;
}

.search-input::placeholder {
    color: var(--text-light);
}

.search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.search-close:hover {
    background: var(--light-gray);
    color: var(--charcoal);
}

.search-suggestions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.search-suggestion-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.search-tag {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--body-text);
    background: var(--light-gray);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.search-tag:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--gold-light);
}

/* Main Nav */
.nav-menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--charcoal);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius);
    transition: var(--transition);
}

.nav-menu > ul > li > a .nav-toggle i {
    font-size: 0.55em;
    opacity: 0.4;
    transition: transform 0.25s ease;
}

.nav-menu > ul > li > a:hover {
    color: var(--charcoal);
}

.nav-menu > ul > li > a:hover .nav-toggle i {
    transform: rotate(180deg);
}

/* Active / selected nav item — black underline, same weight as siblings
   (no extra bold). Desktop uses the ::after bar (rendered only at
   >=1024px) recoloured black; mobile gets a real text underline added
   in the max-width:1023px block since the ::after doesn't exist there. */
.nav-menu > ul > li.active > a,
.nav-menu > ul > li > a.active,
.nav-menu > ul > li > a[aria-current="page"] {
    color: var(--charcoal);
    font-weight: 700;
}

.nav-menu > ul > li.active > a::after,
.nav-menu > ul > li > a.active::after,
.nav-menu > ul > li > a[aria-current="page"]::after {
    background: var(--charcoal);
    width: 70%;
    left: 14px;
}

/* Dropdowns */
.has-dropdown {
    position: relative;
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 1001;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    border-radius: var(--radius);
    transition: var(--transition);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    position: relative;
}

.dropdown a i {
    width: 18px;
    text-align: center;
    color: var(--icon-accent);
    font-size: 0.85rem;
    transition: var(--transition);
}

.dropdown a:hover {
    color: var(--charcoal);
    text-underline-offset: 10px;
    text-decoration-color: var(--charcoal);
}

.dropdown a:hover i {
    color: var(--gold);
}

.dropdown a.active,
.megamenu a.active,
.dropdown a[aria-current="page"],
.megamenu a[aria-current="page"] {
    color: var(--charcoal);
    font-weight: 700;
    text-underline-offset: 10px;
    text-decoration-color: var(--charcoal);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-light);
    margin: 6px 8px;
}

.dropdown-label {
    display: block;
    padding: 8px 14px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
}

.dropdown .dropdown-view-all {
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    padding-top: 12px;
    font-weight: 600;
    color: var(--gold);
}

.dropdown .dropdown-view-all:hover {
    background-color: var(--gold-light);
}

/* Megamenu (wide dropdown for Solutions) */
.has-megamenu .dropdown.megamenu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    min-width: 560px;
    padding: 24px;
}
.has-megamenu:hover .dropdown.megamenu {
    transform: translateX(-50%) translateY(0);
}
.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.megamenu-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.megamenu-heading i {
    color: var(--icon-accent);
    font-size: 0.85rem;
}
@media (max-width: 1023px) {
    .has-megamenu .dropdown.megamenu {
        left: 0;
        transform: none;
        min-width: 100%;
        padding: 8px 0 8px 16px;
    }
    .has-megamenu:hover .dropdown.megamenu {
        transform: none;
    }
    .megamenu-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .megamenu-heading {
        border-bottom: none;
        padding-bottom: 4px;
        margin-bottom: 8px;
    }
}


/* ================================================================
   8. HAMBURGER (Mobile)
   ================================================================ */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: none;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--charcoal);
    border-radius: 2px;
    transition: var(--transition);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 1023px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--white);
        padding: 24px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s ease;
        z-index: 999;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 0;
    }

    .nav-menu > ul > li > a {
        padding: 14px 16px;
        font-size: 1rem;
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-light);
    }

    /* Selected item: gold left bar instead of text-decoration (which bled onto the chevron icon) */
    .nav-menu > ul > li.active > a,
    .nav-menu > ul > li > a.active,
    .nav-menu > ul > li > a[aria-current="page"] {
        border-left: 3px solid var(--gold);
        padding-left: 13px;
    }

    /* nav-toggle span is the dedicated mobile tap target for opening the dropdown.
       pointer-events:none on the inner <i> ensures e.target is always the span. */
    .nav-menu > ul > li > a .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 4px 12px 20px;
        margin: -12px -4px -12px 0;
        cursor: pointer;
    }
    .nav-menu > ul > li > a .nav-toggle i {
        font-size: 0.85rem;
        opacity: 0.65;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .has-dropdown.open > a .nav-toggle i {
        transform: rotate(180deg);
        opacity: 1;
    }

    .has-dropdown .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 8px 16px;
        display: none;
        min-width: 100%;
    }

    .has-dropdown.open .dropdown {
        display: block;
    }

    .dropdown a {
        padding: 10px 16px;
        font-size: 0.9375rem;
    }
}


/* ================================================================
   9. HERO SECTION
   ================================================================ */

.hero {
    position: relative;
    height: calc(100vh - var(--header-total, 112px));
    min-height: 480px;
    max-height: 800px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: #1B1B1B;
    z-index: 0;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}

/* Subtle industrial grid texture via CSS */
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 204, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 204, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.15);
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-content {
    max-width: 100%;
    flex: none;
    background: rgba(27, 27, 27, 0.65);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-image {
    display: none;
    flex: 0 0 380px;
    max-width: 380px;
}

.hero-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 204, 0, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero-content h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.hero-badge {
    display: inline-block;
    padding: 5px 12px;
    background-color: rgba(255, 204, 0, 0.20);
    border: 1px solid rgba(255, 204, 0, 0.45);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #FFE066;
    margin-bottom: 16px;
    letter-spacing: 0.03em;
}

.hero-subtitle {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin-bottom: 16px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hero-actions .btn {
    font-size: 0.8125rem;
    padding: 10px 20px;
}

/* Trust Bar */
.hero-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.80);
    font-weight: 500;
}

.trust-item i {
    color: #FFE066;
    font-size: 0.75rem;
}

@media (min-width: 768px) {
    .hero-content {
        max-width: 580px;
        padding: 32px 28px;
    }
    .hero-badge {
        font-size: 0.8125rem;
        padding: 6px 16px;
        margin-bottom: 20px;
    }
    .hero-subtitle {
        font-size: 0.9375rem;
        line-height: 1.65;
        margin-bottom: 20px;
    }
    .hero-actions {
        gap: 12px;
        margin-bottom: 22px;
    }
    .hero-actions .btn {
        font-size: 1rem;
        padding: 12px 28px;
    }
    .hero-trust-bar {
        flex-wrap: nowrap;
        gap: 14px;
        padding-top: 16px;
    }
    .trust-item {
        font-size: 0.6875rem;
        white-space: nowrap;
    }
    .trust-item i {
        font-size: 0.9rem;
    }
}

@media (min-width: 1024px) {
    .hero-content {
        max-width: 620px;
        padding: 36px 32px;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .hero-badge {
        margin-bottom: 24px;
    }
}

/* ====================================================================
   PAGE BREADCRUMB — sticky strip below the navbar
   White bg, left-aligned, light-grey divider. font-size and weight are
   defined here so individual pages don't need inline overrides.
   ==================================================================== */
.page-breadcrumb {
    position: sticky;
    top: 72px;
    z-index: 900;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
}
.page-breadcrumb > .container {
    padding-top: 12px;
    padding-bottom: 12px;
}
.page-breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}
.page-breadcrumb__list li {
    position: relative;
    padding: 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--eyebrow-color, #5A5F66);
}
.page-breadcrumb__list li + li { padding-left: 28px; }
.page-breadcrumb__list li + li::before {
    content: "/";
    position: absolute;
    left: 10px;
    color: #C5C5C5;
    font-weight: 400;
}
.page-breadcrumb__list a {
    color: var(--eyebrow-color, #5A5F66);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.page-breadcrumb__list a:hover { color: var(--charcoal, #1B1B1B); }
.page-breadcrumb__list li[aria-current="page"] {
    color: var(--eyebrow-color);
    font-weight: 700;
}
@media (max-width: 1023px) { .page-breadcrumb { top: 64px; } }
@media (max-width: 640px)  {
    .page-breadcrumb { top: 60px; }
    .page-breadcrumb > .container { padding-top: 10px; padding-bottom: 10px; }
}


/* ================================================================
   10. THREE PILLARS
   ================================================================ */

.pillars {
    padding: var(--section-pad) 0;
    background-color: var(--white);
}

.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.pillar-card {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    overflow: hidden;
    transition: var(--transition);
}

.pillar-card-img {
    width: calc(100% + 56px);
    height: 180px;
    overflow: hidden;
    margin: -36px -28px 24px -28px;
}

.pillar-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pillar-card:hover .pillar-card-img img {
    transform: scale(1.05);
}

.pillar-card:hover {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.pillar-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-light);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.pillar-icon i {
    font-size: 1.375rem;
    color: var(--icon-accent);
}

.pillar-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 12px;
}

.pillar-card > p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.7;
    margin-bottom: 20px;
}

.pillar-list {
    list-style: none;
    margin-bottom: 24px;
}

.pillar-list li {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: 0.875rem;
    color: var(--body-text);
}

.pillar-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--gold);
}

.pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
}

.pillar-link:hover {
    color: var(--gold-hover);
    gap: 10px;
}

.pillar-link i {
    font-size: 0.75em;
}

@media (min-width: 768px) {
    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .pillar-card {
        padding: 40px 32px;
    }
}


/* ================================================================
   11. ENGINEERING TOOLS
   ================================================================ */

.tools-section {
    padding: var(--section-pad) 0;
    background-color: var(--light-gray);
}

.tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

/* Featured Tool Card */
.tool-card-featured {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
}

.tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tool-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-light);
    border-radius: var(--radius-md);
}

.tool-icon i {
    font-size: 1.25rem;
    color: var(--gold);
}

.tool-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--gold-light);
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tool-card-featured h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.tool-card-featured > p {
    font-size: 16px;
    color: var(--body-text);
    margin-bottom: 28px;
    line-height: 1.7;
}

/* Sizing Form */
.sizing-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-weight: 600;
    color: var(--charcoal);
}

.form-field select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--charcoal);
    background-color: var(--white);
    transition: var(--transition);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.575 3.4l0.85-0.85L6 7.125l4.575-4.575 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--text-light);
}

/* Secondary Tool Cards */
.tool-cards-secondary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tool-card-sm {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 28px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
}

.tool-card-sm:hover {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tool-icon-sm {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-light);
    border-radius: var(--radius);
}

.tool-icon-sm i {
    font-size: 1.05rem;
    color: var(--gold-text);
}

.tool-card-sm h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.tool-card-sm p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.7;
}

.tools-footer-note {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9375rem;
    color: var(--body-text);
}

.tools-footer-note a {
    color: var(--icon-accent);
    font-weight: 600;
}

.tool-arrow {
    margin-left: auto;
    color: var(--text-light);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.tool-card-sm:hover .tool-arrow {
    color: var(--gold);
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .tool-card-featured {
        padding: 44px 40px;
    }
}

@media (min-width: 1024px) {
    .tools-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Send Us Your Specs Bar */
.specs-submission-bar {
    margin-top: 40px;
    background-color: var(--white);
    border: 2px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
}

.specs-submission-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.specs-submission-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-light);
    border-radius: var(--radius-md);
}

.specs-submission-icon i {
    font-size: 1.3rem;
    color: var(--gold);
}

.specs-submission-text {
    flex: 1;
    min-width: 200px;
}

.specs-submission-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.specs-submission-text p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .specs-submission-content {
        flex-direction: column;
        text-align: center;
    }

    .specs-submission-content .btn {
        width: 100%;
    }
}


/* ================================================================
   12. PRODUCTS SECTION
   ================================================================ */

.products-section {
    padding: var(--section-pad) 0;
    background-color: var(--white);
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.product-category-card {
    display: block;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
}

.product-category-card:hover {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Product Card Top Image/Gradient Area */
.product-cat-img {
    position: relative;
    height: 180px;
    display: flex;
    align-items: flex-end;
    padding: 16px 20px;
    overflow: hidden;
}

.product-cat-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.5s ease;
    opacity: 0.55;
    mix-blend-mode: luminosity;
}

.product-category-card:hover .product-cat-bg-img {
    transform: scale(1.08);
    opacity: 0.7;
}

.product-cat-img .product-count {
    position: relative;
    z-index: 2;
}

.diesel-bg {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 50%, #2C3E50 100%);
}

.gas-bg {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #1B5E20 100%);
}

.ats-bg {
    background: linear-gradient(135deg, #1A237E 0%, #283593 50%, #1A237E 100%);
}

.switchgear-bg {
    background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #4A148C 100%);
}

.ups-bg {
    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #0D47A1 100%);
}

.bess-bg {
    background: linear-gradient(135deg, #BF360C 0%, #D84315 50%, #BF360C 100%);
}

.product-count {
    display: inline-block;
    padding: 4px 12px;
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.02em;
}

.product-cat-info {
    padding: 24px 20px;
}

.product-cat-info h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.product-cat-info > p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.65;
    margin-bottom: 16px;
}

.product-specs-preview {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.product-specs-preview span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.product-specs-preview i {
    color: var(--gold);
    font-size: 0.75rem;
}

.product-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold);
    transition: var(--transition);
}

.product-category-card:hover .product-cat-link {
    gap: 10px;
}

.product-cat-link i {
    font-size: 0.75em;
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Old tabbed Applications section removed — replaced by 14b image-forward cards */

.tab-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

.tab-text h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 12px;
}

.tab-text > p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* App Specs Grid */
.app-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.app-spec {
    padding: 14px 16px;
    background-color: var(--light-gray);
    border-radius: var(--radius);
}

.spec-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.spec-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--charcoal);
}

.app-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Features Side */
.tab-features h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.feature-tag {
    display: inline-block;
    padding: 5px 14px;
    background-color: var(--gold-light);
    color: var(--gold-hover);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 100px;
}

.feature-list {
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.9375rem;
    color: var(--body-text);
}

.feature-list li i {
    color: var(--gold);
    font-size: 0.8rem;
    margin-top: 4px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .tab-content {
        padding: 44px 40px;
    }
}

@media (min-width: 1024px) {
    .tab-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 48px;
    }
}


/* ================================================================
   14. INDUSTRIES
   ================================================================ */

.industries-section {
    padding: var(--section-pad) 0;
    background-color: var(--white);
}

.industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.industry-card {
    display: block;
    padding: 32px 28px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.industry-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
    transition: opacity 0.4s ease, transform 0.5s ease;
    z-index: 0;
}

.industry-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.95) 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

.industry-card-content {
    position: relative;
    z-index: 2;
}

.industry-card:hover .industry-card-bg {
    opacity: 0.30;
    transform: scale(1.08);
}

.industry-card:hover .industry-card-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.88) 100%);
}

.industry-card:hover {
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.industry-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-light);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.industry-icon i {
    font-size: 1.25rem;
    color: var(--gold-text);
}

.industry-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.industry-card p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.65;
    margin-bottom: 16px;
}

.industry-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-text);
    transition: var(--transition);
}

.industry-card:hover .industry-link {
    gap: 10px;
}

.industry-link i {
    font-size: 0.75em;
}

@media (min-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Industries row: larger, more prominent tiles */
.industries-grid--primary {
    margin-bottom: 48px;
}

.industries-grid--primary .industry-card {
    padding: 36px 28px;
    min-height: 280px;
}

.industries-grid--primary .industry-card h3 {
    font-size: 1.25rem;
}

.industries-grid--primary .industry-card .industry-icon i {
    font-size: 1.5rem;
}

/* Applications row: slightly smaller, subtler tiles */
.industries-grid--secondary .industry-card {
    padding: 24px 20px;
    min-height: 220px;
}

.industries-grid--secondary .industry-card h3 {
    font-size: 1rem;
}

.industries-grid--secondary .industry-card p {
    font-size: 16px;
}


/* ================================================================
   14b. POWER APPLICATIONS — image-top cards with icons
   ================================================================ */

.app-img-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .app-img-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .app-img-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.app-img-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
}

.app-img-photo {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.app-img-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.app-img-body {
    padding: 24px 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-img-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-light);
    border-radius: var(--radius);
    margin-bottom: 14px;
}

.app-img-icon i {
    font-size: 1rem;
    color: var(--gold-text);
}

.app-img-body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.app-img-body p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.65;
    flex: 1;
}

.app-img-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--icon-accent);
    transition: var(--transition);
}

.app-img-card:hover .app-img-link {
    gap: 10px;
    color: var(--icon-accent);
}

.app-img-link i {
    font-size: 0.7em;
}


/* ================================================================
   14d. VERTICAL SIDE TABS — Technical Depth component
   ================================================================ */

.vtabs-section {
    padding: var(--section-pad) 0;
    background: var(--white);
    border-top: 1px solid var(--border);
}

.vtabs-header {
    margin-bottom: 32px;
    text-align: left;
}
.vtabs-layout {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.vtabs-sidebar {
    width: 30%;
    background: var(--charcoal);
    display: flex;
    flex-direction: column;
}

.vtabs-sidebar button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: none;
    border: none;
    border-left: 4px solid transparent;
    padding: 20px 24px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.vtabs-sidebar button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.vtabs-sidebar button.active {
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
}

.vtabs-content {
    width: 70%;
    background: var(--white);
    padding: 36px 40px;
}

.vtabs-panel {
    display: none;
    animation: vtabsFade 0.3s ease;
}

.vtabs-panel.active {
    display: block;
}

@keyframes vtabsFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vtabs-panel h3 {
    margin-bottom: 14px;
}

.vtabs-panel p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.7;
    margin-bottom: 14px;
}

.vtabs-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.vtabs-panel ul li {
    position: relative;
    padding-left: 20px;
    font-size: 0.9375rem;
    color: var(--body-text);
    line-height: 1.7;
    margin-bottom: 6px;
}

.vtabs-panel ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 2px;
    background: var(--gold);
}

@media (max-width: 768px) {
    .vtabs-layout {
        flex-direction: column;
    }
    .vtabs-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }
    .vtabs-sidebar button {
        padding: 14px 18px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .vtabs-sidebar button.active {
        border-left: none;
        border-bottom-color: var(--gold);
    }
    .vtabs-content {
        width: 100%;
        padding: 28px 24px;
    }
}

/* ================================================================
   14e. INNER-PAGE HORIZONTAL TAB STRIP (Technical Depth)
   Converts default vertical .vtabs-* layout into a horizontal
   tab strip for Solution and Industry inner pages. Active tab
   fills Carter gold, inactive: #6B6B6B. Collapses to a
   chevron accordion on mobile (≤768px).
   ================================================================ */

/* ---- Header with yellow rule ---- */
.vtabs-header {
    position: relative;
    margin: 0 0 18px 0;
    padding-bottom: 22px;
    text-align: left;
}
.vtabs-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--gold);
}
.vtabs-header .section-label {
    display: inline-block;
    margin: 0 0 12px 0;
}
.vtabs-header h2 { margin: 0; }

/* ---- Horizontal tab strip layout ---- */
.vtabs-section .vtabs-layout {
    display: block;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    overflow: hidden;
}
.vtabs-section .vtabs-sidebar {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #6B6B6B;
    padding: 0;
    overflow: visible;
}
.vtabs-section .vtabs-sidebar button {
    flex: 1 1 0;
    width: auto;
    background: #6B6B6B;
    color: #FFFFFF;
    border: none;
    border-left: none;
    padding: 18px 22px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.vtabs-section .vtabs-sidebar button:hover {
    background: #5A5A5A;
    color: #FFFFFF;
}
.vtabs-section .vtabs-sidebar button.active {
    background: var(--gold);
    color: #1B1B1B;
    border-left: none;
}
.vtabs-section .vtabs-content {
    width: 100%;
    background: #FFFFFF;
    padding: 36px 40px;
}
.vtabs-section .vtabs-sidebar button + button {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.vtabs-section .vtabs-sidebar button.active + button {
    border-left-color: rgba(255, 206, 16, 0.35);
}

/* ---- Panel content: 75% width for comfortable reading ---- */
.vtabs-panel > h3,
.vtabs-panel > p,
.vtabs-panel > ul {
    max-width: 75%;
}

/* ---- Panel CTA links (vtab-links) ---- */
.vtabs-panel .vtab-links {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vtabs-panel .vtab-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--eyebrow-color);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.vtabs-panel .vtab-links a:hover {
    color: var(--gold);
    gap: 10px;
}
.vtabs-panel .vtab-links a i {
    font-size: 0.8125rem;
    transition: transform 0.2s;
}
.vtabs-panel .vtab-links a:hover i { transform: translateX(3px); }

/* ---- Responsive: scrollable strip on tablet ---- */
@media (max-width: 1024px) {
    .vtabs-panel > h3,
    .vtabs-panel > p,
    .vtabs-panel > ul { max-width: 100%; }
}

@media (max-width: 768px) {
    .vtabs-section .vtabs-sidebar {
        flex-direction: row;
        overflow-x: auto;
    }
    .vtabs-section .vtabs-sidebar button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 14px 18px;
        font-size: 0.95rem;
    }
    .vtabs-section .vtabs-content { padding: 26px 22px; }
}

/* ---- Mobile accordion (≤768px): hide strip, show panel headers ---- */
.vtab-acc-header { display: none; }

@media (max-width: 768px) {
    .vtabs-section .vtabs-sidebar { display: none; }
    .vtabs-section .vtabs-layout {
        display: block;
        border: 1px solid #E5E5E5;
    }
    .vtabs-section .vtabs-content {
        width: 100%;
        padding: 0;
        background: #FFFFFF;
    }
    .vtabs-section .vtabs-panel {
        display: block;
        animation: none;
        border-bottom: 1px solid #E5E5E5;
    }
    .vtabs-section .vtabs-panel:last-child { border-bottom: none; }
    .vtabs-section .vtab-acc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 18px 20px;
        background: #FFFFFF;
        border: none;
        cursor: pointer;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #1B1B1B;
        text-align: left;
    }
    .vtabs-section .vtab-acc-header:hover { background: #F4F4F4; }
    .vtabs-section .vtabs-panel.vtab-open .vtab-acc-header { background: #F4F4F4; }
    .vtabs-section .vtab-acc-arrow {
        flex-shrink: 0;
        color: var(--icon-accent);
        transition: transform 0.25s ease;
    }
    .vtabs-section .vtabs-panel.vtab-open .vtab-acc-arrow { transform: rotate(180deg); }
    .vtabs-section .vtabs-panel > *:not(.vtab-acc-header) { display: none; }
    .vtabs-section .vtabs-panel.vtab-open > *:not(.vtab-acc-header):not(h3) {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
    }
    .vtabs-section .vtabs-panel.vtab-open .vtab-links { display: flex; }
    .vtabs-section .vtabs-panel.vtab-open > *:not(.vtab-acc-header):not(h3):last-child {
        margin-bottom: 18px;
    }
}


/* ================================================================
   14c. LEGACY — horizontal cards (kept for other pages if needed)
   ================================================================ */

.applications-section {
    padding: var(--section-pad) 0;
    background-color: var(--white);
}

.app-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .app-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

.app-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid var(--border);
}

.app-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--gold);
}

.app-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.app-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.app-card-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap:10px
}

.app-card-body h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
}

.app-card-body p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.65;
    flex: 1;
}

.app-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--icon-accent);
    transition: var(--transition);
}

.app-card:hover .app-card-link {
    gap: 10px;
    color: var(--icon-accent);
}

.app-card-link i {
    font-size: 0.75em;
}

@media (min-width: 1024px) {
    .app-card {
        flex-direction: row;
    }

    .app-card-image {
        width: 240px;
        min-width: 240px;
        height: auto;
        min-height: 200px;
    }

    .app-card-body {
        padding: 28px 32px;
    }
}


/* ================================================================
   15. DOCUMENTATION
   ================================================================ */

.documentation-section {
    padding: var(--section-pad) 0;
    background-color: var(--light-gray);
}

/* Search Bar */
.doc-search-bar {
    margin-bottom: 36px;
}

.doc-search-input {
    position: relative;
    margin-bottom: 16px;
}

.doc-search-input i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 0.95rem;
}

.doc-search-input input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--charcoal);
    background-color: var(--white);
    transition: var(--transition);
}

.doc-search-input input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
}

.doc-search-input input::placeholder {
    color: var(--text-light);
}

.doc-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.doc-filter {
    flex: 1;
    min-width: 160px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--charcoal);
    background-color: var(--white);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.575 3.4l0.85-0.85L6 7.125l4.575-4.575 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
    transition: var(--transition);
}

.doc-filter:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
}

/* Doc Grid */
.doc-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.doc-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.doc-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.doc-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FEF0E0;
    border-radius: var(--radius);
}

.doc-icon i {
    font-size: 1.1rem;
    color: #C0392B;
}

.doc-icon i.fa-file-alt {
    color: var(--gold);
}

.doc-info {
    flex: 1;
    min-width: 0;
}

.doc-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
    line-height: 1.35;
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.doc-meta span {
    display: inline-block;
    padding: 2px 10px;
    background-color: var(--light-gray);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-light);
}

.doc-card .btn {
    flex-shrink: 0;
}

.doc-footer {
    text-align: center;
}

@media (max-width: 767px) {
    .doc-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .doc-card .btn {
        align-self: flex-start;
    }

    .doc-filters {
        flex-direction: column;
    }

    .doc-filter {
        min-width: 100%;
    }
}


/* ================================================================
   16. SERVICE SHOWCASE — Icon grid on dark gradient
   ================================================================ */

.svc-showcase {
    padding: var(--section-pad) 0;
    background: linear-gradient(160deg, #1B1B1B 0%, #2D2D2D 50%, #1B1B1B 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle diagonal line texture */
.svc-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255, 204, 0, 0.02) 0px,
            rgba(255, 204, 0, 0.02) 1px,
            transparent 1px,
            transparent 80px
        );
    z-index: 0;
}

.svc-showcase .container {
    position: relative;
    z-index: 1;
}

.svc-showcase-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.svc-showcase-label {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.svc-showcase-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px;
}

.svc-showcase-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
}

.svc-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .svc-showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .svc-showcase-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0;
        max-width: 100%;
    }
    .svc-showcase {
        padding: 80px 0;
    }
}

.svc-showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    padding: 32px 16px;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
}

.svc-showcase-item:hover {
    background: rgba(255, 204, 0, 0.08);
    transform: translateY(-4px);
}

.svc-showcase-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.10);
    border: 2px solid rgba(255, 204, 0, 0.25);
    margin-bottom: 18px;
    transition: var(--transition);
}

.svc-showcase-item:hover .svc-showcase-icon {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 28px rgba(255, 204, 0, 0.35);
}

.svc-showcase-icon i {
    font-size: 1.4rem;
    color: var(--gold);
    transition: color 0.25s ease;
}

.svc-showcase-item:hover .svc-showcase-icon i {
    color: var(--dark);
}

.svc-showcase-item h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    transition: color 0.25s ease;
}

.svc-showcase-item:hover h3 {
    color: #fff;
}

.svc-showcase-cta {
    text-align: center;
    margin-top: 48px;
}

@media (min-width: 768px) {
    .svc-showcase-header h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {
    .svc-showcase-header h2 {
        font-size: 1.75rem;
    }
    .svc-showcase-icon {
        width: 60px;
        height: 60px;
    }
    .svc-showcase-icon i {
        font-size: 1.2rem;
    }
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-text);
    text-decoration: none;
    transition: var(--transition);
}

.service-link:hover {
    color: var(--gold-hover);
    gap: 10px;
}

.service-link i {
    font-size: 0.75em;
}

/* ================================================================
   16b. SERVICE HERO — Mini hero + 3 boxes
   ================================================================ */

.svc-hero-section {
    position: relative;
    overflow: hidden;
}

.svc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.svc-hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.svc-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.svc-hero-section > .container {
    position: relative;
    z-index: 2;
}

.svc-hero-content {
    max-width: 840px;
    padding: var(--section-pad) 0px;
}

.svc-hero-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.svc-hero-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .svc-hero-label {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .svc-hero-content h2 {
        font-size: 2.375rem;
    }
}

.svc-hero-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.7;
    margin-bottom: 28px;
}

.svc-boxes-wrapper {
    position: relative;
    z-index: 2;
    background: var(--dark);
    padding: 48px 0;
}

.svc-boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .svc-boxes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.svc-box {
    display: block;
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
}

.svc-box h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.svc-box p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.65;
    margin-bottom: 14px;
}

.svc-box-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--icon-accent);
}

.svc-box--urgent {
    border: 2px solid var(--gold);
    background: rgba(255, 204, 0, 0.12);
}

.svc-box-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    margin-bottom: 8px;
}

.svc-box-note {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

/* Rental Banner v2 — from live site */
.rental-banner-v2 {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    background: #111;
}

.rental-banner-bg-img {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    z-index: 0;
}

.rental-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: repeating-linear-gradient(135deg,
        rgba(255, 204, 0, 0.025) 0px,
        rgba(255, 204, 0, 0.025) 1px,
        transparent 1px,
        transparent 64px);
}

.rental-banner-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .rental-banner-inner {
        grid-template-columns: 1fr auto;
        gap: 72px;
    }
}

.rental-banner-icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--gold);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 20px rgba(255, 204, 0, 0.35);
}

.rental-banner-icon-wrap i {
    font-size: 1.5rem;
    color: var(--dark);
}

.rental-banner-tag {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: block;
}

.rental-banner-headline {
    font-size: 2.375rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .rental-banner-headline {
        font-size: 2.875rem;
    }
}

.rental-banner-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.72;
    margin-bottom: 32px;
    max-width: 520px;
}

.rental-banner-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.rental-banner-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 240px;
}

@media (max-width: 1023px) {
    .rental-banner-right {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .rental-banner-stat-card {
        flex: 1;
        min-width: 140px;
    }
}

.rental-banner-stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.rental-banner-stat-card:hover {
    background: rgba(255, 204, 0, 0.10);
    border-color: rgba(255, 204, 0, 0.25);
}

.rental-banner-stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(255, 204, 0, 0.12);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rental-banner-stat-icon i {
    font-size: 0.9rem;
    color: var(--gold);
}

.rental-banner-stat-num {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 2px;
}

.rental-banner-stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.35;
}

@media (max-width: 767px) {
    .rental-banner-v2 {
        padding: 64px 0;
    }
    .rental-banner-tag {
        font-size: 0.8rem;
    }
    .rental-banner-headline {
        font-size: 1.875rem;
    }
    .rental-banner-actions {
        flex-direction: column;
    }
    .rental-banner-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 3-col app grid variant */
.app-img-grid--3col {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .app-img-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ================================================================
   17. CASE STUDIES
   ================================================================ */

.case-studies-section {
    padding: var(--section-pad) 0;
    background-color: var(--light-gray);
}

.case-studies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.case-study-card {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.case-study-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
    transform: none;
}

/* Case Image Area */
.case-img {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-study-card:hover .case-img img {
    transform: none;
}

.case-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(27, 27, 27, 0.65) 100%
    );
    z-index: 1;
}

.healthcare-case {
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 50%, #1A237E 100%);
}

.datacenter-case {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 50%, #004D40 100%);
}

.municipal-case {
    background: linear-gradient(135deg, #5D4037 0%, #4E342E 50%, #3E2723 100%);
}

.case-info {
    padding: 24px;
}

/* Case Tags */
.case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.case-tag {
    display: inline-block;
    padding: 3px 12px;
    background-color: var(--gold-light);
    color: var(--gold-hover);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
}

.case-info h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 10px;
    line-height: 1.35;
}

.case-info > p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.65;
    margin-bottom: 20px;
}

/* Case Metrics */
.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 18px;
}

.case-metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 2px;
}

.metric-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-text);
    text-decoration: none;
    transition: var(--transition);
}

.case-link:hover {
    color: var(--gold-hover);
    gap: 10px;
}

.case-link i {
    font-size: 0.75em;
}

.case-footer {
    text-align: center;
}

@media (min-width: 768px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-img {
        height: 220px;
    }
}


/* ================================================================
   18. WHY CARTER
   ================================================================ */

.why-carter {
    padding: var(--section-pad) 0;
    background-color: var(--white);
    position: relative;
    overflow: hidden;
}

.why-carter-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.why-carter-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.why-carter-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1B1B1B 0%, #2A2A2A 50%, #1B1B1B 100%);
}

.why-carter .container {
    position: relative;
    z-index: 2;
}

.why-carter-text,
.why-carter-features {
    color: #fff;
}

.why-carter .section-label {
    color: var(--gold);
}

.why-carter h2 {
    color: #fff;
}

.why-carter p {
    color: rgba(255,255,255,0.85);
}

.why-carter .cred-number {
    color: var(--gold);
}

.why-carter .cred-label {
    color: rgba(255,255,255,0.8);
}

.why-carter .wc-feature i {
    color: var(--gold);
}

.why-carter .wc-feature h4 {
    color: #fff;
}

.why-carter .wc-feature p {
    color: rgba(255,255,255,0.8);
}

/* Why Carter — no background image variant */
.why-carter--no-bg {
    background-color: var(--white);
}

.why-carter--no-bg .why-carter-text,
.why-carter--no-bg .why-carter-features {
    color: var(--charcoal);
}

.why-carter--no-bg .section-label {
    color: var(--gold-text);
}

.why-carter--no-bg h2 {
    color: var(--charcoal);
}

.why-carter--no-bg p {
    color: var(--body-text);
}

.why-carter--no-bg .cred-number {
    color: var(--gold-text);
}

.why-carter--no-bg .cred-label {
    color: var(--body-text);
}

.why-carter--no-bg .cred-item {
    background-color: var(--light-gray);
    border: 1px solid var(--border);
}

.why-carter--no-bg .wc-feature i {
    color: var(--gold-text);
}

.why-carter--no-bg .wc-feature h4 {
    color: var(--charcoal);
}

.why-carter--no-bg .wc-feature p {
    color: var(--body-text);
}

.why-carter-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: flex-start;
}

.why-carter-text .section-label {
    display: inline-block;
    margin-bottom: 12px;
}

.why-carter-text h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.why-carter-text > p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 36px;
}

/* Credibility Grid */
.credibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cred-item {
    padding: 20px;
    background-color: rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    text-align: center;
}

.cred-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 4px;
    line-height: 1.1;
}

.cred-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--body-text);
    line-height: 1.4;
}

/* Features List */
.why-carter-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wc-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background-color: rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.wc-feature:hover {
    background-color: rgba(255, 204, 0, 0.12);
}

.wc-feature > i {
    color: var(--gold);
    font-size: 1.125rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.wc-feature h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 4px;
}

.wc-feature p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .why-carter-text h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .why-carter-layout {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
    }

    .why-carter-text h2 {
        font-size: 2.5rem;
    }
}


/* ================================================================
   17b. WHY CARTER — Accordion Layout (reference-inspired)
   ================================================================ */

.wc-section {
    padding: var(--section-pad) 0;
    background: var(--dark);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.wc-top {
    margin-bottom: 48px;
}

.wc-headline {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
}

.wc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

@media (min-width: 768px) {
    .wc-grid {
        grid-template-columns: 2fr 3fr;
        gap: 56px;
    }
}

/* Left — Stats + CTA */
.wc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.wc-stat {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
}

.wc-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 4px;
}

.wc-stat-lbl {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.4;
}

.wc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gold);
    color: var(--dark);
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s;
}

.wc-cta:hover {
    background: var(--gold-hover);
}

/* Right — Accordion Panels */
.wc-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wc-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wc-panel:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wc-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    transition: opacity 0.2s;
}

.wc-panel-header:hover {
    opacity: 0.85;
}

.wc-panel-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 204, 0, 0.10);
    border-radius: 8px;
    flex-shrink: 0;
}

.wc-panel-icon i {
    font-size: 1rem;
    color: var(--gold);
}

.wc-panel--open .wc-panel-icon {
    background: var(--gold);
}

.wc-panel--open .wc-panel-icon i {
    color: var(--dark);
}

.wc-panel-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wc-panel-arrow {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.wc-panel--open .wc-panel-arrow {
    transform: rotate(180deg);
    color: var(--gold);
}

.wc-panel-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 0 0 56px;
}

.wc-panel--open .wc-panel-body {
    max-height: 200px;
    padding-bottom: 20px;
}

.wc-panel-body p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 767px) {
    .wc-headline {
        font-size: 1.75rem;
    }
    .wc-panel-title {
        font-size: 0.875rem;
    }
}


/* ================================================================
   19. COVERAGE SECTION
   ================================================================ */

.coverage-section {
    padding: var(--section-pad) 0;
    background-color: var(--light-gray);
}

.coverage-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: flex-start;
}

.coverage-text .section-label {
    display: inline-block;
    margin-bottom: 12px;
}

.coverage-text h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 16px;
    line-height: 1.2;
}

.coverage-text > p {
    font-size: 1rem;
    color: var(--body-text);
    line-height: 1.7;
    margin-bottom: 28px;
}

.coverage-locations {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.location-item > i {
    color: var(--gold);
    font-size: 0.95rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.location-item strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 2px;
}

.location-item span {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Map Placeholder */
.coverage-map {
    width: 100%;
}

.map-placeholder {
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    z-index: 0;
}

.map-overlay-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.map-overlay-content > i {
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 8px;
}

.map-overlay-content > span {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--charcoal);
}

.map-overlay-content > p {
    font-size: 16px;
    color: var(--body-text);
    max-width: 320px;
    margin-bottom: 12px;
}

.map-search {
    display: flex;
    gap: 10px;
    max-width: 380px;
    width: 100%;
}

.map-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--charcoal);
    transition: var(--transition);
}

.map-search input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
}

.map-search input::placeholder {
    color: var(--text-light);
}

.map-search .btn {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .coverage-text h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .coverage-layout {
        grid-template-columns: 1fr 1.2fr;
        gap: 56px;
        align-items: center;
    }

    .coverage-text h2 {
        font-size: 2.5rem;
    }
}


/* ================================================================
   20. CTA SECTION
   ================================================================ */

/* Emergency Power Module — dark charcoal (client preferred) */
.emergency-power-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #1B1B1B 0%, #2A2A2A 50%, #1B1B1B 100%);
}

/* Red variant — swap class to .emergency-power-section--red if needed */
.emergency-power-section--red {
    background: linear-gradient(135deg, #8B1A1A 0%, #A02020 50%, #8B1A1A 100%);
}

.emergency-power-bar {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.emergency-power-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
}

.emergency-power-icon i {
    font-size: 1.5rem;
    color: #FFC107;
}

.emergency-power-text {
    flex: 1;
    min-width: 250px;
}

.emergency-power-text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 4px;
}

.emergency-power-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.emergency-power-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .emergency-power-bar {
        flex-direction: column;
        text-align: center;
    }
    .emergency-power-actions {
        width: 100%;
        flex-direction: column;
    }
    .emergency-power-actions .btn {
        width: 100%;
    }
}

.cta-section {
    padding: var(--section-pad) 0;
    background: linear-gradient(135deg, #1B1B1B 0%, #2A2A2A 50%, #1B1B1B 100%);
    position: relative;
    overflow: hidden;
}

/* Grid texture removed — clean dark background */

.cta-layout {
    position: relative;
    z-index: 1;
    text-align: center;
}

.cta-text {
    max-width: 100%;
    margin: 0 auto 48px;
    text-align: center;
}

.cta-text h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 14px;
    line-height: 1.2;
}

.cta-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

.cta-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.cta-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 24px;
    background-color: transparent;
    border: 2px solid rgba(255, 204, 0, 0.35);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
    text-align: center;
}

.cta-card > i {
    font-size: 1.5rem;
    color: var(--gold);
}

.cta-card h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--white);
}

.cta-card p {
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .cta-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-text h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .cta-text h2 {
        font-size: 2.0rem;
    }
}


/* ================================================================
   21. CONTACT SECTION
   ================================================================ */

.contact-section {
    padding: var(--section-pad) 0;
    background-color: var(--white);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Contact Form */
.contact-form {
    background-color: var(--white);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.form-grid .form-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--charcoal);
}

.form-grid .form-field input,
.form-grid .form-field select,
.form-grid .form-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--charcoal);
    background-color: var(--white);
    transition: var(--transition);
    width: 100%;
}

.form-grid .form-field input:focus,
.form-grid .form-field select:focus,
.form-grid .form-field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
}

.form-grid .form-field input::placeholder,
.form-grid .form-field textarea::placeholder {
    color: var(--text-light);
}

.form-grid .form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.575 3.4l0.85-0.85L6 7.125l4.575-4.575 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-grid .form-field textarea {
    resize: vertical;
    min-height: 100px;
}

.full-width {
    grid-column: 1 / -1;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card {
    padding: 24px;
    background-color: var(--light-gray);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.sidebar-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.sidebar-card h4 i {
    color: var(--gold);
    font-size: 0.9rem;
}

.sidebar-card p {
    font-size: 16px;
    color: var(--body-text);
    line-height: 1.6;
    margin-bottom: 4px;
}

.emergency-link {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
}

.emergency-link:hover {
    color: var(--gold-hover);
}

.phone-link,
.email-link {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
}

.phone-link:hover,
.email-link:hover {
    color: var(--gold-hover);
}

.email-link {
    word-break: break-all;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1.6fr 1fr;
        gap: 48px;
    }
}


/* ================================================================
   22. FOOTER
   ================================================================ */

.footer {
    background-color: var(--dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    border-top: 3px solid var(--gold);
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 32px;
}

/* Footer Brand */
.footer-brand {
    max-width: 300px;
}

.footer-logo .logo-carter {
    color: var(--white);
}

.footer-logo .logo-ps {
    color: rgba(255, 255, 255, 0.6);
}

.footer-logo .logo-divider {
    background-color: var(--gold);
}

.footer-brand > p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.7;
    margin-top: 16px;
    margin-bottom: 20px;
}

.footer-certifications {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-certifications span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

.footer-certifications i {
    color: var(--gold);
    font-size: 0.85rem;
}

/* Footer Nav */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.footer-col h5 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
}

.footer-col h5 ~ h5 { margin-top: 36px; }

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--gold);
}

/* Footer Headquarters — beautified */
.footer-col--hq {
    order: -1;
}

.footer-hq-address {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-hq-address > i {
    color: var(--gold);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-hq-address strong {
    display: block;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.90);
    margin-bottom: 4px;
}

.footer-hq-address span {
    display: block;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.footer-locations-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--gold);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-locations-link:hover {
    color: #fff;
}

.footer-locations-link i {
    font-size: 0.75rem;
}

.footer-hq-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-hq-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-hq-links a:hover {
    color: var(--gold);
}

.footer-hq-links a i {
    color: var(--gold);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.footer-hq-phone {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gold);
}

/* Footer Social */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-social a:hover {
    background: var(--gold);
    color: var(--charcoal);
    border-color: var(--gold);
    transform: translateY(-2px);
}

/* Footer Bottom */
.footer-bottom {
    padding: 24px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.7;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: var(--transition);
}

.footer-bottom a:hover {
    color: var(--gold);
}

.footer-parent {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-connect {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.footer-connect a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-connect a:hover {
    color: var(--gold);
}

.footer-connect a i {
    color: var(--gold);
    font-size: 0.8rem;
}

.footer-connect .footer-hq-phone {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
}

@media (min-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        padding: 56px 0 36px;
    }
}


/* ================================================================
   23. ACCESSIBILITY & FOCUS STATES
   ================================================================ */

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

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.35);
}

/* Skip to content (hidden, available on focus) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    padding: 12px 24px;
    background-color: var(--gold);
    color: var(--white);
    font-weight: 600;
    z-index: 9999;
    border-radius: var(--radius);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 16px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ================================================================
   24. PRINT STYLES
   ================================================================ */

@media print {
    .emergency-banner,
    .navbar,
    .hamburger,
    .hero-bg,
    .hero-overlay,
    .hero-actions,
    .hero-trust-bar,
    .btn,
    .cta-section,
    .footer {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }

    .hero {
        min-height: auto;
        padding: 20px 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}


/* ================================================================
   25. UTILITY CLASSES
   ================================================================ */

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

.text-gold {
    color: var(--gold);
}

.text-center {
    text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }


/* ================================================================
   26. SECTION PADDING RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 767px) {
    .pillars,
    .tools-section,
    .products-section,
    .applications-section,
    .industries-section,
    .documentation-section,
    .svc-showcase,
    .case-studies-section,
    .why-carter,
    .wc-section,
    .vtabs-section,
    .coverage-section,
    .cta-section,
    .contact-section {
        padding: var(--section-pad-sm) 0;
    }

    .section-header {
        margin-bottom: 36px;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .section-desc {
        font-size: 0.9375rem;
    }

    .hero-subtitle {
        font-size: 0.9375rem;
    }

    .hero-actions {
        flex-direction: column;
        margin-bottom: 32px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-trust-bar {
        flex-direction: column;
        gap: 12px;
    }

    /* CTA adjustments */
    .cta-text h2 {
        font-size: 1.5rem;
    }

    .cta-cards {
        gap: 12px;
    }

    /* Coverage */
    .coverage-text h2 {
        font-size: 1.5rem;
    }

    /* Why Carter */
    .why-carter-text h2 {
        font-size: 1.5rem;
    }

    .credibility-grid {
        gap: 12px;
    }

    .cred-number {
        font-size: 1.625rem;
    }

    /* Tab content */
    .tab-content {
        padding: 24px 20px;
    }

    .app-specs {
        grid-template-columns: 1fr;
    }

    .app-actions {
        flex-direction: column;
    }

    .app-actions .btn {
        width: 100%;
    }

    /* Case studies */
    .case-img {
        height: 160px;
    }

    /* Product cards */
    .product-cat-img {
        height: 130px;
    }

    /* Map */
    .map-placeholder {
        min-height: 280px;
        padding: 32px 20px;
    }

    .map-search {
        flex-direction: column;
    }

    .map-search .btn {
        width: 100%;
    }
}


/* ================================================================
   27. ANIMATIONS & MICRO-INTERACTIONS
   ================================================================ */

/* Subtle fade-in for sections (can be triggered via IntersectionObserver in JS) */
.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Underline animation for nav items on larger screens */
@media (min-width: 1024px) {
    .nav-menu > ul > li > a {
        position: relative;
    }

    .nav-menu > ul > li > a::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--charcoal);
        transition: width 0.25s ease, left 0.25s ease;
    }

    .nav-menu > ul > li > a:hover::after {
        width: 70%;
        left: 14px;
    }
}

/* Pulse animation for emergency phone icon */
@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 204, 0, 0);
    }
}


/* ================================================================
   28. SCROLLBAR STYLING (Webkit)
   ================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}


/* ================================================================
   29. BREADCRUMB (for inner pages / future use)
   ================================================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--body-text);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb .separator {
    color: var(--border);
    font-size: 0.7em;
}

.breadcrumb .current {
    color: var(--charcoal);
    font-weight: 600;
}


/* ================================================================
   30. HIGH-DPI / RETINA ADJUSTMENTS
   ================================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-divider {
        width: 1.5px;
    }
}


/* ================================================================
   31. BACK TO TOP BUTTON
   ================================================================ */

.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background-color: var(--gold);
    color: var(--white);
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(255, 204, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--gold-hover);
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45);
    transform: translateY(-3px);
}

.back-to-top:active {
    transform: translateY(0);
}

@media (max-width: 767px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}


/* ================================================================
   32. HOME PAGE — Final Design System
   Typography · Layout · Hero · CTA Cards · Text Links · Cards
   Responsive: 1024→1023→900→768→767→600→480→375px
   ================================================================ */

/* ── Layout ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .container { padding: 0 14px; }
}

/* ── Section Header — flush-left with gold underline ────────────── */
.section-header {
    position: relative;
    text-align: left;
    max-width: var(--container-max);
    margin: 0 0 18px 0;
    padding-bottom: 22px;
}
.section-header::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--gold);
}
.section-header h2,
.section-header .section-label,
.section-header .section-desc,
.section-header p,
.wc-section .section-label {
    text-align: left;
    margin-left: 0;
    max-width: var(--container-max);
}
.section-header .section-label,
.cta-section .section-header,
.closing-cta .section-header,
.final-cta .section-header { text-align: left; }

/* Ensure section headings match the global scale */
.section-header h2,
.svc-hero-content h2,
.cta-text h2 { font-size: 36px; }

/* ── Eyebrow Labels ──────────────────────────────────────────────── */
.section-label,
.svc-hero-label {
    color: var(--eyebrow-color);
    font-size: 0.875rem;
    letter-spacing: 0.10em;
    font-weight: 700;
    text-transform: uppercase;
}
.section-label i { color: var(--eyebrow-color); }
.svc-hero-section .svc-hero-label,
.svc-hero-section .section-label { color: var(--gold); }

/* ── Cards — flat/angular ────────────────────────────────────────── */
.app-card, .app-img-card, .case-study-card,
.tool-card-sm, .svc-box, .cta-card { border-radius: 0; }

/* ── Section Surface Palette ─────────────────────────────────────── */
.applications-section                         { background: #FFFFFF; }
.applications-section + .applications-section { background: #F4F4F4; }
.case-studies-section                         { background: #FFFFFF; }
.tools-section                                { background: #F4F4F4; }
.svc-hero-section                             { background: #1B1B1B; }
.wc-section                                   { background: #F4F4F4; border-top: 1px solid #E5E5E5; }
.cta-section                                  { background: #1B1B1B; }

/* ── Section Rhythm — eyebrow → h2 → intro gaps ─────────────────── */
.section-header .section-label,
.svc-hero-content .svc-hero-label,
.wc-top .section-label,
.rental-strip-inner .rental-strip-eyebrow {
    display: inline-block;
    margin: 0 0 12px 0;
}

.section-header h2,
.svc-hero-content h2,
.wc-top .wc-headline,
.rental-strip-inner .rental-strip-headline,
.hero-content h1,
.cta-text h2 { margin: 0 0 16px 0; }

.section-header > h2:last-child,
.wc-top > .wc-headline:last-child,
.svc-hero-content > h2:last-child,
.cta-text > h2:last-child { margin-bottom: 0; }

.svc-hero-content > p,
.wc-top .wc-intro,
.rental-strip-inner .rental-strip-sub,
.hero-content .hero-subtitle { margin: 0; }


.wc-stat-row { margin: 0 0 40px 0; }

.hero-actions,
.rental-strip-inner .rental-strip-actions { margin-top: 24px; }
.svc-hero-content > .btn,
.svc-hero-content > a.btn { margin-top: 24px; }

/* ── Hero Section ────────────────────────────────────────────────── */
.hero .hero-layout { max-width: 100%; }
.hero .hero-content {
    max-width: 66.67%;
    background: rgba(0, 0, 0, 0.55);
    border-top: none; border-right: none; border-bottom: none;
    backdrop-filter: blur(2px);
    border-left: solid 4px var(--gold);
}
.hero .hero-content h1 { font-size: 40px; font-weight: 800;}
.hero .hero-subtitle {
    font-size: 18px;
    line-height: 1.55;
}
.hero .hero-actions .btn { font-weight: 700; }

/* ── CTA Section ─────────────────────────────────────────────────── */
.cta-section .cta-text h2 { color: #FFFFFF; text-align: left; }
.cta-cards { gap: 28px; max-width: var(--container-max); }

/* ── CTA Cards — dark band style ─────────────────────────────────── */
.cta-card {
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.cta-card p      { text-align: left; color: rgba(255, 255, 255, 0.78); }
.cta-card h5     { color: #FFFFFF; }
.cta-card strong { color: var(--gold); }
.cta-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--gold-glow);
    transform: none;
}

/* ── Text Link Buttons — Explore X → style ───────────────────────── */
.app-card-link,
.app-img-link,
.svc-box-link,
.case-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--eyebrow-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}
.app-card-link i,
.app-img-link i,
.svc-box-link i,
.case-link i { color: inherit; transition: color 0.2s ease, transform 0.2s ease; }

.app-card:hover .app-card-link, .app-card-link:hover,
.app-img-card:hover .app-img-link, .app-img-link:hover,
.case-study-card:hover .case-link, .case-link:hover { color: var(--gold); gap: 10px; }

.svc-box:hover .svc-box-link,
.svc-box-link:hover { color: var(--gold); gap: 10px; }
.svc-box-link:hover i { transform: translateX(2px); }

.btn-nav-cta { font-weight: 700; }

/* ── Card Hover States — yellow border ring, no lift/zoom ───────────
   Identical selector list to sample5-6.html
   ─────────────────────────────────────────────────────────────────── */
.app-card,
.app-img-card {
    border: 1px solid var(--border-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.app-card:hover img,
.app-img-card:hover img { transform: none; }
.app-card-image img,
.app-img-photo img { transition: none; }

/* Same single block as sample5-6.html — all card types, identical rule */
.app-card:hover,
.app-img-card:hover,
.tools-section .tool-card-sm:hover,
.svc-box:hover,
.case-study-card:hover,
.cta-section .cta-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
    transform: none;
}
.case-study-card:hover .case-img img { transform: none; }

/* Industries cards: ID selector (#industries) outranks class hover without
   !important, so we must re-declare to guarantee sthe gold ring applies */
#industries .app-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
    transform: none;
}

/* Service boxes — additionally darken background onf hover */
.svc-box--urgent-p:hover i { transform: none; }

/* ── Utility — h5 padding in grids ──────────────────────────────── */
.tools-grid h5,
.svc-box h5,
.wc-callout-grid h5 { padding-bottom: 10px; }

/* ── Industries Section — 4-up image tiles ───────────────────────── */
#industries .app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
#industries .app-card {
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--border-light);
}
#industries .app-card-image {
    width: 100%;
    min-width: 0;
    height: 180px;
    flex: 0 0 180px;
}
#industries .app-card-image img { width: 100%; height: 100%; object-fit: cover; }
#industries .app-card-body { padding: 18px 20px 22px; }
#industries .app-card-body h3 { margin: 0 0 8px; }

/* ── Rental Strip ────────────────────────────────────────────────── */
.rental-strip {
    position: relative;
    background: #1B1B1B;
    background-size: cover;
    background-position: center;
    padding: var(--section-pad);
    color: #fff;
    border-top: 4px solid var(--gold);
}
.rental-strip-inner { max-width: 75%; }
.rental-strip-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.rental-strip-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(27, 27, 27, 0.82);
}
.rental-strip .container { position: relative; z-index: 1; }
.rental-strip-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}
.rental-strip-headline { color: #fff; margin: 0 0 12px 0; }
.rental-strip-sub { color: rgba(255,255,255,0.85); margin: 0 0 24px 0; }
.rental-strip-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rental-strip-emergency-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rental-strip-phone {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    text-decoration: none;
    line-height: 1.1;
}

/* ── Engineering Resources ───────────────────────────────────────── */
.tools-section .tool-card-sm {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
}
.tools-footer-note { text-align: left; color: #111; }
.tools-footer-note a { color: #111; text-decoration: underline; }
.tools-footer-note a strong { font-weight: 700; }
.tools-footer-note a:hover { color: var(--gold); }

/* ── Service Section — dark band ─────────────────────────────────── */
.svc-hero-content { max-width: 75%; }
.svc-hero-content h2 { color: #FFFFFF; max-width: 100%; }
.svc-boxes { align-items: stretch; }
.svc-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #2A2A2A;
    border: 1px solid rgba(255,255,255,0.12);
    color: #FFFFFF;
}
.svc-box > h5 { flex: 0 0 auto; color: #FFFFFF; }
.svc-box > p  { flex: 1 1 auto; color: rgba(255,255,255,0.78); }
.svc-box .svc-box-link,
.svc-box > a.svc-box-link {
    color: var(--gold);
    margin-top: auto;
    align-self: flex-start;
}
.svc-box .svc-box-link i { color: var(--gold); font-size: 0.75rem; }
.svc-box--urgent-p:hover i { transform: none; }

/* ── Case Studies ────────────────────────────────────────────────── */
.case-studies-grid { align-items: stretch; }
.case-study-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.case-study-card .case-img { flex: 0 0 auto; }
.case-study-card .case-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.case-study-card .case-info > h5,
.case-study-card .case-info > h3 { flex: 0 0 auto; margin-top: 0; }
.case-study-card .case-info > p  { flex: 1 1 auto; }
.case-study-card .case-info .case-link { margin-top: auto; align-self: flex-start; }

/* ── Why Carter Section ──────────────────────────────────────────── */
.wc-top { max-width: 75%; }
.wc-intro { color: var(--body-text); line-height: 1.75; }
.wc-headline {
    color: var(--charcoal);
    letter-spacing: -0.015em;
    position: relative;
    padding-bottom: 22px;
    margin-bottom: 18px;
}
.wc-headline::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--gold);
}

.wc-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(135deg, #1B1B1B, #2A2A2A);
    color: #fff;
    padding: 32px 24px;
}
.wc-stat-item {
    text-align: left;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.wc-stat-item:last-child { border-right: none; }
.wc-stat-num {
    font-size: 34px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    display: block;
}
.wc-stat-lbl {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.35;
    font-weight: 500;
}

.wc-callout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 16px;
}
.wc-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0 0 48px 0;
    border: none;
}
.wc-callout {
    padding: 28px;
    background: #F8F8F8;
    border: 1px solid var(--border-light);
}
.wc-callout-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 8px;
}
.wc-callout h3 { margin: 0 0 8px 0; }
.wc-callout p  { color: #333; margin: 0; }

/* ── Final CTA — dark, standardized across industry pages ───────── */
.ind-final-cta {
    padding: var(--section-pad) 0;
    background: var(--charcoal);
    color: var(--white);
}
@media (max-width: 767px) { .ind-final-cta { padding: var(--section-pad-sm) 0; } }
.ind-final-cta .section-label { color: var(--gold); display: inline-block; margin: 0 0 12px 0; }
.ind-final-cta-inner { text-align: left; width: 75%;}
.ind-final-cta-inner h2 {
    color: var(--white);
    margin: 0 0 16px 0;
    position: relative;
}
.ind-final-cta-inner p {
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}
.ind-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width: 767px) {
    .ind-final-cta-actions { flex-direction: column; align-items: stretch; }
    .ind-final-cta-actions .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Navigation ──────────────────────────────────────────────────── */
.has-megamenu > .megamenu {
    left: 0;
    right: auto;
    transform: none;
    min-width: 480px;
}
.megamenu-grid { gap: 32px; }
.dropdown a, .megamenu a { display: block; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer .footer-brand { max-width: 360px; }
.footer .footer-brand .footer-logo-img { display: block; height: 52px; width: auto; margin-bottom: 22px; }
.footer .footer-hq-address { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.footer .fhq-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 14px;
    align-items: start;
    color: rgba(255,255,255,0.85);
    font-size: 0.9375rem;
    line-height: 1.55;
    text-decoration: none;
    letter-spacing: 0;
    transition: color 0.2s ease;
}
.footer .footer-hq-address .fhq-row > i { color: inherit; font-size: 0.95rem; line-height: 1.55; text-align: left; margin-top: 2px; }
.footer .footer-hq-address .fhq-row--address { color: rgba(255,255,255,0.72); margin-bottom: 6px; }
.footer .footer-hq-address .fhq-row--address > div { display: flex; flex-direction: column; gap: 2px; }
.footer .footer-hq-address .fhq-row--address strong { color: #FFFFFF; font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.footer .footer-hq-address .fhq-row--address span { display: block; }
.footer .footer-hq-address .fhq-link { color: rgba(255,255,255,0.85); font-weight: 600; cursor: pointer; }
.footer .footer-hq-address .fhq-link > i,
.footer .footer-hq-address .fhq-link > span { color: inherit; }
.footer .footer-hq-address .fhq-link:hover,
.footer .footer-hq-address .fhq-link:focus-visible { color: var(--gold); outline: none; }
.footer .footer-hq-address .fhq-link:hover > i,
.footer .footer-hq-address .fhq-link:hover > span { color: var(--gold); }
.footer .footer-hq-address .footer-hq-phone { font-size: 1.0625rem; font-weight: 700; }
.footer .footer-brand .footer-social { justify-content: flex-start; gap: 10px; }

/* ── Responsive System ───────────────────────────────────────────── */

/* 1024px: tablet landscape */
@media (max-width: 1024px) {
    .hero .hero-content { max-width: 75%; }
    .svc-hero-content   { max-width: 80%; }
    .wc-top             { max-width: 80%; }
    .rental-strip-inner { max-width: 80%; }
    #industries .app-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1023px: stat row 2-up */
@media (max-width: 1023px) {
    .wc-stat-row { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
    .wc-stat-item:nth-child(2n) { border-right: none; }
}

/* 900px: 3-col app grid → 2-col */
@media (max-width: 900px) {
    .app-img-grid--3col { grid-template-columns: repeat(2, 1fr); }
}

/* 768px: tablet portrait */
@media (max-width: 768px) {
    .hero .hero-content { max-width: 100%; border: unset; }
    .svc-hero-content   { max-width: 100%; }
    .wc-top             { max-width: 100%; }
    .rental-strip-inner { max-width: 100%; }
    .wc-callout-grid    { grid-template-columns: 1fr; gap: 16px; }
    .case-studies-grid  { grid-template-columns: 1fr; }
    .cta-cards          { flex-direction: column; }
    .section-header     { max-width: 100%; }
}

/* 767px: mobile typography + layout collapse */
@media (max-width: 767px) {

        .hero .hero-content h1 { font-size: 34px;}
    .hero .hero-subtitle { font-size: 1.1rem; line-height: 1.5; }

    .wc-top             { margin-bottom: 36px; }
    .app-img-grid--3col { grid-template-columns: 1fr; }
    .wc-stat-row        { grid-template-columns: repeat(2, 1fr); padding: 24px 16px; }
    .wc-stat-item       { padding: 0 16px; }
    .wc-callout         { padding: 20px; }
    .rental-strip       { padding: 48px 0; }
    .tools-grid         { grid-template-columns: 1fr; }
}

/* 600px: industries 1-col */
@media (max-width: 600px) {
    #industries .app-grid { grid-template-columns: 1fr; }
}

/* 480px: small mobile */
@media (max-width: 480px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    .hero .hero-subtitle { font-size: 1rem; }

    .rental-strip             { padding: 40px 0; }
    .rental-strip-phone       { font-size: 1.25rem; }
    .wc-stat-row              { grid-template-columns: 1fr; }
    .wc-stat-item             { padding: 16px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
    .wc-stat-item:last-child  { border-bottom: none; }
    .wc-callout               { padding: 16px; }
    .svc-hero-content > .btn,
    .svc-hero-content > a.btn { width: 100%; text-align: center; }
    .rental-strip-actions     { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer .footer-brand     { max-width: 100%; }
}

/* 375px: smallest common mobile */
@media (max-width: 375px) {
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    .wc-callout-grid { gap: 10px; }
}

/* ================================================================
   GLOBAL RESPONSIVE — Logo, Nav, Footer
   ================================================================ */

@media (max-width: 480px) {
    .logo-img { height: 26px; }
    .nav-wrapper { min-height: 60px; }
    .footer-social { flex-wrap: wrap; }
    .footer-social a { width: 36px; height: 36px; font-size: 0.875rem; }
}


/* ================================================================
   33. INDUSTRY PAGES — Shared Section 2 & 3 Patterns
   White 3-col reality tiles + gray 2-col text/image layout.
   Used by: industry-healthcare.html, industry-datacenters.html
   ================================================================ */

.ind-section        { padding: var(--section-pad) 0; }
.ind-section--white { background: var(--white);        border-top: 1px solid var(--border-light); }
.ind-section--gray  { background: var(--surface-gray); border-top: 1px solid var(--border-light); }
@media (max-width: 767px) { .ind-section { padding: var(--section-pad-sm) 0; } }

/* Section 2 — intro text */
.ind-intro { max-width: 75%; margin-bottom: 32px; }
.ind-intro p { color: var(--body-text); line-height: 1.78; margin: 0; }
.ind-intro p + p { margin-top: 16px; }
@media (max-width: 900px) { .ind-intro { max-width: 100%; } }
.mr-reality-subhead { margin: 0px 0 24px 0 !important;}
/* Section 2 — three-column tiles */
.ind-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 767px) { .ind-cards { grid-template-columns: 1fr; } }

.ind-card { background: var(--surface-gray); border: 1px solid var(--border-light); padding: 28px 26px; display: flex; flex-direction: column; align-items: flex-start; }
.ind-card h5 { color: var(--charcoal); margin: 0 0 10px 0; }
.ind-card p  { color: var(--body-text); line-height: 1.7; margin: 0; }

/* Section 3 — two-column layout */
.ind-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 900px) { .ind-twocol { grid-template-columns: 1fr; gap: 32px; } }

/* Reverse: image appears left, text right (text stays first in DOM for mobile readability) */
@media (min-width: 901px) { .ind-twocol--reverse .ind-twocol-text { order: 2; } }

.ind-twocol-text h2 {
    color: var(--charcoal);
    margin: 0 0 24px 0;
    position: relative;
    padding-bottom: 22px;
}
.ind-twocol-text h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 56px; height: 3px;
    background: var(--gold);
}
.ind-twocol-text p { color: var(--body-text); line-height: 1.75; margin: 0 0 20px 0; }

/* Gold bullet list */
.ind-bullet { list-style: none; padding: 0; margin: 20px 0; }
.ind-bullet li { position: relative; padding-left: 22px; margin-bottom: 12px; line-height: 1.65; color: var(--body-text); }
.ind-bullet li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--gold); }

/* Image column */
.ind-img-wrap { width: 100%; background: var(--white); }
.ind-img { display: block; width: 100%; height: auto; }
.ind-img--cover { aspect-ratio: 4/3; object-fit: cover; }

/* ================================================================
   34. INDUSTRY PAGES — Section 4: Dark Background-Image Panel
   Dark charcoal section with full-bleed image and gradient overlay.
   Used by: industry-healthcare.html, industry-datacenters.html
   ================================================================ */
.ind-dark {
  position: relative;
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
  padding: var(--section-pad);
}
.ind-dark-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ind-dark-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.75;
  filter: grayscale(0.2);
}
.ind-dark-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.27);
}
.ind-dark .container     { position: relative; z-index: 1; }
.ind-dark-content        { max-width: 75%; }
.ind-dark .section-label { color: var(--gold) !important; }
.ind-dark h2             { color: var(--white); margin: 0 0 18px 0; }
.ind-dark p              { color: rgba(255,255,255,0.82); line-height: 1.78; margin: 0 0 20px 0; }
.ind-dark-actions        { margin-top: 28px; }
@media (max-width: 1024px) { .ind-dark-content { max-width: 80%; } }
@media (max-width: 768px)  { .ind-dark { padding: 64px 0; } .ind-dark-content { max-width: 100%; } }

/* ================================================================
   35. SOLUTION PAGES — Final CTA Section
   ================================================================ */

.final-cta-section {
    padding: var(--section-pad) 0;
    background: var(--charcoal);
    overflow: hidden;
}
.final-cta-inner {
    max-width: 75%;
    text-align: left;
}
.final-cta-inner h2 {
    color: var(--white);
    margin: 0 0 12px 0;
}
.final-cta-inner > p {
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}
.final-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 24px;
}
.final-cta-contact {
    margin-top: 32px;
    color: rgba(255,255,255,0.55);
    text-align: left;
}
.final-cta-contact a {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
}
.final-cta-contact a:hover { text-decoration: underline; }
.final-cta-rental {
    margin-top: 12px;
    color: rgba(255,255,255,0.65);
}
.final-cta-rental a {
    color: var(--gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    transition: gap 0.2s ease;
}
.final-cta-rental a i { transition: transform 0.2s; }
.final-cta-rental a:hover { gap: 10px; }
.final-cta-rental a:hover i { transform: translateX(2px); }
@media (max-width: 767px) {
    .final-cta-section  { padding: 56px 0; }
    .final-cta-inner    { max-width: 100%; }
    .final-cta-actions  { flex-direction: column; }
    .final-cta-actions .btn { width: 100%; }
}

/* Shared utility */
.margin-bottom { margin-bottom: 24px; }

/* Inline rental / external link inside vtab panels */
.vtabs-panel .vtab-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--eyebrow-color);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
    margin-left: 6px;
    white-space: nowrap;
}
.vtabs-panel .vtab-inline-link i { transition: transform 0.2s; }
.vtabs-panel .vtab-inline-link:hover { color: var(--gold); gap: 10px; }
.vtabs-panel .vtab-inline-link:hover i { transform: translateX(2px); }

/* ================================================================
   36. SOLUTIONS — STANDBY PAGE  (solutions-standby.html)
   ================================================================ */

/* --- Section 2: Why Standby Is Required — 4-col image tiles --- */
section.sb-why-required {
    padding: var(--section-pad);
}
.sb-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 600px)  { .sb-why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sb-why-grid { grid-template-columns: repeat(4, 1fr); } }
.sb-why-tile {
    background: var(--white);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.sb-why-tile__img { width: 100%; height: 180px; overflow: hidden; }
.sb-why-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-why-tile__body { padding: 18px 20px 22px; }
.sb-why-tile__body h5 { color: var(--charcoal); margin: 0 0 8px 0; }
.sb-why-tile__body p  { color: var(--body-text); line-height: 1.55; margin: 0; }

/* --- Section 3: System Design — vtabs gray background override --- */
/* Global vtabs-section uses var(--white); standby page uses #F4F4F4 */
.vtabs-section { background: #F4F4F4; border-top: none; }
.vtabs-panel h3 { font-weight: 800; }

/* --- Section 4: Maintenance — dark charcoal band with bg image --- */
.sb-maintenance {
    position: relative;
    padding: var(--section-pad) 0;
    background: #1B1B1B;
    color: var(--white);
    overflow: hidden;
}
.sb-maintenance-bg { position: absolute; inset: 0; z-index: 0; }
.sb-maintenance-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.sb-maintenance-overlay {
    position: absolute;
    inset: 0;
}
.sb-maintenance > .container,
.sb-maintenance-boxes-wrapper { position: relative; z-index: 1; }
.sb-maintenance-content { max-width: 75%; }
.sb-maintenance-content .section-label { color: var(--gold); display: inline-block; margin: 0 0 12px 0; }
.sb-maintenance-content h2 { color: var(--white); margin: 0 0 16px 0; }
.sb-maintenance-content p  { color: rgba(255,255,255,0.78); margin: 0; }
.sb-maintenance-boxes-wrapper { margin-top: 48px; }
.sb-maintenance-boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 900px) { .sb-maintenance-boxes { grid-template-columns: repeat(3, 1fr); } }
.sb-maint-box {
    display: flex;
    flex-direction: column;
    background: #2A2A2A;
    border: 1px solid rgba(255,255,255,0.10);
    padding: 26px 28px 24px;
    color: var(--white);
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.sb-maint-box:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
    transform: none;
}
.sb-maint-box h5 { color: var(--white); margin: 0 0 10px 0; }
.sb-maint-box p  { color: rgba(255,255,255,0.78); margin: 0; flex: 1; }
.sb-maint-box__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--gold);
    transition: gap 0.2s ease;
}
.sb-maint-box:hover .sb-maint-box__link { gap: 10px; }

/* --- Standby mobile overrides --- */
@media (max-width: 767px) {
    .sb-maintenance { padding: 56px 0 0 0; }
    .sb-maintenance-content { max-width: 100%; }
    .sb-maintenance-boxes { padding-bottom: 56px; }
    .container { padding-left: 16px; padding-right: 16px; }
}

/* ================================================================
   37. SOLUTIONS — TEMPORARY / RENTAL PAGE  (solutions-temporary.html)
   ================================================================ */
/* --- Section 2: Emergency Response — light band modifier ---
   Base .rental-strip is dark (see Section 20+); --light flips to gray */
.rental-strip--light {
    background: #F4F4F4;
    border-top: 4px solid var(--gold);
}
.wc-stat-row.three_col_stat {
    grid-template-columns: repeat(3, 1fr);
}
.background_white {
    background: var(--white);
    border-top: unset;
}
.rental-strip--light .rental-strip-inner         { max-width: 75%; }
.rental-strip--light .rental-strip-eyebrow       { color: var(--eyebrow-color); background: transparent; }
.rental-strip--light .rental-strip-headline      { color: #1B1B1B; }
.rental-strip--light .rental-strip-sub           { color: #444; }
.rental-strip--light .rental-strip-emergency-label { color: var(--eyebrow-color); font-weight: 600; }
.rental-strip--light .rental-strip-phone         { color: #1B1B1B; }
.rental-strip--light .rental-strip-phone:hover   { color: var(--gold-text); }
@media (max-width: 900px) {
    .rental-strip--light .rental-strip-inner { max-width: 100%; }
}

/* --- Section 3: Planned Deployments — scoped 2-col grid adjustments --- */
.svc-hero-section.tp-planned .svc-hero-content   { max-width: 75%; }
.svc-hero-section.tp-planned .svc-boxes          { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) {
    .svc-hero-section.tp-planned .svc-boxes       { grid-template-columns: 1fr; }
    .svc-hero-section.tp-planned .svc-hero-content { max-width: 100%; }
}

/* --- Section 4: How Carter Helps --- */
.rt-helps {
    padding: var(--section-pad) 0;
    background: var(--white);
}
@media (max-width: 767px) { .rt-helps { padding: var(--section-pad-sm) 0; } }
.rt-helps-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 0 0 48px 0;
}
@media (min-width: 768px) {
    .rt-helps-top { grid-template-columns: 50% 50%; align-items: start; }
}
.rt-helps-text p   { color: #555; line-height: 1.65; margin: 0 0 16px 0; }
.rt-helps-img img  { width: 100%; object-fit: cover; }
.rt-evaluate h3    { color: var(--charcoal); margin-bottom: 24px; }
.rt-evaluate-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .rt-evaluate-strip { grid-template-columns: repeat(4, 1fr); }
}
.rt-eval-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    background-color: var(--surface-gray);
    border: 1px solid var(--border-light);
}
.rt-eval-item .rt-eval-dash {
    width: 4px;
    min-height: 100%;
    background: var(--gold);
    flex-shrink: 0;
    display: none;
}
.rt-eval-item strong { display: block; color: var(--charcoal); margin-bottom: 4px; }
.rt-eval-item span   { color: #555; line-height: 1.5; }

/* --- Section 5: Rental Fleet — dark charcoal band --- */
.rt-industries-hero {
    position: relative;
    padding: var(--section-pad) 0;
    overflow: hidden;
}
@media (max-width: 767px) { .rt-industries-hero { padding: var(--section-pad-sm) 0; } }
.rt-industries-hero-inner {
    position: relative;
    z-index: 1;
    text-align: left;
}
.rt-industries-hero.tp-fleet                  { background: #1B1B1B; }
.rt-section-label.section-label  { color: var(--gold); }
.rt-industries-hero.tp-fleet h2               { color: var(--white); margin: 0 0 16px 0; }
.rt-industries-hero.tp-fleet p                { color: rgba(255,255,255,0.72); max-width: 75%; line-height: 1.65; margin: 0 0 16px 0; }
@media (max-width: 767px) {
    .rt-industries-hero.tp-fleet p { max-width: 100%; }
}
.tp-fleet-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-weight: 700;
    text-decoration: none;
    color: var(--gold);
    transition: gap 0.2s ease;
}
.tp-fleet-cta i          { transition: transform 0.2s ease; }
.tp-fleet-cta:hover      { gap: 12px; }
.tp-fleet-cta:hover i    { transform: translateX(2px); }

/* ================================================================
   38. SOLUTIONS — PRIME POWER PAGE  (solutions-prime.html)
   ================================================================ */

/* --- Shared section padding utility --- */
.pp-section { padding: var(--section-pad) 0; }

/* --- Section 2: The Case for Prime Power — 3-col info tiles (no hover) --- */
.pp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) { .pp-cards { grid-template-columns: 1fr; } }
.pp-card {
    border: 1px solid var(--border-light);
    padding: 28px 30px;
    background-color: var(--surface-gray);
}
.pp-card h5 { margin: 0 0 12px 0; }
.pp-card p  { color: var(--body-text); line-height: 1.6; margin: 0; }

/* --- Section 4: Optimizing the Investment — 3-col linked tiles with gold hover --- */
.pp-opt-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 767px) { .pp-opt-cards { grid-template-columns: 1fr; } }
.pp-opt-card {
    border: 1px solid var(--border-light);
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-gray);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pp-opt-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}
.pp-opt-card h5 { margin: 0 0 12px 0; }
.pp-opt-card p  { color: var(--body-text); line-height: 1.6; flex: 1; margin: 0 0 18px 0; }
.pp-opt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--eyebrow-color);
    text-decoration: none;
    font-weight: 600;
    margin-top: auto;
    transition: color 0.2s ease, gap 0.2s ease;
}
.pp-opt-card:hover .pp-opt-link          { color: var(--gold); gap: 10px; }
.pp-opt-link i                           { font-size: 0.8125rem; transition: transform 0.2s; }
.pp-opt-card:hover .pp-opt-link i        { transform: translateX(3px); }

/* --- Section 5: Big Power — gray background, text + image split --- */
.pp-bigpower { background: var(--surface-gray); padding: var(--section-pad) 0; }
.pp-bigpower-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
@media (max-width: 767px) { .pp-bigpower-inner { grid-template-columns: 1fr; gap: 32px; } }
.pp-bigpower-text .section-label { display: block; margin-bottom: 12px; }
.pp-bigpower-text h2              { margin: 0 0 22px 0; }
.pp-bigpower-text p               { color: var(--body-text); line-height: 1.65; margin: 0 0 14px 0; }
.pp-bigpower-img {
    background: #DCDCDC;
    min-height: 380px;
    overflow: hidden;
}
.pp-bigpower-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; }

/* Phone CTA link */
.pp-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--charcoal);
    text-decoration: none;
}
.pp-phone i                      { color: var(--eyebrow-color); font-size: 1.1rem; }
.pp-phone span                   { color: var(--eyebrow-color); }
.pp-phone:hover i,
.pp-phone:hover span             { color: var(--gold); }

/* --- Section 6: Prime Power Service — dark charcoal band --- */
.pp-service-dark { background: var(--charcoal); padding: var(--section-pad) 0; }
.pp-service-dark .section-label  { color: var(--gold); display: block; margin-bottom: 12px; }
.pp-service-dark h2              { color: var(--white); margin: 0 0 20px 0; }
.pp-service-dark p               { color: rgba(255,255,255,0.78); line-height: 1.65; margin: 0 0 28px 0; max-width: 75%; }
@media (max-width: 767px) { .pp-service-dark p { max-width: 100%; } }
.pp-service-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    transition: gap 0.2s ease;
}
.pp-service-cta i          { font-size: 0.875rem; transition: transform 0.2s; }
.pp-service-cta:hover      { gap: 12px; }
.pp-service-cta:hover i    { transform: translateX(3px); }

/* ================================================================
   ENGINEERING & UPGRADES  (eu-)
   ================================================================ */
.svc-boxes.two-col{
        grid-template-columns: repeat(2, 1fr);
    }
.eu-section { padding: var(--section-pad) 0; background: var(--white); }
@media (max-width: 767px) { .eu-section { padding: var(--section-pad-sm) 0; } }
.eu-section--gray { background: var(--surface-gray); }

.eu-section-head { max-width: 75%; margin: 0 0 36px 0; }
@media (max-width: 900px) { .eu-section-head { max-width: 100%; } }
.eu-section-head h2 { margin: 0 0 16px 0; }
.eu-section-head p  { margin: 0; line-height: 1.7; }

.eu-capabilities .app-img-card { cursor: default; }
.eu-capabilities .app-img-photo { aspect-ratio: 4 / 3; background: var(--surface-gray); overflow: hidden; }
.eu-capabilities .app-img-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eu-capabilities .app-img-body { padding: 22px 24px 26px; }
.eu-capabilities .app-img-body h5 { margin: 0 0 10px 0; }
.eu-capabilities .app-img-body p  { margin: 0; line-height: 1.65; }

.eu-cap-footer-link a{
    display: inline-flex;
    align-items: center;
    color: var(--eyebrow-color);
    text-decoration: underline;
     gap: 8px;
    transition: gap 0.2s ease, color 0.2s ease;
}
.eu-cap-footer-link{
    margin-top: 32px;
}  
.eu-cap-footer-link i { color: var(--eyebrow-color);}
.eu-cap-footer-link:hover a, .eu-cap-footer-link:hover i{ gap: 12px; color: var(--gold); }

.eu-depth .rental-strip-bg { background-image: url('../images/eu-engineering-hero.png'); }

.eu-process-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
}
.eu-process-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--gold);
    z-index: 0;
}
.eu-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 28px;
    padding: 0 0 40px 0;
}
.eu-process-step:last-child { padding-bottom: 0; }
.eu-process-num {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--charcoal);
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.eu-process-body { padding-top: 4px; }
.eu-process-body h5 { margin: 0 0 10px 0; }
.eu-process-body p  { margin: 0; line-height: 1.7; }

@media (max-width: 560px) {
    .eu-process-step { grid-template-columns: 44px 1fr; gap: 20px; padding-bottom: 32px; }
    .eu-process-num  { width: 44px; height: 44px; font-size: 1.05rem; }
    .eu-process-list::before { left: 21px; top: 22px; bottom: 22px; }
}

.no-link-hover .app-img-card:hover {
    border-color: var(--border-light);
    box-shadow: none;
}
/* ================================================================
   SERVICE SUPPORT  (svc-)
   ================================================================ */

.svc-situations { background: var(--charcoal); padding: var(--section-pad) 0; }

.svc-engineering { padding: var(--section-pad) 0; background: var(--white); }
.svc-engineering-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: center;
}
@media (min-width: 1024px) {
    .svc-engineering-layout { grid-template-columns: 1fr 1fr; }
}
.svc-engineering-image { overflow: hidden; }
.svc-engineering-image img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }
.svc-engineering-text h2 { position: relative; margin: 0 0 40px; padding-bottom: 22px; }
.svc-engineering-text h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 3px; background: var(--gold);
}
.svc-engineering-text p { line-height: 1.8; margin: 0 0 16px; }
.svc-engineering-text p:last-of-type { margin-bottom: 28px; }

.svc-trust { position: relative; background: var(--charcoal); overflow: hidden; }
.svc-trust-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0.75; pointer-events: none;
}
.svc-trust-inner { padding: var(--section-pad) 0; }
.svc-trust-header { position: relative; font-weight: 800; color: var(--white); line-height: 1.35; text-align: left; max-width: 800px; margin: 0 0 48px; }
.svc-trust-inner .wc-stat-row { margin: 0; position: relative; }
.svc-trust-inner .wc-stat-item { background: transparent; border-radius: 0; }

.svc-testing { padding: var(--section-pad) 0; background: var(--surface-gray); }
.svc-testing-inner { max-width: 100%; }
.svc-testing-inner .section-label { display: inline-block; margin-bottom: 14px; }
.svc-testing-inner h2 { position: relative; margin: 0 0 40px; padding-bottom: 22px; max-width: 75%; }
.svc-testing-inner h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 3px; background: var(--gold);
}
.svc-testing-inner p { line-height: 1.8; margin: 0 0 28px; max-width: 800px; color: var(--body-text); }
span.card-heading{
    padding: 30px 0px;
    margin: auto;
}
@media (max-width: 767px) {
    .svc-situations  { padding: var(--section-pad-sm) 0; }
    .svc-engineering { padding: var(--section-pad-sm) 0; }
    .svc-engineering-image img { max-height: 260px; }
    .svc-trust-inner      { padding: var(--section-pad-sm) 0; }
    .svc-testing          { padding: var(--section-pad-sm) 0; }
    .svc-testing-inner h2 { max-width: 100%; }
}
/* ================================================================
   TESTING & INSPECTIONS  (ti-)
   ================================================================ */
.rt-helps-gray {
    background: var(--surface-gray);
}
.rt-evaluate-white .rt-eval-item {
    background-color: var(--white);
}


/* Section 7 — capability chip groups */
section.ti-capabilities {
    padding: var(--section-pad);
    background-color: var(--surface-gray);
}
.ti-cap-group { margin-top: 40px; }
.ti-cap-group + .ti-cap-group { margin-top: 32px; }
.ti-cap-group__heading {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}
.ti-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ti-chips li {
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: 10px 16px;
    color: var(--charcoal);
    line-height: 1.3;
}
/* ================================================================
   SERVICE AGREEMENTS  (sa-)
   ================================================================ */

/* Section 4 — white background override on the light-gray section */
.sa-why-section { background: var(--white); }
.sa-why-section .wc-stat-row { grid-template-columns: repeat(3, 1fr); margin: 40px 0 0; }
@media (max-width: 700px) { .sa-why-section .wc-stat-row { grid-template-columns: 1fr; } }

/* Section 5 — 3-col coverage grid + recommended flag badge */
.sa-cov3-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sa-cov3-grid { grid-template-columns: 1fr; } }
.sa-card-flag { position: relative; }
.sa-flag {
    display: inline-block;
    background: var(--gold);
    color: var(--charcoal);
    padding: 4px 10px;
    margin-bottom: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}
.hc-section{padding: var(--section-pad) 0;}
.hc-section--grey{background-color: var(--surface-gray);}
/* ================================================================
   MODEL CONFIGURATIONS  (mc-)
   ================================================================ */

/* Intro */
.mc-intro {
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--border-light);
}
.mc-intro-inner {
    padding-left: 24px;
    max-width: 820px;
}
.mc-intro-inner h1 { color: var(--charcoal); margin: 0 0 16px; }
.mc-intro-inner p { line-height: 1.7; color: #444; margin: 0; }

/* Gap notice */
.mc-gap-notice {
    margin: 40px 0;
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 28px 32px;
    background: #fffdf0;
}
.mc-gap-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: var(--charcoal);
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.mc-gap-notice p { color: #444; margin: 0; }

/* Filter bar */
.mc-filter-bar {
    background: var(--light-gray);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.mc-filter-bar input[type="text"],
.mc-filter-bar select {
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: var(--white);
    color: var(--charcoal);
    min-width: 180px;
}
.mc-filter-bar input[type="text"]:focus,
.mc-filter-bar select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255,206,16,0.15);
}
.mc-filter-counter { margin-left: auto; color: #888; white-space: nowrap; }

/* Data table */
.mc-table-wrap {
    overflow-x: auto;
    margin-bottom: 48px;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.mc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 2200px;
}
.mc-table thead th {
    background: var(--charcoal);
    color: var(--white);
    font-weight: 700;
    text-transform: none;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid #444;
}
.mc-table thead th:last-child { border-right: none; }
.mc-table tbody tr { border-bottom: 1px solid var(--border-light); }
.mc-table tbody tr:nth-child(even) { background: transparent; }
.mc-table tbody tr:hover { background: #fff9e0; }
.mc-table tbody td {
    padding: 12px 16px;
    color: #333;
    white-space: nowrap;
    border-right: 1px solid #eee;
    font-variant-numeric: tabular-nums;
}
.mc-table tbody td:last-child { border-right: none; }

/* Model group visual separation */
.mc-model-first { background: var(--off-white); }
.mc-model-first td { border-top: 3px solid #bbb; padding-top: 14px; }
.mc-table tbody tr:first-child.mc-model-first td { border-top: none; }
.mc-model-alt td { padding-top: 9px; padding-bottom: 9px; }
.mc-model-alt td:first-child { color: #999; }

/* Notes below table */
.mc-notes {
    max-width: 75%;
    margin-bottom: 40px;
    color: #555;
    font-size: 0.875rem;
    line-height: 1.75;
}
.mc-notes p { margin: 0 0 10px; }
.mc-notes p:last-child { margin-bottom: 0; }

/* Reference notes */
.mc-reference {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
.mc-ref-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 28px;
    background: var(--white);
}
.mc-ref-card h3 { color: var(--charcoal); margin: 0 0 20px; }
.mc-ref-item { margin-bottom: 16px; }
.mc-ref-item:last-child { margin-bottom: 0; }
.mc-ref-item strong { display: block; color: var(--charcoal); margin-bottom: 4px; }
.mc-ref-item p,
.mc-ref-card > p { line-height: 1.7; color: #555; margin: 0 0 14px; }
.mc-ref-card > p:last-child { margin-bottom: 0; }

/* Contacts section */
.mc-contacts { background: var(--charcoal); padding: 56px 0; }
.mc-contacts .section-label { color: var(--gold); }
.mc-contacts h2 { color: var(--white); margin: 0 0 32px; }
.mc-contacts-desc {
    color: rgba(255,255,255,0.75);
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: 32px;
}
.mc-contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mc-contact-card {
    border: 2px solid var(--gold-border);
    border-radius: 10px;
    padding: 28px;
    background: rgba(255,204,0,0.06);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mc-contact-card:hover {
    background: rgba(255,204,0,0.10);
    border-color: var(--gold);
    box-shadow: 0 4px 24px rgba(255,204,0,0.12);
}
.mc-contact-territory {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 14px;
}
.mc-contact-card h4 { font-weight: 700; color: var(--white); margin: 0 0 4px; }
.mc-contact-card .mc-contact-role { color: rgba(255,255,255,0.50); margin-bottom: 16px; }
.mc-contact-card .mc-contact-detail {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-contact-card .mc-contact-detail i { width: 18px; color: var(--gold); text-align: center; }
.mc-contact-card a { color: rgba(255,255,255,0.70); text-decoration: none; transition: color 0.2s; }
.mc-contact-card a:hover { color: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
    .mc-contacts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mc-filter-bar { flex-direction: column; align-items: stretch; }
    .mc-filter-bar input[type="text"],
    .mc-filter-bar select { min-width: auto; width: 100%; }
    .mc-filter-counter { margin-left: 0; text-align: right; }
}
/* ================================================================
   DOCUMENT LIBRARY  (doclib-)
   ================================================================ */

/* Document listing */
.doc-listing { margin-bottom: 48px; }

/* Model Accordion */
.model-accordion { border: 1px solid var(--border-light); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.model-accordion-header { background: var(--charcoal); color: var(--white); padding: 18px 24px; display: flex; align-items: center; cursor: pointer; user-select: none; gap: 20px; transition: background 0.2s; }
.model-accordion-header:hover { background: var(--dark-soft); }
.model-accordion-header .model-name { min-width: 100px; }
.model-accordion-header .model-desc { color: rgba(255,255,255,0.75); flex: 1; }
.model-accordion-header .model-doc-count { color: var(--gold); font-weight: 600; white-space: nowrap; }
.model-accordion-header .chevron { transition: transform 0.25s ease; color: rgba(255,255,255,0.6); }
.model-accordion.open .model-accordion-header .chevron { transform: rotate(180deg); }

/* Accordion body */
.model-accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: var(--white); }
.model-accordion.open .model-accordion-body { max-height: 5000px; }
.model-accordion-body-inner { padding: 0; }

/* Document row — 3 columns: type label | title | download */
.doc-row { display: grid; grid-template-columns: 90px 1fr 130px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border-light); gap: 16px; }
.doc-row:last-child { border-bottom: none; }

/* Document type tags — compact colored pills */
.doc-type-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; color: var(--white); white-space: nowrap; }
.doc-type-tag.spec      { background: var(--info); }
.doc-type-tag.enclosure { background: var(--icon-accent); }
.doc-type-tag.tank      { background: var(--success); }
.doc-type-tag.drawing   { background: var(--brand-gray); }
.doc-type-tag.other     { background: #888; }

/* Row content */
.doc-title { color: var(--charcoal); font-weight: 500; }
.doc-download { color: #555; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.doc-download:hover { color: var(--charcoal); }

/* Empty / no-results state */
.doc-no-results { text-align: center; padding: 48px 24px; color: #888; }
.doc-no-results p { margin: 0; }
.doc-clear-btn { background: none; border: none; color: var(--gold-text); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.doc-clear-btn:hover { color: var(--charcoal); }

.doc-listing-note { color: #666; line-height: 1.65; margin-top: 16px; padding: 0 4px; }
.doc-listing-note a { color: var(--gold-text); text-decoration: none; }

/* Pagination — <a>, <span> elements rendered by PHP */
.doc-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 28px 0 8px; }
.doc-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--white);
    color: var(--charcoal);
    font-size: 0.875rem; font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    line-height: 1;
    white-space: nowrap;
}
a.doc-page-btn:hover { background: var(--light-gray); border-color: var(--border); color: var(--charcoal); }
.doc-page-btn.current { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); cursor: default; font-weight: 700; pointer-events: none; }
.doc-page-btn.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.doc-page-ellipsis { display: inline-flex; align-items: center; height: 40px; padding: 0 4px; color: #aaa; font-size: 1rem; user-select: none; }

/* Contacts section */
.doclib-contacts { background: var(--light-gray); padding: 64px 0; }
.contacts-header { margin-bottom: 40px; }
.contacts-header .section-label { display: inline-block; margin-bottom: 12px; }
.contacts-header h2 { color: var(--charcoal); margin: 0; }
.contacts-header p { margin-top: 12px; }
.contacts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.contact-card { background: var(--white); border-radius: 10px; padding: 32px 28px; border: 1px solid var(--border); transition: box-shadow 0.25s; }
.contact-card:hover { box-shadow: var(--shadow-lg); }
.contact-card .region-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text); margin-bottom: 14px; display: block; }
.contact-card .contact-name { font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.contact-card .contact-role { color: var(--text-light); margin-bottom: 18px; }
.contact-card .contact-detail { color: var(--charcoal); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; text-decoration: none; }
.contact-card .contact-detail:hover { color: var(--gold-text); }
.contact-card .contact-detail i { color: #999; width: 16px; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
    .contacts-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .doc-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 24px; }
    .model-accordion-header { flex-wrap: wrap; gap: 8px; }
    .model-accordion-header .model-desc { flex-basis: 100%; order: 3; }
}
/* ================================================================
   SEND SPECS  (specs-)
   ================================================================ */
.ind-section--grey{
    background-color: var(--surface-gray);
}
/* Contact section */
.who-reviews { padding: 64px 0; border-bottom: 1px solid var(--border-light); background: var(--surface-warm); }
.who-reviews h2 { color: var(--charcoal); margin: 0 0 12px; }
.who-reviews-desc { font-size: 1rem; color: var(--body-text); line-height: 1.7; max-width: 640px; margin-bottom: 32px; }
.who-reviews-note { font-size: 0.9375rem; color: var(--body-text); margin-top: 8px; }
.who-reviews-note a { color: var(--gold-text); text-decoration: none; }
.contact-cards-stack { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.region-contact-card { border: 1px solid var(--border); border-radius: 10px; padding: 28px; background: var(--white); transition: box-shadow 0.2s; }
.region-contact-card:hover { box-shadow: var(--shadow-md); }
.region-contact-card .region-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text); margin-bottom: 10px; display: block; }
.region-contact-card .contact-detail { display: flex; align-items: center; gap: 8px; color: var(--body-text); margin-bottom: 6px; text-decoration: none; }
.region-contact-card .contact-detail:hover { color: var(--gold-text); }
.region-contact-card .contact-detail i { color: var(--gold-text); width: 16px; text-align: center; }

/* Submit section */
.submit-section { padding: 64px 0; border-bottom: 1px solid var(--border-light); }
.submit-section h2 { color: var(--charcoal); margin: 0 0 32px; }

/* File upload drop zone */
.file-drop-zone { border: 2px dashed #ccc; border-radius: 12px; background: var(--off-white); padding: 48px 24px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 32px; position: relative; }
.file-drop-zone:hover, .file-drop-zone.dragover { border-color: var(--gold); background: #fffde6; }
.file-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop-zone .upload-icon { color: #bbb; margin-bottom: 16px; }
.file-drop-zone.dragover .upload-icon { color: var(--gold-text); }
.file-drop-zone .upload-text { color: var(--charcoal); margin-bottom: 6px; }
.file-drop-zone .upload-subtext { color: #999; }
.file-drop-zone .file-name-display { color: var(--charcoal); font-weight: 600; display: none; }
.file-drop-zone .file-name-display.active { display: block; }
.file-drop-zone .file-name-display i { color: #27ae60; margin-right: 6px; }
.file-drop-zone.has-error { border-color: var(--error, #e74c3c) !important; background: #fff5f5 !important; }
.file-error-display { display: none; color: var(--error, #e74c3c); font-weight: 600; font-size: 0.875rem; margin-top: 10px; }
/* Spec form */
.spec-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.spec-form-grid .full-width { grid-column: 1 / -1; }
.spec-form-grid label { font-weight: 600; color: var(--charcoal); margin-bottom: 6px; display: block; }
.spec-form-grid label .optional { font-weight: 400; color: #999; }
.spec-form-grid label .required { color: var(--error); }
.spec-form-grid input,
.spec-form-grid select,
.spec-form-grid textarea { width: 100%; padding: 12px 14px; border: 1px solid #d0d0d0; border-radius: 6px; background: var(--white); color: var(--charcoal); transition: border-color 0.2s; box-sizing: border-box; }
.spec-form-grid input:focus,
.spec-form-grid select:focus,
.spec-form-grid textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light); }
.spec-form-grid input.error,
.spec-form-grid select.error,
.spec-form-grid textarea.error { border-color: var(--error); }
.spec-form-grid .field-error { color: var(--error); margin-top: 4px; display: none; }
.spec-form-grid .field-error.active { display: block; }
.spec-form-grid textarea { resize: vertical; min-height: 100px; }
.spec-form-grid p { margin: 0; }
.spec-form-grid p br { display: none; }
/* ── Contact Form 7 ── */
div.wpcf7 { max-width: 100%; }
.wpcf7-form { display: flex; flex-direction: column; gap: 28px; }
.wpcf7-form p { margin: 0; }

/* Two-column row */
.wpcf7-form .form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Field group */
.wpcf7-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Divider */
.wpcf7-form hr,
.wpcf7-form .form-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

/* Labels */
.wpcf7-form label {
    font-weight: 600;
    color: var(--charcoal);
    font-family: var(--font);
}
.wpcf7-form .wpcf7-required-tag,
.wpcf7-form abbr[title="required"] {
    color: var(--error);
    text-decoration: none;
    margin-left: 2px;
}

/* Form control wrap — must be block so width: 100% works */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Inputs, selects, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: var(--font);
    color: var(--charcoal);
    background-color: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

/* Select arrow */
.wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.575 3.4l0.85-0.85L6 7.125l4.575-4.575 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Textarea */
.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Focus */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 206, 16, 0.15);
}

/* Placeholder */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--text-light);
    opacity: 1;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 13px 36px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font);
    color: var(--charcoal);
    background: var(--gold);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    width: auto;
    letter-spacing: 0.01em;
}
.wpcf7-form input[type="submit"]:hover { background: var(--gold-hover); }
.wpcf7-form input[type="submit"]:active { transform: scale(0.98); }

/* Validation — only show errors after form submission, not during fill-in */
.wpcf7-form .wpcf7-not-valid { border-color: var(--error) !important; }
.wpcf7-not-valid-tip {
    display: block;
    font-size: 0.75rem;
    color: var(--error);
    margin-top: 4px;
}
.wpcf7-form.init .wpcf7-not-valid,
.wpcf7-form.submitting .wpcf7-not-valid {
    border-color: var(--border) !important;
    box-shadow: none !important;
}
.wpcf7-form.init .wpcf7-not-valid-tip,
.wpcf7-form.submitting .wpcf7-not-valid-tip {
    display: none !important;
}

/* Consent checkbox */
.wpcf7-acceptance .wpcf7-list-item { padding: 0; margin:0}
.wpcf7-acceptance label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-weight: 400 !important;
}
.wpcf7-acceptance input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin-top: 2px;
    padding: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--border) !important;
    border-radius: 3px !important;
    background: var(--white) !important;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    flex-shrink: 0;
}
.wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
}
.wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--charcoal);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.wpcf7-acceptance input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 206, 16, 0.15) !important;
}
.wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 0.875rem;
    color: var(--body-text);
    line-height: 1.6;
}
.wpcf7-acceptance .wpcf7-list-item-label a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wpcf7-acceptance .wpcf7-list-item-label a:hover {
    color:var(--gold);
}

/* Response output */
.wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: 1px solid var(--border);
    color: var(--body-text);
}
.wpcf7-mail-sent-ok { border-color: var(--success) !important; color: var(--success) !important; }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng { border-color: var(--error) !important; color: var(--error) !important; }

/* Responsive */
@media (max-width: 768px) {
    .wpcf7-form .form-row-2col { grid-template-columns: 1fr; }
}
.btn-submit-spec { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; font-weight: 700; color: var(--charcoal); background: var(--gold); border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn-submit-spec:hover { background: var(--gold-hover); }
.btn-submit-spec:active { transform: scale(0.98); }

.submit-note { color: var(--text-light); margin-top: 16px; line-height: 1.6; }

/* What Happens Next */
.next-steps-section { padding: 64px 0; background: var(--light-gray); border-bottom: 1px solid var(--border-light); }
.next-steps-section h2 { color: var(--charcoal); margin: 0 0 40px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 32px 28px; position: relative; }
.step-card .step-number { text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-text); margin-bottom: 12px; display: block; }
.step-card h3 { color: var(--charcoal); margin: 0 0 12px; line-height: 1.3; }
.step-card p { color: var(--body-text); line-height: 1.7; margin: 0; }
.step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); border-radius: 10px 10px 0 0; }

/* FAQ */
.faq-section { padding: 64px 0; border-bottom: 1px solid var(--border-light); }
.faq-section h2 { color: var(--charcoal); margin: 0 0 32px; }
.faq-list { max-width: 75%; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; background: var(--white); border: none; width: 100%; text-align: left; font-weight: 600; color: var(--charcoal); transition: background 0.2s;font-size: 1rem; }
.faq-question:hover { background: var(--off-white); }
.faq-question i { color: #999; transition: transform 0.25s; flex-shrink: 0; margin-left: 16px; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--gold); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 24px 20px; color: var(--body-text); line-height: 1.7; }

/* Responsive */
@media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr; }
    .spec-form-grid { grid-template-columns: 1fr; }
    .spec-form-grid .full-width { grid-column: 1; }
}
/* ================================================================
   CONTACT  (ct-)
   ================================================================ */

/* Section 3 — Tabbed intent form */
.ct-form-section { padding: var(--section-pad) 0; background: var(--white); }
.ct-form-wrap { max-width: 720px; }

/* Tab strip */
.ct-tabs { display: flex; background: #6e6e6e; margin-bottom: 24px; overflow: hidden; }
.ct-tab { flex: 1 1 0; padding: 16px 20px; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--white); background: transparent; border: none; cursor: pointer; white-space: nowrap; user-select: none; transition: background 0.2s ease, color 0.2s ease; }
.ct-tab + .ct-tab { border-left: 1px solid rgba(255,255,255,0.18); }
.ct-tab:hover:not(.active) { background: #5d5d5d; }
.ct-tab.active { background: var(--gold); color: var(--charcoal); }
.ct-tab.active + .ct-tab { border-left-color: rgba(255,206,16,0.35); }

.ct-tab-blurb { font-size: 0.9375rem; color: var(--body-text); line-height: 1.7; border-left: 3px solid var(--gold); padding-left: 16px; margin-bottom: 28px; max-width: 560px; }
.ct-tab-blurb a { color: var(--gold-text); text-decoration: none; }
.ct-tab-blurb strong { color: var(--charcoal); }

/* Form */
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-form-wrap .form-field { margin-bottom: 16px; }
.ct-form-wrap textarea { min-height: 90px; resize: vertical; }
.ct-optional { font-weight: 400; color: var(--body-text); }
.ct-required { color: var(--error); }
.ct-form-divider { border: none; border-top: 1px solid var(--border-light); margin: 4px 0 24px; }
.ct-intent-pane { display: none; }
.ct-intent-pane.active { display: block; }
.ct-submit-row { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.ct-reassurance { font-size: 0.875rem; color: var(--body-text); }
.ct-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .ct-form-row { grid-template-columns: 1fr; }
    .ct-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ct-tab { flex: 0 0 auto; }
    .ct-submit-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

li.ind-card a {
    text-decoration: underline;
    font-weight: 600;
}
li.ind-card a:hover {
    color: var(--gold);
}
/* ================================================================
   About
   ================================================================ */

   /*4 cards section*/
.svc-boxes.four-col {
    grid-template-columns: repeat(4, 1fr);
}
  .four-col.nocta .svc-box:hover {
    /* border-color: unset; */
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: unset;
}
.svc-boxes-wrapper.svc-boxes-transparent {
    background: transparent;
    padding-top: 0px;
}
/* ================================================================
   LOCATIONS  (loc-)
   ================================================================ */

/* Flat hero — shared by landing page + detail page */
.loc-hero { background: var(--white); padding: var(--section-pad) 0; border-bottom: 1px solid var(--border-light); }
.loc-hero__inner { max-width: 66.6667%; }
.loc-hero .section-label { text-align: left; margin-bottom: 12px; }
.loc-hero h1 { margin-bottom: 16px; }
.loc-hero p { font-size: 18px; line-height: 1.5; color: var(--body-text); margin-bottom: 0px; }
.loc-hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top:24px }
.loc-hero__cta-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow-color); }
@media (max-width: 1024px) { .loc-hero__inner { max-width: 80%; } }
@media (max-width: 768px) { .loc-hero__inner { max-width: 100%; } .loc-hero h1 { font-size: 2rem; } .loc-hero p { font-size: 1.15rem; } }

/* CTA inner — shared by landing page + detail page (wraps content inside .cta-section) */
.loc-cta__inner { max-width: 66.6667%; }
.loc-cta__inner h2 { color: var(--white); margin-bottom: 14px; }
.loc-cta__inner p { color: rgba(255,255,255,0.8);margin-bottom: 28px; }
@media (max-width: 768px) { .loc-cta__inner { max-width: 100%; } }
/* ── Landing page: location finder ── */
.loc-finder { background: var(--light-gray); border-bottom: 1px solid var(--border-light); padding: 28px 0; }
.loc-finder__label { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eyebrow-color); margin-bottom: 12px; }
.loc-finder__row { display: flex; gap: 12px; max-width: 620px; }
.loc-finder__input { flex: 1; height: 52px; border: 1px solid var(--border); background: var(--white); padding: 0 18px; font-size: 1rem; color: var(--charcoal); outline: none; transition: var(--transition); }
.loc-finder__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light); }
.loc-finder__btn { height: 52px; padding: 0 28px; background: var(--gold); color: var(--charcoal); font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; transition: var(--transition); }
.loc-finder__btn:hover { background: var(--gold-hover); box-shadow: var(--shadow-gold); }
@media (max-width: 560px) { .loc-finder__row { flex-direction: column; } .loc-finder__btn { justify-content: center; } }

/* ── Landing page: interactive map + location list ── */
.loc-map { border-bottom: 1px solid var(--border-light); }
.loc-map__grid { display: grid; grid-template-columns: 1fr 360px; min-height: 520px; }
.loc-map__canvas { position: relative; background: #20242A; overflow: hidden; min-height: 520px; }
#loc-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: #20242A; }
.leaflet-popup-content-wrapper { border-radius: 0; box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font); }
.loc-pop__name { font-size: 1rem; font-weight: 800; color: var(--charcoal); margin-bottom: 4px; }
.loc-pop__badge { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-text); background: var(--gold-light); padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.loc-pop__phone { font-size: 0.9rem; color: var(--body-text); margin-bottom: 8px; }
.loc-pop__phone a { color: var(--charcoal); font-weight: 700; }
.loc-pop__link { font-size: 0.85rem; font-weight: 700; color: var(--gold-text); display: inline-flex; align-items: center; gap: 5px; }
.loc-list { border-left: 1px solid var(--border-light); max-height: 520px; overflow-y: auto; overflow-x: hidden; background: var(--white); }
.loc-list__head { position: sticky; top: 0; background: var(--white); z-index: 1; padding: 14px 20px; border-bottom: 1px solid var(--border-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eyebrow-color); }
.loc-list__row { display: block; padding: 14px 20px; border-bottom: 1px solid var(--border-light); transition: background 0.12s ease; cursor: pointer; }
.loc-list__row:hover { background: var(--light-gray); }
.loc-list__row.is-active { background: var(--gold-light); box-shadow: inset 3px 0 0 var(--gold); }
.loc-list__name { font-weight: 700; color: var(--charcoal); margin-bottom: 2px; word-break: break-word; }
.loc-list__badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: var(--gold-light); padding: 2px 7px; margin-left: 8px; vertical-align: middle; }
.loc-list__phone { font-size: 0.9rem; color: var(--body-text); margin-bottom: 6px; }
.loc-list__phone a { color: var(--body-text); }
.loc-list__phone a:hover { color: var(--gold-text); }
.loc-list__link { font-size: 0.85rem; font-weight: 700; color: var(--eyebrow-color); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
.loc-list__link:hover { color: var(--gold); gap: 9px; }
.loc-list__divider { padding: 9px 20px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); background: var(--light-gray); border-bottom: 1px solid var(--border-light); }
.loc-list__empty { padding: 24px 20px; color: var(--text-light); font-size: 0.95rem; }
@media (max-width: 860px) {
  .loc-map__grid { grid-template-columns: 1fr; }
  .loc-map__canvas { min-height: 280px; }
  .loc-list { border-left: none; border-top: 1px solid var(--border-light); max-height: 460px; }
}

/* ── Landing page: all-locations directory ── */
.loc-directory { padding: var(--section-pad) 0; background: var(--white); }
.loc-dir-head { max-width: 66.6667%; margin-bottom: 36px; }
.loc-dir-head .section-label { text-align: left; margin-bottom: 12px; }
.loc-dir-head h2 { font-size: 2rem; color: var(--charcoal); margin-bottom: 14px; }
.loc-dir-head p { color: var(--body-text); line-height: 1.7; }
@media (max-width: 768px) { .loc-dir-head { max-width: 100%; } }
.loc-state { margin-bottom: 36px; }
.loc-state__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); padding-bottom: 10px; border-bottom: 2px solid var(--charcoal); margin-bottom: 4px; }
.loc-state__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; }
.loc-dir-item { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--border-light); }
.loc-dir-item__city { font-weight: 700; color: var(--charcoal); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.loc-dir-item__badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: var(--gold-light); padding: 2px 6px; }
.loc-dir-item__num { font-size: 0.9rem; color: var(--body-text); margin-bottom: 7px; }
.loc-dir-item__num a:hover { color: var(--gold); }
.loc-dir-item__view { font-size: 0.83rem; font-weight: 700; color: var(--eyebrow-color); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
.loc-dir-item__view:hover { color: var(--gold); gap: 9px; }

/* ================================================================
   LOCATION DETAIL — loc-here, loc-svc, loc-dir-state
   ================================================================ */

/* Section: At This Location */
.loc-here { padding: var(--section-pad) 0; background: var(--light-gray); }
.loc-here__head { max-width: 66.6667%; margin-bottom: 36px; }
.loc-here__head .section-label { text-align: left; margin-bottom: 12px; display: block; }
.loc-here__head h2 { font-size: 2rem; color: var(--charcoal); }
@media (max-width: 768px) { .loc-here__head { max-width: 100%; } }

/* Service tile grid */
.loc-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 1080px) { .loc-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .loc-svc-grid { grid-template-columns: 1fr; } }

/* Service tile */
.loc-svc {
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}
.loc-svc--empty { background: transparent; border: none; padding: 0; }
@media (max-width: 1080px) { .loc-svc--empty { display: none; } }

.loc-svc__dept { font-size: 1.1rem; font-weight: 800; color: var(--charcoal); margin-bottom: 16px; line-height: 1.25; }
.loc-svc__line { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--body-text); line-height: 1.55; margin-bottom: 12px; }
.loc-svc__line i { color: var(--gold); font-size: 0.9rem; width: 16px; text-align: center; margin-top: 3px; flex-shrink: 0; }
.loc-svc__line a { color: var(--charcoal); font-weight: 700; }
.loc-svc__line a:hover { color: var(--gold-hover); }
.loc-svc__hours { font-size: 0.9rem; color: var(--body-text); line-height: 1.7; margin-bottom: 18px; }
.loc-svc__hours span { display: block; }
.loc-svc__dir {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--eyebrow-color);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: var(--transition);
    text-decoration: none;
}
.loc-svc__dir:hover { color: var(--gold); gap: 10px; }

/* Directory: state group + card grid */
.loc-dir-state { margin-bottom: 40px; }
.loc-dir-state__name { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); display: inline-block; }
.loc-dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 1024px) { .loc-dir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .loc-dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .loc-dir-grid { grid-template-columns: 1fr; } }

/* loc-dir-card is an alias for loc-dir-item used by JS renderer */
.loc-dir-card { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--border-light); }
.loc-dir-card__city { font-weight: 700; color: var(--charcoal); margin-bottom: 3px; }
.loc-dir-card__phone { font-size: 0.9rem; color: var(--body-text); margin-bottom: 7px; }
.loc-dir-card__phone a { color: var(--body-text); }
.loc-dir-card__phone a:hover { color: var(--gold-text); }
.loc-dir-card__link { font-size: 0.83rem; font-weight: 700; color: var(--eyebrow-color); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); text-decoration: none; }
.loc-dir-card__link:hover { color: var(--gold-text); gap: 9px; }

/* ================================================================
   LEAFLET MAP — custom popup styles
   ================================================================ */
.loc-map-popup { font-family: var(--font); line-height: 1.45; }
.loc-map-popup__name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--charcoal);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.loc-map-popup__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-text);
    background: var(--gold-light);
    padding: 2px 6px;
    border-radius: 2px;
}
.loc-map-popup__phone {
    font-size: 0.875rem;
    color: var(--body-text);
    margin-bottom: 8px;
}
.loc-map-popup__phone a { color: var(--charcoal); font-weight: 600; }
.loc-map-popup__phone a:hover { color: var(--gold-text); }
.loc-map-popup__link {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--eyebrow-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
}
.loc-map-popup__link:hover { color: var(--gold-text); gap: 7px; }

/* Override Leaflet default popup chrome to match theme */
.leaflet-popup-content-wrapper {
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    padding: 0;
}
.leaflet-popup-content {
    margin: 14px 16px;
    font-size: 0.9rem;
}
.leaflet-popup-tip-container { margin-top: -1px; }
.section-label { margin: 0 0 12px 0; display: inline-flex}

/*Rental Power */
.bg-white {
    background-color: var(--white);
}
.bg-grey {
    background-color: var(--surface-gray);
}
.no-border {
    border: unset;
}
sup {
    font-size: 60%;
    vertical-align: super;
    line-height: normal;
}
section.pp-section p {
    margin: 0 0 14px;
}
/* ================================================================
   END OF STYLESHEET
   ================================================================ */