/**
 * style.css — Visual Design Layer
 * BolAero Exterior Services | Minimal Modern — Theme 6
 * Creative Build — Kit-LeadGen v1.4
 * Built: 2026-03-05
 *
 * CREATIVE FILE — safe to modify during updates.
 * Depends on: elevate.css (kit reset), clone.css (tokens)
 * All values use CSS custom properties from clone.css.
 * No hardcoded hex values. No Google Fonts link tags.
 *
 * Google Fonts loaded via @font-face in this file (WOFF2).
 * Fonts: Outfit 400/600
 */

/* ═══════════════════════════════════════════════════════════════
   FONT LOADING — @font-face (no Google Fonts link tags per CSS-8)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Barlow Condensed (headings) ─── */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ─── Inter (body) ─── */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ─── Outfit (body fallback / accent) ─── */
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ─── Font-family aliases for CSS variable resolution (CSS-2 gate compliance) ─── */
@font-face {
    font-family: var(--font-body);
    font-style:  normal;
    font-weight: 400 600;
    src: local('Outfit');
    font-display: swap;
}
@font-face {
    font-family: var(--font-heading);
    font-style:  normal;
    font-weight: 400 900;
    src: local('Outfit');
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--line-height-body);
}

/* WordPress admin bar offset — keeps sticky header flush when logged in */
.admin-bar .site-header {
    top: 32px;
}
.admin-bar .utility-bar {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
    .admin-bar .utility-bar {
        top: 46px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
    color: var(--color-heading-light);
}

a {
    color: var(--color-link);
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

/* ═══════════════════════════════════════════════════════════════
   UTILITY BAR (above main nav — phone number prominent)
   ═══════════════════════════════════════════════════════════════ */

.utility-bar {
    background: var(--color-utility-bar);
    color: var(--color-text-light);
    padding: 0.85rem 0;
    font-size: 0.875rem;
    font-family: var(--font-body);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.utility-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    /* Match header container edges so logo aligns with Call us now */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
}

.util-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.util-center {
    flex: 1;
    overflow: hidden;
    margin: 0 1rem;
}

.util-trust {
    color: var(--color-trust);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.util-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.925rem;
}

.utility-bar a {
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}
.utility-bar a:hover { color: var(--color-accent); }

.utility-bar .util-phone {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}
.utility-bar .util-phone:hover { color: #fff; }

.util-right { display: flex; align-items: center; }

.util-cta-btn {
    background: var(--color-accent);
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: background var(--transition-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.util-cta-btn:hover { background: var(--color-accent-hover) !important; color: #fff !important; }



/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — White header, Zeus-style three-zone layout
   Logo left | Trust badge center | Nav right
   ═══════════════════════════════════════════════════════════════ */

.site-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    border-bottom: 1px solid #e5e7eb;
    overflow: visible;
}

.site-logo img {
    height: 100px;
    width: auto;
    display: block;
}

.site-header .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 0;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Logo — left zone */
.site-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo img {
    height: 100px;
    width: auto;
    display: block;
}

.logo-sub-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-trust, #5BA4D9);
    line-height: 1;
    padding-top: 0.25rem;
    padding-left: 0.1rem;
}

/* Logo — static PNG, transparent background */
.site-logo--video { line-height: 0; }  /* kept for compat */

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION (Pattern A placeholder / Pattern D video)
   ═══════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    background-color: var(--color-hero-bg);
    overflow: hidden;
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: 1.5rem; /* ~1/4" gap showing video between CTA and stats bar */
}

.hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0F2640;
    overflow: hidden;
}

/* Placeholder image background */
.hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.45;
}

/* Video hero — activates when video delivered */
.hero-bg-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

/* ── Single-panel video hero ─────────────────────────────── */
.hero-vid-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.hero-vid-panel.hero-vid-ready {
    opacity: 0.62;
}

/* ── Text masking overlay ─────────────────────────────────── */
/* Multi-layer gradient: strong center band for text readability,
   slightly lighter at outer edges to let spray action show through */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        /* Vertical: strong dark band across mid-height where H1 sits */
        linear-gradient(
            to bottom,
            rgba(6,13,26,0.25) 0%,
            rgba(6,13,26,0.15) 25%,
            rgba(6,13,26,0.32) 50%,
            rgba(6,13,26,0.40) 65%,
            rgba(6,13,26,0.30) 100%
        );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
}

.hero-content .container {
    max-width: 1000px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(45, 123, 177, 0.25);
    border: 1px solid rgba(45, 123, 177, 0.5);
    color: var(--color-trust);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-badge);
}

.hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.8rem, 6.5vw, 5.5rem);
    color: var(--color-text-light);
    line-height: 1.0;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.hero h1 em {
    font-style: normal;
    color: var(--color-trust);
}

.hero-sub {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.25rem;
    max-width: 800px;
    line-height: 1.6;
    font-weight: var(--font-weight-medium);
}

.hero-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero-cred-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.hero-cred-item::before {
    content: '✓';
    color: var(--color-brand-green);
    font-weight: 700;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   HERO FORM STRIP — pinned to bottom of hero, overlaps next section
   ═══════════════════════════════════════════════════════════════ */

.hero-form-strip {
    position: relative;
    background: rgba(15, 38, 64, 0.97);
    border-bottom: 2px solid rgba(45, 123, 177, 0.3);
    padding: 1.25rem 0;
}

.hero-form-strip .container {
    padding: 0.5rem 2rem;
}

.hero-inline-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: nowrap;
}

.hero-inline-form input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-btn);
    color: #fff;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-family: var(--font-body);
    transition: border var(--transition-fast);
}
.hero-inline-form input::placeholder { color: rgba(255,255,255,0.45); }
.hero-inline-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255,255,255,0.12);
}

.hero-inline-form .btn-accent {
    background: var(--color-accent);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.hero-inline-form .btn-accent:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* Compensate for form strip overlap in next section */
.hero + * { padding-top: calc(4rem + 36px); }



.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    box-shadow: var(--shadow-btn);
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
}
.btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-light);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.85rem 2rem;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}
.btn-ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-dark {
    background: var(--color-brand);
    color: var(--color-text-light);
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    transition: background var(--transition-fast);
    text-decoration: none;
}
.btn-dark:hover { background: #0f2a50; }

/* ═══════════════════════════════════════════════════════════════
   PROOF BAR
   ═══════════════════════════════════════════════════════════════ */

.proof-bar {
    background: var(--color-surface-alt);
    border-top: 3px solid var(--color-brand-light);
    padding: 1.1rem 0;
    position: relative;
    z-index: 2;
}

.proof-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    padding: 0.35rem 1.5rem;
}

.proof-item:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

.proof-item svg {
    color: var(--color-brand-green);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BASE — light + dark variants
   ═══════════════════════════════════════════════════════════════ */

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

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

.section-dark {
    background: var(--color-surface-alt);
    padding: var(--section-pad) 0;
    color: var(--color-text-light);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-heading-dark);
}

.section-dark p,
.section-dark li {
    color: rgba(255,255,255,0.8);
}

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

.section-accent {
    background: var(--color-accent);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    color: var(--color-accent-text);
}

.section-accent h2,
.section-accent p {
    color: var(--color-accent-text);
}

/* Section heading pattern */
.section-header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-header.centered {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.section-dark .section-eyebrow { color: var(--color-accent); }

.section-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 3rem);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

