/* ----------------------------------------------------------------
    core.css
    Site-wide common styles loaded on every page.

    Layers:
      1. :root design tokens (brand colors + palette + fonts)
      2. .owf-container utility — fluid full-width with brand padding
      3. Topbar (#owf-top-bar) + premium content
      4. Language switcher
      5. Google Translate de-branding

    Design rules (project-wide):
      - Default site fonts are Jost (display) + Open Sans (body) +
        Nunito (accents). The "One World" font family is reserved for
        special, brand-statement use (logo wordmark, hero headlines)
        and is NOT used in chrome (topbar, menu, buttons, body copy).
      - Containers DO NOT use a max-width. Use .owf-container which
        is full-bleed and applies 28px gutters on desktop, 14px on
        mobile. Build new components against this rule.
-----------------------------------------------------------------*/

/* =============== 1. Tokens =============== */
:root {
    /* Brand */
    --owf-blue:           #0072be;
    --owf-blue-50:        #e6f1fa;
    --owf-blue-100:       #cce3f5;
    --owf-blue-200:       #99c7eb;
    --owf-blue-300:       #66abe1;
    --owf-blue-400:       #338fd7;
    --owf-blue-500:       #0072be;   /* base */
    --owf-blue-600:       #005c98;
    --owf-blue-700:       #004572;
    --owf-blue-800:       #002e4c;
    --owf-blue-900:       #001726;

    --owf-red:            #cc2930;
    --owf-red-50:         #fbe9ea;
    --owf-red-100:        #f6d4d6;
    --owf-red-200:        #eda9ad;
    --owf-red-300:        #e37e84;
    --owf-red-400:        #da535b;
    --owf-red-500:        #cc2930;   /* base */
    --owf-red-600:        #a32026;
    --owf-red-700:        #7a181d;
    --owf-red-800:        #521013;
    --owf-red-900:        #29080a;

    /* Neutrals */
    --owf-ink:            #0a1929;
    --owf-ink-700:        #1f2937;
    --owf-ink-500:        #4b5563;
    --owf-ink-400:        #6b7280;
    --owf-ink-300:        #9ca3af;
    --owf-ink-200:        #d1d5db;
    --owf-ink-100:        #e5e7eb;
    --owf-ink-50:         #f3f4f6;
    --owf-surface:        #ffffff;
    --owf-bg:             #f7fafc;

    /* Semantic aliases */
    --owf-color-primary:        var(--owf-blue-500);
    --owf-color-primary-dark:   var(--owf-blue-700);
    --owf-color-primary-soft:   var(--owf-blue-50);
    --owf-color-accent:         var(--owf-red-500);
    --owf-color-accent-dark:    var(--owf-red-700);
    --owf-color-text:           var(--owf-ink);
    --owf-color-muted:          var(--owf-ink-400);
    --owf-color-border:         var(--owf-ink-100);
    --owf-color-on-primary:     #ffffff;

    /* Default site fonts (theme-native).
       "One World Bold/Medium/Regular" are kept declared (in style.css)
       but are reserved for headline/wordmark use — DO NOT default to
       them for chrome. */
    --owf-font-display:   'Jost', system-ui, -apple-system, sans-serif;
    --owf-font-body:      'Open Sans', system-ui, -apple-system, sans-serif;
    --owf-font-ui:        'Jost', system-ui, -apple-system, sans-serif;
    --owf-font-accent:    'Nunito', system-ui, sans-serif;

    /* Layout */
    --owf-gutter:         28px;
    --owf-gutter-mobile:  14px;

    /* Effects */
    --owf-radius-sm:      6px;
    --owf-radius:         10px;
    --owf-radius-lg:      16px;
    --owf-shadow-sm:      0 1px 2px rgba(10, 25, 41, 0.06);
    --owf-shadow:         0 6px 18px -4px rgba(10, 25, 41, 0.12);
    --owf-shadow-lg:      0 18px 38px -12px rgba(10, 25, 41, 0.28);
    --owf-transition:     0.2s ease;

    /* Header menu eases — same curves zc.flowindata.in uses on its
       liquid-glass nav. The mega + dropdown swap absolute-anchored
       positioning for fixed/spring-eased motion using these tokens.
       --owf-ease         = primary opacity/color settle
       --owf-ease-out     = travel-out, decelerating long arc
       --owf-ease-spring  = transform settle (gentle overshoot) */
    --owf-ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --owf-ease-out:       cubic-bezier(0.16, 1.00, 0.30, 1.00);
    --owf-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============== 2. Container — full-bleed with brand gutters =============== */
.owf-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding-left: var(--owf-gutter);
    padding-right: var(--owf-gutter);
}
@media (max-width: 768px) {
    .owf-container {
        padding-left: var(--owf-gutter-mobile);
        padding-right: var(--owf-gutter-mobile);
    }
}

/* =============== 3. Topbar — id-scoped to beat theme #top-bar =============== */
#owf-top-bar.owf-topbar {
    background: var(--owf-color-primary) !important;
    color: var(--owf-color-on-primary);
    font-family: var(--owf-font-ui);
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    z-index: 1001;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    --cnvs-topbar-bg: var(--owf-color-primary);
    --cnvs-topbar-color: #ffffff;
    --cnvs-topbar-height: auto;
    --cnvs-topbar-border-size: 0;
    --cnvs-topbar-border-color: transparent;
}
#owf-top-bar a { color: #ffffff; text-decoration: none; transition: color var(--owf-transition); }
#owf-top-bar a:hover { color: #ffe27a; }

/* Force full-bleed even though theme's #top-bar may try to constrain */
#owf-top-bar > .owf-container,
#owf-top-bar > .container {
    max-width: none !important;
    width: 100%;
    padding-left: var(--owf-gutter);
    padding-right: var(--owf-gutter);
}

#owf-top-bar .owf-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    flex-wrap: nowrap;
}

/* ---- Left: contact / hours / trust ---- */
#owf-top-bar .owf-topbar-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
#owf-top-bar .owf-topbar-item,
#owf-top-bar .owf-topbar-trust,
#owf-top-bar .owf-topbar-static {
    display: inline-flex;
    align-items: center;
}
#owf-top-bar .owf-topbar-item a,
#owf-top-bar .owf-topbar-static,
#owf-top-bar .owf-topbar-trust {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #ffffff;
}
#owf-top-bar .owf-topbar-item i,
#owf-top-bar .owf-topbar-static i { font-size: 12px; opacity: 0.9; }
#owf-top-bar .owf-topbar-trust i { font-size: 13px; color: #ffe27a; }
#owf-top-bar .owf-topbar-trust { font-weight: 600; }

#owf-top-bar .owf-topbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.32);
    flex: 0 0 1px;
}

/* ---- Right: socials + CTA + language ---- */
#owf-top-bar .owf-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

#owf-top-bar .owf-topbar-social {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#owf-top-bar .owf-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 12px;
    transition: background-color var(--owf-transition), color var(--owf-transition), transform var(--owf-transition);
}
#owf-top-bar .owf-topbar-social a:hover {
    background: #ffffff;
    color: var(--owf-color-primary-dark);
    transform: translateY(-1px);
}
#owf-top-bar .owf-topbar-sep-vert {
    height: 18px;
    background: rgba(255,255,255,0.28);
}

/* CTA — accent red */
#owf-top-bar .owf-topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: var(--owf-color-accent);
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-family: var(--owf-font-ui);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(204, 41, 48, 0.45);
    transition: background-color var(--owf-transition), transform var(--owf-transition), box-shadow var(--owf-transition);
}
#owf-top-bar .owf-topbar-cta:hover,
#owf-top-bar .owf-topbar-cta:focus-visible {
    background: var(--owf-color-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(204, 41, 48, 0.55);
    outline: none;
}
#owf-top-bar .owf-topbar-cta i { font-size: 13px; }

/* =============== 4. Language switcher =============== */
#owf-top-bar .owf-lang { position: relative; flex: 0 0 auto; }
#owf-top-bar .owf-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    border-radius: 999px;
    font-family: var(--owf-font-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--owf-transition),
                border-color var(--owf-transition),
                color var(--owf-transition);
}
#owf-top-bar .owf-lang-trigger:hover,
#owf-top-bar .owf-lang-trigger:focus-visible {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.5);
    outline: none;
}
#owf-top-bar .owf-lang-trigger[aria-expanded="true"] {
    background: var(--owf-surface);
    color: var(--owf-color-primary-dark);
    border-color: var(--owf-surface);
}
.owf-lang-flag {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.owf-lang-label { font-size: 13px; letter-spacing: 0.3px; }
.owf-lang-caret { font-size: 11px; transition: transform var(--owf-transition); }
#owf-top-bar .owf-lang-trigger[aria-expanded="true"] .owf-lang-caret { transform: rotate(180deg); }

.owf-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--owf-surface);
    color: var(--owf-color-text);
    border-radius: var(--owf-radius);
    box-shadow: var(--owf-shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    border: 1px solid var(--owf-color-border);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--owf-transition), transform var(--owf-transition);
    z-index: 1080;
    font-family: var(--owf-font-body);
}
.owf-lang.is-open .owf-lang-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.owf-lang-menu::-webkit-scrollbar { width: 8px; }
.owf-lang-menu::-webkit-scrollbar-thumb {
    background: var(--owf-blue-200);
    border-radius: 999px;
}
.owf-lang-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.owf-lang-option:hover,
.owf-lang-option:focus-visible {
    background: var(--owf-color-primary-soft);
    color: var(--owf-color-primary-dark);
    outline: none;
}
.owf-lang-option .owf-lang-flag { font-size: 18px; }
.owf-lang-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1;
    min-width: 0;
}
.owf-lang-native {
    font-family: var(--owf-font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--owf-color-primary-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.owf-lang-en {
    font-size: 11.5px;
    color: var(--owf-color-muted);
    letter-spacing: 0.2px;
}
.owf-lang-check {
    color: var(--owf-color-primary);
    font-size: 16px;
    opacity: 0;
    flex-shrink: 0;
}
.owf-lang-option[aria-selected="true"] { background: var(--owf-color-primary-soft); }
.owf-lang-option[aria-selected="true"] .owf-lang-check { opacity: 1; }

/* =============== 5. Header — clean-room rebuild =============== */
/* All selectors here use the `owf-hdr-*` namespace. The vendor theme
   (style.css) has zero rules for these classes, so there is no
   override war and no FOUC. The header is fully self-contained:
   tokens come from :root above, layout/state from data attributes
   on #owf-header, behavior from /js/core.js. */

/* Site-wide horizontal-scroll guard. The mega menu is wider than narrow
   viewports if Bootstrap rows or other widgets ever overflow; this stops
   the page from picking up an x-scrollbar without affecting layout. */
html, body { overflow-x: clip; }

#owf-header.owf-hdr {
    position: sticky;        /* stays glued to top on scroll */
    top: 0;
    z-index: 1000;
    /* Explicit fixed height — the mega panel uses position: fixed +
       top: var(--owf-hdr-h), so the bottom edge of the header MUST be
       deterministic for the panel to land flush against it on every
       page (no min-height growth from font-swap or content reflow). */
    height: var(--owf-hdr-h);
    --owf-hdr-h:        56px;     /* row height */
    --owf-hdr-h-mobile: 60px;
    --owf-hdr-text:     var(--owf-color-text);
    --owf-hdr-link:     var(--owf-color-text);
    --owf-hdr-link-hover-bg: var(--owf-color-primary);
    --owf-hdr-link-hover-fg: #ffffff;
    --owf-hdr-bg:       var(--owf-surface);
    --owf-hdr-shadow:   0 6px 22px -10px rgba(2, 32, 71, 0.18);

    background: var(--owf-hdr-bg);
    box-shadow: var(--owf-hdr-shadow);
    transition: background-color 0.3s ease,
                box-shadow 0.3s ease,
                color 0.3s ease;
}

/* Transparent state — only on the home page (over the slider).
   Brand-blue text so it remains readable on the white slider. */
#owf-header.owf-hdr[data-owf-hdr-state="transparent"]:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
    --owf-hdr-link: var(--owf-color-primary-dark);
}

