/**
 * creative.css — Creative Enhancement Layer
 * BolAero Exterior Services | Bold Premium
 * Creative Build — Kit-LeadGen v1.4
 * Built: 2026-03-05
 *
 * CREATIVE FILE — safe to modify during updates.
 * Layer 2 (CSS-only) and Layer 3 (guarded JS interactions).
 * Depends on: elevate.css, clone.css, style.css
 * Techniques: angle dividers, scroll reveals, card hover lifts, FAQ accordion.
 * All animations wrapped in prefers-reduced-motion guard (V46).
 */

/* ═══════════════════════════════════════════════════════════════
   ANGLE DIVIDERS (3 transitions — hero→services, services→why-us,
   process→service-area)
   ═══════════════════════════════════════════════════════════════ */

/* Angle cuts into section from top — decorative triangle overlay.
   Uses ::before pseudo-element so section content is NEVER clipped. */
section[data-creative="angle-top"] {
    position: relative;
    margin-top: 0;
    padding-top: var(--section-pad);
}

section[data-creative="angle-top"]::before {
    content: '';
    position: absolute;
    top: -3vw;
    left: 0;
    right: 0;
    height: 3.5vw;
    background: inherit;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: 1;
}

/* Angle cuts out of section at bottom — light section before dark */
section[data-creative="angle-bottom"] {
    position: relative;
    padding-bottom: var(--section-pad);
}

section[data-creative="angle-bottom"]::after {
    content: '';
    position: absolute;
    bottom: -3vw;
    left: 0;
    right: 0;
    height: 3.5vw;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}

