/* Sub-plan 10 - top menu (with mobile hamburger) + footer menu CSS */

.fenix-top-nav {
    /* Transparent so the nav inherits the host theme header (GVTheme topnav etc.).
       Older versions had a white card backdrop — that visually conflicts when this
       view component is mounted as a widget inside another theme's topbar. */
    background: transparent;
    border-bottom: 0;
    padding: 0;
    position: relative;
}
.fenix-top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    align-items: center;
}
.fenix-top-menu > li {
    position: relative;
}
.fenix-top-menu a {
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
    display: inline-block;
}
.fenix-top-menu a:hover {
    color: var(--fenix-color-primary, #db2777);
}

.fenix-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    z-index: 100;
}
/* Desktop only: hover opens sub-menu. On mobile (≤767px) only JS .mob-open toggle applies,
   preventing tap-to-:hover from overriding display:none and breaking the accordion. */
@media (min-width: 768px) {
    .fenix-top-menu > li.fenix-has-submenu:hover > .fenix-submenu {
        display: block;
    }
}

/* ── Flyout opens FLUSH with the bar bottom (FenixHeader) ───────────────────────────────────
   Each Fenix header row vertically centres a short menu inside row padding, so a flyout at
   top:100% of the <li> opens ABOVE the bar's visual bottom — a floating gap equal to the row's
   lower padding (~16px on the flat commerce header, ~13px on the floating-pill). Push the flyout
   down by that amount with margin-top so it sits flush with the bar bottom, and fill the gap
   with a TRANSPARENT bridge (::after on the <li>) so the cursor stays in the hover zone while
   crossing it — otherwise the menu would close mid-travel. Values are per the two shipped header
   layouts; both derive from the row's actual vertical padding. */
.fenix-header .fenix-has-submenu > .fenix-submenu { margin-top: 16px; }
.fenix-header[data-profile="floating-pill"] .fenix-has-submenu > .fenix-submenu { margin-top: 13px; }
.fenix-header .fenix-has-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;            /* >= the largest margin-top so the bridge always spans the gap */
    pointer-events: none;    /* idle: never intercept clicks on the page content below */
}
/* Only make the bridge interactive WHILE the item is hovered, so it keeps the menu open as the
   cursor crosses the gap but never blocks anything when the menu is closed. */
.fenix-header .fenix-has-submenu:hover::after {
    pointer-events: auto;
}
/* Outside-click handler adds this class — wins over :hover for one cycle so
   the menu actually closes when the user clicks away or follows a link. */
.fenix-top-nav.fenix-menu-collapsed .fenix-submenu,
.fenix-top-nav.fenix-menu-collapsed .fenix-subsubmenu {
    display: none !important;
}
.fenix-submenu li {
    padding: 0;
}
.fenix-submenu a {
    display: block;
    padding: 8px 16px;
}
.fenix-submenu a:hover {
    background: #f1f5f9;
}

/* Mobile hamburger label - hidden on desktop, visible <768px */
.fenix-hamburger-label {
    display: none;
    cursor: pointer;
    padding: 8px;
    -webkit-user-select: none;
    user-select: none;
}
.fenix-hamburger-label span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1e293b;
    margin: 4px 0;
    transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 767px) {
    .fenix-hamburger-label {
        display: inline-block;
    }
    .fenix-top-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: calc(100% + 8px);
        right: 8px;
        min-width: min(300px, calc(100vw - 16px));
        background: #fffdf8;
        border: 1px solid #ece4d4;
        border-radius: 12px;
        box-shadow: 0 20px 44px rgba(74, 67, 56, 0.18);
        padding: 8px;
        z-index: 200;
        overflow: hidden;
    }
    /* CSS-only toggle: when the hidden checkbox is :checked, sibling <ul> appears */
    .fenix-hamburger-checkbox:checked ~ .fenix-top-menu {
        display: flex;
    }
    .fenix-top-menu > li {
        width: 100%;
        padding: 0;
    }
    .fenix-submenu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        display: block;
    }
}

