/* =============================================================================
   InvestProp — site header / navigation (2026 redesign)
   -----------------------------------------------------------------------------
   Companion to `footer.css`. Like the footer, this partial renders on EVERY
   public page, so it cannot hang off a body class the way `home.css`
   (`body.home-x`) or `pricing.css` do — every rule is scoped to the header's
   own root class `.nv` (plus `.nv-drawer` / `.nv-scrim`, which still live
   inside the header element).

   Conventions this file respects (see the site design system):
     • dark is the DEFAULT theme (`html.dark`); light is the opt-in override,
       so every block sets its own `color`.
     • RTL is the default direction — logical properties throughout; the few
       physical ones are deliberate (decorative art, JS-driven transforms).
     • `.container-fluid` is a max-width container, not full-bleed.
     • `position: sticky` never works on this site (`html`/`body` carry
       `overflow-x: hidden`), so the bar goes `position: fixed` after it has
       been scrolled past, with `nav.js` compensating the body padding.

   The old `.header-nav` / `.header-bg` / `.mobile-header` blocks in the
   compiled `mainPage.css` are still live for the seasonal standalone pages
   (anniversary / christmas) — do not delete them. Nothing here reuses those
   class names, so there is no specificity fight to win.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */

.nv,
.nv-scrim {
    /* palette — mirrors the --ft-* / --hx-* sets */
    --nv-primary: #007BFF;
    --nv-primary-2: #1C8AFF;
    --nv-cyan: #5ED2EC;
    --nv-sky: #8DC4FF;

    /* surfaces & type (dark = default) */
    --nv-glass: rgba(6, 18, 34, .72);
    --nv-glass-2: rgba(5, 16, 30, .94);
    --nv-line: rgba(141, 196, 255, .14);
    --nv-line-strong: rgba(141, 196, 255, .26);
    --nv-text: #EAF2FF;
    --nv-text-2: #C3D4EA;
    --nv-muted: #8FA5C2;
    --nv-ink-bg: rgba(0, 123, 255, .16);
    --nv-hover: rgba(141, 196, 255, .09);

    --nv-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --nv-glow: 0 10px 30px -10px rgba(0, 123, 255, .65);
    --nv-shadow: 0 18px 50px -22px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .18);

    /* geometry */
    --nv-h: 84px;
    --nv-h-stuck: 66px;
    --nv-radius: 22px;

    /* written by nav.js */
    --nv-ink-x: 0px;
    --nv-ink-w: 0px;
    --nv-read: 0;
}

html:not(.dark) .nv,
html:not(.dark) .nv-scrim {
    --nv-glass: rgba(255, 255, 255, .78);
    --nv-glass-2: rgba(255, 255, 255, .97);
    --nv-line: rgba(0, 72, 153, .12);
    --nv-line-strong: rgba(0, 72, 153, .2);
    --nv-text: #0A1A30;
    --nv-text-2: #2B4463;
    --nv-muted: #5D7492;
    --nv-ink-bg: rgba(0, 123, 255, .1);
    --nv-hover: rgba(0, 123, 255, .07);
    --nv-shadow: 0 18px 44px -22px rgba(16, 32, 54, .45), 0 2px 8px rgba(16, 32, 54, .06);
}

/* -----------------------------------------------------------------------------
   1. Root + the fixed ("stuck") state
   -----------------------------------------------------------------------------
   At rest the header is a transparent, in-flow band. Once `nav.js` decides it
   has been scrolled past it adds `.is-stuck`: the header goes fixed and the
   inner shell condenses into a floating glass capsule.
   -------------------------------------------------------------------------- */

html header.nv {
    position: relative;
    z-index: 1200;
    color: var(--nv-text-2);
    background: none;
    isolation: isolate;
}

.nv-bar {
    position: relative;
    z-index: 2;
    padding-block: 0;
    transition: padding .32s cubic-bezier(.22, 1, .36, 1);
}