/* Scrolled state — added by core.js once page scrolls > 8px */
#owf-header.owf-hdr.is-scrolled {
    background: var(--owf-surface);
    box-shadow: var(--owf-hdr-shadow);
    --owf-hdr-link: var(--owf-color-text);
}

#owf-header.owf-hdr .owf-hdr-inner {
    /* `position: relative` makes the inner the containing block for
       the mega panel below (which is `position: absolute; top: 100%`).
       Why this matters: with a topbar above the sticky header, at the
       top-of-page state the header is pushed down 36px by the topbar.
       A `position: fixed` mega would ignore that and land inside the
       header chrome (overlapping the menu links). With `absolute`
       anchored to inner, the mega's top edge tracks wherever the
       header actually renders — same tracking behaviour as the
       dropdown — so it lines up under the menu in every scroll state. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}

/* ---- Logo ---- */
#owf-header .owf-hdr-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}
#owf-header .owf-hdr-logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

/* ---- Primary nav ----
   The nav element, list, and items all `height: 100%` so the nav-item
   spans the FULL header row (56px). Why this matters: the dropdown is
   `position: absolute; top: 100%` of the nav-item, so its top edge
   lands at the BOTTOM of the nav-item. With nav-items at full row
   height, that bottom = the header's bottom edge — exactly the same
   Y as the mega's `top: var(--owf-hdr-h)`. Without these heights, the
   nav-item would shrink to link-height (~36px), the dropdown would
   open above the header's bottom edge, and the dropdown + mega would
   land on visibly different Y axes (the issue the user flagged). */
#owf-header .owf-hdr-nav {
    flex: 0 1 auto;
    margin-left: auto;          /* push nav to the right of the logo */
    min-width: 0;
    height: 100%;
    align-self: stretch;        /* override inner's align-items: center */
}
#owf-header .owf-hdr-nav-list {
    display: flex;
    align-items: center;        /* link chip centers vertically inside */
    flex-wrap: nowrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}
#owf-header .owf-hdr-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 100%;
}
/* Invisible hover bridge — extends parent's :hover area into the
   gap between menu-link and dropdown/mega. 200% wide, generous height
   so the cursor never falls into a dead zone while traveling down to
   the panel. Pointer-events flips to auto only when the parent is
   already hovered, so the bridge never accidentally activates a
   non-hovered menu-item from below. */
#owf-header .owf-hdr-nav-item::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;             /* zc-spec hover bridge */
    height: 16px;
    pointer-events: none;
    z-index: 799;
}
#owf-header .owf-hdr-nav-item:hover::before { pointer-events: auto; }
#owf-header .owf-hdr-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.15px;
    line-height: 1.4;
    color: var(--owf-hdr-link);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.22s cubic-bezier(.2,.7,.2,1),
                color 0.22s cubic-bezier(.2,.7,.2,1);
}
#owf-header .owf-hdr-nav-link:hover,
#owf-header .owf-hdr-nav-item:hover > .owf-hdr-nav-link,
#owf-header .owf-hdr-nav-link:focus-visible {
    background: var(--owf-hdr-link-hover-bg);
    color: var(--owf-hdr-link-hover-fg);
    outline: none;
    /* Font-family + weight stay identical on hover so the chip never reflows */
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
    font-weight: 500;
}
#owf-header .owf-hdr-nav-caret {
    font-size: 11px;
    transition: transform var(--owf-transition);
}
#owf-header .owf-hdr-nav-item:hover > .owf-hdr-nav-link .owf-hdr-nav-caret {
    transform: rotate(180deg);
}

/* ---- Dropdown panel (standard, not mega) ----
   FIXED width across every menu-item so all dropdowns look identical
   regardless of copy length (text gets ellipsis-clamped). Centered
   under the parent menu-item. The 14px visible gap below the link is
   bridged by .owf-hdr-nav-item::before. Hover-only open; click never
   locks it (no :focus-within on the trigger). */
#owf-header .owf-hdr-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    margin-top: 14px;
    width: 324px;                       /* uniform, text-independent */
    max-width: calc(100vw - 32px);
    padding: 13px 10px 10px;
    /* Frosted-glass surface — premium depth over the hero or a solid
       inner-page header alike. Stays ~92% opaque so text never loses
       contrast; the blur+saturate is what reads as "expensive". */
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    color: var(--owf-color-text);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow:
        0 32px 70px -22px rgba(2, 32, 71, 0.34),
        0 12px 28px -16px rgba(2, 32, 71, 0.16),
        0 0 0 1px rgba(2, 32, 71, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Single transition for open AND close — same eases zc uses on
       .zc-hdr__drop. Eliminates the previous "fast close, slow open"
       asymmetry that snapped panels mid-traversal between menu items. */
    transition:
        opacity   0.32s var(--owf-ease),
        visibility 0.32s,
        transform 0.40s var(--owf-ease-spring),
        margin-top 0.32s var(--owf-ease);
    z-index: 1100;
}
/* Open on hover OR keyboard focus. Clicks are fully focus-suppressed on
   desktop (initSuppressMenuFocus preventDefaults mousedown), so :focus-within
   only fires when a keyboard user Tabs in — restoring keyboard access
   without reintroducing the old click-traps-open bug. */
#owf-header .owf-hdr-nav-item.owf-has-dropdown:hover > .owf-hdr-dropdown,
#owf-header .owf-hdr-nav-item.owf-has-dropdown:focus-within > .owf-hdr-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    margin-top: 0;
    pointer-events: auto;
}
/* Thin solid brand line along the top edge — a quiet signature detail. */
#owf-header .owf-hdr-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--owf-color-primary);
}
#owf-header .owf-hdr-dropdown-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    font-family: var(--owf-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--owf-color-accent);
}
#owf-header .owf-hdr-dropdown-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--owf-color-border), transparent);
}
#owf-header .owf-hdr-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#owf-header .owf-hdr-dropdown-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 12px 10px 13px;
    border-radius: 12px;
    color: var(--owf-color-text);
    text-decoration: none;
    transition:
        background-color 0.22s var(--owf-ease),
        transform 0.28s var(--owf-ease-out),
        color 0.22s var(--owf-ease);
}
/* Animated left accent bar — grows from the centre on hover. Reads far
   more "premium product" than a flat saturated row-fill. */
#owf-header .owf-hdr-dropdown-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--owf-color-primary);
    transform: translateY(-50%);
    transition: height 0.28s var(--owf-ease-out);
}
#owf-header .owf-hdr-dropdown-item:hover {
    background: rgba(10, 25, 41, 0.045);
    transform: translateX(4px);
}
#owf-header .owf-hdr-dropdown-item:hover::before { height: 58%; }
#owf-header .owf-hdr-dropdown-item:hover .owf-hdr-dropdown-title {
    color: var(--owf-color-primary-dark);
}
/* No tile — just the glyph. Resting muted, lights up to brand on hover. */
#owf-header .owf-hdr-dropdown-ic {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--owf-color-muted);
    transition: color var(--owf-transition);
}
#owf-header .owf-hdr-dropdown-ic i { font-size: 18px; line-height: 1; transition: transform 0.28s var(--owf-ease-spring); }
#owf-header .owf-hdr-dropdown-item:hover .owf-hdr-dropdown-ic {
    color: var(--owf-color-primary);
}
#owf-header .owf-hdr-dropdown-item:hover .owf-hdr-dropdown-ic i { transform: scale(1.1); }
#owf-header .owf-hdr-dropdown-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}
#owf-header .owf-hdr-dropdown-title {
    font-family: var(--owf-font-ui);
    font-weight: 600;
    font-size: 13.5px;
    color: inherit;
}
/* Full description — wraps to as many lines as the text needs. */
#owf-header .owf-hdr-dropdown-desc {
    display: block;
    overflow: visible;
    white-space: normal;
    font-family: var(--owf-font-body);
    font-size: 11.75px;
    line-height: 1.45;
    color: var(--owf-color-muted);
    margin-top: 2px;
}
#owf-header .owf-hdr-dropdown-item:hover .owf-hdr-dropdown-desc {
    color: var(--owf-ink-500);
}

/* ---- Mega menu ----
   `position: absolute` anchored to .owf-hdr-inner (the sticky header's
   inner row). The trigger menu-item gets `position: static` here so
   the absolute mega skips it and resolves its containing block to
   .owf-hdr-inner — letting the panel span the FULL header width and
   land flush against the row's bottom edge regardless of which
   menu-item is hovered. Critically, this tracks the header's actual
   rendered Y position: with a topbar pushing the sticky header down
   at the top-of-page, the mega follows; once the page scrolls and the
   header pins to top: 0, the mega follows that too. (Earlier we tried
   `position: fixed; top: var(--owf-hdr-h)` — that landed the panel at
   a fixed 56px from the viewport, which overlapped the header chrome
   while the topbar was still on screen.) Same tracking model as the
   dropdown, so both panels share an identical Y in every state. */
#owf-header .owf-hdr-nav-item.owf-has-mega { position: static; }
#owf-header .owf-hdr-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    /* Single transition for open AND close — same eases zc uses on
       its mega; the gentle overshoot on transform makes the panel
       feel like it "settles" rather than "snaps" into place. */
    transition:
        opacity   0.36s var(--owf-ease),
        visibility 0.36s,
        transform 0.42s var(--owf-ease-spring);
    z-index: 1100;
}
#owf-header .owf-has-mega:hover > .owf-hdr-mega,
#owf-header .owf-has-mega:focus-within > .owf-hdr-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
/* The actual visible card — auto-centered inside the full-width mega
   container. Margin: 0 auto matches the standard dropdown's "touching
   the trigger" behavior. The slide-up animation lives on the OUTER
   .owf-hdr-mega's translateY, not here, so the panel sits flush at
   the trigger's bottom edge in its final state — same as the dropdown. */
#owf-header .owf-hdr-mega-grid {
    position: relative;
    display: grid;
    grid-template-columns: 296px 1fr;
    min-height: 460px;
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow:
        0 40px 90px -28px rgba(2, 32, 71, 0.40),
        0 16px 36px -20px rgba(2, 32, 71, 0.18),
        0 0 0 1px rgba(2, 32, 71, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
/* Thin solid brand line across the full top edge of the panel. */
#owf-header .owf-hdr-mega-grid::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--owf-color-primary);
    z-index: 2;
}

