/* ============================================
   GLOBAL CHROME (redesign · P3) — navbar, mega-menu, mobile drawer,
   footer, floats, skip-link. Consumes tokens.css only: no raw hex /
   shadow / radius. Literal px remain only for non-design-system
   primitives (hairline borders; glyph/icon dims; panel min-widths;
   micro transform offsets used as motion choreography).
   ============================================ */

/* ---- a11y utilities --------------------------------------------- */
/* Visually hidden but available to AT + keyboard (skip-link target,
   icon-only control labels). Mirrors the choice.css hidden-input idea. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link: off-screen until focused, then slides into the top-left. */
.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    background: var(--surface);
    color: var(--link);
    font-weight: 600;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transform: translateY(calc(-100% - var(--space-4)));
    transition: transform var(--dur-base) var(--ease-dreamy);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-navbar);
    padding: var(--space-3) 0;
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    transition: padding var(--dur-base) var(--ease-soft),
                background-color var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-soft);
}

.navbar.scrolled {
    padding: var(--space-2) 0;
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.logo {
    flex-shrink: 0;
    line-height: 0;
}

.logo img {
    display: block;
    width: 72px;
    height: auto;
    transition: transform var(--dur-base) var(--ease-dreamy);
}

.logo:hover img {
    transform: scale(1.05);
}

.logo:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* ---- primary menu (desktop horizontal) -------------------------- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-link {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text);
    position: relative;
    padding: var(--space-2) 0;
    transition: color var(--dur-base) var(--ease-soft);
}

.nav-link:hover {
    color: var(--accent-strong);
}

/* Hover/focus underline grows from the left. */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;       /* underline offset (choreography) */
    left: 0;
    width: 0;
    height: 2px;        /* hairline underline */
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width var(--dur-base) var(--ease-dreamy);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    width: 100%;
}

/* Active page: the signature dot sits under the link. */
.nav-link[aria-current="page"] {
    color: var(--text);
}

.nav-link[aria-current="page"]::before {
    content: '';
    position: absolute;
    bottom: -7px;       /* dot offset (choreography) */
    left: 50%;
    transform: translateX(-50%);
    width: 6px;         /* the dot glyph */
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

/* ---- dropdown shell (services / language / account) ------------- */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    transition: color var(--dur-base) var(--ease-soft);
}

.nav-dropdown-toggle:hover {
    color: var(--accent-strong);
}

.nav-dropdown-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.nav-dropdown--mini .nav-dropdown-toggle {
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.dropdown-icon {
    width: 0.9em;
    height: 0.9em;
    transition: transform var(--dur-base) var(--ease-dreamy);
}

.nav-dropdown.open > .nav-dropdown-toggle .dropdown-icon,
.nav-dropdown.active > .nav-dropdown-toggle .dropdown-icon {
    transform: rotate(180deg);
}

/* Standard floating panel (language + account dropdowns). */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-4));
    right: 0;
    min-width: 180px;       /* dropdown panel min width */
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-soft),
                visibility var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-dreamy);
    z-index: var(--z-dropdown);
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a,
.log-out-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    color: var(--text);
    transition: background-color var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft);
}

.nav-dropdown-menu a .dd-icon,
.log-out-btn .dd-icon {
    color: var(--accent-strong);
}

.nav-dropdown-menu a:hover,
.log-out-btn:hover {
    background: var(--coral-50);
    color: var(--accent-strong);
}

/* Language menu: a compact centred list of codes. */
.language-dropdown-menu {
    min-width: 0;
    width: max-content;
}

.language-dropdown-item {
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
}

/* Log-out form/button reset (it lives inside the account menu). */
.log-out-form {
    margin: 0;
}

.log-out-btn {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.log-out-btn .dd-icon { color: var(--danger); }

/* ============================================
   SERVICES MEGA-MENU
   ============================================ */
.nav-mega-panel {
    position: absolute;
    top: calc(100% + var(--space-4));
    left: 0;
    width: min(560px, calc(100vw - 2 * var(--container-pad)));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-soft),
                visibility var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-dreamy);
    z-index: var(--z-dropdown);
}