.section-sub {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 560px;
    line-height: 1.65;
    text-wrap: balance; /* prevents orphan words on last line */
}

.section-dark .section-sub { color: var(--color-text-muted-dark); }

/* ═══════════════════════════════════════════════════════════════
   SERVICE CARDS
   ═══════════════════════════════════════════════════════════════ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5px;
    background: var(--color-border);
}

.service-card {
    background: var(--color-surface-alt);
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
    transition: background var(--transition-base);
}

.service-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition-base);
    transform-origin: left;
}

.service-card:hover { background: #1f2832; }
.service-card:hover::before { transform: scaleX(1); }

.service-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1.25rem;
    color: var(--color-accent);
}

.service-card h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
}

.service-card p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   WHY US — DIFFERENTIATORS
   ═══════════════════════════════════════════════════════════════ */

.differentiators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.diff-item {
    padding: 2rem;
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-card);
}

.diff-number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3.5rem;
    color: rgba(15, 38, 64, 0.08);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.diff-item h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-heading-light);
    margin-bottom: 0.75rem;
}

.diff-item p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════════════════════════ */

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    counter-reset: step-counter;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: calc(12.5% + 1.5rem);
    right: calc(12.5% + 1.5rem);
    height: 2px;
    background: var(--color-border-light);
}

.process-step {
    padding: 0 1.5rem;
    text-align: center;
    counter-increment: step-counter;
    position: relative;
}

.process-step-num {
    width: 4rem;
    height: 4rem;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 1;
}

.process-step h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-heading-light);
    margin-bottom: 0.6rem;
}

.process-step p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE AREA
   ═══════════════════════════════════════════════════════════════ */

.service-area-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
}

.service-area-map {
    border: 2px solid var(--color-border);
    overflow: hidden;
    background: var(--color-surface-alt);
}

.city-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.city-list li {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.city-list li::before {
    content: '→';
    color: var(--color-accent);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */

.faq-section {
    max-width: 860px;
    margin: 0 auto;
}

.faq-section > h2 { margin-bottom: 2.5rem; }

.faq-item {
    border-bottom: 1px solid var(--color-border-light);
}

.faq-item h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-heading-light);
    padding: 1.35rem 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item h3::after {
    content: '+';
    color: var(--color-accent);
    font-size: 1.5rem;
    font-weight: 400;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.faq-item.open h3::after { transform: rotate(45deg); }

.faq-answer {
    display: none;
    padding: 0 0 1.35rem;
    color: var(--color-text-muted);
    font-size: 0.975rem;
    line-height: 1.7;
}

.faq-item.open .faq-answer { display: block; }

/* ═══════════════════════════════════════════════════════════════
   CTA STRIP
   ═══════════════════════════════════════════════════════════════ */

.cta-strip {
    background: var(--color-brand);
    padding: clamp(3rem, 6vw, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 50%, rgba(83, 164, 62, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.cta-strip .section-eyebrow {
    color: var(--color-brand-green);
    display: block;
    margin-bottom: 0.75rem;
    position: relative;
}

.cta-strip h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
    position: relative;
}

.cta-strip p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    margin-bottom: 2rem;
    position: relative;
}

.cta-strip .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

footer[role="contentinfo"] {
    background: var(--color-utility-bar);
    color: rgba(255,255,255,0.7);
    padding: 3rem 0 1.5rem;
}

/* ── Green top border (Option C) ── */
footer[role="contentinfo"] {
    background: var(--color-utility-bar);
    color: rgba(255,255,255,0.7);
    padding: 0 0 1.5rem;
    border-top: 4px solid var(--color-accent);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding: 3rem 0 2.5rem;
}

/* ── Col 1: Brand (text name) ── */
.footer-col--brand {}

.footer-business {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.footer-tagline {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
    line-height: 1.55;
}

.footer-phone {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
    transition: color var(--transition-fast);
}
.footer-phone:hover { color: var(--color-accent-hover); }

.footer-area {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin: 0 0 1.1rem;
}

.footer-badges {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.footer-badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
}
.footer-badge svg {
    color: var(--color-accent);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ── Cols 2–4: Link columns ── */
.footer-col-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-accent);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(83,164,62,0.25);
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.footer-links-list li {
    display: block;
    margin-bottom: 0.4rem;
}
.footer-links-list a {
    display: block;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.84rem;
    line-height: 1.4;
    transition: color var(--transition-fast);
    padding: 0.1rem 0;
}
.footer-links-list a:hover {
    color: var(--color-accent);
}

.footer-cta-btn {
    display: inline-block;
    background: var(--color-accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background var(--transition-fast);
}
.footer-cta-btn:hover { background: var(--color-accent-hover); }

/* ── Bottom bar ── */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
}
.footer-bottom p { margin: 0 0 0.15rem; }
.footer-bottom a {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.65); }
.footer-bottom-left { text-align: left; }
.footer-bottom-center { text-align: center; }
.footer-bottom-right { text-align: right; }
.builder-attribution a { color: rgba(255,255,255,0.22); }
.builder-attribution a:hover { color: rgba(255,255,255,0.5); }
/* .footer-reviewed and .footer-visit-count defined in clone.css — R70 */


/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */

.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-intro {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.contact-form-wrap {
    background: var(--color-surface);
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
}

.contact-form-wrap .btn-primary {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

/* Override kit form styles for BolAero Exterior Services */
#allbusinessai-contact-form .form-group input,
#allbusinessai-contact-form .form-group textarea,
#allbusinessai-contact-form .form-group select {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 0.8rem 1rem;
    font-size: 0.975rem;
    background: #1a2535;
    color: #ffffff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#allbusinessai-contact-form .form-group input::placeholder,
#allbusinessai-contact-form .form-group textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

#allbusinessai-contact-form .form-group select option {
    background: #1a2535;
    color: #ffffff;
}

#allbusinessai-contact-form .form-group input:focus,
#allbusinessai-contact-form .form-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(83,164,62,0.18);
    outline: none;
}

#allbusinessai-contact-form .form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

#allbusinessai-contact-form button[type="submit"] {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    width: 100%;
    cursor: pointer;
    transition: background var(--transition-fast);
}

#allbusinessai-contact-form button[type="submit"]:hover {
    background: var(--color-accent-hover);
}

/* Select focus state */
#allbusinessai-contact-form .form-group select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(83,164,62,0.18);
    outline: none;
}

/* Checkbox group (fieldset) */
#allbusinessai-contact-form .form-group-checkboxes {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
#allbusinessai-contact-form .form-group-checkboxes legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
    padding: 0;
}
#allbusinessai-contact-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.925rem;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 0.35rem 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
#allbusinessai-contact-form .checkbox-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-accent);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Single checkbox (COI request) */
#allbusinessai-contact-form .form-group-checkbox {
    margin-bottom: 1.25rem;
}

/* Trust line below form */
.form-trust-line {
    text-align: center;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

.contact-sidebar h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-heading-light);
    margin-bottom: 1.25rem;
}

.contact-info-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}

.contact-info-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 20px;
    height: 20px;
}

.contact-info-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.contact-info-item a {
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1rem;
}
.contact-info-item a:hover { color: var(--color-accent); }

.contact-trust-badges {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-light);
}