/* Mega LEFT rail */
#owf-header .owf-hdr-mega-side {
    background: linear-gradient(180deg, var(--owf-color-primary-soft) 0%, #ffffff 90%);
    padding: 22px 16px 16px;
    border-right: 1px solid var(--owf-color-border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#owf-header .owf-hdr-mega-side-head { padding: 0 6px 4px; border-bottom: 1px solid rgba(0, 114, 190, 0.12); }
#owf-header .owf-hdr-mega-eyebrow {
    display: block;
    font-family: var(--owf-font-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--owf-color-accent);
    font-weight: 700;
    margin-bottom: 6px;
}
#owf-header .owf-hdr-mega-title {
    font-family: var(--owf-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: var(--owf-color-primary-dark);
    margin: 0 0 6px;
}
#owf-header .owf-hdr-mega-sub {
    font-family: var(--owf-font-body);
    font-size: 12px;
    color: var(--owf-color-muted);
    margin: 0 0 8px;
    line-height: 1.4;
}
#owf-header .owf-hdr-mega-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}
#owf-header .owf-hdr-mega-tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--owf-radius);
    color: var(--owf-color-text);
    font-family: var(--owf-font-ui);
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.22s var(--owf-ease),
        color 0.22s var(--owf-ease),
        transform 0.28s var(--owf-ease-out),
        box-shadow 0.28s var(--owf-ease);
}
#owf-header .owf-hdr-mega-tab-ic {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 41, 0.05);
    color: var(--owf-color-primary);
    font-size: 15px;
    transition: background-color var(--owf-transition), color var(--owf-transition);
}
#owf-header .owf-hdr-mega-tab-name {
    flex: 1;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
#owf-header .owf-hdr-mega-tab-arrow {
    font-size: 14px;
    color: var(--owf-color-muted);
    transition: transform var(--owf-transition), color var(--owf-transition);
}
#owf-header .owf-hdr-mega-tab:hover {
    background: rgba(10, 25, 41, 0.05);
    color: var(--owf-color-primary-dark);
}
#owf-header .owf-hdr-mega-tab:hover .owf-hdr-mega-tab-arrow {
    transform: translateX(2px);
    color: var(--owf-color-primary);
}
#owf-header .owf-hdr-mega-tab.is-active {
    background: var(--owf-color-primary);
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: 0 8px 18px -8px rgba(10, 25, 41, 0.30);
}
#owf-header .owf-hdr-mega-tab.is-active .owf-hdr-mega-tab-ic {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
#owf-header .owf-hdr-mega-tab.is-active .owf-hdr-mega-tab-arrow {
    color: #ffffff;
    transform: translateX(2px);
}
#owf-header .owf-hdr-mega-side-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--owf-blue-200);
    color: var(--owf-color-primary-dark);
    border-radius: var(--owf-radius);
    font-family: var(--owf-font-ui);
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    transition: background-color var(--owf-transition), color var(--owf-transition);
}
#owf-header .owf-hdr-mega-side-cta:hover {
    background: var(--owf-color-primary);
    color: #ffffff;
    border-color: var(--owf-color-primary);
}

/* Mega RIGHT panels */
#owf-header .owf-hdr-mega-main {
    padding: 22px 24px;
    overflow-y: auto;
}
#owf-header .owf-hdr-mega-panel { display: none; flex-direction: column; gap: 14px; height: 100%; }
#owf-header .owf-hdr-mega-panel.is-active {
    display: flex;
    animation: owfFadeIn 0.18s ease-out;
}
@keyframes owfFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#owf-header .owf-hdr-mega-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--owf-color-border);
}
#owf-header .owf-hdr-mega-panel-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(10, 25, 41, 0.05);
    border: 1px solid var(--owf-color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#owf-header .owf-hdr-mega-panel-icon i { font-size: 26px; color: var(--owf-color-primary); }
#owf-header .owf-hdr-mega-panel-title {
    font-family: var(--owf-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--owf-color-primary-dark);
    margin: 0 0 2px;
    line-height: 1.2;
}
#owf-header .owf-hdr-mega-panel-blurb {
    font-family: var(--owf-font-body);
    font-size: 12.5px;
    color: var(--owf-color-muted);
    margin: 0;
    line-height: 1.4;
}
#owf-header .owf-hdr-mega-panel-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 22px;
    flex: 1 1 auto;
    align-content: start;
}
#owf-header .owf-hdr-mega-sub { display: flex; flex-direction: column; gap: 4px; }
#owf-header .owf-hdr-mega-sub-name {
    font-family: var(--owf-font-ui);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--owf-color-accent);
    margin: 0 0 4px;
}
#owf-header .owf-hdr-mega-svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
#owf-header .owf-hdr-mega-svc {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: var(--owf-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--owf-color-text);
    text-decoration: none;
    transition:
        background-color 0.2s var(--owf-ease),
        color 0.2s var(--owf-ease),
        transform 0.26s var(--owf-ease-out);
}
#owf-header .owf-hdr-mega-svc i {
    color: var(--owf-color-primary);
    opacity: 0.55;
    font-size: 16px;
    transition: color 0.2s var(--owf-ease), opacity 0.2s var(--owf-ease), transform 0.26s var(--owf-ease-out);
}
#owf-header .owf-hdr-mega-svc:hover {
    background: rgba(10, 25, 41, 0.05);
    color: var(--owf-color-primary-dark);
    transform: translateX(3px);
}
#owf-header .owf-hdr-mega-svc:hover i {
    color: var(--owf-color-primary);
    opacity: 1;
    transform: translateX(2px);
}
#owf-header .owf-hdr-mega-panel-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--owf-color-border);
    display: flex;
    justify-content: flex-end;
}
#owf-header .owf-hdr-mega-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--owf-color-primary);
    color: #ffffff;
    border-radius: 999px;
    font-family: var(--owf-font-ui);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background-color var(--owf-transition), transform var(--owf-transition);
}
#owf-header .owf-hdr-mega-panel-cta:hover {
    background: var(--owf-color-primary-dark);
    transform: translateX(2px);
}
#owf-header .owf-hdr-mega-panel-cta i { font-size: 13px; }

/* DB-backed category icon, brand-blue tinted via CSS filter */
#owf-header .owf-cat-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(33%) sepia(82%)
            saturate(2476%) hue-rotate(189deg) brightness(95%) contrast(101%);
    transition: filter var(--owf-transition), transform var(--owf-transition);
}
#owf-header .owf-cat-img--lg { width: 36px; height: 36px; }
#owf-header .owf-hdr-mega-tab:hover .owf-cat-img,
#owf-header .owf-hdr-mega-tab.is-active .owf-cat-img {
    filter: brightness(0) invert(1);
}
#owf-header .owf-hdr-mega-tab:hover .owf-cat-img { transform: scale(1.06); }

/* ---- Resources columns mega (non-tabbed) ----
   Reuses .owf-hdr-dropdown-list / -item rows inside a centred frosted
   card. No left rail, no JS — pure CSS hover like the simple dropdowns. */
#owf-header .owf-hdr-mega-cols {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 0 24px;
    /* The nav item sets white-space:nowrap to keep top-level labels on one
       line; it inherits down here and would stop the feature-card text from
       wrapping (overflowing the card). Reset it for all mega content. */
    white-space: normal;
    width: min(1000px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow:
        0 40px 90px -28px rgba(2, 32, 71, 0.40),
        0 16px 36px -20px rgba(2, 32, 71, 0.18),
        0 0 0 1px rgba(2, 32, 71, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
#owf-header .owf-hdr-mega-cols::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--owf-color-primary);
}
#owf-header .owf-hdr-mcol { display: flex; flex-direction: column; min-width: 0; }
#owf-header .owf-hdr-mcol-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 8px;
    font-family: var(--owf-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--owf-color-accent);
}
#owf-header .owf-hdr-mcol-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--owf-color-border);
}
/* Title + "Soon" pill on one line inside a tool row */
#owf-header .owf-hdr-dropdown-titlerow { display: flex; align-items: center; }
#owf-header .owf-hdr-soon {
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--owf-ink-50);
    border: 1px solid var(--owf-color-border);
    font-family: var(--owf-font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--owf-color-muted);
}
/* A tool that isn't live yet — no hover travel, default cursor. */
#owf-header .owf-hdr-dropdown-item.is-soon { cursor: default; }
#owf-header .owf-hdr-dropdown-item.is-soon:hover { transform: none; background: transparent; }
#owf-header .owf-hdr-dropdown-item.is-soon:hover::before { height: 0; }
#owf-header .owf-hdr-dropdown-item.is-soon:hover .owf-hdr-dropdown-ic { color: var(--owf-color-muted); }
#owf-header .owf-hdr-dropdown-item.is-soon:hover .owf-hdr-dropdown-title { color: var(--owf-color-text); }

/* Right-hand feature card — premium dark "concierge" panel. Deep navy
   with white text and a white CTA button; content is vertically centred
   so the card always reads as a deliberate, balanced block. min-width:0
   lets long words wrap instead of pushing past the card edge. */
#owf-header .owf-hdr-mega-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    padding: 24px 22px;
    border-radius: 16px;
    background: var(--owf-ink);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#owf-header .owf-hdr-mega-feature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 2px;
}
#owf-header .owf-hdr-mega-feature-eyebrow {
    font-family: var(--owf-font-ui);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--owf-blue-300);
}
#owf-header .owf-hdr-mega-feature-title {
    font-family: var(--owf-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
}
#owf-header .owf-hdr-mega-feature-desc {
    font-family: var(--owf-font-body);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
    overflow-wrap: break-word;
}
#owf-header .owf-hdr-mega-feature-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 16px;
    background: #ffffff;
    color: var(--owf-ink);
    border: 0;
    border-radius: 11px;
    font-family: var(--owf-font-ui);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--owf-transition), transform var(--owf-transition);
}
#owf-header .owf-hdr-mega-feature-cta i { font-size: 14px; color: var(--owf-color-primary); }
#owf-header .owf-hdr-mega-feature-cta:hover {
    background: var(--owf-blue-50);
    transform: translateY(-1px);
}
#owf-header .owf-hdr-mega-feature-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    font-family: var(--owf-font-ui);
    font-weight: 600;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--owf-transition);
}
#owf-header .owf-hdr-mega-feature-call i { font-size: 12px; color: var(--owf-blue-300); }
#owf-header .owf-hdr-mega-feature-call:hover { color: #ffffff; }

/* ---- Accessibility (skill: WCAG — keyboard focus + reduced motion) ----
   Visible brand focus rings for keyboard users on every interactive
   element in the header. :focus-visible so mouse users never see them. */
#owf-header .owf-hdr-nav-link:focus-visible,
#owf-header .owf-hdr-dropdown-item:focus-visible,
#owf-header .owf-hdr-mega-tab:focus-visible,
#owf-header .owf-hdr-mega-svc:focus-visible,
#owf-header .owf-hdr-mega-side-cta:focus-visible,
#owf-header .owf-hdr-mega-panel-cta:focus-visible,
#owf-header .owf-hdr-mega-feature-cta:focus-visible,
#owf-header .owf-hdr-mega-feature-call:focus-visible,
#owf-header .owf-hdr-cta:focus-visible,
#owf-header .owf-hdr-burger:focus-visible {
    outline: 3px solid var(--owf-blue-300);
    outline-offset: 2px;
}