.nv.is-stuck {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    width: 100%;
    animation: nv-drop .34s cubic-bezier(.22, 1, .36, 1);
}

.nv.is-stuck .nv-bar {
    padding-block: 10px 0;
}

@keyframes nv-drop {
    from { transform: translateY(-100%); opacity: .4; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* The capsule. Transparent while the header sits at the top of the document,
   glass once it detaches. `overflow` stays visible — the mega panel escapes. */
.nv-shell {
    position: relative;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    transition:
        background-color .3s ease,
        border-color .3s ease,
        border-radius .3s ease,
        box-shadow .3s ease,
        padding .3s ease;
}

.nv.is-stuck .nv-shell {
    border-radius: var(--nv-radius);
    border-color: var(--nv-line);
    background: var(--nv-glass);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    box-shadow: var(--nv-shadow);
    padding-inline: 12px;
}

/* A hairline under the resting bar so the header still reads as a band on
   pages whose hero starts with flat colour. Fades away once stuck. */
.nv-shell::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(101, 163, 251, 0) 0%,
        rgba(101, 163, 251, .38) 26%,
        rgba(94, 210, 236, .3) 52%,
        rgba(101, 163, 251, 0) 100%);
    opacity: 1;
    transition: opacity .3s ease;
    pointer-events: none;
}

.nv.is-stuck .nv-shell::after { opacity: 0; }

/* -----------------------------------------------------------------------------
   2. Ambient art
   -----------------------------------------------------------------------------
   Replaces the two decorative `rect-header*.png` crops the old header bled over
   the hero. Physical `left`/`right` on purpose — decorative art must not mirror
   with the writing direction. Hidden as soon as the bar detaches.
   -------------------------------------------------------------------------- */

.nv-aura {
    position: absolute;
    inset-block-start: -40px;
    inset-inline: 0;
    height: 260px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity .35s ease;
}

.nv.is-stuck .nv-aura { opacity: 0; }

.nv-aura i {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}

html:not(.dark) .nv-aura i { opacity: .28; }

.nv-aura i:nth-child(1) {
    top: -120px;
    right: 6%;
    width: 380px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 123, 255, .55), rgba(0, 123, 255, 0) 70%);
}

.nv-aura i:nth-child(2) {
    top: -150px;
    left: 12%;
    width: 320px;
    height: 300px;
    background: radial-gradient(circle, rgba(94, 210, 236, .38), rgba(94, 210, 236, 0) 70%);
}

@media (max-width: 767.98px) {
    .nv-aura { display: none; }
}

/* -----------------------------------------------------------------------------
   3. The row
   -------------------------------------------------------------------------- */

.nv-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--nv-h);
    transition: height .3s cubic-bezier(.22, 1, .36, 1);
}

.nv.is-stuck .nv-row { height: var(--nv-h-stuck); }

.nv-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.nv-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* -----------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */

.nv-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    border-radius: 12px;
}

.nv-brand img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    transition: height .3s cubic-bezier(.22, 1, .36, 1);
}

.nv.is-stuck .nv-brand img { height: 28px; }

.nv-brand:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 4px;
}

/* -----------------------------------------------------------------------------
   5. Nav rail, links and the sliding ink
   -----------------------------------------------------------------------------
   `.nv-ink` is the pill that follows the pointer between links and rests on the
   active one. `nav.js` writes --nv-ink-x / --nv-ink-w from
   `getBoundingClientRect()` (never `offsetLeft`: its origin differs between
   engines under RTL) and the pill is pinned with `left: 0` and moved with a
   physical `translateX`, so one formula works in both directions.
   -------------------------------------------------------------------------- */

.nv-nav {
    display: none;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
}

@media (min-width: 1024px) {
    .nv-nav { display: flex; }
}

.nv-rail {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 16px;
}