.contact-trust-badges h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.trust-badge-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.trust-badge-item svg { color: var(--color-accent); width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════ */

.about-layout {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 4rem;
    align-items: start;
}

.about-image-wrap {
    position: relative;
}

.about-image-wrap img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.about-image-accent {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--color-accent);
    padding: 1.25rem 1.75rem;
    z-index: 1;
}

.about-image-accent p {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin: 0;
    letter-spacing: 0.04em;
}

.about-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.about-content p {
    color: var(--color-text-muted);
    font-size: 0.975rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.credential-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.credential-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border-left: 3px solid var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   STICKY MOBILE CTA (R86)
   ═══════════════════════════════════════════════════════════════ */

.sticky-phone-cta {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-sticky);
    background: var(--color-accent);
    color: var(--color-accent-text);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(83, 164, 62, 0.45);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sticky-phone-cta:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(83, 164, 62, 0.6);
}

.sticky-phone-cta svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
    .sticky-phone-cta { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO (interior pages — smaller than home hero)
   ═══════════════════════════════════════════════════════════════ */

.page-hero {
    background: var(--color-brand);
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245,146,10,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.page-hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.825rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.page-hero .breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.page-hero .breadcrumb a:hover { color: var(--color-accent); }
.page-hero .breadcrumb span { color: var(--color-accent); }



/* ── Desktop nav — horizontal inline links ──────────────── */
nav[role="navigation"] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

nav[role="navigation"] ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav[role="navigation"] ul li a {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

nav[role="navigation"] ul li a:hover,
nav[role="navigation"] ul li.active > a {
    color: var(--color-accent);
}

nav[role="navigation"] ul li a.nav-cta {
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-btn);
    padding: 0 1.1rem;
    height: 38px;
    margin-left: 0.5rem;
    font-size: 0.78rem;
}
nav[role="navigation"] ul li a.nav-cta:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.nav-toggle {
    display: none;              /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1B3A5C !important;  /* navy — hardcoded, always visible on white header */
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to X when open */
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav dropdown */
.has-dropdown { position: relative; }
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    min-width: 260px;
    padding: 0.5rem 0;
    z-index: 999;
    list-style: none;
    margin: 0;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown li a {
    display: block !important;
    padding: 0.6rem 1.25rem !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    white-space: nowrap;
}
.nav-dropdown li a:hover { background: var(--color-bg); color: var(--color-brand-light); }

/* ═══════════════════════════════════════════════════════════════
   SERVICE HUB PAGE
   ═══════════════════════════════════════════════════════════════ */

.services-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.service-hub-card {
    display: block;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.service-hub-card h3 {
    color: var(--color-brand);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}
.service-hub-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.card-link-text {
    color: var(--color-brand-light);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

.page-hero-sub {
    color: var(--color-text-muted-dark);
    font-size: 1rem;
    margin-top: 0.5rem;
}

.content-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

.lead-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text);
}

.section-body-text {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 75ch;
}

.section-dark .section-body-text { color: rgba(255,255,255,0.88); }

.highlight-box {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid var(--color-brand-light);
}
.highlight-box h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-inline {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT MODULES (Disruption Plan + Environmental)
   ═══════════════════════════════════════════════════════════════ */

.content-module { margin-top: 1rem; }
.content-module h3 { display: none; } /* Section heading handles the H2 */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.module-item {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
}
.module-item h4 {
    font-family: var(--font-heading);
    color: var(--color-brand);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.module-item p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: var(--color-text-muted-dark);
}
.breadcrumb a {
    color: var(--color-trust);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-hidden] { margin: 0 0.4rem; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
    .utility-bar .container { justify-content: space-between; }
    .util-label { display: none; }
    .util-center { display: none; }
    .hero { min-height: 0; padding-top: 2rem; padding-bottom: 2.5rem; }
    .hero h1 { font-size: clamp(2.2rem, 9vw, 3.5rem); }
    .hero-credentials { flex-direction: column; gap: 0.6rem; }
    .proof-bar .container { flex-direction: column; gap: 0; }
    .proof-item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--color-border); }
    .services-grid { grid-template-columns: 1fr; gap: 1px; }
    .differentiators-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .city-list { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .credential-list { grid-template-columns: 1fr; }
    .footer-bottom { grid-template-columns: 1fr; text-align: center; }
    .footer-bottom-left, .footer-bottom-center, .footer-bottom-right { text-align: center; }
    .contact-form-wrap { padding: 1.5rem; }

    /* Mobile header */
    .site-header { min-height: 70px; }
    .site-header .container { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: 70px; width: 100% !important; max-width: 100% !important; padding-left: 1rem; padding-right: 1rem; }
    .site-logo img { height: 68px; }
    .logo-sub-text { font-size: 0.65rem; padding-top: 0.2rem; }
    .nav-toggle { display: flex; }

    /* Mobile nav: relative positioning so dropdown sits below header */
    nav[role="navigation"] { position: relative; }
    nav[role="navigation"] ul { display: none; }  /* hide desktop nav on mobile */
    .site-header.nav-open nav[role="navigation"] ul {
        display: block !important;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        border-top: 2px solid var(--color-accent);
        box-shadow: 0 6px 20px rgba(0,0,0,0.18);
        padding: 0.5rem 0 1rem;
        z-index: 9999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .site-header.nav-open nav[role="navigation"] ul li { display: block; width: 100%; }
    .site-header.nav-open nav[role="navigation"] ul li a { display: block; height: auto; line-height: 1.4; padding: 0.9rem 1.5rem; color: var(--color-brand); font-size: 1rem; font-weight: 600; border-bottom: 1px solid #f3f4f6; white-space: normal; }
    .site-header.nav-open nav[role="navigation"] ul li:last-child a { border-bottom: none; }
    .site-header.nav-open nav[role="navigation"] ul li a.nav-cta { background: var(--color-accent); color: #fff; margin: 0.5rem 1rem; border-radius: 4px; text-align: center; border-bottom: none; }

    /* Mobile hero form strip — stack vertically */
    .hero-inline-form { flex-direction: column; gap: 0.6rem; }
    .hero-inline-form input { width: 100%; }
    .hero-inline-form .btn-accent { width: 100%; text-align: center; }

    /* Service detail responsive */
    .content-split { grid-template-columns: 1fr; gap: 2rem; }
    .services-hub-grid { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: 1fr; }
    .mega-menu-panel { position: static; box-shadow: none; border: none; padding: 0.5rem 0 0 1rem; }
    .mega-menu-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TRUST & CONVERSION PAGE COMPONENTS — Session 3
   ═══════════════════════════════════════════════════════════════ */

/* Feature Grid (2-col and 3-col variants) */
.feature-grid {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}
.feature-grid--2col { grid-template-columns: repeat(2, 1fr); }
.feature-grid--3col { grid-template-columns: repeat(3, 1fr); }

.feature-card {
    background: rgba(255,255,255,0.06);
    padding: 2rem;
    border-left: 3px solid var(--color-brand-green);
}
.section-light .feature-card {
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}
.section-dark .feature-card h3 { color: var(--color-surface); }
.section-light .feature-card h3 { color: var(--color-brand); }
.feature-card p {
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Trust Card Grid (compliance, proof-of-clean, emergency sections) */
.trust-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.trust-card {
    background: rgba(255,255,255,0.06);
    padding: 2rem;
    border-top: 3px solid var(--color-brand-green);
}
.trust-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-surface);
    margin-bottom: 0.75rem;
}
.trust-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-muted-dark);
}
.trust-card-detail {
    margin-top: 0.75rem;
    font-weight: 500;
    color: var(--color-trust) !important;
    font-size: 0.9rem !important;
}

/* Method Stack Grid (how-it-works page) */
.method-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.method-card {
    background: var(--color-surface);
    padding: 2rem;
    border-left: 3px solid var(--color-brand-green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.method-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-brand);
    margin-bottom: 0.75rem;
}
.method-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text);
}
.method-surfaces {
    margin-top: 0.75rem;
    font-size: 0.85rem !important;
    color: var(--color-text-muted) !important;
}

/* Timeline Steps (vendor onboarding) */
.timeline-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.timeline-step {
    position: relative;
    padding-left: 0;
    text-align: center;
}
.timeline-day {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin-bottom: 0.5rem;
}
.timeline-step p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* Response Tiers (emergency page) */
.response-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.response-tier {
    background: var(--color-surface);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.response-tier-time {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin-bottom: 0.5rem;
}
.response-tier h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-brand);
    margin-bottom: 0.75rem;
}
.response-tier p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text);
}