/* Footer menu */
.fenix-page-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 32px 16px;
    margin-top: 48px;
}
.fenix-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.fenix-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fenix-footer-col li {
    padding: 4px 0;
}
.fenix-footer-col a {
    color: #475569;
    text-decoration: none;
    font-size: 14px;
}
.fenix-footer-col a:hover {
    color: var(--fenix-color-primary, #db2777);
}
@media (max-width: 767px) {
    .fenix-footer-cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ─── Top link (matches GVTheme TopMenu Tailwind classes exactly) ───
   Reference: text-sm font-medium text-slate-700 hover:text-pink-500
              px-3 py-2 rounded-lg transition-colors */
.fenix-top-link {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;                    /* px-3 py-2 */
    border-radius: 8px;                   /* rounded-lg */
    font-size: 14px;                      /* text-sm */
    font-weight: 500;                     /* font-medium */
    color: #334155 !important;            /* text-slate-700 */
    font-family: inherit;
    text-decoration: none;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: color 0.15s;
}
.fenix-top-link:hover {
    color: var(--fenix-color-primary, #ec4899) !important;   /* hover:text-pink-500 */
    background: transparent !important;
}
.fenix-top-link:focus,
.fenix-top-link:focus-visible {
    background: transparent !important;
    outline: none;
    box-shadow: none !important;
}
/* Ensure each top-level <li> has zero default UA spacing so adjacent links
   sit at the same vertical baseline as the GVTheme TopMenu siblings. */
.fenix-top-menu > li {
    margin: 0;
    padding: 0;
}
.fenix-top-icon {
    width: 16px;
    height: 16px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Caret — inline SVG (Lucide-style). 10×10, slate stroke, rotates on hover.
   Smaller than 12px to match Portals' visual feel — Lucide's chevron-down
   has ~60% viewBox fill so 12px there reads similar to 10px here. */
.fenix-caret {
    width: 10px;
    height: 10px;
    color: #94a3b8;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    transition: transform 0.2s;
}
.fenix-has-submenu:hover > .fenix-top-link .fenix-caret {
    transform: rotate(180deg);
}
.fenix-submenu-item {
    text-decoration: none;
    outline: none;
}
.fenix-submenu-item:focus-visible {
    outline: 2px solid var(--fenix-color-primary, #db2777);
    outline-offset: -2px;
}
.fenix-top-icon {
    /* Match the label colour (dark slate), not pink. Turns pink only on hover, in step with
       the label's own hover colour — so icon + text move together. */
    color: #334155;
    font-size: 14px;
    transition: color 0.15s;
}
.fenix-top-link:hover .fenix-top-icon {
    color: var(--fenix-color-primary, #ec4899);
}
.fenix-caret {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.2s;
}
.fenix-has-submenu:hover > .fenix-top-link .fenix-caret {
    transform: rotate(180deg);
}

/* ─── Rich submenu items (matches GVTheme Portals dropdown exactly) ───
   Tailwind reference (TopMenu/Default.cshtml lines 76-105):
     dialog:  w-56 (224px) rounded-2xl shadow-xl border border-slate-100 p-2
     item:    flex items-center gap-3 p-3 rounded-xl hover:bg-pink-50
     icon:    w-5 h-5 text-pink-500 (20px, primary colour)
     label:   font-bold text-slate-800 text-sm (14px, 700 weight)
     subtitle:text-xs text-slate-500 (12px) */
.fenix-submenu {
    min-width: 224px;                                 /* w-56 */
    border-radius: 16px;                              /* rounded-2xl */
    padding: 8px;                                     /* p-2 */
    border: 1px solid #f1f5f9;                        /* border-slate-100 */
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),     /* shadow-xl */
                0 10px 10px -5px rgba(0,0,0,0.04);
    background: white;
}
.fenix-submenu-item {
    display: flex !important;
    align-items: center;
    gap: 12px;                                        /* gap-3 */
    padding: 12px !important;                         /* p-3 */
    border-radius: 12px;                              /* rounded-xl */
    transition: background-color 0.15s;
}
.fenix-submenu-item:hover {
    background: #fdf2f8 !important;                   /* hover:bg-pink-50 */
}
.fenix-submenu-icon {
    color: var(--fenix-color-primary, #db2777);       /* text-pink-500 */
    font-size: 18px;                                  /* ~w-5 h-5 in FA */
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fenix-submenu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fenix-submenu-label {
    font-weight: 700;                                 /* font-bold */
    font-size: 14px;                                  /* text-sm */
    color: #1e293b;                                   /* text-slate-800 */
    line-height: 1.2;
}
.fenix-submenu-subtitle {
    font-size: 12px;                                  /* text-xs */
    color: #64748b;                                   /* text-slate-500 */
    line-height: 1.3;
}
.fenix-submenu-item--rich { padding: 10px 12px !important; }

/* ════════════════════════════════════════════════════════════════════════════════════════
   DROPDOWN-ROW STYLE VARIANTS — selected site-wide via HeaderStyles.dropdownStyle, stamped as
   [data-dd-style] on .fenix-header (desktop) and .fenix-header-drawer (mobile). Six treatments,
   benchmarked against Notion/Linear/Stripe/Vercel/Raycast. They restyle the leading icon and the
   hover relationship; the label stays dark for legibility (the fix for "all-pink looks hot").
   The same tokens are mirrored onto the avatar menu items in fenix-header.css.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* Shared: give the icon a real container so it never looks small/floaty, and keep the label dark
   by default (colour moves to the icon, per the leaders). Applies to all variants.
   NOTE: Font Awesome forces display:block on .fa elements, which kills the flex centering and
   parks the glyph top-left — so we MUST re-assert inline-flex centering here (and !important to
   beat FA's cascade). line-height:1 stops the glyph from sitting high inside the chip. */
[data-dd-style] .fenix-submenu-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    font-size: 16px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
[data-dd-style] .fenix-submenu-item:hover { background: #f8fafc !important; }

/* ── 1 · Tinted chip (default) — soft-pink chip matching the JS account avatar (radial wash +
   hairline pink border + subtle shadow), dark glyph; deepens on hover. Label stays dark. ── */
[data-dd-style="chip"] .fenix-submenu-icon {
    background: radial-gradient(120% 120% at 30% 20%, #fff 0%, #fdf2f8 55%, #fce7f3 100%);
    border: 1px solid rgba(190, 24, 93, 0.14);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    color: #be185d;
    border-radius: 0.75rem;
}
[data-dd-style="chip"] .fenix-submenu-item:hover .fenix-submenu-icon {
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.16);
    color: #be185d;
}

/* ── 2 · Brand chip — always soft-pink → fills solid pink on hover (Stripe) ── */
[data-dd-style="brand"] .fenix-submenu-icon { background: #fdf2f8; color: #db2777; }
[data-dd-style="brand"] .fenix-submenu-item:hover { background: #fdf2f8 !important; }
[data-dd-style="brand"] .fenix-submenu-item:hover .fenix-submenu-icon { background: #ec4899; color: #fff; }
[data-dd-style="brand"] .fenix-submenu-item:hover .fenix-submenu-label { color: #be185d; }

/* ── 3 · Bare icon — larger, no chip, grey → pink on hover (Vercel) ── */
[data-dd-style="bare"] .fenix-submenu-icon { background: transparent; color: #94a3b8; width: 24px; height: 24px; flex-basis: 24px; font-size: 19px; border-radius: 0; }
[data-dd-style="bare"] .fenix-submenu-item { gap: 14px; }
[data-dd-style="bare"] .fenix-submenu-item:hover { background: #f6f7fb !important; }
[data-dd-style="bare"] .fenix-submenu-item:hover .fenix-submenu-icon { color: #db2777; }

/* ── 4 · Accent bar — pink bar slides in on the left edge, chip tints (Raycast) ── */
[data-dd-style="bar"] .fenix-submenu-icon { background: #f3f4f8; color: #475569; }
[data-dd-style="bar"] .fenix-submenu-item { position: relative; }
[data-dd-style="bar"] .fenix-submenu-item::before {
    content: ""; position: absolute; left: 2px; top: 50%;
    transform: translateY(-50%) scaleY(0); transform-origin: center;
    width: 3px; height: 60%; border-radius: 3px; background: #ec4899; transition: transform 0.15s ease;
}
[data-dd-style="bar"] .fenix-submenu-item:hover { background: #faf7f9 !important; }
[data-dd-style="bar"] .fenix-submenu-item:hover::before { transform: translateY(-50%) scaleY(1); }
[data-dd-style="bar"] .fenix-submenu-item:hover .fenix-submenu-icon { background: #fce7f3; color: #be185d; }

/* ── 5 · Minimal navy — bigger navy icons at 55% → navy→pink on hover (matches logo) ── */
[data-dd-style="navy"] .fenix-submenu-icon { background: transparent; color: #0f1437; opacity: 0.55; width: 24px; height: 24px; flex-basis: 24px; font-size: 19px; border-radius: 0; }
[data-dd-style="navy"] .fenix-submenu-item { gap: 14px; }
[data-dd-style="navy"] .fenix-submenu-item:hover { background: #f5f6fa !important; }
[data-dd-style="navy"] .fenix-submenu-item:hover .fenix-submenu-icon { opacity: 1; color: #db2777; }
[data-dd-style="navy"] .fenix-submenu-item:hover .fenix-submenu-label { color: #be185d; }

/* ── 6 · Soft circle — round gradient chip → fills pink-gradient on hover (pairs w/ avatar) ── */
[data-dd-style="circle"] .fenix-submenu-icon {
    border-radius: 50%; width: 40px; height: 40px; flex-basis: 40px;
    background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: #be185d;
}
[data-dd-style="circle"] .fenix-submenu-item:hover { background: #fafafa !important; }
[data-dd-style="circle"] .fenix-submenu-item:hover .fenix-submenu-icon {
    background: linear-gradient(135deg, #ec4899, #be185d); color: #fff;
}

/* ─── 2nd-level flyout (sub-submenu under a child item) ─────────────
   Pops out to the RIGHT of the parent item card. Same chrome as the
   first-level submenu so the visual treatment is consistent. */
.fenix-submenu li.fenix-has-subsubmenu {
    position: relative;
}
.fenix-submenu li.fenix-has-subsubmenu > .fenix-submenu-item {
    /* Make room for the right-edge caret. */
    padding-right: 24px !important;
}
.fenix-subcaret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.fenix-subsubmenu {
    display: none;
    position: absolute;
    top: -8px;
    left: 100%;
    margin-left: 4px;
    min-width: 224px;
    border-radius: 16px;
    padding: 8px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
                0 10px 10px -5px rgba(0,0,0,0.04);
    background: white;
    list-style: none;
    z-index: 110;
}
.fenix-submenu li.fenix-has-subsubmenu:hover > .fenix-subsubmenu {
    display: block;
}

/* Mobile: nested sub-submenu collapses inline (same as level-1 submenu) */
@media (max-width: 767px) {
    .fenix-subsubmenu {
        position: static;
        margin: 0;
        padding: 0 0 0 16px;
        display: block;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        min-width: 0;
    }
}

/* On mobile (collapsed hamburger), the rich submenu loses the dropdown shell */
@media (max-width: 767px) {
    /* Sub-menus collapsed by default — JS (fenix-mob-acc) toggles .mob-open */
    .fenix-submenu,
    .fenix-subsubmenu {
        display: none;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 4px 16px;
    }
    .fenix-submenu.mob-open,
    .fenix-subsubmenu.mob-open {
        display: block;
    }
    /* Strip all icon-tile gradients/colours in drawer — plain flat items only */
    .fenix-submenu-icon,
    .fenix-subsubmenu .fenix-submenu-icon {
        display: none !important;
    }
    .fenix-submenu-item {
        padding: 11px 8px !important;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 0;
        gap: 0 !important;
    }
    .fenix-submenu li:last-child > .fenix-submenu-item,
    .fenix-subsubmenu li:last-child > .fenix-submenu-item {
        border-bottom: 0;
    }
    /* Parent link: show open/close caret indicator */
    .fenix-has-submenu > .fenix-top-link { cursor: pointer; }
    .fenix-has-submenu.mob-open > .fenix-top-link .fenix-caret {
        transform: rotate(180deg);
    }
    .fenix-submenu li.fenix-has-subsubmenu > .fenix-submenu-item {
        padding-right: 40px !important;
    }
    .fenix-subcaret {
        right: 14px;
    }
    /* Top-level items: avatar-dropdown row style */
    .fenix-top-menu > li > .fenix-top-link {
        padding: 11px 14px !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        border-bottom: 0 !important;
    }
    .fenix-top-menu > li > .fenix-top-link:hover {
        background: #f4efe3 !important;
    }
    /* Hairline divider between top-level items (not on last) */
    .fenix-top-menu > li:not(:last-child) {
        border-bottom: 1px solid #f0eadd;
    }
    /* Sub-items match the same row style */
    .fenix-submenu-item {
        border-radius: 6px !important;
        border-bottom: 0 !important;
    }
    .fenix-submenu li:not(:last-child) > .fenix-submenu-item {
        border-bottom: 1px solid #f0eadd !important;
        border-radius: 0 !important;
    }
}

/* ── OFF-CANVAS DRAWER — accordion rules that must hold at ANY width ────────────────────────
   A header design may collapse to the hamburger well above 768px (serif-editorial does it at
   ≤1199px), and iPhone LANDSCAPE is ~844px wide, so the ≤767px block above never applies there.
   Inside the drawer the sub-menu is always an inline accordion driven by .mob-open — never the
   desktop hover flyout. Kept NOT breakpoint-scoped on purpose. */
.fenix-header-drawer .fenix-submenu,
.fenix-header-drawer .fenix-subsubmenu {
    position: static;
    display: none;
}
.fenix-header-drawer .fenix-submenu.mob-open,
.fenix-header-drawer .fenix-subsubmenu.mob-open {
    display: block;
}
/* Hover must not open (or half-open) a group in the drawer: on iOS a tap leaves a sticky
   :hover behind, which otherwise rotated the caret on a group that is still closed. */
.fenix-header-drawer .fenix-top-menu > li.fenix-has-submenu:hover > .fenix-submenu:not(.mob-open) {
    display: none;
}
.fenix-header-drawer .fenix-has-submenu:hover > .fenix-top-link .fenix-caret {
    transform: none;
}
.fenix-header-drawer .fenix-has-submenu.mob-open > .fenix-top-link .fenix-caret {
    transform: rotate(180deg);
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   TOP-NAV MENU STYLES — selected via HeaderStyles.menuStyle, stamped [data-menu-style] on
   .fenix-header (and .fenix-header-drawer). This is the TOP-NAV axis: it owns the typography,
   spacing, hover indicator, equal-width behaviour of the top-level links AND a matching flyout
   look. It is INDEPENDENT of [data-dd-style] (the flyout-icon axis) so the two compose freely.

   data-menu-style lives on the header; the top-nav (.fenix-top-nav) renders inside it, so these
   selectors cascade down. Four themes:
     default    — current GVT pill links (the fix: equal width + synced icon colour)
     architect  — Antra: capitalize / 500, gold underline-slide, warm flyout
     atelier    — Tayler: soft capitalize / 400, thin centred underline, airy flyout
     boldcaps   — Aleric: UPPERCASE / 700 tight, dark, modern compact flyout
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── MENU ICONS TOGGLE (opt-out: HeaderStyles.showMenuIcons) ───────────────────────────────
   When data-menu-icons="false", hide the leading icons on BOTH the top-level menu items
   (.fenix-top-icon) AND every dropdown/flyout item (.fenix-submenu-icon) so the menu is
   text-only top-to-bottom. Hiding the <i> removes it from the flex flow, so its gap collapses
   on its own; we also zero any reserved icon spacing on the flyout text block to be safe.
   Default (no attribute / "true") keeps icons. */
[data-menu-icons="false"] .fenix-top-icon,
[data-menu-icons="false"] .fenix-submenu-icon {
    display: none !important;
}
/* Tighten the top-link now that the icon is gone (the 4px icon-gap would otherwise leave a
   tiny lead space before the label). */
[data-menu-icons="false"] .fenix-top-link {
    gap: 0 !important;
}

/* ── DROPDOWN DESCRIPTIONS TOGGLE (opt-out: HeaderStyles.showDropdownDesc) ──────────────────
   When data-menu-desc="false", hide the description subtitle under each flyout item so only the
   label shows. The item shrinks to a single-line row. Default keeps the subtitle. */
[data-menu-desc="false"] .fenix-submenu-subtitle {
    display: none !important;
}

/* ── EQUAL-WIDTH TOP ITEMS (opt-in toggle: HeaderStyles.equalWidthNav) ──────────────────────
   Make Home / Resources / … occupy the same width so the bar reads as even columns. Each <li>
   flexes to an equal basis; the link centres inside it. min-width keeps short labels from
   collapsing, max-width stops a long label from ballooning the row. Gated behind
   data-menu-equal="true" so it can be turned off per profile (default on). */
[data-menu-equal="true"] .fenix-top-menu {
    align-items: stretch;
}
[data-menu-equal="true"] .fenix-top-menu > li {
    flex: 1 1 0;
    min-width: 104px;
    max-width: 160px;
    display: flex;
}
[data-menu-equal="true"] .fenix-top-menu > li > .fenix-top-link {
    width: 100%;
    justify-content: center;
}

/* ── DEFAULT theme — fix the icon colour so it is SYNCED, not a stray pink. ─────────────────
   The top-nav icon now tracks the label: slate at rest, primary on hover (icon + label move
   together). !important beats any stale/duplicate .fenix-top-icon rule served under an old
   cache-buster. The label stays the existing pill-link treatment. */
[data-menu-style="default"] .fenix-top-icon {
    color: #334155 !important;
}
[data-menu-style="default"] .fenix-top-link:hover .fenix-top-icon,
[data-menu-style="default"] .fenix-has-submenu:hover > .fenix-top-link .fenix-top-icon {
    color: var(--fenix-color-primary, #db2777) !important;
}

/* ═══════════════════════ 1 · ARCHITECT (Antra) ═══════════════════════
   Refined / architectural: capitalize, weight 500, calm slate, GOLD accent on hover with an
   underline that slides in from the centre. Flyout is a warm, low-contrast card with a thin
   gold left-rule on hover. */
[data-menu-style="architect"] .fenix-top-link {
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: 0 !important;
    color: #1f2430 !important;
    position: relative;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* centre-out underline */
[data-menu-style="architect"] .fenix-top-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: #c2a05c;                 /* Antra gold */
    transform: translateX(-50%);
    transition: width 0.25s ease;
}
[data-menu-style="architect"] .fenix-top-link:hover::after,
[data-menu-style="architect"] .fenix-has-submenu:hover > .fenix-top-link::after {
    width: 60%;
}
[data-menu-style="architect"] .fenix-top-link:hover,
[data-menu-style="architect"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #b8902f !important;
}
[data-menu-style="architect"] .fenix-top-icon {
    color: #b8902f !important;
}
[data-menu-style="architect"] .fenix-caret { color: #b8902f; }
/* architect flyout — warm card + gold accent left-rule on hover */
[data-menu-style="architect"] .fenix-submenu,
[data-menu-style="architect"] .fenix-subsubmenu {
    border-color: #efe9dc;
    box-shadow: 0 22px 40px -16px rgba(58, 46, 22, 0.28);
}
[data-menu-style="architect"] .fenix-submenu-item { position: relative; border-radius: 10px; }
[data-menu-style="architect"] .fenix-submenu-item:hover { background: #faf6ec !important; }
[data-menu-style="architect"] .fenix-submenu-item:hover .fenix-submenu-label { color: #8a6d23; }
[data-menu-style="architect"] .fenix-submenu-item::before {
    content: ""; position: absolute; left: 3px; top: 50%;
    transform: translateY(-50%) scaleY(0); transform-origin: center;
    width: 3px; height: 58%; border-radius: 3px; background: #c2a05c; transition: transform 0.15s ease;
}
[data-menu-style="architect"] .fenix-submenu-item:hover::before { transform: translateY(-50%) scaleY(1); }

/* ═══════════════════════ 2 · ATELIER (Tayler) ═══════════════════════
   Soft fashion/editorial: capitalize, light 400 weight, muted slate, a thin full-width
   underline that fades in. Flyout is airy with generous spacing and a quiet hover. */
[data-menu-style="atelier"] .fenix-top-link {
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.01em !important;
    font-size: 15px !important;
    color: #454456 !important;
    position: relative;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
[data-menu-style="atelier"] .fenix-top-link::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px;
    bottom: 4px;
    height: 1px;
    background: var(--fenix-color-primary, #db2777);
    opacity: 0;
    transition: opacity 0.2s ease;
}
[data-menu-style="atelier"] .fenix-top-link:hover::after,
[data-menu-style="atelier"] .fenix-has-submenu:hover > .fenix-top-link::after { opacity: 1; }
[data-menu-style="atelier"] .fenix-top-link:hover,
[data-menu-style="atelier"] .fenix-has-submenu:hover > .fenix-top-link {
    color: var(--fenix-color-primary, #db2777) !important;
}
[data-menu-style="atelier"] .fenix-top-icon { color: #8b8a99 !important; }
[data-menu-style="atelier"] .fenix-top-link:hover .fenix-top-icon { color: var(--fenix-color-primary, #db2777) !important; }
[data-menu-style="atelier"] .fenix-caret { color: #aaa9b5; }
/* atelier flyout — extra air, soft hover, no heavy chip */
[data-menu-style="atelier"] .fenix-submenu,
[data-menu-style="atelier"] .fenix-subsubmenu {
    padding: 10px;
    border-color: #efeef2;
    box-shadow: 0 18px 38px -14px rgba(40, 38, 52, 0.22);
}
[data-menu-style="atelier"] .fenix-submenu-item { padding: 12px 14px !important; border-radius: 10px; }
[data-menu-style="atelier"] .fenix-submenu-item:hover { background: #faf7f9 !important; }
[data-menu-style="atelier"] .fenix-submenu-label { font-weight: 600 !important; }
[data-menu-style="atelier"] .fenix-submenu-item:hover .fenix-submenu-label { color: var(--fenix-color-primary-dark, #be185d); }

/* ═══════════════════════ 3 · BOLDCAPS (Aleric) ═══════════════════════
   Modern / techy: UPPERCASE, heavy 700, tight tracking, dark ink, small caret. Hover just
   darkens to primary. Flyout is a tight, bold-labelled compact list. */
[data-menu-style="boldcaps"] .fenix-top-link {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    font-size: 13px !important;
    color: #1a1a1a !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
[data-menu-style="boldcaps"] .fenix-top-link:hover,
[data-menu-style="boldcaps"] .fenix-has-submenu:hover > .fenix-top-link {
    color: var(--fenix-color-primary, #db2777) !important;
}
[data-menu-style="boldcaps"] .fenix-top-icon { color: #1a1a1a !important; font-size: 13px; }
[data-menu-style="boldcaps"] .fenix-top-link:hover .fenix-top-icon { color: var(--fenix-color-primary, #db2777) !important; }
[data-menu-style="boldcaps"] .fenix-caret { color: #1a1a1a; }
/* boldcaps flyout — compact, bold labels, square-ish corners */
[data-menu-style="boldcaps"] .fenix-submenu,
[data-menu-style="boldcaps"] .fenix-subsubmenu {
    border-radius: 10px;
    border-color: #e6e6e9;
    box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.30);
}
[data-menu-style="boldcaps"] .fenix-submenu-item { padding: 11px 12px !important; border-radius: 8px; }
[data-menu-style="boldcaps"] .fenix-submenu-label {
    font-weight: 700 !important; letter-spacing: 0.01em; text-transform: capitalize;
}
[data-menu-style="boldcaps"] .fenix-submenu-item:hover { background: #f4f4f6 !important; }
[data-menu-style="boldcaps"] .fenix-submenu-item:hover .fenix-submenu-label { color: var(--fenix-color-primary, #db2777); }

/* ═══════════════════════ 4 · PILLBAR (HRP rounded bar) ═══════════════════════
   Quiet editorial top-nav for the hrp-pill profile: PLAIN text links, muted slate
   at rest, full ink on hover (NO underline, NO chip — the bar itself is the chrome).
   Flyout is a soft hairline card with a quiet hover. Pairs with dropdownStyle
   "softpill". Modelled on GVTheme/landing-samples/hrp-package nav. */
[data-menu-style="pillbar"] .fenix-top-link {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: rgba(30, 41, 59, 0.62) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}
[data-menu-style="pillbar"] .fenix-top-link:hover,
[data-menu-style="pillbar"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #0f172a !important;
}
[data-menu-style="pillbar"] .fenix-top-icon { color: #64748b !important; }
[data-menu-style="pillbar"] .fenix-top-link:hover .fenix-top-icon,
[data-menu-style="pillbar"] .fenix-has-submenu:hover > .fenix-top-link .fenix-top-icon { color: #0f172a !important; }
[data-menu-style="pillbar"] .fenix-caret { color: #94a3b8; }
/* pillbar flyout — soft hairline card, neutral quiet hover (no pink tint) */
[data-menu-style="pillbar"] .fenix-submenu,
[data-menu-style="pillbar"] .fenix-subsubmenu {
    border-color: rgba(30, 41, 59, 0.10);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.05), 0 18px 40px -16px rgba(20, 20, 25, 0.28);
}
[data-menu-style="pillbar"] .fenix-submenu-item { border-radius: 10px; }
[data-menu-style="pillbar"] .fenix-submenu-item:hover { background: #f7f8fa !important; }
[data-menu-style="pillbar"] .fenix-submenu-item:hover .fenix-submenu-label { color: #0f172a; }

/* ── DROPDOWN-STYLE "softpill" — nav-flyout leading icons ───────────────────────
   The flyout-icon axis value tuned to the soft bar: a hairline soft-shadow tile
   (neutral, NOT pink) so the nav flyouts share the hrp-pill language. The avatar
   menu gets the matching treatment in fenix-header.css. */
[data-dd-style="softpill"] .fenix-submenu-icon {
    background: #fff;
    border: 1px solid rgba(30, 41, 59, 0.10);
    box-shadow: 0 1px 2px rgba(20, 20, 25, 0.05);
    color: #475569;
}
[data-dd-style="softpill"] .fenix-submenu-item:hover .fenix-submenu-icon {
    border-color: rgba(30, 41, 59, 0.24);
    box-shadow: 0 2px 8px rgba(20, 20, 25, 0.10);
    color: #1f2937;
}

/* Mobile: the equal-width row collapses to the stacked drawer, so reset the flex basis there
   (the drawer lays items out vertically). Typography themes still apply in the drawer. */
@media (max-width: 767px) {
    [data-menu-equal="true"] .fenix-top-menu > li {
        flex: none;
        min-width: 0;
        max-width: none;
        display: block;
    }
    [data-menu-equal="true"] .fenix-top-menu > li > .fenix-top-link {
        justify-content: flex-start;
    }
    /* underline indicators read oddly in a vertical list — suppress them on mobile. */
    [data-menu-style="architect"] .fenix-top-link::after,
    [data-menu-style="atelier"] .fenix-top-link::after,
    [data-menu-style="goldline"] .fenix-top-link::after { display: none; }
}

/* ─── goldline — Elevate Coaching nav style ─────────────────────────────────
   UPPERCASE spaced Mulish links at rest (espresso #6a6150), antique gold
   animated underline slides in on hover. Matches Coach2 handoff exactly.
   ─────────────────────────────────────────────────────────────────────────── */
[data-menu-style="goldline"] .fenix-top-link {
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #6a6150 !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
}
[data-menu-style="goldline"] .fenix-top-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: #b6a45a;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="goldline"] .fenix-top-link:hover,
[data-menu-style="goldline"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #b6a45a !important;
    background: transparent !important;
}
[data-menu-style="goldline"] .fenix-top-link:hover::after,
[data-menu-style="goldline"] .fenix-has-submenu:hover > .fenix-top-link::after {
    width: 100%;
}
[data-menu-style="goldline"] .fenix-top-icon { color: #6a6150 !important; }
[data-menu-style="goldline"] .fenix-top-link:hover .fenix-top-icon { color: #b6a45a !important; }
[data-menu-style="goldline"] .fenix-caret { color: #b6a45a; }
/* goldline flyout — warm cream card, uppercase items, warm hover with left-pad slide */
[data-menu-style="goldline"] .fenix-submenu,
[data-menu-style="goldline"] .fenix-subsubmenu {
    background: #fffdf8;
    border: 1px solid #ece4d4;
    box-shadow: 0 20px 44px rgba(74, 67, 56, 0.18);
    border-radius: 4px;
    padding: 10px;
    min-width: 248px;
}
[data-menu-style="goldline"] .fenix-submenu-item {
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #6a6150 !important;
    border-radius: 3px;
    padding: 12px 16px !important;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease !important;
}
[data-menu-style="goldline"] .fenix-submenu-label {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: #6a6150 !important;
}
[data-menu-style="goldline"] .fenix-submenu-item:hover {
    background: #f4efe3 !important;
    color: #5a5040 !important;
    padding-left: 22px !important;
}
[data-menu-style="goldline"] .fenix-submenu-item:hover .fenix-submenu-label {
    color: #5a5040 !important;
}


/* ─── harlow — Jost uppercase, sage animated underline ───────────────────── */
[data-menu-style="harlow"] .fenix-top-link {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: #3c3e3d !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
    font-family: 'Jost', sans-serif !important;
}
[data-menu-style="harlow"] .fenix-top-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: #6c97a8;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="harlow"] .fenix-top-link:hover,
[data-menu-style="harlow"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #6c97a8 !important;
    background: transparent !important;
}
[data-menu-style="harlow"] .fenix-top-link:hover::after,
[data-menu-style="harlow"] .fenix-has-submenu:hover > .fenix-top-link::after {
    width: 100%;
}
[data-menu-style="harlow"] .fenix-caret { color: #6c97a8; }

/* Flyout — white rounded card, sage hover */
[data-menu-style="harlow"] .fenix-submenu,
[data-menu-style="harlow"] .fenix-subsubmenu {
    background: #ffffff;
    border: 1px solid #ecebe4;
    box-shadow: 0 24px 60px -22px rgba(44,46,45,.42);
    border-radius: 16px;
    padding: 10px;
    min-width: 220px;
}
[data-menu-style="harlow"] .fenix-submenu-item {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: #3c3e3d !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    transition: background .22s ease, color .22s ease !important;
}
[data-menu-style="harlow"] .fenix-submenu-item:hover {
    background: #eef3f4 !important;
    color: #5d8898 !important;
}
[data-menu-style="harlow"] .fenix-submenu-label {
    font-weight: 400 !important;
    color: #3c3e3d !important;
    font-family: 'Jost', sans-serif !important;
    letter-spacing: 1.3px !important;
}

/* Active/current-page link: show underline at full width */
[data-menu-style="harlow"] .fenix-top-link.active,
[data-menu-style="harlow"] .fenix-top-link--active {
    color: #6c97a8 !important;
}
[data-menu-style="harlow"] .fenix-top-link.active::after,
[data-menu-style="harlow"] .fenix-top-link--active::after {
    width: 100%;
}

/* Mobile: hide underline on accordion */
@media (max-width: 767px) {
    [data-menu-style="harlow"] .fenix-top-link::after,
    [data-menu-style="harlow"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}

/* ─── jost-caps — East & Eversley nav style ─────────────────────────── */
[data-menu-style="jost-caps"] .fenix-top-link {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important; font-weight: 400 !important;
    letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #5A574F !important; padding: 4px 0 !important;
    border-radius: 0 !important; background: transparent !important;
    border: 0 !important; position: relative;
}
[data-menu-style="jost-caps"] .fenix-top-link::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    height: 1px; width: 0; background: #A9765A;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="jost-caps"] .fenix-top-link:hover,
[data-menu-style="jost-caps"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #43403A !important; background: transparent !important;
}
[data-menu-style="jost-caps"] .fenix-top-link:hover::after,
[data-menu-style="jost-caps"] .fenix-has-submenu:hover > .fenix-top-link::after { width: 100%; }

/* Flyout */
[data-menu-style="jost-caps"] .fenix-submenu,
[data-menu-style="jost-caps"] .fenix-subsubmenu {
    background: #FDFAF7; border: 1px solid #E5DFD5;
    box-shadow: 0 8px 24px -8px rgba(68,62,54,0.15);
    border-radius: 4px; padding: 6px 0; min-width: 200px;
}
[data-menu-style="jost-caps"] .fenix-submenu-item {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important; font-weight: 400 !important;
    letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #5A574F !important; padding: 10px 16px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
[data-menu-style="jost-caps"] .fenix-submenu-item:hover {
    background: #F4F0EA !important; color: #43403A !important;
}
[data-menu-style="jost-caps"] .fenix-submenu-label {
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important; color: #43403A !important;
    letter-spacing: 0.22em !important;
}

/* Active/current-page link */
[data-menu-style="jost-caps"] .fenix-top-link.active,
[data-menu-style="jost-caps"] .fenix-top-link--active {
    color: #A9765A !important;
}
[data-menu-style="jost-caps"] .fenix-top-link.active::after,
[data-menu-style="jost-caps"] .fenix-top-link--active::after { width: 100%; }

/* Mobile: hide underline on accordion */
@media (max-width: 767px) {
    [data-menu-style="jost-caps"] .fenix-top-link::after,
    [data-menu-style="jost-caps"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}

/* ─── axion — Growth Vision Axion nav style ─────────────────────────────── */
[data-menu-style="axion"] .fenix-top-link {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 15px !important; font-weight: 500 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: #45443c !important; padding: 4px 0 !important;
    border-radius: 0 !important; background: transparent !important;
    border: 0 !important; position: relative;
}
[data-menu-style="axion"] .fenix-top-link::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    height: 1.5px; width: 0; background: #17180f;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="axion"] .fenix-top-link:hover,
[data-menu-style="axion"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #17180f !important; background: transparent !important;
}
[data-menu-style="axion"] .fenix-top-link:hover::after,
[data-menu-style="axion"] .fenix-has-submenu:hover > .fenix-top-link::after { width: 100%; }

/* Flyout */
[data-menu-style="axion"] .fenix-submenu,
[data-menu-style="axion"] .fenix-subsubmenu {
    background: #fff; border: 1px solid #e4e2d8;
    box-shadow: 0 20px 44px rgba(23,24,15,.16);
    border-radius: 16px; padding: 8px; min-width: 220px;
}
[data-menu-style="axion"] .fenix-submenu-item {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important;
    color: #45443c !important; padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: background 0.16s ease, color 0.16s ease !important;
}
[data-menu-style="axion"] .fenix-submenu-item:hover {
    background: #f3f1e9 !important; color: #17180f !important;
}
[data-menu-style="axion"] .fenix-submenu-label {
    font-weight: 500 !important; color: #45443c !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

/* Active/current-page link */
[data-menu-style="axion"] .fenix-top-link.active,
[data-menu-style="axion"] .fenix-top-link--active {
    color: #17180f !important;
}
[data-menu-style="axion"] .fenix-top-link.active::after,
[data-menu-style="axion"] .fenix-top-link--active::after { width: 100%; }

/* Mobile: hide underline on accordion */
@media (max-width: 767px) {
    [data-menu-style="axion"] .fenix-top-link::after,
    [data-menu-style="axion"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Split-nav support (2026-07-03) — centre-logo layouts render TWO nav
   components with props.half = "first" / "second" (see FenixTopMenuViewComponent).
   • .fenix-nav-deskhide  — item exists in markup (so the mobile panel has the
     full menu) but is hidden on desktop; stamped on the "first" instance's
     overflow items.
   • .fenix-top-nav--half2 — the "second" instance: desktop-only, no hamburger;
     hidden entirely on mobile (the "first" instance's panel covers everything).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .fenix-top-menu > li.fenix-nav-deskhide { display: none; }
}
@media (max-width: 767px) {
    .fenix-top-nav--half2 { display: none; }
}

/* ─── gvhome — Growth Vision Home nav style ──────────────────────────────────
   Ported from "Growth Vision (standalone).html": Jost 11px, 0.22em caps in
   #5A574F; hover = terracotta #A9765A (no underline animation in the source —
   kept subtle 1px on hover for affordance); flyout = pure white card, #ECE6DC
   hairline, soft 38px drop shadow, items hover parchment + terracotta.        */
[data-menu-style="gvhome"] .fenix-top-link {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important; font-weight: 400 !important;
    letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #5A574F !important; padding: 4px 0 !important;
    border-radius: 0 !important; background: transparent !important;
    border: 0 !important; position: relative;
}
[data-menu-style="gvhome"] .fenix-top-link::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    height: 1px; width: 0; background: #A9765A;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="gvhome"] .fenix-top-link:hover,
[data-menu-style="gvhome"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #A9765A !important; background: transparent !important;
}
[data-menu-style="gvhome"] .fenix-top-link:hover::after,
[data-menu-style="gvhome"] .fenix-has-submenu:hover > .fenix-top-link::after { width: 100%; }

/* Caret rotates open on hover — matches the source's .gv-nav-caret. */
[data-menu-style="gvhome"] .fenix-caret { transition: transform 0.2s ease; }
[data-menu-style="gvhome"] .fenix-has-submenu:hover > .fenix-top-link .fenix-caret { transform: rotate(180deg); }

/* Flyout — white card, centred under the trigger in the source; keep default
   anchoring but carry the exact card chrome. */
[data-menu-style="gvhome"] .fenix-submenu,
[data-menu-style="gvhome"] .fenix-subsubmenu {
    background: #FFFFFF; border: 1px solid #ECE6DC;
    box-shadow: 0 14px 38px rgba(60, 55, 45, 0.16);
    border-radius: 4px; padding: 8px 0; min-width: 220px;
}
[data-menu-style="gvhome"] .fenix-submenu-item {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important; font-weight: 400 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: #5A574F !important; padding: 9px 20px !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
[data-menu-style="gvhome"] .fenix-submenu-item:hover {
    background: #F4F0EA !important; color: #A9765A !important;
}
[data-menu-style="gvhome"] .fenix-submenu-label {
    font-family: 'Jost', sans-serif !important;
    font-weight: 400 !important; color: #5A574F !important;
    letter-spacing: 0.1em !important;
}
[data-menu-style="gvhome"] .fenix-submenu-item:hover .fenix-submenu-label {
    color: #A9765A !important;
}

/* Active/current-page link */
[data-menu-style="gvhome"] .fenix-top-link.active,
[data-menu-style="gvhome"] .fenix-top-link--active {
    color: #A9765A !important;
}
[data-menu-style="gvhome"] .fenix-top-link.active::after,
[data-menu-style="gvhome"] .fenix-top-link--active::after { width: 100%; }

/* Mobile: no underline in the accordion panel */
@media (max-width: 767px) {
    [data-menu-style="gvhome"] .fenix-top-link::after,
    [data-menu-style="gvhome"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}

/* ─── coastal — Growth Vision Coastal nav style ──────────────────────────────
   Ported from "Growth Vision - Coastal Serif (standalone).html": Mulish 12px,
   1.5px caps in slate #3c5160; hover = slate #4f6a7d with an animated 1px
   underline; flyout = white card, #e4e1d8 hairline, 28px drop shadow, item
   TITLES set in Cormorant Garamond serif (#2c3b45) with a muted description,
   hover = cream #ecebe6.                                                       */
[data-menu-style="coastal"] .fenix-top-link {
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important; font-weight: 500 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    color: #3c5160 !important; padding: 4px 0 !important;
    border-radius: 0 !important; background: transparent !important;
    border: 0 !important; position: relative;
}
[data-menu-style="coastal"] .fenix-top-link::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    height: 1px; width: 0; background: #4f6a7d;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="coastal"] .fenix-top-link:hover,
[data-menu-style="coastal"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #4f6a7d !important; background: transparent !important;
}
[data-menu-style="coastal"] .fenix-top-link:hover::after,
[data-menu-style="coastal"] .fenix-has-submenu:hover > .fenix-top-link::after { width: 100%; }

/* Caret rotates open on hover */
[data-menu-style="coastal"] .fenix-caret { transition: transform 0.3s ease; }
[data-menu-style="coastal"] .fenix-has-submenu:hover > .fenix-top-link .fenix-caret { transform: rotate(180deg); }

/* Flyout — white card with serif item titles */
[data-menu-style="coastal"] .fenix-submenu,
[data-menu-style="coastal"] .fenix-subsubmenu {
    background: #ffffff; border: 1px solid #e4e1d8;
    box-shadow: 0 28px 52px -28px rgba(44, 59, 69, 0.5);
    border-radius: 4px; padding: 10px; min-width: 256px;
}
[data-menu-style="coastal"] .fenix-submenu-item {
    border-radius: 3px; padding: 11px 14px !important;
    transition: background 0.2s ease !important;
}
[data-menu-style="coastal"] .fenix-submenu-item:hover {
    background: #ecebe6 !important;
}
[data-menu-style="coastal"] .fenix-submenu-label {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 17px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: #2c3b45 !important; line-height: 1.2 !important;
}
[data-menu-style="coastal"] .fenix-submenu-sub,
[data-menu-style="coastal"] .fenix-submenu-item--rich .fenix-submenu-sub {
    font-family: 'Mulish', sans-serif !important;
    font-size: 11.5px !important; font-weight: 300 !important;
    color: #8b97a0 !important;
}

/* Active/current-page link */
[data-menu-style="coastal"] .fenix-top-link.active,
[data-menu-style="coastal"] .fenix-top-link--active { color: #4f6a7d !important; }
[data-menu-style="coastal"] .fenix-top-link.active::after,
[data-menu-style="coastal"] .fenix-top-link--active::after { width: 100%; }

/* Mobile: no underline in the accordion panel */
@media (max-width: 767px) {
    [data-menu-style="coastal"] .fenix-top-link::after,
    [data-menu-style="coastal"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}


/* ─── blush — Growth Vision Blush nav style ──────────────────────────────
   Ported from "Growth Vision - Blush Serif (standalone).html": Mulish 12px,
   1.5px caps in rose #94506a; hover = rose #b56b86 with an animated 1px
   underline; flyout = white card, #e4e1d8 hairline, 28px drop shadow, item
   TITLES set in Cormorant Garamond serif (#2c3b45) with a muted description,
   hover = blush #faeef1.                                                       */
[data-menu-style="blush"] .fenix-top-link {
    font-family: 'Mulish', sans-serif !important;
    font-size: 12px !important; font-weight: 500 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    color: #94506a !important; padding: 4px 0 !important;
    border-radius: 0 !important; background: transparent !important;
    border: 0 !important; position: relative;
}
[data-menu-style="blush"] .fenix-top-link::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    height: 1px; width: 0; background: #b56b86;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-menu-style="blush"] .fenix-top-link:hover,
[data-menu-style="blush"] .fenix-has-submenu:hover > .fenix-top-link {
    color: #b56b86 !important; background: transparent !important;
}
[data-menu-style="blush"] .fenix-top-link:hover::after,
[data-menu-style="blush"] .fenix-has-submenu:hover > .fenix-top-link::after { width: 100%; }

/* Caret rotates open on hover */
[data-menu-style="blush"] .fenix-caret { transition: transform 0.3s ease; }
[data-menu-style="blush"] .fenix-has-submenu:hover > .fenix-top-link .fenix-caret { transform: rotate(180deg); }

/* Flyout — white card with serif item titles */
[data-menu-style="blush"] .fenix-submenu,
[data-menu-style="blush"] .fenix-subsubmenu {
    background: #ffffff; border: 1px solid #f0dde4;
    box-shadow: 0 28px 52px -28px rgba(44, 59, 69, 0.5);
    border-radius: 4px; padding: 10px; min-width: 256px;
}
[data-menu-style="blush"] .fenix-submenu-item {
    border-radius: 3px; padding: 11px 14px !important;
    transition: background 0.2s ease !important;
}
[data-menu-style="blush"] .fenix-submenu-item:hover {
    background: #faeef1 !important;
}
[data-menu-style="blush"] .fenix-submenu-label {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 17px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: #3f2530 !important; line-height: 1.2 !important;
}
[data-menu-style="blush"] .fenix-submenu-sub,
[data-menu-style="blush"] .fenix-submenu-item--rich .fenix-submenu-sub {
    font-family: 'Mulish', sans-serif !important;
    font-size: 11.5px !important; font-weight: 300 !important;
    color: #ab8f99 !important;
}

/* Active/current-page link */
[data-menu-style="blush"] .fenix-top-link.active,
[data-menu-style="blush"] .fenix-top-link--active { color: #b56b86 !important; }
[data-menu-style="blush"] .fenix-top-link.active::after,
[data-menu-style="blush"] .fenix-top-link--active::after { width: 100%; }

/* Mobile: no underline in the accordion panel */
@media (max-width: 767px) {
    [data-menu-style="blush"] .fenix-top-link::after,
    [data-menu-style="blush"] .fenix-has-submenu:hover > .fenix-top-link::after { display: none; }
}

/* ── Lucide (inline-SVG) menu icons ─────────────────────────────────────────
   Menu icons are Lucide now: lucide.createIcons() swaps <i data-lucide> for an
   <svg>, keeping the fenix-top-icon / fenix-submenu-icon class. Size the <svg>
   to the glyph size the old font icons used. In the boxed dropdown styles the
   icon element can't also be a 38px chip (an <svg> has no room for a glyph
   inside it), so Lucide submenu icons render as plain line icons there. */
/* Icons sit inside the menu <a> — keep them pointer-transparent so clicks land
   on the link, never on the inline <svg>. */
svg.fenix-top-icon, svg.fenix-submenu-icon { pointer-events: none; }
svg.fenix-top-icon { width: 16px; height: 16px; }
svg.fenix-submenu-icon,
[data-dd-style] svg.fenix-submenu-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}