/* Base button reset for Whoopba header buttons to prevent theme reset.css interference */
button.whoopba-menu-toggle,
button.whoopba-submenu-toggle,
button.whoopba-mobile-panel__close,
button.whoopba-menu-backdrop {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: inherit;
    font: inherit;
}
:root { --w-teal: #10aaa3; }

.whoopba-header__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-left: 14px; padding: 11px 22px;
    background: var(--w-teal); border: 1px solid var(--w-teal); border-radius: 999px;
    color: #fff; font-family: "Titillium Web", Arial, sans-serif;
    font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .01em;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(16,170,163,.25);
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.whoopba-header__cta:hover, .whoopba-header__cta:focus-visible {
    background: #0c8e89; border-color: #0c8e89; color: #fff;
    transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,170,163,.35);
    text-decoration: none;
}
.whoopba-header__cta:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
.whoopba-header__cta:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(16,170,163,.25); }
.whoopba-header__cta-icon { display: block; width: 17px; height: 17px; flex: 0 0 17px; }
.whoopba-header__cta-icon svg { display: block; width: 100%; height: 100%; }

@media (max-width: 960px) {
    .whoopba-header__cta {
        display: flex; width: calc(100% - 40px); margin: 18px 20px 16px;
        padding: 15px 22px; font-size: 16px; justify-content: center;
    }
}
/* ================================================================
   Whoopba Header – complete clean rebuild
   ================================================================ */
:root {
    --w-teal : #10aaa3;
    --w-ink  : #151515;
    --w-hh   : 72px;
}

html, body { overflow-x: clip !important; }

/* ── Shell ──────────────────────────────────────────────────────── */
.whoopba-header {
    position: sticky; top: 0; z-index: 9990; width: 100%;
    background: #fff; border-bottom: 1px solid rgba(0,0,0,.07);
    font-family: "Titillium Web", sans-serif;
    transition: box-shadow .25s;
}
.whoopba-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.09); }

.whoopba-header__inner {
    width: 100%; max-width: 1670px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    height: var(--w-hh); display: flex; align-items: center;
    justify-content: space-between; gap: 24px;
}

.whoopba-header__inner.full-w {
    max-width: 1670px;
    margin: 0 auto;
}

@media (max-width: 2560px) {
    .whoopba-header__inner, .whoopba-header__inner.full-w { max-width: 1670px; margin: 0 auto; }
}
@media (max-width: 1440px) {
    .whoopba-header__inner, .whoopba-header__inner.full-w { margin: 0 auto; }
}
@media (max-width: 1024px) {
    .whoopba-header__inner, .whoopba-header__inner.full-w { max-width: 960px; margin: 0 auto; }
}

/* ── Logo ───────────────────────────────────────────────────────── */
.whoopba-header__brand {
    display: flex; align-items: center; flex-shrink: 0;
    text-decoration: none; color: var(--w-ink);
}
.whoopba-header__brand img,
.whoopba-header__brand .custom-logo {
    display: block; height: 48px; width: auto; max-width: 180px; object-fit: contain;
}
.whoopba-header__wordmark { font-size: 26px; font-weight: 800; letter-spacing: -.04em; }
.whoopba-header__wordmark span { color: var(--w-teal); }

/* ── Mobile hamburger (hidden on desktop) ───────────────────────── */
button.whoopba-menu-toggle,
.whoopba-menu-toggle {
    display: none; flex-shrink: 0; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; cursor: pointer;
    background: #ffffff !important; border: 1px solid rgba(0,0,0,.15) !important; border-radius: 8px !important;
    color: #151515 !important; box-shadow: none !important; outline: none !important;
}
.whoopba-menu-toggle svg {
    width: 22px !important; height: 22px !important; stroke: #151515 !important;
    display: block !important; flex-shrink: 0 !important;
}

/* ── Desktop nav ────────────────────────────────────────────────── */
.whoopba-header__nav { display: flex; align-items: center; }

.whoopba-header__menu {
    display: flex; align-items: center; gap: 2px;
    margin: 0; padding: 0; list-style: none;
}
.whoopba-header__menu > li { position: relative; margin: 0; }

