@media (max-width: 600px) {:root {
        --container-pad: 1rem;
    }
section {
        padding-block: var(--space-16);
    }
.top-bar__info {
        gap: var(--space-3);
    }
.top-bar__link span {
        display: none;
    }
.top-bar__link i {
        font-size: 1rem;
    }
.cta-banner__inner {
        padding: var(--space-8) var(--space-5);
}
.cta-banner__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Desktop safety net ----------
   header.css already hides the dropdown and reveals it on
   hover/focus, but this rule guards against any specificity or
   cache leak that might leave a desktop dropdown visible.
   The desktop nav starts at 1280px; keep this in step with the
   `max-width: 1279px` blocks in `header.css`. */
@media (min-width: 1280px) {
    .nav__dropdown {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Reveal only the dropdown owned by the hovered item. Child
       combinators throughout — a descendant selector here would
       pop open every nested flyout at once. */
    .nav__item--dropdown:hover > .nav__dropdown,
    .nav__item--dropdown:focus-within > .nav__dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

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

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media print {.top-bar,
    .header,
    .cta-banner,
    .footer,
    .footer-contact-buttons,
    .back-to-top,
    .hamburger {
        display: none;
    }}

/* ---------- Mobile Dropdown Behavior (≤1279px) ---------- */
@media (max-width: 1279px) {
    /* Restore the caret on mobile so users have a visual toggle cue */
    .nav__caret {
        display: inline-block;
        margin-left: auto;
        transition: transform var(--t-base);
    }

    /* Nested parents use a sideways chevron on desktop, where their
       panel flies out to the right. The drawer stacks vertically, so
       swap back to the down chevron here. Both glyphs are in the
       bundled FA subset (right = \f054, down = \f078), so this only
       changes which code point renders. */
    .nav__caret--side::before {
        content: "\f078";
    }

    /* Match the top-level caret size now that both read the same. */
    .nav__caret--side {
        font-size: 0.7em;
    }

    /* On a narrow viewport with a mouse attached, :hover would still
       match and apply the desktop 90° rule, tilting the now-down
       chevron. Cancel it; the `.is-open` rule below is what should
       drive the rotation at this size. */
    .nav__item--dropdown:hover > .nav__caret--side,
    .nav__item--dropdown:focus-within > .nav__caret--side {
        transform: none;
    }

    /* Hide desktop-only hover dropdowns by default on mobile */
    .nav__dropdown {
        display: none;
    }

    .nav__dropdown li {
        margin: 5px auto;
    }

    /* When the parent item is toggled open (via JS class),
       reveal the dropdown as an inline sub-list. Third level stays
       inline and indented rather than flying out, since the drawer
       is a single scrolling column. */
    .nav__item--dropdown.is-open > .nav__dropdown {
        display: block;
    }

    /* Neutralize the desktop side-flyout for nested levels in the
       drawer: inline, flush with its parent, no scroll clipping, and
       no hover bridge (nothing flies out at this size). */
    .nav__dropdown .nav__dropdown {
        position: static;
        transform: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding-left: 0;
        max-height: none;
        overflow-y: visible;
    }

    .nav__dropdown .nav__dropdown::before {
        display: none;
    }

    .nav__dropdown .nav__dropdown li a {
        padding-left: 1rem;
    }

    /* Rotate the caret when the dropdown is open. The drawer always
       expands downward, so this is a flat 180° flip — the desktop
       rule that turns sideways chevrons 90° must not apply here.
       Listed last so it wins over `.nav__caret--side`'s desktop
       transform at equal specificity. */
    .nav__item--dropdown.is-open > .nav__link .nav__caret {
        transform: rotate(180deg);
    }

    /* Make the parent link feel like a toggle row */
    .nav__item--dropdown > .nav__link {
        justify-content: space-between;
        width: 100%;
    }

    /* Style sub-menu items for the mobile drawer */
    .nav__item--dropdown > .nav__dropdown li a {
        padding: 0.6rem 0.75rem;
        font-size: var(--fs-sm);
        color: var(--color-gray-600);
    }

    .top-bar__inner {
        justify-content: flex-start;
    }

    .top-bar__info {
        width: auto;
    }

    #wpadminbar {
        display: none;
    }
}