/* ---- Right cluster ---- */
#owf-header .owf-hdr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
#owf-header .owf-hdr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;          /* taller pill — more thumb-friendly */
    background: linear-gradient(135deg,
        rgba(0, 114, 190, 0.85) 0%,
        rgba(0, 92, 152, 0.78) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;         /* soft-squared corners per design ask */
    font-family: var(--owf-font-ui);
    font-weight: 700;
    font-size: 12.75px;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        0 8px 22px -8px rgba(0, 114, 190, 0.55);
    transition: background var(--owf-transition), transform var(--owf-transition),
                box-shadow var(--owf-transition), border-color var(--owf-transition);
}
#owf-header .owf-hdr-cta {
    -webkit-tap-highlight-color: transparent;
}
#owf-header .owf-hdr-cta:hover,
#owf-header .owf-hdr-cta:focus-visible {
    background: linear-gradient(135deg,
        rgba(0, 114, 190, 0.95) 0%,
        rgba(0, 69, 114, 0.92) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 12px 28px -8px rgba(0, 114, 190, 0.65);
    outline: none;
}
#owf-header .owf-hdr-cta:active {
    transform: scale(0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px -4px rgba(0, 114, 190, 0.45);
}
#owf-header .owf-hdr-cta i { font-size: 14px; }

/* ---- Burger (hidden on desktop, visible on mobile) ----
   Layout is two stacked rows inside the button:
       ::before  → bootstrap-icon glyph (bi-justify-right or bi-x-lg)
       ::after   → small uppercase "Menu" / "Close" caption
   The original three <span> bars stay in markup (so the JS toggle
   keeps working unchanged) but are hidden via `display: none` — CSS
   owns the visible icon + label. */
#owf-header .owf-hdr-burger {
    display: none;        /* desktop hidden — shown via @media below */
    width: auto;
    min-width: 44px;
    height: auto;
    padding: 4px 8px 5px;
    border: 0;
    background: transparent;
    color: var(--owf-color-primary-dark);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--owf-transition), transform 0.12s ease;
}
#owf-header .owf-hdr-burger:hover { background: rgba(0, 114, 190, 0.10); }
#owf-header .owf-hdr-burger:active { transform: scale(0.94); }
#owf-header .owf-hdr-burger-bar { display: none; }
#owf-header .owf-hdr-burger::before {
    font-family: bootstrap-icons;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f44a";              /* bi-justify-right */
    font-size: 24px;
    color: currentColor;
    transition:
        transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.18s ease;
}
#owf-header .owf-hdr-burger::after {
    content: "Menu";
    font-family: var(--owf-font-ui);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    color: currentColor;
    transition: opacity 0.18s ease;
}
#owf-header.is-mobile-open .owf-hdr-burger::before {
    content: "\f659";              /* bi-x-lg */
    font-size: 22px;
    transform: rotate(90deg);      /* tiny twirl on swap, native feel */
}
#owf-header.is-mobile-open .owf-hdr-burger::after {
    content: "Close";
}

/* ---- Mid-desktop tightening ----
   Per design ask the CTA label stays visible at every viewport, so
   the old circle-collapse (icon-only, border-radius: 50%) is gone.
   Just trim the pill a touch so it fits next to the compressed nav. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #owf-header .owf-hdr-cta {
        padding: 11px 14px;
        font-size: 11.5px;
        gap: 6px;
    }
    #owf-header .owf-hdr-cta i { font-size: 13px; }
    #owf-header .owf-hdr-nav-link { padding: 6px 9px; font-size: 13.5px; }
    /* The OUTER mega panel stays full-width (absolute, left:0/right:0).
       Only the visible card — .owf-hdr-mega-grid — gets shrunk for
       mid-desktop, then auto-centers via margin: 0 auto. */
    #owf-header .owf-hdr-mega-grid {
        grid-template-columns: 240px 1fr;
        width: min(960px, calc(100vw - 40px));
    }
}

/* ---- Backdrop ---- */
#owf-header .owf-hdr-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 32, 71, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 1090;
}
#owf-header.is-mobile-open .owf-hdr-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

/* ---- Drawer-only chrome ---- */
/* Hidden on desktop, revealed inside the drawer on mobile. */
#owf-header .owf-hdr-drawer-brand,
#owf-header .owf-hdr-drawer-stats,
#owf-header .owf-hdr-drawer-divider,
#owf-header .owf-hdr-drawer-contact,
#owf-header .owf-hdr-drawer-socials {
    display: none;
}