/* Desktop reveal: hover, keyboard focus-within, or the JS .open class. */
@media (min-width: 768px) {
    .nav-mega:hover .nav-mega-panel,
    .nav-mega:focus-within .nav-mega-panel,
    .nav-mega.open .nav-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.nav-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.mega-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background-color var(--dur-base) var(--ease-soft),
                border-color var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-dreamy);
}

.mega-card:hover,
.mega-card:focus-visible {
    background: var(--coral-50);
    border-color: var(--coral-200);
    transform: translateY(-2px);
    outline: none;
}

.mega-card:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.mega-card__thumb {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;        /* thumbnail tile */
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--grad-dreamy);
    color: var(--accent-strong);
    box-shadow: var(--shadow-sm);
}

.mega-card__thumb .dd-icon {
    width: 1.4em;
    height: 1.4em;
}

/* product-mark thumbs (attune, and aura when it lands): the artwork IS the
   tile, so the dreamy tile treatment comes off — including under
   aria-current, whose thumb selector otherwise outranks this modifier. */
.mega-card .mega-card__thumb--mark,
.mega-card[aria-current="page"] .mega-card__thumb--mark {
    background: none;
    box-shadow: none;
}

.mega-card__thumb--mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.mega-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mega-card__title {
    font-weight: 600;
    color: var(--text);
}