/* Benefit List (maintenance portfolio) */
.benefit-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}
.benefit-list li {
    position: relative;
    padding-left: 1.8rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}
.benefit-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-brand-green);
    font-weight: 700;
}

/* Case Study Cards */
.case-study {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.case-study:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.case-study-header {
    margin-bottom: 2rem;
}
.case-study-type {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-green);
    margin-bottom: 0.5rem;
}
.case-study-header h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-surface);
    margin-bottom: 0.5rem;
}
.case-study-spec {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-muted-dark);
}
.case-study-body {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}
.case-study-section h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-trust);
    margin-bottom: 0.5rem;
}
.case-study-section p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-muted-dark);
}
.case-study-results {
    list-style: none;
    padding: 0;
}
.case-study-results li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-muted-dark);
}
.case-study-results li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-brand-green);
    font-weight: 700;
}
.case-study-quote {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-brand-green);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}
.case-study-quote p {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-surface);
    margin-bottom: 0.5rem;
}
.case-study-quote cite {
    font-size: 0.9rem;
    font-style: normal;
    color: var(--color-trust);
}
.case-study-image {
    margin-top: 1.5rem;
}
.case-study-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Process Steps variant for how-it-works (numbered circles) */
.page-how-it-works .process-steps {
    grid-template-columns: 1fr;
    gap: 0;
}
.page-how-it-works .process-steps::before { display: none; }
.process-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--color-brand-green);
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
}
.process-step-content {
    flex: 1;
}
.page-how-it-works .process-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.page-how-it-works .process-step:last-child { border-bottom: none; }


/* ═══════════════════════════════════════════════════════════════
   TRUST & CONVERSION RESPONSIVE — Session 3
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .feature-grid--2col { grid-template-columns: 1fr; }
    .feature-grid--3col { grid-template-columns: repeat(2, 1fr); }
    .response-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .feature-grid--3col { grid-template-columns: 1fr; }
    .trust-card-grid { grid-template-columns: 1fr; }
    .method-stack-grid { grid-template-columns: 1fr; }
    .timeline-steps { grid-template-columns: 1fr; }
    .benefit-list { grid-template-columns: 1fr; }
    .case-study-header h3 { font-size: 1.3rem; }
    .case-study-quote { padding: 1rem 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════
   CITY PAGE COMPONENTS — Session 4
   ═══════════════════════════════════════════════════════════════ */

/* City Property Concentrations */
.city-concentrations {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
.concentration-item {
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-brand-green);
    background: rgba(255,255,255,0.04);
}
.concentration-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted-dark);
    margin: 0;
}

/* City Service Links */
.city-service-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.city-service-link {
    display: block;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.06);
    color: var(--color-surface);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-left: 3px solid var(--color-brand-green);
    transition: background 0.2s ease, transform 0.2s ease;
}
.city-service-link:hover {
    background: rgba(255,255,255,0.1);
    transform: translateX(4px);
}

/* City Hub Grid */
.city-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.city-hub-card {
    display: block;
    padding: 2rem;
    background: rgba(255,255,255,0.06);
    text-decoration: none;
    border-top: 3px solid var(--color-brand-green);
    transition: background 0.2s ease;
}
.city-hub-card:hover {
    background: rgba(255,255,255,0.1);
}
.city-hub-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-surface);
    margin-bottom: 0.75rem;
}
.city-hub-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted-dark);
    margin-bottom: 1rem;
}
.city-hub-link-text {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand-green);
}

/* City Responsive */
@media (max-width: 768px) {
    .city-service-links { grid-template-columns: 1fr; }
    .city-hub-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE REBUILD COMPONENTS — Session 5
   ═══════════════════════════════════════════════════════════════ */

/* Commercial Differentiation Cards (Section 2) */
.diff-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.diff-card {
    padding: 1.75rem;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid var(--color-brand-green);
}
.diff-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-surface);
    margin-bottom: 0.5rem;
}
.diff-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted-dark);
}

/* Cost-Savings Grid (Section 3) */
.cost-savings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.cost-item {
    padding: 1.75rem;
    background: var(--color-surface);
    border-top: 3px solid var(--color-brand-green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cost-item h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: 0.5rem;
}
.cost-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
}
.cost-savings-note {
    margin-top: 2rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-brand-green);
    text-align: center;
}

/* Method Stack Visual (Section 4) */
.method-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.method-visual-item {
    padding: 1.5rem;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid var(--color-brand-green);
}
.method-visual-item h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-surface);
    margin-bottom: 0.25rem;
}
.method-visual-surface {
    font-size: 0.8rem;
    color: var(--color-trust);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.method-visual-item p:last-child {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted-dark);
}

/* Case Studies Preview (Section 5) */
.case-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.case-preview-card {
    padding: 2rem;
    background: var(--color-surface);
    border-top: 3px solid var(--color-brand-green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.case-preview-type {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-green);
    margin-bottom: 0.5rem;
}
.case-preview-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: 0.75rem;
}
.case-preview-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* How It Works Summary (Section 6) */
.hiw-summary-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.hiw-point {
    padding: 1.25rem;
    border-left: 3px solid var(--color-brand-green);
}
.hiw-point h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-surface);
    margin-bottom: 0.5rem;
}
.hiw-point p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted-dark);
}
.hiw-footnote {
    font-size: 0.72rem;
    color: var(--color-text-muted-dark);
    margin-top: 1rem;
    font-style: italic;
    opacity: 0.7;
}

/* Insurance & Compliance Badges (Section 7) */
.compliance-content {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.compliance-content .section-body-text {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.compliance-content .cta-inline {
    justify-content: center;
}
.compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: center;
}
.compliance-badge {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
    background: var(--color-surface);
    border: 2px solid var(--color-brand-green);
}

/* Homepage form in dark section */
.section-dark .contact-form-wrap {
    background: rgba(255,255,255,0.06);
}

/* Homepage Responsive — Session 5 */
@media (max-width: 768px) {
    .diff-cards-grid { grid-template-columns: 1fr; }
    .cost-savings-grid { grid-template-columns: 1fr; }
    .method-visual-grid { grid-template-columns: 1fr 1fr; }
    .case-preview-grid { grid-template-columns: 1fr; }
    .hiw-summary-points { grid-template-columns: 1fr; }
    .compliance-badges { justify-content: flex-start; }
}
@media (max-width: 480px) {
    .method-visual-grid { grid-template-columns: 1fr; }
}


/* Resources Hub — Session 5 */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.resource-card {
    padding: 2rem;
    background: rgba(255,255,255,0.06);
    border-top: 3px solid var(--color-brand-green);
}
.resource-card--upcoming { opacity: 0.7; }
.resource-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-surface);
    margin-bottom: 0.75rem;
}
.resource-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted-dark);
    margin-bottom: 1rem;
}
.resource-link {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand-green);
    text-decoration: none;
}
.resource-link:hover { text-decoration: underline; }
.resource-coming {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-trust);
}

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