.nv-ink {
    position: absolute;
    inset-block: 4px;
    left: 0;
    width: var(--nv-ink-w);
    border-radius: 12px;
    background: var(--nv-ink-bg);
    border: 1px solid transparent;
    transform: translateX(var(--nv-ink-x));
    opacity: 0;
    pointer-events: none;
    transition:
        transform .34s cubic-bezier(.22, 1, .36, 1),
        width .34s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        background-color .22s ease;
}

.nv-rail.is-inked .nv-ink { opacity: 1; }

.nv-rail.is-hovering .nv-ink {
    background: var(--nv-hover);
    border-color: var(--nv-line);
}

.nv-item {
    position: static;                 /* the mega panel anchors to .nv-rail */
    display: flex;
    align-items: center;
}

.nv-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--nv-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.nv-link:hover,
.nv-link:focus-visible,
.nv-link.is-active {
    color: var(--nv-text);
}

.nv-link.is-active { font-weight: 600; }

.nv-link:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 2px;
}

/* A dot under the current page — the ink pill is a hover affordance and moves
   away, so the active state needs a mark of its own. */
.nv-link__dot {
    position: absolute;
    inset-block-end: 1px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--nv-grad);
    box-shadow: 0 0 10px rgba(0, 123, 255, .9);
}

.nv-caret {
    font-size: 12px;
    line-height: 1;
    color: var(--nv-muted);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), color .2s ease;
}

.nv-item.is-open .nv-caret,
.nv-item:hover .nv-caret {
    transform: rotate(180deg);
    color: var(--nv-text);
}

/* -----------------------------------------------------------------------------
   6. Mega panel
   -------------------------------------------------------------------------- */

.nv-mega {
    position: absolute;
    top: 100%;
    left: 50%;                        /* centring is direction-agnostic */
    width: min(780px, calc(100vw - 32px));
    padding-block-start: 12px;        /* hover bridge across the gap */
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1300;
    /* `visibility` is stepped, not interpolated: it flips to visible the moment
       the panel opens and waits out the slide before hiding again. Transitioning
       it as a duration leaves the panel unfocusable for the first frames. */
    transition:
        opacity .24s ease,
        transform .28s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .28s;
}

.nv-item.is-open > .nv-mega,
.nv-item:hover > .nv-mega,
.nv-item:focus-within > .nv-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity .24s ease,
        transform .28s cubic-bezier(.22, 1, .36, 1),
        visibility 0s;
}

.nv-mega__inner {
    display: grid;
    grid-template-columns: 1fr 244px;
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid var(--nv-line);
    background: var(--nv-glass-2);
    -webkit-backdrop-filter: blur(40px) saturate(140%);
    backdrop-filter: blur(40px) saturate(140%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 4px 20px rgba(0, 123, 255, .08);
}

html:not(.dark) .nv-mega__inner {
    box-shadow: 0 40px 90px -34px rgba(16, 32, 54, .38), 0 2px 12px rgba(16, 32, 54, .07);
}

.nv-mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    align-content: start;
}

.nv-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px;
    border-radius: 16px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.nv-tile:hover,
.nv-tile:focus-visible,
.nv-tile.is-active {
    background: var(--nv-hover);
    border-color: var(--nv-line);
}

.nv-tile:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 2px;
}

.nv-tile__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 19px;
    color: var(--nv-sky);
    background: rgba(0, 123, 255, .14);
    border: 1px solid rgba(0, 123, 255, .22);
    transition: color .2s ease, background .2s ease, border-color .2s ease,
                transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

html:not(.dark) .nv-tile__icon {
    color: var(--nv-primary);
    background: rgba(0, 123, 255, .08);
    border-color: rgba(0, 123, 255, .16);
}

.nv-tile:hover .nv-tile__icon,
.nv-tile.is-active .nv-tile__icon {
    color: #fff;
    background: var(--nv-grad);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--nv-glow);
}

.nv-tile__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.nv-tile__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--nv-text);
}

.nv-tile__desc {
    font-size: 12px;
    line-height: 1.65;
    color: var(--nv-muted);
}

/* --- the promo panel ----------------------------------------------------- */