.mega-card__desc {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

/* Active service card (the page you're on). */
.mega-card[aria-current="page"] {
    background: var(--coral-50);
    border-color: var(--coral-200);
}

.mega-card[aria-current="page"] .mega-card__thumb {
    background: var(--grad-coral);
    color: var(--text-on-coral);
}

/* On a service page, the "services." toggle wears the dot. */
.nav-dropdown-toggle {
    position: relative;
}

.nav-dropdown-toggle.is-section-active::after {
    content: '';
    position: absolute;
    bottom: -7px;       /* matches .nav-link active dot */
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.nav-mega-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* ============================================
   RIGHT CLUSTER + CTA
   ============================================ */
.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-cta {
    flex-shrink: 0;
}

/* The drawer-pinned CTA only exists inside the mobile menu.
   Scoped under .nav-menu to outrank .dd-btn{display:inline-flex}
   (buttons.css loads after base.css). */
.nav-menu .nav-cta--drawer {
    display: none;
}

.nav-link--login {
    font-weight: 600;
}

/* Auth links live in the top bar on desktop; the drawer copy is mobile-only. */
.nav-drawer-auth {
    display: none;
}

/* ---- hamburger -------------------------------------------------- */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;           /* hamburger bar spacing (glyph) */
    width: 44px;        /* min tap target */
    height: 44px;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.mobile-menu-btn span {
    width: 24px;        /* hamburger glyph dims */
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--text);
    transition: transform var(--dur-base) var(--ease-dreamy),
                opacity var(--dur-base) var(--ease-soft);
}

/* ---- scroll-progress pinned to the navbar's lower edge ----------
   Scoped under .navbar to outrank components/progress.css (which loads
   after base.css and would otherwise re-fix the bar to top:0). The
   z-index reset drops the bar below the dropdown layer (--z-dropdown)
   so the hairline no longer clips through open mega-menu panels — it
   would otherwise inherit --z-sticky (500) from .dd-scroll-progress. */
.navbar .navbar-progress {
    position: absolute;
    top: auto;
    /* The *nav row's* lower edge, not the navbar's (#166). With an offer
       running the coral strip is inside .navbar as well, and taller than the
       hairline — so a bar pinned to the navbar's own bottom ends up under the
       announcement, measuring the page from below a band that has nothing to
       do with it. --promo-bar-h is 0px unless body.has-promo-bar (tokens.css),
       so with nothing running this is the -1px it always was: over the
       hairline border. */
    bottom: calc(var(--promo-bar-h) - 1px);
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: var(--z-base);
}

/* And it changes colour while an offer is running, which is the other half of
   moving it (#166). One edge above a coral band, --grad-coral is a colour
   touching itself — the fill stops reading as a measure of the page and starts
   reading as the strip being 2px taller on its left. The deeper coral is the
   same brand's, and it holds against both the row above it and the band below.
   Verified in the browser at rest and scrolled, desktop and phone. */
body.has-promo-bar .navbar .dd-scroll-progress__bar {
    background: var(--link);
}

/* ---- the offer strip (#135) -------------------------------------
   A running promotion is announced on every public page, directly under the
   nav row. It lives *inside* .navbar rather than beside it for one reason:
   the navbar is fixed and shrinks its padding on scroll, so anything that
   has to stay flush under it has to move with it — a separately-fixed strip
   would need the navbar's real height, which is the number that famously
   lies (docs/conventions.md §5).

   The cost of being inside a fixed bar is that the chrome is now taller and
   every page clears it with calc(var(--navbar-h) + …). That is what the
   --navbar-h bump below buys: one variable, and every page sheet — including
   the mobile drawer's own top padding — follows without being touched. */
body.has-promo-bar {
    --promo-bar-h: 42px;
    --navbar-h: calc(var(--navbar-row-h) + var(--promo-bar-h));
}

.promo-bar {
    display: flex;
    position: relative;   /* the close button is positioned against this band */
    height: var(--promo-bar-h);
    align-items: center;
    justify-content: center;
    /* Bleeds to both edges: it is a band across the page, not a card in it.
       The negative margin cancels .navbar's own vertical padding at the
       bottom so the strip meets the hairline border. */
    margin: var(--space-3) 0 calc(var(--space-3) * -1);
    /* Symmetric, and wide enough for the close button to sit inside it: the
       sentence stays centred on the band rather than on the space left over,
       and it never runs under the button on a narrow screen. */
    padding: 0 var(--space-8);
    background: var(--accent);
    color: var(--text-on-coral);
    text-align: center;
}

.navbar.scrolled .promo-bar {
    margin: var(--space-2) 0 calc(var(--space-2) * -1);
}

.promo-bar__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    color: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.promo-bar__link:hover .promo-bar__cta,
.promo-bar__link:focus-visible .promo-bar__cta {
    text-decoration: underline;
}

.promo-bar__link:focus-visible {
    outline: 2px solid var(--text-on-coral);
    outline-offset: 2px;
}

/* The percentage carries the shout; the rest is the sentence around it. */
.promo-bar__off {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
}

.promo-bar__until,
.promo-bar__cta {
    font-weight: 500;
}

/* Closing it (#167). Out of the flow on purpose: the band is centred on its
   sentence, so a button laid beside the link would push the offer off centre —
   and on a phone, where the sentence already wraps to two lines, it would take
   a third. The strip's side padding is what keeps the two from meeting. */
.promo-bar__close {
    display: flex;
    position: absolute;
    top: 50%;
    right: var(--space-2);
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font-size: var(--fs-body);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--dur-fast) var(--ease-soft);
}

.promo-bar__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.promo-bar__close:focus-visible {
    outline: 2px solid var(--text-on-coral);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    body.has-promo-bar {
        --promo-bar-h: 54px;
    }

    /* Two lines on a phone rather than one clipped one — the name and the
       percentage are the part that has to survive. */
    .promo-bar__cta {
        display: none;
    }
}

/* Body scroll lock while the mobile drawer is open. */
body.nav-open {
    overflow: hidden;
}

/* ============================================
   FOOTER — warm, dreamy, light (no dark theme). Soft gradient top
   edge, dot-marked column titles, contact + inline newsletter.
   ============================================ */
.footer {
    position: relative;
    background: var(--grad-soft);
    border-top: 1px solid var(--border);
    padding: var(--space-12) 0 var(--space-8);
    color: var(--text);
}

/* Soft coral glow bleeding down from the top edge. */
.footer-edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--space-13);
    background: var(--glow-coral);
    opacity: 0.5;
    pointer-events: none;
}