.whoopba-header__menu > li > a {
    display: flex; align-items: center; gap: 5px; padding: 7px 13px;
    border-radius: 7px; color: #686568; font-size: 16px; font-weight: 500;
    font-family: "Titillium Web", sans-serif;
    text-decoration: none; white-space: nowrap; transition: color .15s;
    background-color: transparent;
}
.whoopba-header__menu > li > a:hover,
.whoopba-header__menu > li.is-open > a,
.whoopba-header__menu > .current-menu-item > a,
.whoopba-header__menu > .current-menu-ancestor > a {
    color: #10AAA3 !important;
    background-color: transparent !important;
}

/* Chevron on parent items */
.whoopba-header__menu > .menu-item-has-children > a::after {
    content: ""; display: inline-block;
    width: 5px; height: 5px; flex: 0 0 5px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.whoopba-header__menu > .menu-item-has-children.is-open > a::after {
    transform: rotate(-135deg) translateY(2px);
}

/* ================================================================
   DROPDOWN PANEL
   The walker outputs: ul.sub-menu(.whoopba-mega-menu) as a direct
   child of each top-level li.menu-item-has-children.
   ================================================================ */
.whoopba-header__menu > .menu-item-has-children > .sub-menu {
    /* Hidden state */
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #fff; border-radius: 14px;
    box-shadow: 0 10px 44px rgba(0,0,0,.13);
    /* Flex so group columns sit side-by-side; quick-links wraps full-width */
    display: none !important; flex-wrap: wrap; align-items: flex-start;
    list-style: none; margin: 0; padding: 0; width: max-content;
    /* overflow: visible so the ::before bridge above the panel is reachable */
    overflow: visible;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 9999;
}

/* Open state – toggled by JS */
.whoopba-header__menu > .menu-item-has-children.is-open > .sub-menu {
    display: flex !important;
    opacity: 1; visibility: visible; pointer-events: auto !important;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}
.whoopba-header__menu > .whoopba-mega-parent--modules.is-open > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 860px !important;
}

/* ── Case Studies (and simple 1-column dropdowns) ───────────────── */
.whoopba-mega-parent--case-studies > .sub-menu {
    left: 0 !important; transform: translateY(6px) !important;
    display: flex !important; flex-direction: column !important;
    min-width: 190px !important; padding: 12px 10px !important;
    gap: 2px !important; width: auto !important;
    box-shadow: 0 10px 36px rgba(0,0,0,.1) !important;
}
.whoopba-mega-parent--case-studies.is-open > .sub-menu {
    transform: translateY(0) !important;
}
.whoopba-mega-parent--case-studies > .sub-menu > li {
    display: block !important; width: 100% !important; margin: 0 !important;
}
.whoopba-mega-parent--case-studies > .sub-menu > li > a {
    display: flex !important; align-items: center;
    padding: 9px 14px !important; border-radius: 8px !important;
    color: var(--w-ink) !important; font-size: 15px !important; font-weight: 500 !important;
    text-decoration: none !important; transition: background .15s ease, color .15s ease !important;
    white-space: nowrap !important;
}
.whoopba-mega-parent--case-studies > .sub-menu > li > a:hover {
    background: rgba(16,170,163,.08) !important;
    color: var(--w-teal) !important;
}

/* Transparent bridge that fills the 8px gap between nav link and panel.
   Without this the cursor briefly exits the hover zone when moving down. */
.whoopba-header__menu > .menu-item-has-children > .sub-menu::before {
    content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px;
}

/* Open state – toggled by JS */
.whoopba-header__menu > .menu-item-has-children.is-open > .sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto !important;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}

/* ── Group / column ─────────────────────────────────────────────── */
.whoopba-mega-menu__group {
    display: block; flex: 0 0 auto; padding: 22px 26px; min-width: 0;
}
/* Divider between adjacent columns (not before quick-links footer) */
.whoopba-mega-menu__group + .whoopba-mega-menu__group:not(.whoopba-mega-group--quick-links) {
    border-left: 1px solid rgba(0,0,0,.06);
}

/* Group heading (the <a> that IS the column title – non-navigable) */
.whoopba-mega-menu__group > a {
    display: block; margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1.5px solid rgba(21,21,21,.12);
    color: var(--w-ink) !important; font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    text-decoration: none; pointer-events: none;
}

/* Nested sub-menu inside a group – reset ALL panel-level styles */
.whoopba-mega-menu__group > .sub-menu {
    position: static !important; width: auto !important;
    display: block !important; padding: 0 !important; margin: 0 !important;
    list-style: none; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    background: transparent !important; overflow: visible !important;
    flex-wrap: nowrap;
}
/* Remove bridge on nested menus */
.whoopba-mega-menu__group > .sub-menu::before { display: none !important; }