/* ===================== Tablet & mobile (≤991px) ===================== */
@media (max-width: 991.98px) {
    /* CRITICAL — let sticky work on mobile.
       /custom/css/style.css sets `#wrapper { overflow-x: hidden }`
       inside @media (max-width: 768px). `overflow-x: hidden` on an
       ancestor of a `position: sticky` element makes that ancestor
       the sticky's scroll-containing block, which silently kills the
       stickiness because the page scrolls on <body>, not on #wrapper.
       `overflow-x: clip` clips the same horizontal overflow WITHOUT
       establishing a scroll context, so the sticky resolves against
       the viewport again. We override at all mobile widths so the fix
       holds even if the legacy rule's breakpoint is changed later. */
    #wrapper { overflow-x: clip !important; }

    /* The mobile header keeps `position: sticky` (inherited from
       desktop) and adds a soft layered shadow so it floats above the
       page like a native-app navbar — the second blue-tinted layer is
       what gives the 3D feel without being heavy. */
    #owf-header.owf-hdr {
        --owf-hdr-h: var(--owf-hdr-h-mobile);
        background: var(--owf-surface) !important;
        box-shadow:
            0 1px 0 rgba(0, 114, 190, 0.08),
            0 8px 22px -8px rgba(0, 49, 91, 0.18),
            0 2px 6px -2px rgba(2, 32, 71, 0.10);
    }
    #owf-header.owf-hdr.is-scrolled {
        box-shadow:
            0 1px 0 rgba(0, 114, 190, 0.12),
            0 14px 32px -12px rgba(0, 49, 91, 0.28),
            0 4px 10px -4px rgba(2, 32, 71, 0.14);
    }
    #owf-header.owf-hdr .owf-hdr-inner { min-height: var(--owf-hdr-h-mobile); }
    /* Logo: shrunk a touch from 32 → 28px so the CTA label has room
       to breathe alongside the icon without the row feeling crowded. */
    #owf-header .owf-hdr-logo img { max-height: 28px; }

    /* Order: logo → CTA → burger */
    #owf-header .owf-hdr-logo    { order: 1; flex: 0 0 auto; }
    #owf-header .owf-hdr-actions { order: 2; margin-left: auto; gap: 8px; }
    #owf-header .owf-hdr-burger  { display: inline-flex; order: 3; }
    #owf-header .owf-hdr-nav     { order: 99; margin-left: 0; }

    /* CTA: keep BOTH the spark icon AND the "Begin Your Journey" label
       visible on mobile (was hiding text + collapsing to a circle on
       small phones). Smaller font so it sits comfortably next to the
       burger without wrapping. */
    /* CTA palette flips to brand RED on mobile per design ask
       (desktop stays blue). All blue tints in the base rule —
       background gradient, border, drop shadow, hover/active
       states — are re-stated here with the brand red. */
    #owf-header .owf-hdr-cta {
        padding: 11px 13px;
        font-size: 11px;
        gap: 6px;
        letter-spacing: 0.2px;
        white-space: nowrap;
        background: linear-gradient(135deg,
            rgba(204, 41, 48, 0.92) 0%,
            rgba(163, 32, 38, 0.92) 100%);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            inset 0 -1px 0 rgba(0, 0, 0, 0.05),
            0 8px 22px -8px rgba(204, 41, 48, 0.55);
    }
    #owf-header .owf-hdr-cta:hover,
    #owf-header .owf-hdr-cta:focus-visible {
        background: linear-gradient(135deg,
            var(--owf-red-500) 0%,
            var(--owf-red-700) 100%);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 12px 28px -8px rgba(204, 41, 48, 0.65);
    }
    #owf-header .owf-hdr-cta:active {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            0 4px 12px -4px rgba(204, 41, 48, 0.50);
    }
    #owf-header .owf-hdr-cta i { font-size: 12px; }
    #owf-header .owf-hdr-cta span { display: inline-flex; }

    /* ---- Off-canvas drawer (native-app feel) ----
       gg-style architecture: the drawer is a flex column whose top
       (brand) and bottom (Quick Reach + contact + Follow Us +
       socials) blocks are `flex-shrink: 0`, while the middle block
       (.owf-hdr-nav-list) takes `flex: 1 1 0` AND owns the scroll.
       The drawer itself has `overflow: hidden` so a long menu can't
       drag the bottom block out of view — the bottom is genuinely
       fixed inside the drawer regardless of menu length. */
    #owf-header .owf-hdr-nav {
        position: fixed;
        top: 0; right: 0;
        width: min(88vw, 400px);
        height: 100vh;             /* fallback for browsers w/o dvh */
        height: 100dvh;
        background: linear-gradient(180deg, #ffffff 0%, var(--owf-color-primary-soft) 100%);
        border-left: 1px solid var(--owf-color-border);
        box-shadow: -16px 0 40px -10px rgba(2, 32, 71, 0.18);
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        transform: translate3d(100%, 0, 0);
        transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1095;
        overflow: hidden;          /* nav-list owns the scroll, not drawer */
        will-change: transform;
    }
    #owf-header.is-mobile-open .owf-hdr-nav { transform: translate3d(0, 0, 0); }

    /* ----- Drawer brand row (sticky inside the drawer) ----- */
    #owf-header .owf-hdr-drawer-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: sticky;
        top: 0;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--owf-color-border);
        z-index: 2;
    }
    #owf-header .owf-hdr-drawer-brand-link img {
        max-height: 30px;
        width: auto;
        display: block;
    }
    #owf-header .owf-hdr-drawer-close {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--owf-color-border);
        background: #ffffff;
        color: var(--owf-color-primary-dark);
        border-radius: 999px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.32s var(--owf-ease-spring);
    }
    #owf-header .owf-hdr-drawer-close:active {
        background: var(--owf-color-primary);
        color: #fff;
        transform: rotate(90deg) scale(0.92);
    }

    /* ----- Drawer stats grid ----- */
    #owf-header .owf-hdr-drawer-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 14px 16px;
        background: linear-gradient(180deg, var(--owf-color-primary-soft) 0%, transparent 100%);
    }
    #owf-header .owf-hdr-drawer-stat {
        text-align: center;
        padding: 8px 4px;
        border-radius: var(--owf-radius);
        background: #ffffff;
        border: 1px solid var(--owf-color-border);
        box-shadow: 0 2px 6px -2px rgba(2, 32, 71, 0.08);
    }
    #owf-header .owf-hdr-drawer-stat-n {
        font-family: var(--owf-font-display);
        font-weight: 700;
        font-size: 16px;
        color: var(--owf-color-primary);
        line-height: 1.1;
    }
    #owf-header .owf-hdr-drawer-stat-l {
        font-family: var(--owf-font-body);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--owf-color-muted);
        margin-top: 2px;
    }

    /* ----- Drawer section divider ----- */
    #owf-header .owf-hdr-drawer-divider {
        display: block;
        padding: 14px 18px 6px;
        font-family: var(--owf-font-ui);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        color: var(--owf-color-accent);
    }

    /* ----- Drawer contact rows ----- */
    /* ===== Quick Reach — premium icon-only card row ===============
       Three perfect squares share the row evenly via `1fr 1fr 1fr`.
       Each card uses a soft layered-gradient surface, a hairline
       brand-blue border, and a layered shadow stack:
         · inner-top highlight  → glassy sheen
         · inner-bottom shadow  → physical depth
         · outer drop shadow    → floats above the bottom-sheet
       Tap → solid brand-blue with a stronger floating shadow + icon
       press-down spring, all white. The text spans (label + value)
       stay in markup but `display: none` here — icons read clearly on
       their own in a 3-up grid, and the row stays uncluttered. */
    #owf-header .owf-hdr-drawer-contact {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        padding: 6px 12px 10px;
    }
    #owf-header .owf-hdr-drawer-contact-row {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 12px 6px 11px;
        min-width: 0;
        overflow: hidden;
        background:
            linear-gradient(160deg,
                #ffffff 0%,
                rgba(0, 114, 190, 0.06) 100%);
        border: 1px solid rgba(0, 114, 190, 0.14);
        border-radius: 16px;
        text-decoration: none;
        color: var(--owf-color-primary-dark);
        -webkit-tap-highlight-color: transparent;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(0, 49, 91, 0.04),
            0 4px 10px -4px rgba(0, 114, 190, 0.18),
            0 1px 2px rgba(2, 32, 71, 0.04);
        transition:
            background 0.22s ease,
            border-color 0.22s ease,
            color 0.22s ease,
            transform 0.14s ease,
            box-shadow 0.22s ease;
    }
    /* Subtle accent dot at top-right — adds a "premium" detail touch. */
    #owf-header .owf-hdr-drawer-contact-row::after {
        content: "";
        position: absolute;
        top: 9px;
        right: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--owf-color-accent);
        opacity: 0.22;
        transition: opacity 0.22s ease, background 0.22s ease;
    }
    #owf-header .owf-hdr-drawer-contact-row:active {
        background:
            linear-gradient(160deg,
                var(--owf-color-primary) 0%,
                var(--owf-color-primary-dark) 100%);
        border-color: var(--owf-color-primary-dark);
        color: #ffffff;
        transform: scale(0.95);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            0 10px 22px -8px rgba(0, 114, 190, 0.55),
            0 2px 6px rgba(2, 32, 71, 0.10);
    }
    #owf-header .owf-hdr-drawer-contact-row:active::after {
        opacity: 1;
        background: rgba(255, 255, 255, 0.85);
    }

    /* ----- Icon chip — bootstrap-icons in a brand-blue rounded-square */
    #owf-header .owf-hdr-drawer-contact-ic {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background:
            linear-gradient(135deg,
                var(--owf-color-primary) 0%,
                var(--owf-color-primary-dark) 100%);
        color: #ffffff;
        border: 1px solid rgba(0, 49, 91, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            0 4px 10px -4px rgba(0, 114, 190, 0.55),
            0 1px 2px rgba(2, 32, 71, 0.08);
        font-size: 18px;
        line-height: 1;
        transition:
            transform 0.32s var(--owf-ease-spring),
            background 0.22s ease,
            box-shadow 0.22s ease;
    }
    #owf-header .owf-hdr-drawer-contact-ic i {
        font-size: inherit;
        line-height: 1;
        display: inline-block;
    }
    /* Tap state: chip flips to translucent-white inside the brand-blue
       card so it reads as a single solid tile during press. */
    #owf-header .owf-hdr-drawer-contact-row:active .owf-hdr-drawer-contact-ic {
        background:
            linear-gradient(135deg,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0.10) 100%);
        border-color: rgba(255, 255, 255, 0.32);
        color: #ffffff;
        transform: scale(0.88);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 0 2px rgba(255, 255, 255, 0.16);
    }

    /* ----- Label "Call us" / "Email" / "WhatsApp" ----- */
    #owf-header .owf-hdr-drawer-contact-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
        max-width: 100%;
        min-width: 0;
    }
    #owf-header .owf-hdr-drawer-contact-label {
        font-family: var(--owf-font-ui);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-transform: none;
        color: var(--owf-color-text);
        line-height: 1.2;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.22s ease;
    }
    #owf-header .owf-hdr-drawer-contact-row:active .owf-hdr-drawer-contact-label {
        color: #ffffff;
    }
    /* Long values (phone number, email, "Find a clinic near you")
       stay in markup for SR/SEO but visually hidden — the chip + the
       short label do the talking. */
    #owf-header .owf-hdr-drawer-contact-val { display: none; }

    /* ----- Entrance animation when drawer opens ----- */
    /* Cards slide up + fade in with a 60 ms cascade so they feel
       "dealt in" rather than appearing all at once. The animation
       runs only while the drawer is open (uses the parent state
       class) so it re-fires every time the user opens the drawer. */
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row {
        animation: owf-quick-reach-in 0.45s cubic-bezier(0.32, 0.72, 0, 1) backwards;
    }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(1) { animation-delay: 0.18s; }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(2) { animation-delay: 0.24s; }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(3) { animation-delay: 0.30s; }
    @keyframes owf-quick-reach-in {
        from { opacity: 0; transform: translateY(10px) scale(0.96); }
        to   { opacity: 1; transform: translateY(0)   scale(1); }
    }
    /* Icon chip also pops in with a tiny rotate for the "premium" flourish. */
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row .owf-hdr-drawer-contact-ic {
        animation: owf-quick-reach-ic-in 0.55s var(--owf-ease-spring) backwards;
    }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(1) .owf-hdr-drawer-contact-ic { animation-delay: 0.26s; }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(2) .owf-hdr-drawer-contact-ic { animation-delay: 0.32s; }
    #owf-header.is-mobile-open .owf-hdr-drawer-contact-row:nth-child(3) .owf-hdr-drawer-contact-ic { animation-delay: 0.38s; }
    @keyframes owf-quick-reach-ic-in {
        from { transform: scale(0.5) rotate(-12deg); opacity: 0; }
        70%  { transform: scale(1.08) rotate(2deg);  opacity: 1; }
        to   { transform: scale(1) rotate(0);        opacity: 1; }
    }

    /* ----- Drawer socials ----- */
    #owf-header .owf-hdr-drawer-socials {
        display: flex;
        gap: 10px;
        padding: 6px 18px 18px;
        flex-wrap: wrap;
    }
    #owf-header .owf-hdr-drawer-soc {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid var(--owf-color-border);
        color: var(--owf-color-primary-dark);
        text-decoration: none;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s var(--owf-ease-spring);
    }
    #owf-header .owf-hdr-drawer-soc:active {
        background: var(--owf-color-primary);
        color: #ffffff;
        transform: scale(0.9);
        border-color: var(--owf-color-primary);
    }

    /* Reveal drawer-only blocks inside the drawer.
       `.owf-hdr-drawer-contact` is intentionally NOT in this flex
       reveal group — its own Quick Reach rule (just above) sets
       `display: grid` for the 3-column card layout. Listing it here
       as `display: flex` would override the grid because cascade
       order would put `flex` last. The grid rule itself doubles as
       the reveal because grid != none.
       Stats (10K/95%/20+/10Y) stay `display: none` on mobile per
       design ask — kept in markup for future re-surface but hidden. */
    #owf-header .owf-hdr-drawer-brand,
    #owf-header .owf-hdr-drawer-socials { display: flex; }
    #owf-header .owf-hdr-drawer-divider { display: block; }
    #owf-header .owf-hdr-drawer-stats   { display: none; }

    /* ===== Drawer scroll architecture (gg-style) =================
       Pattern: the drawer itself does NOT scroll. The middle block
       (nav-list) is the sole scroll container; everything above it
       (brand) and below it (Quick Reach divider + contact rows +
       Follow Us divider + socials) is `flex-shrink: 0` so they pin
       at the top and bottom respectively. */
    #owf-header .owf-hdr-drawer-brand,
    #owf-header .owf-hdr-drawer-stats,
    #owf-header .owf-hdr-drawer-divider,
    #owf-header .owf-hdr-drawer-contact,
    #owf-header .owf-hdr-drawer-socials {
        flex-shrink: 0;
    }

    /* ===== Bottom-sheet block — visual separation =================
       The Quick Reach divider sits directly after the scrolling
       nav-list. Adding a top shadow + soft tinted background here
       (and on every sibling below it) makes Quick Reach + Follow Us
       read as one bottom-sheet "card" anchored under the drawer,
       distinct from the menu items above. The shadow's negative
       y-offset throws the cast UPWARD into the menu list. */
    #owf-header .owf-hdr-nav-list + .owf-hdr-drawer-divider {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.65) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 -10px 22px -10px rgba(2, 32, 71, 0.12);
        border-top: 1px solid rgba(0, 114, 190, 0.10);
        padding: 12px 18px 8px;
    }
    #owf-header .owf-hdr-nav-list + .owf-hdr-drawer-divider ~ .owf-hdr-drawer-divider,
    #owf-header .owf-hdr-nav-list + .owf-hdr-drawer-divider ~ .owf-hdr-drawer-contact,
    #owf-header .owf-hdr-nav-list + .owf-hdr-drawer-divider ~ .owf-hdr-drawer-socials {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.35) 100%);
    }
    #owf-header .owf-hdr-nav-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px 12px;
        flex: 1 1 0;            /* fills slack AND is the scroll viewport */
        min-height: 0;          /* required for overflow inside flex */
        min-width: 0;           /* let descendants ellipsis-clamp */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    #owf-header .owf-hdr-nav-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

    /* Each <li> contains the link AND the dropdown panel as siblings.
       The desktop rule (`display: flex; align-items: center`) was
       forcing them onto ONE row — which is exactly the bug where the
       sub-menu hid off the right edge. `display: block` here makes
       the link and the panel stack vertically as expected. */
    #owf-header .owf-hdr-nav-item {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 100%;
        white-space: normal;
        border-bottom: 1px solid rgba(0, 114, 190, 0.08);
    }
    #owf-header .owf-hdr-nav-item:last-child { border-bottom: 0; }

    /* ===== Premium nav-link — 3-col grid ==========================
       Why grid (not flex): each row reads as
            [ icon ]  [ Title          ] [ caret ]
            [ icon ]  [ subtitle copy  ] [       ]
       The icon chip and caret each span both rows; the title is the
       anonymous text node from markup, the subtitle is injected via
       `::after` (no extra HTML). Auto-placement puts the anonymous
       text in row 1 col 2 (the only remaining cell) and ::after in
       row 2 col 2, exactly where we want them. */
    #owf-header .owf-hdr-nav-link {
        display: grid;
        grid-template-columns: 40px 1fr 22px;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        background: transparent;
        color: var(--owf-color-text);
        text-align: left;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        /* Colour + bg transitions match the dropdown's max-height
           timing (~0.36s) so when the user taps to close an expanded
           item, the link's brand-blue background and white text fade
           out IN SYNC with the panel collapsing — no jarring black
           flash mid-animation. */
        transition:
            background-color 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            color 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            transform 0.12s ease;
    }
    /* Leading icon chip — fills col 1, both rows. The chip's
       colour/border transitions also run at 0.36s so the chip's
       white-tinted "expanded" state fades out in sync with the
       panel's max-height collapse. The transform stays at 0.18s
       (it's a press-down spring, decoupled from the panel timing). */
    #owf-header .owf-hdr-nav-link::before {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: center;
        font-family: bootstrap-icons;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        font-size: 17px;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--owf-blue-50) 0%, var(--owf-blue-100) 100%);
        color: var(--owf-color-primary);
        border: 1px solid rgba(0, 114, 190, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 2px 6px -2px rgba(0, 114, 190, 0.18);
        transition:
            background 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            color 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            border-color 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            box-shadow 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            transform 0.18s var(--owf-ease-spring);
    }
    /* Subtitle — row 2 col 2. Copy is set per-item below via ::after.
       Colour transition at 0.36s matches the chip + link so the
       white-on-blue "expanded" state fades out in sync with the
       panel collapse — fixes the previous flash where the subtitle
       went grey before the panel finished closing. */
    #owf-header .owf-hdr-nav-link::after {
        grid-column: 2;
        grid-row: 2;
        font-family: var(--owf-font-body);
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.35;
        color: var(--owf-color-muted);
        letter-spacing: 0.05px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        transition: color 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* Caret — fills col 3, both rows. Inactive items (Home, no caret
       in markup) leave col 3 empty, which is fine. */
    #owf-header .owf-hdr-nav-caret {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
        margin: 0;
        font-size: 13px;
        color: var(--owf-color-muted);
        transition:
            transform 0.36s cubic-bezier(0.32, 0.72, 0, 1),
            color 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* ----- Per-item glyph + subtitle copy (no markup added) -------
       Order matches /file/common/header.php exactly:
       1 Home · 2 About · 3 Doctors · 4 Treatments · 5 Resources · 6 Contact */
    #owf-header .owf-hdr-nav-item:nth-child(1) > .owf-hdr-nav-link::before { content: "\f424"; }
    #owf-header .owf-hdr-nav-item:nth-child(2) > .owf-hdr-nav-link::before { content: "\f430"; }
    #owf-header .owf-hdr-nav-item:nth-child(3) > .owf-hdr-nav-link::before { content: "\f8c8"; }
    #owf-header .owf-hdr-nav-item:nth-child(4) > .owf-hdr-nav-link::before { content: "\f76e"; }
    #owf-header .owf-hdr-nav-item:nth-child(5) > .owf-hdr-nav-link::before { content: "\f192"; }
    #owf-header .owf-hdr-nav-item:nth-child(6) > .owf-hdr-nav-link::before { content: "\f5b4"; }

    #owf-header .owf-hdr-nav-item:nth-child(1) > .owf-hdr-nav-link::after { content: "Welcome to One World Fertility"; }
    #owf-header .owf-hdr-nav-item:nth-child(2) > .owf-hdr-nav-link::after { content: "Our story, vision and journey"; }
    #owf-header .owf-hdr-nav-item:nth-child(3) > .owf-hdr-nav-link::after { content: "Meet the specialists who'll care for you"; }
    #owf-header .owf-hdr-nav-item:nth-child(4) > .owf-hdr-nav-link::after { content: "Treatments across every specialty"; }
    #owf-header .owf-hdr-nav-item:nth-child(5) > .owf-hdr-nav-link::after { content: "Articles, FAQs, blog and videos"; }
    #owf-header .owf-hdr-nav-item:nth-child(6) > .owf-hdr-nav-link::after { content: "Reach our care team — clinics & booking"; }

    /* Caret rotation is driven SOLELY by `is-mobile-expanded` on
       mobile. The desktop rule at line 552 rotates the caret on
       `:hover`, and on touch devices `:hover` is a phantom state
       that lingers ~300ms after tap-up — long enough to pin the
       caret upward AFTER `is-mobile-expanded` is removed, leaving
       the arrow pointing the wrong way through the entire close
       animation. This neutralisation block forces the caret back to
       0° whenever the parent isn't actually expanded, regardless of
       any phantom :hover. */
    #owf-header .owf-hdr-nav-item:hover > .owf-hdr-nav-link .owf-hdr-nav-caret {
        transform: rotate(0deg);
    }
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-nav-link .owf-hdr-nav-caret,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded:hover > .owf-hdr-nav-link .owf-hdr-nav-caret {
        transform: rotate(180deg);
        color: var(--owf-color-primary);
    }
    /* Neutralise the desktop :hover colour rule on mobile.
       The desktop `.owf-hdr-nav-link:hover` (~line 538) flips the
       link to brand-blue bg + white text. On touch devices, :hover
       is a phantom state that lingers for a few hundred ms after
       tap-up — long enough to be visible. That phantom-hover was
       keeping the bg blue + title white WHILE the ::after subtitle
       (which has no :hover rule) reverted to gray, producing the
       "dark text on blue bg" flash during close. By stripping the
       :hover styling on mobile, the only colour drivers become
       :active (real touch) and is-mobile-expanded (real interaction),
       both of which I control fully across title + subtitle + chip. */
    #owf-header .owf-hdr-nav-link:hover,
    #owf-header .owf-hdr-nav-item:hover > .owf-hdr-nav-link,
    #owf-header .owf-hdr-nav-link:focus-visible {
        background: transparent;
        color: var(--owf-color-text);
    }
    /* Native tap-press AND expanded-dropdown — same full brand-blue
       treatment across row bg, title text, chip, ::after subtitle,
       and caret so everything fades in/out together. The is-current
       route flag is intentionally NOT included; per design ask the
       menu reads identical at rest no matter which page you're on. */
    #owf-header .owf-hdr-nav-link:active,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-nav-link {
        background: var(--owf-color-primary);
        color: #ffffff;
    }
    #owf-header .owf-hdr-nav-link:active { transform: scale(0.99); }
    #owf-header .owf-hdr-nav-link:active::before,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-nav-link::before {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.32);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    #owf-header .owf-hdr-nav-link:active::before { transform: scale(0.94); }
    #owf-header .owf-hdr-nav-link:active::after,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-nav-link::after {
        color: rgba(255, 255, 255, 0.85);
    }
    #owf-header .owf-hdr-nav-link:active .owf-hdr-nav-caret,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-nav-link .owf-hdr-nav-caret {
        color: rgba(255, 255, 255, 0.85);
    }

    /* Inline accordion — child panel renders below the link as a
       block-level sibling. The width is locked to 100% of the LI so
       nothing can leak past the drawer's right edge (the bug the
       user flagged: "sub menu hides right side of screen"). The
       `box-sizing` reset matters because desktop dropdown carries a
       1px border + 8px padding that would otherwise add to width. */
    #owf-header .owf-hdr-dropdown,
    #owf-header .owf-hdr-mega {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none !important;
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
        background: transparent;
        padding: 4px 0 8px;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition:
            opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1),
            max-height 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    }
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-dropdown,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded > .owf-hdr-mega {
        opacity: 1;
        visibility: visible;
        max-height: 1500px;
        pointer-events: auto;
    }
    /* Disable hover-open on touch — only the explicit chevron tap toggles */
    #owf-header .owf-hdr-nav-item:hover > .owf-hdr-dropdown,
    #owf-header .owf-hdr-nav-item:hover > .owf-hdr-mega {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    #owf-header .owf-hdr-nav-item.is-mobile-expanded:hover > .owf-hdr-dropdown,
    #owf-header .owf-hdr-nav-item.is-mobile-expanded:hover > .owf-hdr-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Dropdown panel inside the drawer — give it a faint inset card
       feel so it visually nests under its parent nav item without
       feeling like a separate page. */
    #owf-header .owf-hdr-dropdown-eyebrow {
        font-size: 10px;
        letter-spacing: 1.8px;
        padding: 8px 12px 4px;
    }
    #owf-header .owf-hdr-dropdown-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 6px 8px;
        margin: 0;
        list-style: none;
        max-width: 100%;
        min-width: 0;
    }
    #owf-header .owf-hdr-dropdown-list > li { max-width: 100%; min-width: 0; }
    #owf-header .owf-hdr-dropdown-item {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 11px 12px;
        gap: 12px;
        background: rgba(0, 114, 190, 0.04);
        border: 1px solid rgba(0, 114, 190, 0.06);
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            transform 0.12s ease;
    }
    #owf-header .owf-hdr-dropdown-item:active {
        background: var(--owf-color-primary);
        border-color: var(--owf-color-primary);
        color: #ffffff;
        transform: scale(0.985);
    }
    #owf-header .owf-hdr-dropdown-item:active .owf-hdr-dropdown-ic {
        background: transparent;
        color: #ffffff;
        border-color: transparent;
    }
    #owf-header .owf-hdr-dropdown-item:active .owf-hdr-dropdown-desc {
        color: rgba(255, 255, 255, 0.85);
    }
    /* The body is the middle column of each dropdown row — must be
       allowed to shrink (min-width: 0) so the title's ellipsis kicks
       in instead of pushing the row past the drawer's right edge. */
    #owf-header .owf-hdr-dropdown-body {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    #owf-header .owf-hdr-dropdown-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 11.5px;
        line-height: 1.35;
        max-width: 100%;
    }
    #owf-header .owf-hdr-dropdown-title {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    #owf-header .owf-hdr-dropdown-ic {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin-top: 1px;
        border-radius: 0;
        box-shadow: none;
        color: var(--owf-color-primary);
    }
    #owf-header .owf-hdr-dropdown-ic i { font-size: 18px; }

    /* Resources columns-mega — drop the card chrome and stack vertically
       in the drawer; inner rows reuse the mobile dropdown-item styling. */
    #owf-header .owf-hdr-mega-cols {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #owf-header .owf-hdr-mega-cols::before { display: none; }
    #owf-header .owf-hdr-mega-feature { margin: 6px; }

    /* ===== Mega menu inside drawer — premium native layout =====
       Stacks the category rail above the panels (was a 2-column grid
       on desktop). The rail itself becomes a horizontal scrollable
       pill row — same pattern as the iOS App Store category tabs and
       zc.flowindata.in's mobile menu. The active tab swaps to the
       brand gradient so the user always sees what's selected. */
    #owf-header .owf-hdr-mega-grid {
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }

    /* Category rail — horizontal scroller, no scrollbar chrome.
       Sits at the top of the mega panel content (sticky was tried but
       can't work reliably inside the accordion's overflow: hidden
       container; the whole drawer scrolls instead). */
    #owf-header .owf-hdr-mega-side {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(0, 114, 190, 0.10);
        padding: 0;
    }
    #owf-header .owf-hdr-mega-side-head { display: none; }
    #owf-header .owf-hdr-mega-side-cta { display: none; }   /* desktop-only chip */
    #owf-header .owf-hdr-mega-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 4px 12px;
        margin: 0;
        list-style: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    #owf-header .owf-hdr-mega-tabs::-webkit-scrollbar { display: none; height: 0; }
    #owf-header .owf-hdr-mega-tabs > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    /* Pill — leading mini-icon + name. Active state is the brand
       gradient with a soft glow. */
    #owf-header .owf-hdr-mega-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px 9px 9px;
        margin: 0;
        background: #ffffff;
        border: 1px solid var(--owf-color-border);
        border-radius: 999px;
        font-family: var(--owf-font-ui);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--owf-color-text);
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            transform 0.12s ease,
            box-shadow 0.2s ease;
    }
    #owf-header .owf-hdr-mega-tab:active { transform: scale(0.96); }
    #owf-header .owf-hdr-mega-tab.is-active {
        background: linear-gradient(135deg, var(--owf-color-primary) 0%, var(--owf-color-primary-dark) 100%);
        border-color: var(--owf-color-primary-dark);
        color: #ffffff;
        box-shadow: 0 6px 16px -6px rgba(0, 114, 190, 0.55);
    }
    #owf-header .owf-hdr-mega-tab-ic {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--owf-blue-50);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        transition: background 0.2s ease;
    }
    #owf-header .owf-hdr-mega-tab.is-active .owf-hdr-mega-tab-ic {
        background: rgba(255, 255, 255, 0.18);
    }
    #owf-header .owf-hdr-mega-tab-ic img,
    #owf-header .owf-hdr-mega-tab-ic .owf-cat-img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }
    #owf-header .owf-hdr-mega-tab-ic i { font-size: 14px; color: var(--owf-color-primary); }
    #owf-header .owf-hdr-mega-tab.is-active .owf-hdr-mega-tab-ic i { color: #ffffff; }
    #owf-header .owf-hdr-mega-tab-arrow { display: none; }    /* hidden on pill layout */

    /* Active tab's panel content — the panel is the only one visible
       at a time (its-active class is toggled by core.js initMegaTabs). */
    #owf-header .owf-hdr-mega-main {
        padding: 4px 0 0;
        background: transparent;
    }
    #owf-header .owf-hdr-mega-panel { padding: 0; }
    #owf-header .owf-hdr-mega-panel-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 8px 12px;
    }
    #owf-header .owf-hdr-mega-panel-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--owf-blue-50) 0%, var(--owf-blue-100) 100%);
        border: 1px solid rgba(0, 114, 190, 0.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    #owf-header .owf-hdr-mega-panel-icon img,
    #owf-header .owf-hdr-mega-panel-icon .owf-cat-img,
    #owf-header .owf-hdr-mega-panel-icon .owf-cat-img--lg { width: 26px; height: 26px; }
    #owf-header .owf-hdr-mega-panel-icon i { font-size: 20px; color: var(--owf-color-primary); }
    #owf-header .owf-hdr-mega-panel-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
    }
    #owf-header .owf-hdr-mega-panel-blurb {
        font-size: 11.5px;
        color: var(--owf-color-muted);
        margin-top: 2px;
        line-height: 1.4;
    }
    #owf-header .owf-hdr-mega-panel-body {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 4px 4px 8px;
    }
    /* Sub-section heading inside a category — feels like an iOS list
       section header. */
    #owf-header .owf-hdr-mega-sub-name {
        font-family: var(--owf-font-ui);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--owf-color-accent);
        padding: 4px 8px;
        margin-bottom: 4px;
    }
    /* Premium service rows — icon chip + title + chevron. Tap inverts
       to the brand gradient. */
    #owf-header .owf-hdr-mega-svc-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: 100%;
        min-width: 0;
    }
    #owf-header .owf-hdr-mega-svc-list > li { max-width: 100%; min-width: 0; }
    #owf-header .owf-hdr-mega-svc {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        gap: 12px;
        padding: 11px 12px;
        background: rgba(0, 114, 190, 0.04);
        border: 1px solid rgba(0, 114, 190, 0.06);
        border-radius: 12px;
        text-decoration: none;
        color: var(--owf-color-text);
        font-family: var(--owf-font-ui);
        font-weight: 500;
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            transform 0.12s ease;
    }
    #owf-header .owf-hdr-mega-svc span {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Service rows on mobile are TITLE-ONLY per design ask — no
       leading icon chip. The original `<i.bi-arrow-right-short>` from
       markup is repurposed as a trailing chevron via `order: 2` +
       `margin-left: auto` so each row reads:  service name      › */
    #owf-header .owf-hdr-mega-svc i {
        order: 2;
        margin-left: auto;
        font-size: 18px;
        color: var(--owf-color-muted);
        flex-shrink: 0;
    }
    #owf-header .owf-hdr-mega-svc:active {
        background: var(--owf-color-primary);
        border-color: var(--owf-color-primary);
        color: #ffffff;
        transform: scale(0.985);
    }
    #owf-header .owf-hdr-mega-svc:active i { color: rgba(255, 255, 255, 0.9); }

    #owf-header .owf-hdr-mega-panel-foot { display: none; }
}