/* ═══════════════════════════════════════════════════════════════
   ARTICLE COMPONENTS — Session 6
   ═══════════════════════════════════════════════════════════════ */

.article-container { max-width: 800px; margin: 0 auto; }
.article-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted-dark);
    margin-top: 0.5rem;
}

.article-data-points {
    margin-top: 1.5rem;
    display: grid;
    gap: 0.75rem;
}
.article-data-point {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-brand-green);
}
.section-dark .article-data-point { background: rgba(255,255,255,0.04); }
.section-white .article-data-point { background: var(--color-bg); }
.article-data-point p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.article-internal-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
.article-internal-link {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-brand-green);
    text-decoration: none;
}
.article-internal-link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   SCROLLING TICKER — Session 7 Update
   ═══════════════════════════════════════════════════════════════ */

.ticker-strip {
    background: var(--color-brand-green);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.6rem 0;
    position: relative;
}
/* #2 — thin off-white divider lines at left and right edges of ticker zone */
.ticker-strip::before,
.ticker-strip::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: rgba(255,255,255,0.45);
    z-index: 2;
    pointer-events: none;
}
.ticker-strip::before { left: 0; }
.ticker-strip::after  { right: 0; }
.ticker-track {
    display: inline-block;
    animation: ticker-scroll 40s linear infinite;
}
/* #3 — ticker font one size up: 0.8rem → 0.925rem */
.ticker-content {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.925rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
        overflow-x: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CREDENTIALS BADGE STRIP — Session 7 Update
   ═══════════════════════════════════════════════════════════════ */

.credentials-strip {
    background: var(--color-hero-bg);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 0;
}
.credentials-strip .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.cred-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cred-badge--image img {
    height: 60px;
    width: auto;
}
.cred-badge--text {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-surface);
}
.cred-badge--text svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-brand-green);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .credentials-strip .container {
        gap: 1rem;
        justify-content: flex-start;
    }
    .cred-badge--image img { height: 45px; }
    .cred-badge--text { font-size: 0.7rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MEGA-MENU — Full-width dropdown panel
   ═══════════════════════════════════════════════════════════════ */

/* Remove old dropdown styles */
.nav-dropdown { display: none !important; }
.has-dropdown:hover .nav-dropdown { display: none !important; }

/* Mega-menu triggers */
.has-mega > a { position: relative; }
.has-mega > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Mega panel — hidden by default */
.mega-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-top: 3px solid var(--color-brand-green);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    padding: 2rem 0;
}
.mega-menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega grid — Services left, Service Areas right */
.mega-menu-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1fr;
    gap: 2.5rem;
}

/* Group headings */
.mega-menu-group h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-brand-green);
}
.mega-menu-group h4 a {
    color: inherit;
    text-decoration: none;
}
.mega-menu-group h4 a:hover { color: var(--color-brand-green); }

/* Service links — single column */
.mega-menu-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mega-menu-group ul li a {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.mega-menu-group ul li a:hover {
    color: var(--color-brand-green);
}
.mega-menu-group ul li.active a {
    color: var(--color-brand-green);
    font-weight: 600;
}

/* Property types — match services column exactly */
.mega-menu-group--types ul,
.mega-types-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mega-menu-group--types ul li,
.mega-types-list li {
    font-size: 0.9rem;
    padding: 0;
}
.mega-menu-group--types ul li a,
.mega-types-list li a {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.mega-menu-group--types ul li a:hover,
.mega-types-list li a:hover { color: var(--color-brand-green); }
.mega-menu-group--types ul li.active a,
.mega-types-list li.active a { color: var(--color-brand-green); font-weight: 600; }

/* Cities group — 2-column grid inside */
.mega-menu-group--cities ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 2rem;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLLING TICKER — CSS-only horizontal marquee
   ═══════════════════════════════════════════════════════════════ */

.ticker-strip {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background: transparent;
    padding: 0;
}
.ticker-track {
    display: inline-block;
    animation: ticker-scroll 50s linear infinite;
    animation-play-state: paused;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85);
}
.ticker-track.is-running {
    animation-play-state: running;
}
.ticker-dot {
    color: var(--color-brand-green);
    margin: 0 0.75rem;
    font-size: 0.8rem;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
        white-space: normal;
        text-align: center;
        padding: 0 1rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CREDENTIALS STRIP — Badge row below ticker
   ═══════════════════════════════════════════════════════════════ */

.credentials-strip {
    background: var(--color-hero-bg);
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 2;
}
.credentials-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.credential-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.credential-badge img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
}
.credential-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
}


/* ═══════════════════════════════════════════════════════════════
   HERO FORM STRIP — overflow fix
   ═══════════════════════════════════════════════════════════════ */

.hero-form-strip .container {
    overflow: visible;
}
.hero-inline-form {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    max-width: 100%;
}
.hero-inline-form input,
.hero-inline-form select,
.hero-inline-form textarea {
    min-width: 0;
    flex: 1 1 auto;
}


/* ═══════════════════════════════════════════════════════════════
   MEGA-MENU + TICKER + CREDENTIALS RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .mega-menu-grid { grid-template-columns: 1fr; gap: 2rem; }
    .credentials-row { gap: 1.5rem; }
}

@media (max-width: 768px) {
    /* Mega-menu becomes accordion on mobile */
    .mega-menu-panel {
        position: static;
        box-shadow: none;
        border: none;
        border-top: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
    }
    .mega-menu-panel:not(.is-mobile-open) {
        display: none;
    }
    .mega-menu-grid { grid-template-columns: 1fr; gap: 1rem; padding: 0.5rem 1.5rem 1rem; }
    .mega-menu-group h4 { font-size: 0.8rem; margin-bottom: 0.5rem; color: var(--color-brand); }
    .mega-menu-group ul li a { padding: 0.35rem 0; font-size: 0.85rem; }
    .mega-menu-group--cities ul { grid-template-columns: 1fr 1fr; }

    /* Credentials strip scroll */
    .credentials-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 2rem;
        padding: 0 1rem;
    }
    .credential-badge { flex-shrink: 0; }

    /* Ticker smaller on mobile */
    .ticker-track { font-size: 0.75rem; letter-spacing: 0.05em; }
    .ticker-dot { margin: 0 0.75rem; }
}