.nv-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(0, 123, 255, .28);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(94, 210, 236, .3), rgba(94, 210, 236, 0) 62%),
        linear-gradient(160deg, rgba(0, 123, 255, .32), rgba(0, 123, 255, .06) 72%),
        var(--nv-glass);
    transition: border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.nv-promo:hover {
    border-color: rgba(0, 123, 255, .55);
    transform: translateY(-2px);
}

/* A slow sheen that sweeps the promo on hover. */
.nv-promo__sheen {
    position: absolute;
    inset-block: -40%;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    transform: skewX(-16deg);
    opacity: 0;
    pointer-events: none;
}

.nv-promo:hover .nv-promo__sheen {
    animation: nv-sheen .9s ease forwards;
}

@keyframes nv-sheen {
    from { left: -60%; opacity: 1; }
    to   { left: 130%; opacity: 0; }
}

.nv-promo__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nv-text);
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--nv-line-strong);
    margin-block-end: auto;
}

html:not(.dark) .nv-promo__badge { background: rgba(255, 255, 255, .7); }

.nv-promo__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3DD68C;
    box-shadow: 0 0 8px #3DD68C;
}

.nv-promo__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--nv-text);
}

.nv-promo__desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--nv-text-2);
}

.nv-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nv-sky);
}

html:not(.dark) .nv-promo__cta { color: var(--nv-primary); }

.nv-promo__cta i {
    font-size: 14px;
    transition: transform .25s ease;
}

.nv-promo:hover .nv-promo__cta i { transform: translateX(-4px); }

/* This arrow carries `.nv-arrow`, which site.css's site-wide LTR mirror
   excludes, so the resting flip is declared here. */
html[dir="ltr"] .nv-promo__cta i { transform: scaleX(-1); }

html[dir="ltr"] .nv-promo:hover .nv-promo__cta i { transform: translateX(4px) scaleX(-1); }

/* -----------------------------------------------------------------------------
   7. Action cluster — language, theme, CTA
   -------------------------------------------------------------------------- */

/* site.css sets a trailing margin on both controls under LTR at (0,2,1)
   (`html[dir="ltr"] .site-lang-switch`), so these need the `html` prefix to
   tie — nav.css is linked after site.css, so the tie goes this way. */
html .nv-actions .site-lang-switch,
html .nv-actions .site-theme-toggle {
    margin-inline-end: 0;
    flex: 0 0 auto;
}

.nv-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding-inline: 18px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--nv-grad);
    box-shadow: var(--nv-glow);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, height .3s ease;
}

.nv.is-stuck .nv-cta { height: 40px; }

.nv-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -10px rgba(0, 123, 255, .8);
}

.nv-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The gradient-border shine the site's primary buttons carry. */
.nv-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(106.61deg, #FFFFFF 2.5%, rgba(255, 255, 255, 0) 18.15%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.nv-cta i { font-size: 17px; flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   8. Burger
   -------------------------------------------------------------------------- */

.nv-burger {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 13px;
    border: 1px solid var(--nv-line);
    background: var(--nv-hover);
    color: var(--nv-text);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

@media (min-width: 1024px) {
    .nv-burger { display: none; }
}

.nv-burger:hover { border-color: var(--nv-line-strong); }

.nv-burger:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 2px;
}

.nv-burger__box {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
}

.nv-burger__box i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, width .3s ease;
}

.nv-burger__box i:nth-child(1) { top: 0; }
.nv-burger__box i:nth-child(2) { top: 5px; width: 70%; right: auto; }
.nv-burger__box i:nth-child(3) { top: 10px; }

.nv-burger:hover .nv-burger__box i:nth-child(2) { width: 100%; }

.nv-burger[aria-expanded="true"] .nv-burger__box i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nv-burger[aria-expanded="true"] .nv-burger__box i:nth-child(2) { opacity: 0; }
.nv-burger[aria-expanded="true"] .nv-burger__box i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   9. Reading-progress hairline
   -----------------------------------------------------------------------------
   Sits on the capsule's bottom edge. `nav.js` writes --nv-read (0 → 1); the
   fill is scaled rather than sized so it stays on the compositor.
   -------------------------------------------------------------------------- */