/* Lock body scroll when mobile drawer is open */
body.owf-no-scroll { overflow: hidden; }

/* Smallest phones — keep CTA pill compact, both icon + label still
   visible (per design ask). Logo trims another touch so the row never
   crowds. */
@media (max-width: 380px) {
    #owf-header .owf-hdr-logo img { max-height: 26px; }
    #owf-header .owf-hdr-cta {
        padding: 10px 11px;
        font-size: 10.5px;
        gap: 5px;
    }
    #owf-header .owf-hdr-cta i { font-size: 11px; }
    /* Burger keeps its auto-height stack (icon + Menu caption); just
       trim glyph sizes so the column fits comfortably on tiny phones. */
    #owf-header .owf-hdr-burger {
        width: auto;
        height: auto;
        min-width: 40px;
        padding: 3px 6px 4px;
    }
    #owf-header .owf-hdr-burger::before { font-size: 20px; }
    #owf-header .owf-hdr-burger::after  { font-size: 8.5px; letter-spacing: 0.3px; }
    #owf-header.is-mobile-open .owf-hdr-burger::before { font-size: 18px; }
}

/* =============== 6. Hide Google Translate UI =============== */
#google_translate_element {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Kill the grey "Google Translate" top banner in EVERY markup variant.
   The old widget rendered it as the iframe .goog-te-banner-frame; the
   current widget wraps the iframe in a plain .skiptranslate <div>. A
   compound selector (.goog-te-banner-frame.skiptranslate) misses that
   wrapper, so we nuke .skiptranslate outright — same as ff.flowindata.in.
   The hidden #google_translate_element select is still driven via JS
   (dispatchEvent change works on display:none nodes), so translation
   keeps working while the chrome stays invisible. */