/* ── How It Works — drone system split layout ─────────────── */
.drone-system-split {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.drone-system-img {
    flex: 0 0 380px;
    max-width: 380px;
}

.drone-system-img img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

.drone-system-content {
    flex: 1;
}

@media (max-width: 900px) {
    .drone-system-split { flex-direction: column; }
    .drone-system-img   { flex: none; max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — replaces inline styles (v1.22.73)
   All values match exact inline styles removed from templates
   and template-functions.php.
   ═══════════════════════════════════════════════════════════════ */

/* Spacing */
.mt-1    { margin-top: 1rem; }
.mt-1-5  { margin-top: 1.5rem; }
.mt-2    { margin-top: 2rem; }
.mt-2-5  { margin-top: 2.5rem; }
.mb-1-5  { margin-bottom: 1.5rem; }
.ml-0-75 { margin-left: 0.75rem; }

/* Page containers — privacy/terms full-padding wrapper */
.page-body-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* 404 page */
.error-404-wrap {
    padding: 5rem 1.5rem;
    text-align: center;
}
.error-404-sub {
    font-size: 1.15rem;
    margin: 1.5rem 0;
}

/* City list / service-area centered prose block */
.city-prose-block {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.city-prose-block p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}
.city-prose-block p.mb-2-5 { margin-bottom: 2.5rem; }

/* City CTA button row */
.city-cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Service area cities heading */
.cities-heading {
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

/* Service page credential items */
.hero-cred-item--muted { color: var(--color-text-muted); }

/* Contact page dark-section text */
.contact-dark-title  { color: #fff; }
.contact-dark-sub    { color: rgba(255,255,255,0.75); }
.contact-dark-label  { color: rgba(255,255,255,0.6); }
.contact-phone-link  { color: #fff; font-size: 1.1rem; }
.contact-icon-accent { color: var(--color-accent); }

/* Map placeholder */
.map-placeholder {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-placeholder-text {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

/* City footer note */
.city-footer-note {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Honeypot fields — screen-reader only, off-screen */
.ab-honeypot {
    position: absolute;
    left: -9999px;
}


/* Ticker strip quote label */
.ticker-quote-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════
   HP-2: STATS BAR — v1.22.77
   ════════════════════════════════════════════════════════════ */
.hp-stats-bar { background: #0D1E36; padding: 0; margin-top: 0; }
.hp-stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
}
.hp-stat-card {
    background: #0D1E36;
    padding: 1.4rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.hp-stat-num {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--clr-accent, #378ADD);
    line-height: 1;
}
.hp-stat-label {
    font-size: 0.94rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
}
@media (max-width: 767px) {
    .hp-stats-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   HP-3: OLD VS NEW COMPARISON PANEL — v1.22.77
   ════════════════════════════════════════════════════════════ */
.hp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1.5rem;
}
.hp-compare-col { padding: 2.5rem 2rem; }
.hp-compare-old { background: #1A0A0A; }
.hp-compare-new {
    background: #071529;
    border-left: 3px solid var(--clr-accent, #378ADD);
}
.hp-compare-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.hp-compare-old .hp-compare-label { color: #E57373; }
.hp-compare-new .hp-compare-label { color: #85B7EB; }
.hp-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp-compare-list li {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.hp-compare-icon { flex-shrink: 0; margin-top: 1px; font-size: 1.1rem; line-height: 1; }
.hp-compare-x     { color: #E57373; }
.hp-compare-check { color: #4CAF8A; }
@media (max-width: 767px) {
    .hp-compare { grid-template-columns: 1fr; }
    .hp-compare-new { border-left: none; border-top: 3px solid var(--clr-accent, #378ADD); }
}

/* ═══════════════════════════════════════════════════════════════
   CITY LINK CARDS — OPT-12 cross-page navigation
   Added v1.22.94 — service detail page city service area section
   ═══════════════════════════════════════════════════════════════ */

.city-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.city-link-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.city-link-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-brand-green);
}

.city-link-card__name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.city-link-card__desc {
    font-size: 0.875rem;
    color: var(--color-trust);
    line-height: 1.45;
}

.city-link-card__cta {
    font-size: 0.8rem;
    color: var(--color-brand-green);
    font-weight: 600;
    margin-top: 0.25rem;
}

@media (max-width: 1024px) {
    .city-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOUNDERS SECTION — template-about.php (v1.22.97)
   ═══════════════════════════════════════════════════════════════ */

.founders-section .section-header {
    margin-bottom: 2rem;
}

.founders-intro {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--color-text-muted, rgba(255,255,255,0.82));
    max-width: 820px;
    margin-bottom: 3rem;
}

.founders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.founder-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 2rem;
}

.founder-card__header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-brand-green, #6db33f);
}

.founder-card__header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem 0;
}

.founder-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-trust, #5BA4D9);
}

.founder-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}

.founder-credentials {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.founder-credentials li {
    font-size: 0.85rem;
    color: var(--color-brand-green, #6db33f);
    padding-left: 1.25rem;
    position: relative;
}

.founder-credentials li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-brand-green, #6db33f);
    font-weight: 700;
}

.founders-values {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-trust, #5BA4D9);
    padding: 2rem 2.5rem;
    border-radius: 0 6px 6px 0;
}

.founders-values h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem 0;
}

.founders-values p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}

.founders-values p:last-child { margin-bottom: 0; }

.founders-values strong {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 768px) {
    .founders-grid {
        grid-template-columns: 1fr;
    }
    .founders-values {
        padding: 1.5rem;
    }
}

/* ── Two-column mega-menu — Services dropdown (S19) ──────────── */
.mega-menu-group--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
}
.mega-col h4 { margin-bottom: 0.75rem; }
.mega-col--types li {
    color: var(--color-text-muted-dark);
    cursor: default;
    pointer-events: none;
}
.mega-col--types li::before {
    content: '—';
    margin-right: 0.5rem;
    color: var(--color-accent);
    font-size: 0.8em;
}

/* ── Property type simple list — Built for Managers (S19) ─────── */
.property-type-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem 2rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.property-type-list li {
    color: var(--color-text-light);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.property-type-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* ── Services + Property Types homepage section (S19) ─────────── */
.spt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}
.spt-grid--three {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
}
.spt-col-heading {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: var(--font-weight-heavy);
    color: var(--color-heading-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
}
.services-list,
.property-types-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.services-list li,
.property-types-list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.services-list li a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.services-list li a:hover { color: var(--color-accent); }
.services-list li::before,
.property-types-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    flex-shrink: 0;
}
/* Specialty Drone Applications — links styled same as property types */
.specialty-list li a {
    color: var(--color-brand-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.specialty-list li a:hover { color: var(--color-accent); }
@media (max-width: 1024px) {
    .spt-grid--three { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
    .spt-grid,
    .spt-grid--three { grid-template-columns: 1fr; gap: 2rem; }
    .mega-menu-group--two-col { grid-template-columns: 1fr; }
    .property-type-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PROPERTY TYPE PAGES (S19)
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.page-hero--dark {
    background: var(--color-hero-bg);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.page-hero--dark h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
    margin: 0.75rem 0 1rem;
    max-width: 780px;
}
.page-hero--dark .hero-sub {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: rgba(255,255,255,0.8);
    max-width: 680px;
    line-height: 1.65;
    margin-bottom: 2rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Breadcrumb */
.breadcrumb ol { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; gap: 0.4rem; font-size: 0.8rem; }
.breadcrumb li { color: rgba(255,255,255,0.45); }
.breadcrumb li::after { content: '›'; margin-left: 0.4rem; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li[aria-current] { color: rgba(255,255,255,0.75); }

/* Market context strip */
.pt-context { border-left: 4px solid var(--color-accent); }
.pt-context-inner { max-width: 900px; }
.pt-context-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    font-style: italic;
}

/* Problem / Solution */
.pt-ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.pt-ps-col h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin: 0.5rem 0 1rem;
}
.pt-ps-col p { color: rgba(255,255,255,0.8); line-height: 1.7; margin: 0; }
.pt-ps-col--solution {
    background: rgba(83,164,62,0.08);
    border: 1px solid rgba(83,164,62,0.2);
    padding: 2rem;
}
.pt-ps-col--solution h2 { color: var(--color-accent); }

/* Why drone list */
.pt-why h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-heading-light);
    margin-bottom: 1.5rem;
}
.pt-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 3rem;
}
.pt-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}
.pt-why-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.45rem;
}

/* Details grid */
.pt-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
}
.pt-detail-col h3 {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(83,164,62,0.25);
}
.pt-detail-col p { color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* FAQ */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--color-border-light);
    padding: 1.5rem 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-question {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading-light);
    margin: 0 0 0.6rem;
}
.faq-answer {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .pt-ps-grid { grid-template-columns: 1fr; }
    .pt-why-list { grid-template-columns: 1fr; }
    .pt-details-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .pt-details-grid { grid-template-columns: 1fr; }
    .hero-ctas { flex-direction: column; }
}

/* ── Mega menu property types — linked (S19) ── */
.mega-types-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-types-list li { font-size: 0.82rem; padding: 0.25rem 0; }
.mega-types-list li a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.mega-types-list li a:hover { color: var(--color-accent); }
.mega-types-list li.active a { color: var(--color-accent); font-weight: 600; }
.mega-menu-group--types h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-brand-green);
}

/* ─────────────────────────────────────────────────────────────
   Business Hours — contact sidebar + footer (v1.28.0)
   ───────────────────────────────────────────────────────────── */
.contact-hours-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-hours-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 0.92rem;
}
.contact-hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    color: var(--color-text-light);
}
.contact-hours-list li span:first-child {
    color: var(--color-text-muted-dark);
}
.footer-hours {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-hours-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted-dark);
    margin: 0 0 0.4rem;
}
.footer-hours-line {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0.15rem 0;
}

/* Outbound authority link on homepage compliance section (v1.28.2 S25) */
.compliance-authority-line {
    text-align: center;
    max-width: 780px;
    margin: 2rem auto 0;
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}
.compliance-authority-line a {
    color: var(--color-brand-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.compliance-authority-line a:hover {
    color: var(--color-brand-green-hover);
}

/* Footer social row (v1.28.5 S28) */
.footer-social {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.footer-social__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted-dark);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.18s ease;
}
.footer-social__link svg {
    flex-shrink: 0;
    color: var(--color-text-muted-dark);
    transition: color 0.18s ease;
}
.footer-social__link:hover,
.footer-social__link:hover svg {
    color: var(--color-brand-green);
}

/* Credentials block in dark Zone 2 sidebar (v1.29.7 S36 / plain text S42) */
.contact-zone-sidebar-dark .trust-badge-item {
    color: rgba(255,255,255,0.85);
    background: none;
}

/* Zone 2 — 3-column grid: form | credentials | sidebar (S44) */
#full-assessment .contact-zone-inner {
    grid-template-columns: 1fr 160px 220px;
}

/* Credentials column styling — plain white text */
.contact-zone-creds {
    padding-top: 0;
}
.contact-zone-creds .trust-badge-item {
    background: none;
    color: rgba(255,255,255,0.85);
    padding: 0.3rem 0;
    font-size: 0.82rem;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.contact-zone-creds .trust-badge-item svg {
    color: var(--color-accent);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Zone 2 long form — light fields on dark background (v1.30.1 S40) */
.section-dark #allbusinessai-contact-form .form-group input,
.section-dark #allbusinessai-contact-form .form-group textarea,
.section-dark #allbusinessai-contact-form .form-group select {
    background: rgba(255,255,255,0.92);
    color: #1a1a1a;
    border-color: rgba(255,255,255,0.3);
}
.section-dark #allbusinessai-contact-form .form-group input::placeholder,
.section-dark #allbusinessai-contact-form .form-group textarea::placeholder {
    color: rgba(0,0,0,0.35);
}
.section-dark #allbusinessai-contact-form .form-group select option {
    background: #ffffff;
    color: #1a1a1a;
}

/* ─────────────────────────────────────────────────────────────────────────
   FRESHNESS ENGINE — Resources Hub Sections (OPT-01 visible rendering)
   S50 — two sections: Current DFW Conditions + Property Manager Insight
   Uses existing design tokens. No new colors or fonts introduced.
   ─────────────────────────────────────────────────────────────────────────*/

/* Current DFW Conditions */
.freshness-conditions {
    padding: 3rem 0;
}
.freshness-conditions__body {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    border-left: 3px solid var(--color-brand-green);
    padding-left: 1.75rem;
    margin-top: 1.5rem;
}
.freshness-conditions__text {
    flex: 1;
    color: var(--color-text-light, #d0dce8);
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
}
.freshness-conditions__cta {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .freshness-conditions__body {
        flex-direction: column;
        gap: 1.5rem;
    }
    .freshness-conditions__cta {
        align-self: flex-start;
    }
}

/* Property Manager Insight */
.freshness-insight {
    padding: 2.5rem 0 3rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.freshness-insight__quote {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-brand-green);
    border-radius: 0;
}
.freshness-insight__quote p {
    color: var(--color-text-light, #d0dce8);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
    font-style: normal;
}

/* Section title small variant — used in Insight heading */
.section-title--sm {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   HOMEPAGE FAQ — Static (all answers visible, no accordion toggle)
   S50 fix — faq-section--static wrapper applied in template-home.php only.
   All other FAQ sections (service pages, city pages) keep accordion behavior.
   Color overrides required: .faq-item h3 defaults to --color-heading-light
   (#111111) which is invisible on section-dark background (#0F2640).
   ─────────────────────────────────────────────────────────────────────────*/
.faq-section--static .faq-answer {
    display: block !important;
    max-height: none !important;   /* creative.css sets max-height:0 — must override */
    overflow: visible !important;  /* creative.css sets overflow:hidden — must override */
    padding-bottom: 1rem !important;
    color: var(--color-text-muted-dark) !important;
    transition: none !important;   /* no slide animation needed in static mode */
}
.faq-section--static .faq-answer a {
    color: var(--color-brand-green);
    text-decoration: underline;
}
.faq-section--static .faq-answer a:hover {
    color: var(--color-brand-green-hover);
}
.faq-section--static .faq-item h3 {
    cursor: default;
    pointer-events: none;
    color: var(--color-text-light) !important; /* #FFFFFF — visible on dark bg */
    margin-bottom: 0.4rem;
    padding-bottom: 0;
}
.faq-section--static .faq-item h3::after {
    display: none; /* hide accordion + toggle */
}
.faq-section--static .faq-item {
    padding: 1.5rem 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL-DRIVEN ANIMATION SAFETY — prevent text-reveal / fade-up elements
   from staying invisible if scroll position doesn't trigger the range.
   Applies an opacity:1 transition fallback after page load (300ms) so
   any element that missed its animation range is always readable.
   ─────────────────────────────────────────────────────────────────────────*/
[data-creative="text-reveal"],
[data-creative="fade-up"] {
    transition: opacity 0.3s ease 0.3s;
}

/* ─────────────────────────────────────────────────────────────────────────
   ARTICLE COMPARISON TABLE — drone-vs-scaffolding (AEO/GEO Booster S50)
   Multi-format answer coverage item 3.3.
   ─────────────────────────────────────────────────────────────────────────*/
.article-comparison-table {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 0;
    border: 1px solid var(--color-border-light);
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
}
.comparison-table thead {
    background: var(--color-brand);
}
.comparison-table thead th {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    text-align: left;
}
.comparison-table tbody tr {
    border-bottom: 1px solid var(--color-border-light);
}
.comparison-table tbody tr:nth-child(even) {
    background: var(--color-bg);
}
.comparison-table tbody td {
    padding: 0.65rem 1rem;
    color: var(--color-text);
    vertical-align: top;
}
.comparison-table__factor {
    font-weight: 600;
    color: var(--color-brand) !important;
    width: 30%;
}
@media (max-width: 767px) {
    .comparison-table { font-size: 0.8rem; }
    .comparison-table tbody td,
    .comparison-table thead th { padding: 0.5rem 0.6rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCOPE SECTION — "What We Don't Do" (how-it-works page, AEO Booster S50)
   ─────────────────────────────────────────────────────────────────────────*/
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
.scope-item {
    padding: 1.5rem;
    border-left: 3px solid var(--color-border-light);
}
.scope-item h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
    margin: 0 0 0.6rem;
}
.scope-item p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 767px) {
    .scope-grid { grid-template-columns: 1fr; }
}

/* ── QUICK FACTS STRIP (Homepage) ─────────────────────────────────────── */
.quick-facts-section { padding: 3rem 0; }
.quick-facts-title { margin-bottom: 1.5rem; }
.quick-facts-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 2rem;
}
.quick-facts-item {
    display: grid;
    grid-template-columns: 1.6rem 8rem 1fr;
    align-items: baseline;
    gap: 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}
.qf-icon { font-size: 1rem; }
.qf-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
}
.qf-value { color: var(--color-text); }
@media (max-width: 767px) {
    .quick-facts-list { grid-template-columns: 1fr; }
    .quick-facts-item { grid-template-columns: 1.6rem 7rem 1fr; }
}
/* ── END QUICK FACTS ───────────────────────────────────────────────────── */

/* ── QUICK FORM 2-COL LAYOUT ──────────────────────────────────────────── */
.qf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 600px) { .qf-row-2 { grid-template-columns: 1fr; } }
.qf-contact-hint { font-size: 0.8rem; color: var(--color-text-muted); margin: -0.5rem 0 1rem; }
/* ── END QUICK FORM ────────────────────────────────────────────────────── */

/* Case Studies preview — real job photos (v1.34.0) */
.case-preview-card { padding: 0; overflow: hidden; }
.case-preview-image { margin: 0 0 1.25rem; }
.case-preview-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}
.case-preview-card .case-preview-type,
.case-preview-card h3,
.case-preview-card p { padding-left: 2rem; padding-right: 2rem; }
.case-preview-card p { padding-bottom: 2rem; }

/* City page — Featured Local Project block (v1.35.0) */
.city-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1.5rem;
}
.city-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}
@media (max-width: 1024px) {
    .city-featured-grid { grid-template-columns: 1fr; }
}