/* Both — cuts in from top and out at bottom */
section[data-creative="angle-both"] {
    position: relative;
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

section[data-creative="angle-both"]::before {
    content: '';
    position: absolute;
    top: -3vw;
    left: 0;
    right: 0;
    height: 3.5vw;
    background: inherit;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: 1;
}

section[data-creative="angle-both"]::after {
    content: '';
    position: absolute;
    bottom: -3vw;
    left: 0;
    right: 0;
    height: 3.5vw;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEALS — section headings (2-3 instances max)
   CSS scroll-driven animation. @supports guard for older browsers.
   ═══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
    [data-creative="text-reveal"] {
        animation: pw-text-reveal linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 40%;
    }

    [data-creative="fade-up"] {
        animation: pw-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 35%;
    }
}

@keyframes pw-text-reveal {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pw-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATION
   ═══════════════════════════════════════════════════════════════ */

@keyframes pw-hero-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-eyebrow {
    animation: pw-hero-in 0.5s ease 0.1s both;
}

.hero h1 {
    animation: pw-hero-in 0.55s ease 0.2s both;
}

.hero-sub {
    animation: pw-hero-in 0.55s ease 0.35s both;
}

.hero-credentials {
    animation: pw-hero-in 0.55s ease 0.45s both;
}

.hero-actions {
    animation: pw-hero-in 0.55s ease 0.55s both;
}

/* ═══════════════════════════════════════════════════════════════
   CARD HOVER LIFT — service cards
   ═══════════════════════════════════════════════════════════════ */

.service-card {
    transition: background var(--transition-base), transform var(--transition-base),
                box-shadow var(--transition-base);
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-dark);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION — JS-driven, CSS handles open/closed state
   ═══════════════════════════════════════════════════════════════ */

.faq-answer {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
    display: block; /* Override kit display:none — use max-height instead */
    padding-bottom: 0;
}

.faq-item.open .faq-answer {
    max-height: 400px;
    padding-bottom: 1.35rem;
}

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

@supports (animation-timeline: view()) {
    .proof-bar {
        animation: pw-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NAV SCROLL SHADOW — adds depth when page scrolls
   ═══════════════════════════════════════════════════════════════ */

.site-header.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   ACCENT LINE — decorative element on section eyebrows
   ═══════════════════════════════════════════════════════════════ */

.section-eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--color-brand-light);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON ACTIVE SPRING
   ═══════════════════════════════════════════════════════════════ */

.btn-primary:active,
.btn-dark:active {
    transform: scale(0.97);
    transition: transform 0.08s var(--ease-spring);
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — override all creative animations (V46)
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    [data-creative="text-reveal"],
    [data-creative="fade-up"],
    .hero-eyebrow,
    .hero h1,
    .hero-sub,
    .hero-credentials,
    .hero-actions,
    .proof-bar {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .faq-answer {
        transition: none !important;
    }

    .service-card:hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THEME 6 — MINIMAL MODERN — Component overrides
   Tokens already applied via clone.css. These handle structural
   component-level adjustments that tokens alone cannot reach.
   ═══════════════════════════════════════════════════════════════ */

/* Typography — no uppercase, tight negative tracking */
h1, h2, h3, h4, h5, h6,
.hero h1,
.section-title {
    text-transform: none;
    font-weight: 600;
    letter-spacing: -0.03em;
}
.hero h1 {
    font-weight: 600;
    letter-spacing: -0.04em;
}

/* Nav — border only, no green underline accent */
.site-header {
    border-bottom: 1px solid #e2e2e2;
    border-top: none;
}

/* Header container — more breathing room around logo */
.site-header .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Nav links — nudge down so they visually center against
   the BolAero text (below the propeller graphic) */
nav[role="navigation"] {
    padding-top: 22px;
}

/* Mobile — remove the nudge, revert to tight padding */
@media (max-width: 768px) {
    .site-header .container {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    nav[role="navigation"] {
        padding-top: 0;
    }
}

/* Cards — flat, border-only */
.diff-card {
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    border-radius: 0;
    box-shadow: none;
}
.cost-item {
    border-left: 1px solid var(--color-accent);
    box-shadow: none;
    border-radius: 0;
}
.case-preview-card {
    box-shadow: none;
    border: 1px solid #e2e2e2;
    border-radius: 0;
}
.service-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #e2e2e2;
}
.service-card:hover {
    box-shadow: none;
    border-color: var(--color-accent);
}

/* Compliance badges — square */
.compliance-badge {
    border-radius: 0;
}

/* Buttons — square, minimal */
.btn, .btn-primary, .btn-ghost, .nav-cta {
    border-radius: 0;
}

/* Eyebrow — green accent bar only, no uppercase */
.section-eyebrow {
    text-transform: none;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   DRONE ANIMATION STRIP
   Flying drone crosses screen, revealing clean surface.
   Triggers via JS: add class "animating" to .drone-strip.
   ═══════════════════════════════════════════════════════════════ */

.drone-strip {
    position: relative;
    width: 100%;
    height: 100px;
    background: var(--color-hero-bg, #111);
    overflow: hidden;
}
.skyline-dirty,
.skyline-clean {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
}
.skyline-dirty { z-index: 1; }
.skyline-clean {
    z-index: 2;
    clip-path: inset(0 100% 0 0);
}
.drone-strip.animating .skyline-clean {
    animation: drone-reveal-clean 8s linear forwards;
}
@keyframes drone-reveal-clean {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0% 0 0); }
}
.drone-vehicle {
    position: absolute;
    top: 4px;
    left: -80px;
    z-index: 10;
    width: 64px;
    height: 32px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.drone-strip.animating .drone-vehicle {
    animation: drone-fly-across 8s linear forwards;
}
@keyframes drone-fly-across {
    0%   { left: -80px; }
    100% { left: calc(100% + 20px); }
}
.drone-vehicle .rotor {
    transform-origin: center;
    /* rotors only spin when drone is actively flying */
}
.drone-strip.animating .drone-vehicle .rotor {
    animation: drone-spin-rotor 0.15s linear infinite;
}
@keyframes drone-spin-rotor {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.wash-spray {
    position: absolute;
    top: 28px;
    left: -56px;
    z-index: 9;
    width: 40px;
    height: 72px;
    opacity: 0;
}
.drone-strip.animating .wash-spray {
    animation: drone-fly-across-spray 8s linear forwards,
               drone-spray-pulse 0.4s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes drone-fly-across-spray {
    0%   { left: -56px; }
    100% { left: calc(100% + 8px); }
}
@keyframes drone-spray-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.7; }
}

/* Reduced motion — drone (appended to existing guard above) */
@media (prefers-reduced-motion: reduce) {
    .drone-strip.animating .drone-vehicle,
    .drone-strip.animating .wash-spray,
    .drone-strip.animating .skyline-clean,
    .drone-vehicle .rotor {
        animation: none !important;
    }
    .skyline-clean  { clip-path: inset(0 0% 0 0) !important; }
    .drone-vehicle,
    .wash-spray     { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DRONE STRIP 2 — between Section 2 and Section 3
   Flies right-to-left. Spray trails behind (right side of drone).
   Same trigger pattern: add class "animating" to .drone-strip-2.
   ═══════════════════════════════════════════════════════════════ */

.drone-strip-2 {
    position: relative;
    width: 100%;
    height: 100px;
    background: var(--color-hero-bg, #111);
    overflow: hidden;
}
.drone-strip-2 .skyline-dirty,
.drone-strip-2 .skyline-clean {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
}
.drone-strip-2 .skyline-dirty { z-index: 1; }
.drone-strip-2 .skyline-clean {
    z-index: 2;
    clip-path: inset(0 0 0 100%);
}
.drone-strip-2.animating .skyline-clean {
    animation: drone2-reveal-clean 8s linear forwards;
}
@keyframes drone2-reveal-clean {
    0%   { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0%); }
}
/* Drone vehicle — starts off right, flies left */
.drone-strip-2 .drone-vehicle-2 {
    position: absolute;
    top: 4px;
    right: -80px;
    left: auto;
    z-index: 10;
    width: 64px;
    height: 32px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transform: scaleX(-1); /* flip to face left */
}
.drone-strip-2.animating .drone-vehicle-2 {
    animation: drone2-fly-across 8s linear forwards;
}
@keyframes drone2-fly-across {
    0%   { right: -80px; }
    100% { right: calc(100% + 20px); }
}
.drone-strip-2 .drone-vehicle-2 .rotor {
    transform-origin: center;
}
.drone-strip-2.animating .drone-vehicle-2 .rotor {
    animation: drone-spin-rotor 0.15s linear infinite;
}
/* Spray trails behind drone (right side when flying left) */
.drone-strip-2 .wash-spray-2 {
    position: absolute;
    top: 28px;
    right: -56px;
    left: auto;
    z-index: 9;
    width: 40px;
    height: 72px;
    opacity: 0;
    transform: scaleX(-1);
}
.drone-strip-2.animating .wash-spray-2 {
    animation: drone2-fly-across-spray 8s linear forwards,
               drone-spray-pulse 0.4s ease-in-out infinite;
    opacity: 0.6;
}
@keyframes drone2-fly-across-spray {
    0%   { right: -56px; }
    100% { right: calc(100% + 8px); }
}

/* Reduced motion guard */
@media (prefers-reduced-motion: reduce) {
    .drone-strip-2.animating .drone-vehicle-2,
    .drone-strip-2.animating .wash-spray-2,
    .drone-strip-2.animating .skyline-clean,
    .drone-strip-2 .drone-vehicle-2 .rotor {
        animation: none !important;
    }
    .drone-strip-2 .skyline-clean  { clip-path: inset(0 0 0 0%) !important; }
    .drone-strip-2 .drone-vehicle-2,
    .drone-strip-2 .wash-spray-2   { display: none; }
}

/* Cost savings section — wider header so title fits one line */
.section-wide-header .section-header.centered {
    max-width: 800px;
}
.section-wide-header .section-sub {
    max-width: 800px;
}

/* ═══════════════════════════════════════════════════════════════
   COMPLIANCE SECTION — two-col layout with Drone Ace badge
   ═══════════════════════════════════════════════════════════════ */

.compliance-with-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.compliance-with-badge .compliance-content {
    flex: 1;
    text-align: left;
    max-width: none;
    margin: 0;
}

.compliance-with-badge .compliance-content .section-body-text {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.compliance-with-badge .compliance-content .cta-inline {
    justify-content: flex-start;
}

.compliance-with-badge .compliance-badges {
    justify-content: flex-start;
}

.compliance-badge-img {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 0; /* cert is landscape — no vertical lift needed */
}

.compliance-badge-img img {
    width: 420px;     /* landscape cert — constrain by width */
    height: auto;
    display: block;
    opacity: 1;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Hide badge on small screens */
@media (max-width: 768px) {
    .compliance-badge-img {
        display: none;
    }
    .compliance-with-badge {
        flex-direction: column;
    }
    .compliance-with-badge .compliance-content .section-body-text,
    .compliance-with-badge .compliance-badges,
    .compliance-with-badge .compliance-content .cta-inline {
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — TWO-ZONE LAYOUT
   Zone 1: Quick Contact (light bg, form + sidebar)
   Zone 2: Full Assessment (dark bg, form + what-happens-next)
   ═══════════════════════════════════════════════════════════════ */

/* 5px green top bar — replaces full page hero on contact page */
.contact-top-bar {
    height: 5px;
    background: var(--color-brand-green);
}



/* Quick form wrap — slight tint so white fields read against page bg */
.quick-contact-form-wrap {
    background: #f0f2f5;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    padding: 1.5rem 1.75rem 1.75rem;
}

/* Zone wrapper — reduced top padding, contact page loads tight */
.contact-zone {
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Two-column inner */
.contact-zone-inner {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) {
    .contact-zone-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

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

/* Credentials column — plain white text, sits right of form */
.contact-zone-creds {
    padding-top: 0;
}
.contact-zone-creds .trust-badge-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.contact-zone-creds .trust-badge-item {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    background: none;
    padding: 0;
}
.contact-zone-creds .trust-badge-item svg {
    color: var(--color-brand-green);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Zone label (eyebrow above h2) */
.contact-zone-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin-bottom: 0.35rem;
}
.contact-zone-label-light {
    color: var(--color-brand-green);
}

/* Zone 1 h2 — tighter than default section-title */
#quick-contact .section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.4rem;
}

/* Zone 1 sidebar — nudged down to align with form body (v1.29.8 S37 / increased S39) */
#quick-contact .contact-zone-sidebar {
    padding-top: 8.5rem;
}

/* Zone 1 intro text — condensed */
.contact-intro {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 1.25rem;
    max-width: 480px;
}

/* Sidebar blocks */
.contact-sidebar-block {
    margin-bottom: 1.5rem;
}
.contact-sidebar-block h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
.contact-zone-sidebar-dark .contact-sidebar-block h3 {
    color: rgba(255,255,255,0.85);
}

/* Sidebar info items (phone, clock, pin icons) */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.contact-info-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-brand-green);
}
.contact-info-item a {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-brand);
    text-decoration: none;
    display: block;
}
.contact-info-item p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Trust badge list in sidebar */
.trust-badge-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--color-text);
}
.trust-badge-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-brand-green);
}

/* Zone divider — slim, minimal */


/* Zone 2 — dark tight: no angle, minimal top padding so form heading visible above fold */
/* Contact page H1 — sits above the Quick Contact eyebrow, not in a hero block */
.contact-page-h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: #111;
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

/* Hide the old intro paragraph that duplicated the hero sub text */
.contact-page-intro {
    display: none;
}

/* Zone divider — full-width bold italic green statement */
.contact-zone-divider {
    background: var(--color-surface);
    padding: 0.5rem 0 0;
    text-align: left;
    position: relative;
    z-index: 5;
}

.zone-or-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 800;
    font-style: italic;
    color: var(--color-brand-green);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Zone 2 dark tight */
.contact-zone-dark-tight {
    padding-top: clamp(1.25rem, 2vw, 1.5rem) !important;
    border-top: 1px solid rgba(255,255,255,0.18);
}
/* White divider below Zone 2 heading (v1.29.9 S38) */
#full-assessment .section-title {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 1rem;
}
.contact-zone-dark .contact-intro {
    color: rgba(255,255,255,0.72);
}
.contact-zone-dark .form-trust-line {
    color: rgba(255,255,255,0.45);
    margin-top: 0.875rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* Next steps list */
.next-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.next-steps-list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.step-num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-brand-green);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}
.next-steps-list li strong {
    display: block;
    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}
.next-steps-list li p {
    color: rgba(255,255,255,0.6);
    font-size: 0.825rem;
    margin: 0;
    line-height: 1.5;
}

/* ── Quick Contact Form — compact grid layout ───────────────── */
.qf-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.qf-row-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* ═══════════════════════════════════════════════════════════════
   TRUST CARD GRID — flex-wrap centered (professional standard)
   Last row always centers regardless of card count.
   Each card is a fixed width — row fills left to right,
   final partial row sits centered automatically.
   ═══════════════════════════════════════════════════════════════ */

.trust-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.trust-card-grid .trust-card {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: 360px;
    min-width: 260px;
    box-sizing: border-box;
}

@media (max-width: 899px) {
    .trust-card-grid .trust-card {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: none;
    }
}

@media (max-width: 599px) {
    .trust-card-grid .trust-card {
        flex: 0 0 100%;
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COST SAVINGS GRID — flex-wrap centered (professional standard)
   Same pattern as trust-card-grid. Last row always centers.
   ═══════════════════════════════════════════════════════════════ */

.cost-savings-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.cost-savings-grid .cost-item {
    flex: 0 0 calc(33.333% - 1rem);
    max-width: 360px;
    min-width: 240px;
    box-sizing: border-box;
}

@media (max-width: 899px) {
    .cost-savings-grid .cost-item {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: none;
    }
}

@media (max-width: 599px) {
    .cost-savings-grid .cost-item {
        flex: 0 0 100%;
        max-width: none;
    }
}