.skiptranslate {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-menu-value,
.goog-te-gadget-icon,
.goog-logo-link,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd { display: none !important; }
.goog-te-gadget { color: transparent !important; font-size: 0 !important; }
.goog-te-gadget * { color: transparent !important; }
.goog-te-gadget .goog-te-combo { display: none !important; }

/* Never let Google push the document down by the banner's height. */
body { top: 0 !important; position: static !important; }
body.translated-ltr,
body.translated-rtl { top: 0 !important; }

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
font[style*="background-color"] { background: transparent !important; }

/* =============== Responsive =============== */
@media (max-width: 991px) {
    #owf-top-bar.owf-topbar { font-size: 12px; }
    #owf-top-bar .owf-topbar-row { min-height: 40px; gap: 10px; }
    #owf-top-bar .owf-topbar-info { gap: 10px; }
    #owf-top-bar .owf-topbar-cta { padding: 5px 11px; font-size: 12px; }
    #owf-top-bar .owf-topbar-cta i { font-size: 12px; }
}

/* Hide the entire topbar on mobile / small tablets — chrome is too tight
   to be useful here and the floating booking FAB + mobile menu cover
   contact and language entry points. */
@media (max-width: 767.98px) {
    #owf-top-bar.owf-topbar { display: none !important; }
}

/* Bootstrap-style display utility safety net (theme already provides
   d-* classes; this is a fallback for pages that don't load them) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #owf-top-bar .d-lg-flex,
    #owf-top-bar .d-xl-flex { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #owf-top-bar .d-xl-flex { display: none !important; }
}

/* =============== Reduced motion (skill: WCAG — respect prefers-reduced-motion) ===============
   Users who ask their OS to minimise motion get instant state changes
   instead of the slide/scale transitions. Durations only — final
   transforms (e.g. the dropdown's translateX(-50%) centring) are kept
   intact, so layout never breaks. */
@media (prefers-reduced-motion: reduce) {
    #owf-header *,
    #owf-header *::before,
    #owf-header *::after,
    #owf-top-bar *,
    .owf-lang * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   DESKTOP MENU SCRIM — frosted-glass blur over the page when a dropdown or
   mega menu opens, so the open menu reads clearly (like zc's mega backdrop).
   The scrim sits OUTSIDE #owf-header and BELOW it in z-order, so only the
   page blurs — the header bar + the menu panel stay sharp on top.
   ========================================================================== */
.owf-hdr-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 990;                     /* above page (~0), below header (1000) */
    background: rgba(10, 25, 41, 0.20);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    backdrop-filter: blur(0px) saturate(1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;             /* purely visual — never traps clicks */
    transition:
        opacity 0.35s var(--owf-ease, ease),
        visibility 0.35s ease,
        -webkit-backdrop-filter 0.4s ease,
        backdrop-filter 0.4s ease;
}

/* Desktop only — the mobile drawer has its own backdrop. Shown while any
   dropdown/mega nav item is hovered or keyboard-focused. */
@media (min-width: 992px) {
    #owf-header:has(.owf-hdr-nav-item.owf-has-dropdown:hover) ~ .owf-hdr-menu-scrim,
    #owf-header:has(.owf-hdr-nav-item.owf-has-mega:hover) ~ .owf-hdr-menu-scrim,
    #owf-header:has(.owf-hdr-nav-item.owf-has-dropdown:focus-within) ~ .owf-hdr-menu-scrim,
    #owf-header:has(.owf-hdr-nav-item.owf-has-mega:focus-within) ~ .owf-hdr-menu-scrim {
        opacity: 1;
        visibility: visible;
        -webkit-backdrop-filter: blur(8px) saturate(1.3);
        backdrop-filter: blur(8px) saturate(1.3);
    }
}
/* ==========================================================================
   §  SHARED — footer/contact floating-glow keyframes
   ========================================================================== */
@keyframes owfFtFloat1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(30px, 22px, 0) scale(1.08); } }
@keyframes owfFtFloat2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-26px, -30px, 0) scale(0.94); } }
@keyframes owfFtFloat3 { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-16px, 20px, 0) rotate(12deg); } }


/* ==========================================================================
   §  "REACH OUT TO US" — premium blue contact band  (.owf-ftc)
   --------------------------------------------------------------------------
   Brand-blue gradient section with floating animated glow shapes (à la the
   gg "Join" section): left header (eyebrow · title · sub · CTA) + glass
   contact cards on the right. Sits directly above the white footer.
   Prefix .owf-ftc__*. Motion respects prefers-reduced-motion.
   ========================================================================== */
.owf-ftc {
    position: relative;
    overflow: hidden;
    padding: 20px var(--owf-gutter, 28px);
    color: #fff;
    font-family: var(--owf-font-body, 'Open Sans', sans-serif);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse at 16% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 46%),
        radial-gradient(ellipse at 86% 88%, rgba(204, 41, 48, 0.22) 0%, transparent 52%),
        linear-gradient(135deg, var(--owf-blue, #0072be) 0%, var(--owf-blue-600, #005c98) 100%);
}
/* Floating ambient shapes */
.owf-ftc__shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform; }
.owf-ftc__shape--1 { top: -90px; right: -70px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 70%); animation: owfFtFloat1 16s ease-in-out infinite; }
.owf-ftc__shape--2 { bottom: -110px; left: -80px; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(204, 41, 48, 0.30) 0%, transparent 70%); animation: owfFtFloat2 21s ease-in-out infinite; }
.owf-ftc__shape--ring { top: 14%; left: 47%; width: 120px; height: 120px; background: none;
    border: 1.5px solid rgba(255, 255, 255, 0.16); animation: owfFtFloat3 15s ease-in-out infinite; }