.nv-progress {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 14px;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.nv.is-stuck .nv-progress { opacity: 1; }

.nv-progress i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nv-primary), var(--nv-cyan));
    transform: scaleX(var(--nv-read));
    transform-origin: right center;
    transition: transform .12s linear;
}

html[dir="ltr"] .nv-progress i { transform-origin: left center; }

/* -----------------------------------------------------------------------------
   10. Mobile drawer
   -------------------------------------------------------------------------- */

.nv-scrim {
    position: fixed;
    inset: 0;
    z-index: 1390;
    background: rgba(2, 9, 21, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

html:not(.dark) .nv-scrim { background: rgba(16, 32, 54, .38); }

.nv-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
}

.nv-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    width: min(88vw, 360px);
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    border-inline-start: 1px solid var(--nv-line);
    background: var(--nv-glass-2);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    backdrop-filter: blur(32px) saturate(140%);
    box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Stepped `visibility` again: nav.js moves focus into the panel on the next
       frame, which a real visibility transition would swallow. */
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
}

/* The panel slides in from the *inline* end, so under LTR it comes from the
   left and its shadow has to point the other way. */
html[dir="ltr"] .nv-drawer {
    transform: translateX(-100%);
    box-shadow: 30px 0 80px -30px rgba(0, 0, 0, .8);
}

.nv-drawer.is-open,
html[dir="ltr"] .nv-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

@media (min-width: 1024px) {
    .nv-drawer,
    .nv-scrim { display: none; }
}

/* A soft gradient wash at the top of the sheet. */
.nv-drawer::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 220px;
    background: radial-gradient(120% 100% at 50% 0%, rgba(0, 123, 255, .2), rgba(0, 123, 255, 0) 70%);
    pointer-events: none;
}

.nv-drawer__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-end: 16px;
    margin-block-end: 8px;
    border-block-end: 1px solid var(--nv-line);
}

.nv-drawer__logo img {
    display: block;
    height: 30px;
    width: auto;
    max-width: 165px;
    object-fit: contain;
}

.nv-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--nv-line);
    background: var(--nv-hover);
    color: var(--nv-text);
    font-size: 18px;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.nv-close:hover { border-color: var(--nv-line-strong); transform: rotate(90deg); }

.nv-close:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 2px;
}

.nv-drawer__nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: 6px;
}

/* Staggered reveal — `--nv-i` is set inline per row. */
.nv-drawer__nav > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}

.nv-drawer.is-open .nv-drawer__nav > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--nv-i, 0) * 34ms);
}

.nv-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-align: start;
    color: var(--nv-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nv-row-link:hover,
.nv-row-link:focus-visible,
.nv-row-link.is-active {
    color: var(--nv-text);
    background: var(--nv-hover);
    border-color: var(--nv-line);
}

.nv-row-link:focus-visible {
    outline: 2px solid var(--nv-primary);
    outline-offset: 2px;
}

.nv-row-link__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 17px;
    color: var(--nv-sky);
    background: rgba(0, 123, 255, .12);
    border: 1px solid rgba(0, 123, 255, .18);
    transition: color .2s ease, background .2s ease;
}

html:not(.dark) .nv-row-link__icon { color: var(--nv-primary); background: rgba(0, 123, 255, .07); }

.nv-row-link.is-active .nv-row-link__icon {
    color: #fff;
    background: var(--nv-grad);
    border-color: transparent;
}

.nv-row-link__label { flex: 1 1 auto; min-width: 0; }

.nv-row-link__caret {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--nv-muted);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.nv-group.is-open > .nv-row-link .nv-row-link__caret { transform: rotate(180deg); }

/* Accordion. Animating `grid-template-rows` avoids the fixed max-height guess
   and, unlike Bootstrap's collapse, is not broken by the Tailwind
   `.collapse { visibility: collapse }` rule mainPage.css ships. */