/* ── Industries column : 2-column list ─────────────────────────── */
.whoopba-mega-group--industries > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr; gap: 0 20px; width: 320px;
}
.whoopba-mega-group--industries > .sub-menu > li > a {
    display: block; padding: 7px 0;
    color: #555; font-size: 14px; text-decoration: none; transition: color .14s;
}
.whoopba-mega-group--industries > .sub-menu > li > a:hover { color: var(--w-teal); }
.whoopba-mega-group--industries .whoopba-menu-item-label { display: inline; }

/* ── Solutions column : single-column card list ─────────────────── */
.whoopba-mega-group--solutions > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr; gap: 8px 20px; width: 400px;
}
.whoopba-mega-group--solutions > .sub-menu > li > a {
    display: flex !important; align-items: center; gap: 12px;
    padding: 4px 0; color: var(--w-ink); text-decoration: none;
    font-size: 14px; font-weight: 600; transition: color .14s;
}
.whoopba-mega-group--solutions > .sub-menu > li > a:hover { color: var(--w-teal); }

/* Card icon box */
.whoopba-mega-group--solutions .whoopba-menu-card-image,
.whoopba-mega-group--solutions .whoopba-menu-card-image--empty {
    width: 50px; height: 50px; flex: 0 0 50px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--w-teal) center / cover no-repeat;
}
/* Brand logo mark – transparent card with teal border, only when no thumbnail is uploaded */
.whoopba-mega-group--solutions .whoopba-menu-card-image--empty::after {
    content: none; /* background image used instead */
}
.whoopba-mega-group--solutions .whoopba-menu-card-image--empty {
    background: transparent url('/wp-content/uploads/2026/03/New-Project-2.png') center / contain no-repeat;
}
.whoopba-mega-group--solutions .whoopba-menu-item-label { display: flex; align-items: center; }

/* ── Active page highlight inside dropdown panels ──────────────── */
/* Highlight the current child page so both the parent and the item
   inside the open dropdown show as active. */
.whoopba-header__menu .sub-menu li.current-menu-item > a,
.whoopba-header__menu .sub-menu li.current-menu-ancestor > a {
    color: #10AAA3 !important;
}

/* Solutions column: subtle pill behind the active card */
.whoopba-mega-group--solutions > .sub-menu > li.current-menu-item > a {
    padding: 8px 14px;
    background: rgba(16,170,163,.09);
    border-radius: 10px;
}

/* Industries column: bolder active item */
.whoopba-mega-group--industries > .sub-menu > li.current-menu-item > a {
    font-weight: 700;
}

/* Modules panel active items */
.whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group).current-menu-item > a {
    background: rgba(16,170,163,.09);
    border-radius: 8px;
}

/* Column heading that is itself the current page/ancestor */
.whoopba-header__menu .sub-menu > li.whoopba-mega-menu__group.current-menu-item > a,
.whoopba-header__menu .sub-menu > li.whoopba-mega-menu__group.current-menu-ancestor > a {
    color: #10AAA3 !important;
}

/* ── Modules panel : 4-column grid (exact Image 2 match) ────────── */
.whoopba-header__menu > .whoopba-mega-parent--modules > .sub-menu,
.whoopba-header__menu > .whoopba-mega-parent--modules.is-open > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px 28px !important;
    width: 860px !important;
    padding: 60px 32px 28px !important;
    box-sizing: border-box !important;
}

/* "Modules" heading label at top left */
.whoopba-mega-parent--modules > .sub-menu::after {
    content: "Modules";
    display: block !important;
    position: absolute; top: 20px; left: 32px; right: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: 15px; font-weight: 700;
    color: var(--w-ink); line-height: 1;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Individual module items (leaf items, not group headings) */
.whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group) {
    display: block !important; margin: 0 !important; padding: 0 !important;
}
.whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group) > a {
    display: flex !important; align-items: center; gap: 12px !important;
    padding: 6px 8px !important; border-radius: 8px !important;
    color: #444 !important; font-size: 14px !important; font-weight: 500 !important;
    text-decoration: none !important; transition: background .14s, color .14s !important;
    white-space: nowrap !important;
}
.whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group) > a:hover {
    background: rgba(16,170,163,.08) !important; color: var(--w-teal) !important;
}
.whoopba-mega-parent--modules .whoopba-module-icon {
    width: 22px; height: 22px; flex: 0 0 22px;
    display: flex; align-items: center; justify-content: center;
    color: #5b5b66;
}
.whoopba-mega-parent--modules .whoopba-module-icon svg {
    width: 20px; height: 20px; stroke-width: 1.8; display: block;
}