.footer-inner {
    position: relative;
    z-index: var(--z-base);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.4fr;
    gap: var(--space-9) var(--space-8);
    padding-bottom: var(--space-9);
    margin-bottom: var(--space-7);
    border-bottom: 1px solid var(--border);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

.footer-wordmark {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--text);
    line-height: var(--lh-tight);
}

.footer-wordmark-dot {
    color: var(--accent);
}

.footer-tagline {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    max-width: 28ch;
}

.footer-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.footer-social-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--accent-strong);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-dreamy),
                box-shadow var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft);
}

.footer-social-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--coral-700);
}

.footer-social-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-col-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: lowercase;
    color: var(--text-soft);
    margin-bottom: var(--space-1);
}

.footer-col > a {
    width: fit-content;
    font-size: var(--fs-small);
    color: var(--text-muted);
    transition: color var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-soft);
}

.footer-col > a:hover {
    color: var(--link);
    transform: translateX(4px);
}

.footer-col > a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---- contact ---- */
.footer-contact-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

a.footer-contact-line:hover {
    color: var(--link);
}

.footer-contact-icon {
    color: var(--accent-strong);
    margin-top: 0.15em;     /* optical align icon to first text line */
    flex-shrink: 0;
}

/* ---- inline newsletter ---- */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-newsletter-copy {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-body);
    max-width: 32ch;
}

.footer-newsletter-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.footer-newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-soft);
}

.footer-newsletter-input::placeholder {
    color: var(--text-muted);
}

.footer-newsletter-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-20);
}

.footer-newsletter-button {
    flex-shrink: 0;
}

.footer-newsletter-msg {
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
}

.footer-newsletter-msg--ok {
    color: var(--success);
}

.footer-newsletter-msg--info {
    color: var(--text-muted);
}

.footer-newsletter-msg--err {
    color: var(--danger);
}

.footer-newsletter-msg--err a {
    color: var(--link);
    text-decoration: underline;
}