.nv-group__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .34s cubic-bezier(.22, 1, .36, 1);
}

.nv-group.is-open > .nv-group__panel { grid-template-rows: 1fr; }

.nv-group__panel > div {
    overflow: hidden;
    min-height: 0;
}

.nv-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 6px;
    margin-inline-start: 16px;
    border-inline-start: 1px solid var(--nv-line);
}

.nv-sub__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--nv-text-2);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.nv-sub__link:hover,
.nv-sub__link:focus-visible,
.nv-sub__link.is-active {
    color: var(--nv-text);
    background: var(--nv-hover);
}

.nv-sub__link i {
    font-size: 16px;
    color: var(--nv-sky);
}

html:not(.dark) .nv-sub__link i { color: var(--nv-primary); }

/* --- drawer footer -------------------------------------------------------- */

.nv-drawer__foot {
    position: relative;
    margin-block-start: auto;
    padding-block-start: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-block-start: 1px solid var(--nv-line);
}

.nv-drawer__foot .nv-cta {
    height: 48px;
    justify-content: center;
    width: 100%;
}

.nv-drawer__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html .nv-drawer__tools .site-lang-switch,
html .nv-drawer__tools .site-theme-toggle { margin-inline-end: 0; }

.nv-drawer__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--nv-muted);
    text-decoration: none;
    transition: color .2s ease;
}

.nv-drawer__contact:hover { color: var(--nv-text); }

/* Locks the page behind the open drawer. */
html.nv-locked,
html.nv-locked body { overflow: hidden !important; }

/* -----------------------------------------------------------------------------
   11. Breakpoint trims
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
    .nv { --nv-h: 70px; --nv-h-stuck: 62px; }
    .nv-brand img { height: 30px; max-width: 160px; }
}

@media (max-width: 575.98px) {
    .nv { --nv-h: 64px; --nv-h-stuck: 58px; }
    .nv-row { gap: 8px; }
    .nv-brand img { height: 26px; max-width: 120px; }
    .nv-burger { width: 38px; height: 38px; }
    .nv-cta { height: 38px; padding-inline: 12px; font-size: 12.5px; gap: 6px; border-radius: 12px; }
    .nv.is-stuck .nv-cta { height: 36px; }
    .nv-cta i { font-size: 15px; }
    /* No room for the language switch next to burger + logo + theme + CTA;
       it lives in the drawer at this width (the call the old header made too). */
    .nv-actions .site-lang-switch { display: none; }
    .nv-actions .site-theme-toggle { width: 34px; height: 34px; }
    .nv-actions { gap: 6px; }
}

/* Between 1024 and 1200 the rail and the action cluster are tight. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .nv-link { font-size: 13.5px; padding-inline: 10px; }
    .nv-rail { gap: 0; }
    .nv-cta { padding-inline: 14px; font-size: 13px; }
    .nv-brand img { max-width: 150px; }
}

@media (min-width: 1536px) {
    .nv-link { font-size: 16px; }
    .nv-rail { gap: 4px; }
}

/* Latin copy needs a Latin face; the Persian stack has no coverage. */
html[dir="ltr"] .nv-link,
html[dir="ltr"] .nv-cta,
html[dir="ltr"] .nv-tile__title,
html[dir="ltr"] .nv-promo__title,
html[dir="ltr"] .nv-row-link {
    font-family: "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .nv-shell,
    .nv-row,
    .nv-ink,
    .nv-mega,
    .nv-tile,
    .nv-tile__icon,
    .nv-promo,
    .nv-cta,
    .nv-drawer,
    .nv-scrim,
    .nv-group__panel,
    .nv-drawer__nav > *,
    .nv-brand img,
    .nv-burger__box i,
    .nv-caret,
    .nv-progress i {
        transition: none !important;
        animation: none !important;
    }
    .nv.is-stuck { animation: none; }
}