/* Modules quick-links: spans all 4 grid columns */
.whoopba-mega-parent--modules > .sub-menu > .whoopba-mega-group--quick-links {
    grid-column: 1 / -1 !important;
    margin: 16px -32px -5px !important;
    padding: 12px 32px !important;
    background: rgba(16,170,163,.08) !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 0 0 14px 14px !important;
    width: auto !important;
}

/* ── Quick-links footer bar (Solutions and other panels) ────────── */
.whoopba-mega-group--quick-links {
    flex: 0 0 100%; padding: 10px 26px !important;
    background: rgba(16,170,163,.08);
    border-top: 1px solid rgba(0,0,0,.05);
    border-radius: 0 0 14px 14px;
}
.whoopba-mega-group--quick-links > a { display: none !important; }

.whoopba-mega-group--quick-links > .sub-menu {
    display: flex !important; align-items: center; gap: 0;
    flex-wrap: nowrap; padding: 0 !important;
}
.whoopba-mega-group--quick-links > .sub-menu > li > a {
    display: flex !important; align-items: center; padding: 4px 14px;
    color: #555; font-size: 13px; font-weight: 500;
    text-decoration: none; transition: color .14s;
}
.whoopba-mega-group--quick-links > .sub-menu > li:first-child > a { padding-left: 0; }
.whoopba-mega-group--quick-links > .sub-menu > li + li > a { border-left: 1px solid rgba(0,0,0,.15); }
.whoopba-mega-group--quick-links > .sub-menu > li > a:hover { color: var(--w-teal); }
.whoopba-mega-group--quick-links .whoopba-menu-item-label { display: inline; }

/* ── Mobile-only elements hidden on desktop ─────────────────────── */
.whoopba-mobile-panel__top,
.whoopba-mobile-details,
.whoopba-menu-backdrop,
.whoopba-submenu-toggle { display: none; }