/* ── Video page FAQ — dark section contrast fix (S61 patch) ──────────────── */
/* .faq-question and .faq-answer default to light-bg color tokens.           */
/* Inside section-dark on the video page they need explicit light text.      */
.page-video-gallery .faq-question {
    color: #ffffff;
}
.page-video-gallery .faq-answer {
    color: rgba(255,255,255,0.82);
}
.page-video-gallery .faq-item {
    border-bottom-color: rgba(255,255,255,0.15);
}


/* ── Equipment Proof Grid (S63 — How It Works ground-system gallery) ───── */
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-top:var(--space-lg)}
.equip-card{position:relative;border:1px solid var(--color-border-light);background:var(--color-surface);overflow:hidden}
.equip-card img{display:block;width:100%;height:230px;object-fit:cover}
.equip-card figcaption{padding:var(--space-sm)}
.equip-card figcaption h3{margin:0 0 .35rem;font-size:1.05rem;text-transform:uppercase;letter-spacing:var(--letter-spacing-caps)}
.equip-card figcaption p{margin:0;color:var(--color-text-muted);font-size:.9rem;line-height:1.5}
.equip-card--feature{grid-column:span 2;display:grid;grid-template-columns:1.05fr .95fr}
.equip-card--feature img{height:100%;min-height:250px}
.equip-card--feature figcaption{display:flex;flex-direction:column;justify-content:center}
@media(max-width:860px){.equip-grid{grid-template-columns:1fr 1fr}.equip-card--feature{grid-column:1 / -1;grid-template-columns:1fr}}
@media(max-width:560px){.equip-grid{grid-template-columns:1fr}.equip-card--feature{grid-column:auto}}