.owf-ftc__inner {
    position: relative; z-index: 1; max-width: 1600px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
}
.owf-ftc__lead { flex: 1 1 300px; max-width: 420px; }
.owf-ftc__eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px;
    font-family: var(--owf-font-accent, 'Nunito', sans-serif);
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
.owf-ftc__eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: #fff; }
.owf-ftc__title {
    margin: 0 0 11px; font-family: var(--owf-font-display, 'Jost', sans-serif);
    font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #fff;
}
.owf-ftc__sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.owf-ftc__cta {
    display: inline-flex; align-items: center; gap: 9px; padding: 12px 26px; border-radius: 100px;
    background: #fff; color: var(--owf-blue-600, #005c98);
    font-family: var(--owf-font-display, 'Jost', sans-serif); font-size: 14px; font-weight: 700; text-decoration: none;
    transition: transform 0.25s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.25s ease;
}
.owf-ftc__cta i { font-size: 17px; transition: transform 0.3s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.owf-ftc__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24); }
.owf-ftc__cta:hover i { transform: translateX(4px); }

/* Glass contact cards — 3 in a row */
.owf-ftc__items { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; flex: 2 1 520px; }
.owf-ftc__item {
    display: flex; align-items: center; gap: 13px; flex: 1 1 200px; min-width: 0;
    padding: 15px 16px; border-radius: 15px; color: inherit;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform 0.28s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), background 0.28s ease, border-color 0.28s ease;
}
a.owf-ftc__item:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }
.owf-ftc__ico {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 20px;
}
.owf-ftc__text { display: flex; flex-direction: column; min-width: 0; }
.owf-ftc__label { margin-bottom: 2px; font-family: var(--owf-font-accent, 'Nunito', sans-serif); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.owf-ftc__val { font-size: 13.5px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }

@media (max-width: 768px) {
    .owf-ftc { padding: 20px var(--owf-gutter-mobile, 14px); }
    .owf-ftc__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
    .owf-ftc__lead { max-width: none; }
    .owf-ftc__items { width: 100%; flex-direction: column; }
    .owf-ftc__item { flex: 1 1 auto; }
    .owf-ftc__shape--ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .owf-ftc__shape { animation: none !important; }
}


/* ==========================================================================
   §  FOOTER — fully-white premium footer  (.owf-ft)
   --------------------------------------------------------------------------
   White background; brand blue/red for headings, links, icons, accents.
   Layout: brand column (logo · about · address · contact · socials) LEFT +
   4 link columns RIGHT, in one aligned grid (à la gg). Soft brand corner
   glows (blue + red radial gradients) for depth. Phone: brand stacks,
   columns collapse to tap accordions (owfFtToggle in js/core.js).
   Prefix .owf-ft__*. Site-wide.
   ========================================================================== */
.owf-ft {
    --owfft-blue:  var(--owf-blue, #0072be);
    --owfft-blued: var(--owf-blue-600, #005c98);
    --owfft-red:   var(--owf-red, #cc2930);
    --owfft-ink:   var(--owf-ink, #0a1929);
    --owfft-body:  var(--owf-ink-500, #4b5563);
    --owfft-muted: var(--owf-ink-400, #6b7280);
    --owfft-line:  var(--owf-ink-100, #e5e7eb);
    --owfft-tint:  var(--owf-blue-50, #e6f1fa);
    --owfft-gut:   var(--owf-gutter, 28px);
    --owfft-ease:  var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1));

    position: relative;
    background: #fff;
    color: var(--owfft-body);
    overflow: hidden;
    border-top: 1px solid var(--owfft-line);
    font-family: var(--owf-font-body, 'Open Sans', sans-serif);
    -webkit-font-smoothing: antialiased;
}
/* Soft brand corner glows */
.owf-ft__glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; }
.owf-ft__glow--a { top: -220px; right: -150px; width: 660px; height: 660px;
    background: radial-gradient(circle, rgba(0, 114, 190, 0.13) 0%, transparent 62%); animation: owfFtFloat1 17s ease-in-out infinite; }
.owf-ft__glow--b { bottom: -260px; left: -170px; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(204, 41, 48, 0.09) 0%, transparent 62%); animation: owfFtFloat2 22s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .owf-ft__glow { animation: none !important; } }
.owf-ft__cta, .owf-ft__w { position: relative; z-index: 1; }
.owf-ft a { text-decoration: none; }

/* ── CTA STRIP ── */
.owf-ft__cta { background: #fff; padding: 16px var(--owfft-gut); border-bottom: 1px solid var(--owfft-line); }
.owf-ft__cta-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.owf-ft__cta-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--owfft-body); }
.owf-ft__cta-text strong { color: var(--owfft-blue); font-weight: 700; }
.owf-ft__cta-btn {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 11px 24px; border-radius: 100px; background: var(--owfft-blue); color: #fff;
    font-family: var(--owf-font-display, 'Jost', sans-serif); font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
    transition: transform 0.25s var(--owfft-ease), box-shadow 0.25s var(--owfft-ease), background 0.25s ease;
}
.owf-ft__cta-btn i { font-size: 15px; }
.owf-ft__cta-btn:hover { background: var(--owfft-blued); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 114, 190, 0.28); }
.owf-ft__cta-btn:active { transform: scale(0.97); }

.owf-ft__w { max-width: 1600px; margin: 0 auto; padding: 0 var(--owfft-gut); }

/* ── MAIN GRID — brand left · menu right ── */
.owf-ft__grid {
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
    gap: 34px 40px; padding: 46px 0 40px; align-items: start;
    border-bottom: 1px solid var(--owfft-line);
}

/* LEFT brand */
.owf-ft__logo { height: 44px; width: auto; margin-bottom: 16px; display: block; }
.owf-ft__tagline { margin: 0 0 18px; max-width: 340px; font-size: 13px; line-height: 1.65; color: var(--owfft-body); }
.owf-ft__contact { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.owf-ft__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--owfft-body); transition: color 0.2s ease; }
.owf-ft__contact-item i { font-size: 15px; color: var(--owfft-blue); width: 18px; text-align: center; flex-shrink: 0; margin-top: 1px; }
a.owf-ft__contact-item:hover { color: var(--owfft-blue); }
.owf-ft__socials { display: flex; gap: 8px; }
.owf-ft__soc {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--owfft-tint); color: var(--owfft-blue); font-size: 14px; border: 1px solid var(--owfft-line);
    transition: transform 0.3s var(--owfft-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.owf-ft__soc:hover { background: var(--owfft-blue); color: #fff; border-color: var(--owfft-blue); transform: translateY(-3px); }

/* RIGHT columns */
.owf-ft__col-h {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;
    font-family: var(--owf-font-display, 'Jost', sans-serif);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--owfft-blue);
}
.owf-ft__col-chev { display: none; font-size: 16px; color: var(--owfft-muted); transition: transform 0.3s var(--owfft-ease); }
.owf-ft__col-links { display: flex; flex-direction: column; }
.owf-ft__link { position: relative; display: block; padding: 5px 0; font-size: 12.5px; line-height: 1.45; color: var(--owfft-body); transition: color 0.2s ease, padding-left 0.2s var(--owfft-ease); }
.owf-ft__link:hover { color: var(--owfft-blue); padding-left: 8px; }
.owf-ft__link:hover::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--owfft-red); }

/* ── TRUST / BADGES ── */
.owf-ft__trust { padding: 26px 0; border-bottom: 1px solid var(--owfft-line); }
.owf-ft__trust-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.owf-ft__badge {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 14px; border-radius: 100px; background: #fff; border: 1px solid var(--owfft-line);
    font-size: 11.5px; font-weight: 600; color: var(--owfft-body);
    transition: border-color 0.25s ease, background 0.25s ease;
}
.owf-ft__badge i { font-size: 14px; color: var(--owfft-blue); }
.owf-ft__badge:hover { border-color: rgba(0, 114, 190, 0.4); background: var(--owfft-tint); }
.owf-ft__trust-line { margin: 0; font-family: var(--owf-font-display, 'Jost', sans-serif); font-size: 13.5px; font-weight: 700; color: var(--owfft-ink); }
.owf-ft__trust-line span { font-family: var(--owf-font-body, 'Open Sans', sans-serif); font-weight: 400; color: var(--owfft-body); }

/* ── BOTTOM BAR ── */
.owf-ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 28px; flex-wrap: wrap; }
.owf-ft__copy { font-size: 12px; color: var(--owfft-muted); }
.owf-ft__legal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.owf-ft__legal-a { padding: 4px 8px; border-radius: 5px; font-size: 12px; color: var(--owfft-muted); transition: color 0.2s ease, background 0.2s ease; }
.owf-ft__legal-a:hover { color: var(--owfft-blue); background: var(--owfft-tint); }
.owf-ft__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--owfft-line); }

/* ── Tablet: brand spans full width as a row, columns below ── */
@media (max-width: 1023px) {
    .owf-ft__grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px 30px; }
    .owf-ft__brand {
        grid-column: 1 / -1; display: flex; flex-direction: row; flex-wrap: wrap;
        align-items: flex-start; gap: 24px 40px; padding-bottom: 26px; margin-bottom: 4px;
        border-bottom: 1px solid var(--owfft-line);
    }
    .owf-ft__tagline { max-width: 380px; margin-bottom: 0; }
    .owf-ft__contact { margin-bottom: 0; }
    .owf-ft__socials { align-self: center; }
}

/* ── Phone: app-like accordion + scroll rows ── */
@media (max-width: 768px) {
    .owf-ft__cta { padding: 16px var(--owf-gutter-mobile, 14px); }
    .owf-ft__cta-inner { flex-direction: column; text-align: center; gap: 13px; }
    .owf-ft__cta-btn { width: 100%; justify-content: center; }
    .owf-ft__w { padding: 0 var(--owf-gutter-mobile, 14px); }

    .owf-ft__grid { grid-template-columns: 1fr; gap: 0; padding: 30px 0 0; border-bottom: none; }
    .owf-ft__brand { flex-direction: column; gap: 18px; padding-bottom: 24px; }
    .owf-ft__tagline { max-width: none; }

    .owf-ft__col { border-bottom: 1px solid var(--owfft-line); }
    .owf-ft__col:first-of-type { border-top: 1px solid var(--owfft-line); }
    .owf-ft__col-h { margin-bottom: 0; padding: 16px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .owf-ft__col-chev { display: block; }
    .owf-ft__col-links { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--owfft-ease), padding 0.35s var(--owfft-ease); }
    .owf-ft__col-open .owf-ft__col-links { max-height: 520px; padding: 2px 2px 14px; }
    .owf-ft__col-open .owf-ft__col-chev { transform: rotate(180deg); }
    .owf-ft__link { padding: 8px 0; font-size: 13.5px; }

    .owf-ft__trust-badges { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .owf-ft__trust-badges::-webkit-scrollbar { display: none; }
    .owf-ft__badge { flex-shrink: 0; }

    .owf-ft__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 30px; }
}