/* ---- bottom bar ---- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.footer-made {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1264px) {
    .nav-container {
        padding: 0 var(--space-7);
    }

    .nav-menu {
        gap: var(--space-6);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: span 3;
    }
}

@media (max-width: 1024px) {
    .nav-right {
        gap: var(--space-4);
    }
}

/* ---- mobile drawer (≤767) -------------------------------------- */
@media (max-width: 767px) {
    .mobile-menu-btn {
        display: flex;
    }

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

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* The top-bar book CTA hides; the drawer pins its own primary CTA.
       Scoped to outrank .dd-btn{display:inline-flex}. */
    .nav-right .nav-cta--bar {
        display: none;
    }

    /* Mobile top bar stays compact: logo + language + hamburger. The
       login link / account dropdown move into the drawer below. */
    .nav-right .nav-link--login,
    .nav-right > .nav-dropdown:not(.nav-dropdown--mini) {
        display: none;
    }

    .nav-drawer-auth {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        margin-top: var(--space-2);
        padding-top: var(--space-4);
        border-top: 1px solid var(--glass-border);
    }

    .nav-drawer-auth-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--fs-lead);
        color: var(--text);
        padding: var(--space-3) 0;
    }

    .nav-drawer-auth .log-out-form {
        width: 100%;
    }

    .nav-drawer-auth .log-out-btn {
        width: auto;
        border-radius: 0;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(420px, 100%);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-2);
        padding: calc(var(--navbar-h) + var(--space-9)) var(--space-7) var(--space-9);
        /* No backdrop-filter: --grad-dreamy is near-opaque so the blur was
           invisible, but as a viewport-height overlay it still forced a
           per-frame re-blur of the stack (see components/modal.css). */
        background: var(--grad-dreamy);
        box-shadow: var(--shadow-lg);
        border-left: 1px solid var(--glass-border);
        overflow-y: auto;
        transform: translateX(100%);
        /* Closed: hidden from paint AND the tab order (its links must not be
           focusable off-canvas). visibility steps to hidden after the slide. */
        visibility: hidden;
        transition: transform var(--dur-slow) var(--ease-dreamy),
                    visibility var(--dur-slow) var(--ease-dreamy);
    }

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

    /* Staggered reveal of drawer items. */
    .nav-menu > * {
        opacity: 0;
        transform: translateX(16px);
        transition: opacity var(--dur-base) var(--ease-soft),
                    transform var(--dur-base) var(--ease-dreamy);
    }

    .nav-menu.active > * {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-menu.active > *:nth-child(1) { transition-delay: 0.06s; }
    .nav-menu.active > *:nth-child(2) { transition-delay: 0.12s; }
    .nav-menu.active > *:nth-child(3) { transition-delay: 0.18s; }
    .nav-menu.active > *:nth-child(4) { transition-delay: 0.24s; }
    .nav-menu.active > *:nth-child(5) { transition-delay: 0.30s; }
    .nav-menu.active > *:nth-child(6) { transition-delay: 0.36s; }
    .nav-menu.active > *:nth-child(7) { transition-delay: 0.42s; }

    .nav-menu .nav-link {
        font-size: var(--fs-lead);
        padding: var(--space-3) 0;
    }

    .nav-link[aria-current="page"]::before {
        left: 0;
        transform: none;
        bottom: var(--space-2);
    }

    /* Services: inline accordion inside the drawer. */
    .nav-mega {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-mega > .nav-dropdown-toggle {
        font-size: var(--fs-lead);
        justify-content: space-between;
        padding: var(--space-3) 0;
        width: 100%;
    }

    /* The active-section dot is redundant in the drawer (the open
       accordion already highlights the current service card). */
    .nav-dropdown-toggle.is-section-active::after {
        display: none;
    }

    .nav-mega-panel {
        position: static;
        width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 var(--space-3);
        /* Display toggle (not clip) so collapsed links leave the tab order
           cleanly — important for the drawer focus trap. */
        display: none;
    }

    .nav-mega.active .nav-mega-panel {
        display: block;
    }

    .nav-mega-grid {
        grid-template-columns: 1fr;
    }

    .mega-card {
        background: var(--surface);
        border-color: var(--border);
    }

    .nav-mega-cta {
        justify-content: flex-start;
    }

    /* The drawer's pinned primary CTA. */
    .nav-menu .nav-cta--drawer {
        display: inline-flex;
        margin-top: auto;
        width: 100%;
    }

    /* The language + account dropdowns also live in the drawer flow on
       mobile; render their panels inline below the toggle. */
    .nav-right .nav-dropdown-menu {
        position: absolute;     /* still float for the top-bar mini menus */
    }
}

@media (max-width: 480px) {
    .navbar.nav-hidden {
        transform: translateY(-100%);
        transition: transform var(--dur-base) var(--ease-soft);
    }

    .nav-container {
        padding: 0 var(--space-5);
        gap: var(--space-3);
    }

    .logo img {
        width: 60px;
    }

    .nav-right {
        gap: var(--space-3);
    }

    .nav-menu {
        width: 100%;
    }

    .footer {
        padding: var(--space-10) 0 var(--space-7);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7) var(--space-6);
    }

    .footer-brand,
    .footer-newsletter {
        grid-column: span 2;
    }

    .footer-bottom {
        justify-content: flex-start;
    }
}

/* ============================================
   REDUCED MOTION — kill movement, keep state changes legible.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .navbar,
    .logo img,
    .nav-link::after,
    .dropdown-icon,
    .nav-dropdown-menu,
    .nav-mega-panel,
    .mega-card,
    .mobile-menu-btn span,
    .promo-bar__close,
    .footer-col > a,
    .footer-social-link,
    .skip-link,
    .nav-menu,
    .nav-menu > * {
        transition-duration: 0.01ms;
    }

    .logo:hover img,
    .mega-card:hover,
    .footer-col > a:hover,
    .footer-social-link:hover {
        transform: none;
    }

    .nav-menu > * {
        transition-delay: 0s;
    }
}