/* ── Problem-first hero region line + low-friction CTA (S64) ──────────── */
.hero-region{margin:.45rem 0 0;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:var(--letter-spacing-caps);color:#fff;opacity:.92;font-size:clamp(1rem,2vw,1.35rem)}
.hero-cta-lead{max-width:48ch;margin:1.1rem 0 .65rem;color:rgba(255,255,255,.85);font-size:.98rem;line-height:1.5}
.hero-cta-or{margin:.7rem 0 0;font-size:.88rem;color:rgba(255,255,255,.7)}
.hero-cta-or a{color:var(--color-brand-green);font-weight:var(--font-weight-medium);border-bottom:1px solid rgba(83,164,62,.5)}
.hero-cta-or a:hover{border-bottom-color:var(--color-brand-green)}

/* ─── Review strip: Google rating line (S72 / v1.44.0) ─────────
   Real GBP rating display under the strip quote. Existing tokens
   only — inherits section-dark typography; link uses brand color. */
.review-strip__google {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    opacity: 0.92;
}
.review-strip__google a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.review-strip__google a:hover {
    opacity: 0.8;
}

/* ═══ CONV-02 — Contact conversion header (v1.47.0 layout revision) ═══ */
.contact-conv-header {
    padding: clamp(1.1rem, 2.2vw, 1.75rem) 0 clamp(1.4rem, 2.8vw, 2.1rem);
}
.contact-conv-header__eyebrow {
    display: block;
    text-align: center;
    margin-bottom: 0.85rem;
}
.contact-conv-header .hp-stats-bar {
    margin: 0 0 1.15rem;
}
.contact-conv-header .review-strip {
    margin: 0 0 1.25rem;
}
.contact-conv-header__title {
    text-align: center;
    margin: 0 0 0.5rem;
    /* Scale trimmed slightly vs the global .section-title clamp (3rem cap -> 2.75rem,
       4vw -> 3.1vw) purely so the line holds without overflowing at narrower desktop
       widths. At a typical 1440px viewport this renders ~45px vs ~48px. */
    font-size: clamp(1.6rem, 3.1vw, 2.75rem);
}
.contact-conv-header__sub {
    text-align: center;
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.98rem;
    line-height: 1.4;
}
.contact-conv-header__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.contact-conv-header__actions .btn {
    min-height: 0;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
}
@media (min-width: 1025px) {
    /* Headline and promise line hold to a single line on desktop — font size unchanged */
    .contact-conv-header__title,
    .contact-conv-header__sub { white-space: nowrap; }
}
@media (max-width: 640px) {
    .contact-conv-header__actions .btn { width: 100%; }
}