/* Ensure the close button in the mobile panel top is always a block */
.whoopba-mobile-panel__close {
    display: block !important;
    background: none !important;
    border: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #444 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ================================================================
   MOBILE  (≤ 820 px)
   ================================================================ */
@media (max-width: 960px) {
    /* Tablet: collapse nav into drawer at 960px */
    .whoopba-header__inner { padding: 0 10px; }
    button.whoopba-menu-toggle,
    .whoopba-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    body.whoopba-menu-open { overflow: hidden; }

    .whoopba-header__nav {
        position: fixed; z-index: 10001; top: 0; left: 0; bottom: 0;
        width: 100vw; background: #fff;
        box-shadow: 6px 0 30px rgba(0,0,0,.15);
        display: block; overflow-y: auto; overflow-x: hidden;
        transform: translateX(-105%); visibility: hidden;
        transition: transform .3s ease;
    }
    .whoopba-header__nav.is-open { transform: translateX(0); visibility: visible; }

    .whoopba-header__menu { display: block; padding: 0; }
    .whoopba-header__menu > li {
        display: grid; grid-template-columns: 1fr auto;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .whoopba-header__menu > li > a {
        padding: 12px 20px !important; border-radius: 0;
        font-size: clamp(15px, 4vw, 17px) !important; font-weight: 500 !important;
        color: #686568 !important; font-family: "Titillium Web", sans-serif !important;
    }
    .whoopba-header__menu > .menu-item-has-children > a::after { display: none; }

    .whoopba-header__menu > .menu-item-has-children > .sub-menu {
        grid-column: 1 / -1;
        position: static !important; width: 100% !important; left: auto !important;
        transform: none !important; opacity: 0 !important;
        visibility: hidden !important; pointer-events: none !important;
        box-shadow: none !important; border-radius: 0 !important;
        background: #f8f9fa !important; display: block !important;
        max-height: 0 !important; padding: 0 !important; margin: 0 !important;
        overflow: hidden !important;
        transition: max-height .32s ease, opacity .2s ease;
    }
    .whoopba-header__menu > .menu-item-has-children.is-open > .sub-menu {
        max-height: 1200px !important; opacity: 1 !important;
        visibility: visible !important; pointer-events: auto !important;
        padding: 12px 16px !important;
    }

    .whoopba-mega-menu__group { display: block; padding: 8px 16px 4px; width: 100%; }
    .whoopba-mega-menu__group > a { display: block; font-size: 11px; pointer-events: auto; margin-bottom: 4px; padding-bottom: 6px; }
    .whoopba-mega-menu__group > .sub-menu { display: block !important; width: 100% !important; grid-template-columns: none !important; }
    .whoopba-mega-menu__group > .sub-menu > li > a { padding: 8px 0 !important; display: flex !important; font-size: clamp(13px, 3.5vw, 15px) !important; }

    /* ── Modules panel: force single column on mobile ── */
    .whoopba-header__menu > .whoopba-mega-parent--modules > .sub-menu,
    .whoopba-header__menu > .whoopba-mega-parent--modules.is-open > .sub-menu {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        position: static !important;
        transform: none !important;
    }
    /* Force every module li to full-width single column */
    .whoopba-header__menu > .whoopba-mega-parent--modules > .sub-menu > li {
        display: block !important;
        width: 100% !important;
        grid-column: auto !important;
    }
    .whoopba-mega-parent--modules > .sub-menu::after { display: none !important; }
    .whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group) > a {
        padding: 9px 16px !important;
        border-radius: 0 !important;
        font-size: clamp(13px, 3.5vw, 15px) !important;
        white-space: normal !important;
    }

    .whoopba-mega-group--quick-links { border-radius: 0 !important; margin: 0 !important; padding: 6px 0 10px !important; background: rgba(16,170,163,.08) !important; }
    .whoopba-mega-group--quick-links > .sub-menu { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
    .whoopba-mega-group--quick-links > .sub-menu > li { width: 100% !important; }
    .whoopba-mega-group--quick-links > .sub-menu > li > a { padding: 9px 16px !important; border-left: 0 !important; display: block !important; }
    .whoopba-mega-group--quick-links > .sub-menu > li + li > a { border-left: 0 !important; border-top: 1px solid rgba(0,0,0,.05) !important; }

    button.whoopba-submenu-toggle,
    .whoopba-submenu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center; justify-content: center;
        width: 50px; min-height: 48px; height: 100%;
        background: none !important; border: 0; border-left: 1px solid rgba(0,0,0,.07);
        cursor: pointer; color: var(--w-teal) !important;
        /* Override Elementor global link/accent color */
        outline: none !important; box-shadow: none !important;
    }
    .whoopba-submenu-toggle::before { content: "+"; font: 300 24px/1 system-ui; color: var(--w-teal) !important; }
    .is-open > .whoopba-submenu-toggle { color: var(--w-teal) !important; }
    .is-open > .whoopba-submenu-toggle::before { content: "\00d7"; color: var(--w-teal) !important; }

    .whoopba-mobile-panel__top {
        display: flex !important; align-items: center; justify-content: space-between;
        padding: 16px 24px 10px; gap: 16px; min-height: 68px;
        border-bottom: 1px solid rgba(0,0,0,.07);
        position: sticky; top: 0; background: #fff; z-index: 2;
    }
    .whoopba-mobile-panel__logo { height: 40px; width: auto; object-fit: contain; }
    .whoopba-mobile-panel__close {
        display: flex !important; align-items: center; justify-content: center;
        background: rgba(0,0,0,.06) !important; border: 0 !important;
        font-size: 22px !important; line-height: 1 !important;
        color: #333 !important; cursor: pointer !important;
        padding: 0 !important; flex-shrink: 0 !important;
        outline: none !important; box-shadow: none !important;
        width: 36px !important; height: 36px !important;
        border-radius: 50% !important;
    }
    .whoopba-mobile-panel__close:hover {
        background: rgba(0,0,0,.12) !important;
    }
    .whoopba-mobile-details {
        display: block !important;
        padding: 20px 24px 32px;
        color: #555;
        font-size: 14px;
        line-height: 1.6;
        border-top: 1px solid rgba(0,0,0,.06);
        margin-top: 0;
    }
    .whoopba-mobile-details h2,
    .whoopba-mobile-details .whoopba-mobile-details__heading {
        color: var(--w-teal);
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 10px;
    }
    .whoopba-mobile-details a { color: inherit; text-decoration: none; }
    .whoopba-mobile-details__row { display: flex; gap: 12px; margin: 10px 0; align-items: flex-start; }
    .whoopba-mobile-details__icon {
        width: 20px; height: 20px; flex-shrink: 0;
        fill: none; stroke: var(--w-teal); stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; margin-top: 2px;
    }
    .whoopba-mobile-socials {
        display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin-top: 14px; list-style: none;
    }
    .whoopba-mobile-socials a {
        width: 42px; height: 42px; display: grid; place-items: center;
        background: var(--w-teal); color: #fff; border-radius: 50%; transition: background .15s;
    }
    .whoopba-mobile-socials a:hover { background: #0c8e89; }
    .whoopba-mobile-socials svg { width: 18px; height: 18px; fill: currentColor; }

    .whoopba-menu-backdrop {
        display: block; position: fixed; z-index: 9980; inset: 0;
        background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
        border: 0; transition: opacity .3s;
    }
    .whoopba-menu-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Same mobile layout, forced by JS when the PHYSICAL device width is
   ≤ 960px even if browser zoom has inflated the CSS viewport above 960px.
   This keeps tablets in the drawer layout when the user zooms out. */
html.wba-phys-mobile .whoopba-header__inner { padding: 0 10px; }
html.wba-phys-mobile button.whoopba-menu-toggle,
html.wba-phys-mobile .whoopba-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
html.wba-phys-mobile body.whoopba-menu-open { overflow: hidden; }

html.wba-phys-mobile .whoopba-header__nav {
    position: fixed; z-index: 10001; top: 0; left: 0; bottom: 0;
    width: 100vw; background: #fff;
    box-shadow: 6px 0 30px rgba(0,0,0,.15);
    display: block; overflow-y: auto; overflow-x: hidden;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .3s ease;
}
html.wba-phys-mobile .whoopba-header__nav.is-open { transform: translateX(0); visibility: visible; }

html.wba-phys-mobile .whoopba-header__menu { display: block; padding: 0; }
html.wba-phys-mobile .whoopba-header__menu > li {
    display: grid; grid-template-columns: 1fr auto;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
html.wba-phys-mobile .whoopba-header__menu > li > a {
    padding: 12px 20px !important; border-radius: 0;
    font-size: clamp(15px, 4vw, 17px) !important; font-weight: 500 !important;
    color: #686568 !important; font-family: "Titillium Web", sans-serif !important;
}
html.wba-phys-mobile .whoopba-header__menu > .menu-item-has-children > a::after { display: none; }

html.wba-phys-mobile .whoopba-header__menu > .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
    position: static !important; width: 100% !important; left: auto !important;
    transform: none !important; opacity: 0 !important;
    visibility: hidden !important; pointer-events: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    background: #f8f9fa !important; display: block !important;
    max-height: 0 !important; padding: 0 !important; margin: 0 !important;
    overflow: hidden !important;
    transition: max-height .32s ease, opacity .2s ease;
}
html.wba-phys-mobile .whoopba-header__menu > .menu-item-has-children.is-open > .sub-menu {
    max-height: 1200px !important; opacity: 1 !important;
    visibility: visible !important; pointer-events: auto !important;
    padding: 12px 16px !important;
}

html.wba-phys-mobile .whoopba-mega-menu__group { display: block; padding: 8px 16px 4px; width: 100%; }
html.wba-phys-mobile .whoopba-mega-menu__group > a { display: block; font-size: 11px; pointer-events: auto; margin-bottom: 4px; padding-bottom: 6px; }
html.wba-phys-mobile .whoopba-mega-menu__group > .sub-menu { display: block !important; width: 100% !important; grid-template-columns: none !important; }
html.wba-phys-mobile .whoopba-mega-menu__group > .sub-menu > li > a { padding: 8px 0 !important; display: flex !important; font-size: clamp(13px, 3.5vw, 15px) !important; }

html.wba-phys-mobile .whoopba-header__menu > .whoopba-mega-parent--modules > .sub-menu,
html.wba-phys-mobile .whoopba-header__menu > .whoopba-mega-parent--modules.is-open > .sub-menu {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: static !important;
    transform: none !important;
}
html.wba-phys-mobile .whoopba-header__menu > .whoopba-mega-parent--modules > .sub-menu > li {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
}
html.wba-phys-mobile .whoopba-mega-parent--modules > .sub-menu::after { display: none !important; }
html.wba-phys-mobile .whoopba-mega-parent--modules > .sub-menu > li:not(.whoopba-mega-menu__group) > a {
    padding: 9px 16px !important;
    border-radius: 0 !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
    white-space: normal !important;
}

html.wba-phys-mobile .whoopba-mega-group--quick-links { border-radius: 0 !important; margin: 0 !important; padding: 6px 0 10px !important; background: rgba(16,170,163,.08) !important; }
html.wba-phys-mobile .whoopba-mega-group--quick-links > .sub-menu { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
html.wba-phys-mobile .whoopba-mega-group--quick-links > .sub-menu > li { width: 100% !important; }
html.wba-phys-mobile .whoopba-mega-group--quick-links > .sub-menu > li > a { padding: 9px 16px !important; border-left: 0 !important; display: block !important; }
html.wba-phys-mobile .whoopba-mega-group--quick-links > .sub-menu > li + li > a { border-left: 0 !important; border-top: 1px solid rgba(0,0,0,.05) !important; }

html.wba-phys-mobile .whoopba-submenu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 50px; min-height: 48px; height: 100%;
    background: none !important; border: 0; border-left: 1px solid rgba(0,0,0,.07);
    cursor: pointer; color: var(--w-teal) !important;
    outline: none !important; box-shadow: none !important;
}
html.wba-phys-mobile .whoopba-submenu-toggle::before { content: "+"; font: 300 24px/1 system-ui; color: var(--w-teal) !important; }
html.wba-phys-mobile .is-open > .whoopba-submenu-toggle { color: var(--w-teal) !important; }
html.wba-phys-mobile .is-open > .whoopba-submenu-toggle::before { content: "\00d7"; color: var(--w-teal) !important; }

html.wba-phys-mobile .whoopba-mobile-panel__top {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 16px 24px 10px; gap: 16px; min-height: 68px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    position: sticky; top: 0; background: #fff; z-index: 2;
}
html.wba-phys-mobile .whoopba-mobile-panel__logo { height: 40px; width: auto; object-fit: contain; }
html.wba-phys-mobile .whoopba-mobile-panel__close {
    display: flex !important; align-items: center; justify-content: center;
    background: rgba(0,0,0,.06) !important; border: 0 !important;
    font-size: 22px !important; line-height: 1 !important;
    color: #333 !important; cursor: pointer !important;
    padding: 0 !important; flex-shrink: 0 !important;
    outline: none !important; box-shadow: none !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
}
html.wba-phys-mobile .whoopba-mobile-panel__close:hover {
    background: rgba(0,0,0,.12) !important;
}
html.wba-phys-mobile .whoopba-mobile-details {
    display: block !important;
    padding: 20px 24px 32px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 0;
}
html.wba-phys-mobile .whoopba-mobile-details h2,
html.wba-phys-mobile .whoopba-mobile-details .whoopba-mobile-details__heading {
    color: var(--w-teal);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}
html.wba-phys-mobile .whoopba-mobile-details a { color: inherit; text-decoration: none; }
html.wba-phys-mobile .whoopba-mobile-details__row { display: flex; gap: 12px; margin: 10px 0; align-items: flex-start; }
html.wba-phys-mobile .whoopba-mobile-details__icon {
    width: 20px; height: 20px; flex-shrink: 0;
    fill: none; stroke: var(--w-teal); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; margin-top: 2px;
}
html.wba-phys-mobile .whoopba-mobile-socials {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin-top: 14px; list-style: none;
}
html.wba-phys-mobile .whoopba-mobile-socials a {
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--w-teal); color: #fff; border-radius: 50%; transition: background .15s;
}
html.wba-phys-mobile .whoopba-mobile-socials a:hover { background: #0c8e89; }
html.wba-phys-mobile .whoopba-mobile-socials svg { width: 18px; height: 18px; fill: currentColor; }

html.wba-phys-mobile .whoopba-menu-backdrop {
    display: block; position: fixed; z-index: 9980; inset: 0;
    background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
    border: 0; transition: opacity .3s;
}
html.wba-phys-mobile .whoopba-menu-backdrop.is-open { opacity: 1; visibility: visible; }


@media (prefers-reduced-motion: reduce) {
    .whoopba-header *, .whoopba-header *::before, .whoopba-header *::after {
        transition: none !important; animation: none !important;
    }
}