/* ==========================================================================
   FROSTED-GLASS HEADER — hub-child nav skin (2026-07-14)
   The header stays the site's own WordPress menu + Elementor header widget;
   this file only re-skins its states. Owner direction:

   • TOP OF PAGE: the bar is fully transparent — no box, no blur. Text, logo
     and icon colors stay the theme's (dark rows keep their white scheme via
     Hub's own lqd-active-row-dark detection; blog-post tops are pinned
     white below because the detector can't see .lqd-post-cover heroes).
   • SCROLLED: Hub's own sticky detection (is-stuck / lqd-just-stuck) fades
     in a semi-transparent frosted-glass bar. Dark rows frost dark.
   • DROPDOWNS — megamenu flyouts AND the cart: the same translucent glass
     as the bar, flush against its bottom edge. No border, no shadow line,
     no gap: bar and panel read as one continuous frosted sheet. Flyouts
     reveal top-down (clip-path); the page behind dims and blurs.
   • MOBILE: same transparent/frosted bar; the full-screen curtain is
     heavier frosted glass; dark bars whiten the hamburger AND the cart
     icon (the icon ships as a black inline SVG the theme never recolors).

   Layering note: the bar's glass lives on .main-header::before, NOT on the
   header element. A backdrop-filter on the header itself would stop the
   dropdown panels (its descendants) from blurring the page — nested
   backdrop-filters don't compose. A pseudo-element sibling composes fine.
   ========================================================================== */

:root {
    --ocd-nav-ease: cubic-bezier(0.32, 0.72, 0, 1); /* expo-out             */
    --ocd-nav-glass-light: rgba(255, 255, 255, 0.72);
    --ocd-nav-glass-dark: rgba(22, 22, 23, 0.8);
    --ocd-nav-glass-heavy: rgba(255, 255, 255, 0.88); /* mobile curtain     */
    --ocd-nav-blur: saturate(180%) blur(20px);
    --ocd-nav-blur-heavy: saturate(180%) blur(25px);
    /* max(), not a var() fallback chain. The theme defines
       --lqd-mobile-sec-height as `0px` rather than leaving it undefined, and a
       var() fallback only applies when the variable is MISSING — so
       `var(--lqd-mobile-sec-height, var(--ocd-mbar-h, 64px))` resolved to 0px
       and --ocd-mbar-h (a correct 51px) was never reachable.
       Its one consumer is `ul#mobile-primary-nav`'s top margin in
       custom-menu.css, which is what holds the first menu item clear of the
       bar; at 0px that margin collapsed to 12px and "Home" rendered underneath
       the 51px bar, overlapped by it and partly untappable. */
    --ocd-nav-bar-h: max(var(--lqd-mobile-sec-height, 0px), var(--ocd-mbar-h, 64px));
}

/* --------------------------------------------------------------------------
   THE BAR (all widths): fixed, never hides, and paints NOTHING itself.
   The glass is a ::before layer that fades in per state below; at the top
   of the page it is invisible — no box. Smart-sticky hide/show transforms
   stay neutralized; the sticky classes still toggle and drive the frost.
   -------------------------------------------------------------------------- */
.main-header.main-header-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent !important;
    transform: none !important;
}
.main-header.main-header-overlay.is-stuck,
.main-header.main-header-overlay.lqd-just-stuck,
.main-header.main-header-overlay.lqd-smart-sticky-hide {
    top: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.main-header.main-header-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0);
    /* identity filter, not `none`, so the frost can fade in smoothly */
    -webkit-backdrop-filter: saturate(100%) blur(0px);
    backdrop-filter: saturate(100%) blur(0px);
    transition: background-color 0.4s var(--ocd-nav-ease),
        -webkit-backdrop-filter 0.4s var(--ocd-nav-ease);
    transition: background-color 0.4s var(--ocd-nav-ease),
        backdrop-filter 0.4s var(--ocd-nav-ease);
}
body.admin-bar .main-header.main-header-overlay { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar .main-header.main-header-overlay { top: 46px !important; }
}

/* --------------------------------------------------------------------------
   DARK PAGES DO NOT WAIT FOR JAVASCRIPT

   Every dark rule below is gated on `.lqd-active-row-dark`, which the theme's
   dynamic-colour detector adds from theme.min.js — a footer script behind ~45
   others. The delivered HTML does not carry it. So on /pricing/ the hamburger,
   the cart glyph and the logo paint in the theme's DARK scheme against a
   #030304 hero until the page boots: black on black, which is the other half
   of "you can't click the hamburger" — you cannot see it either.

   `body.oa-dark-page` comes from PHP, so it is in the markup on arrival, and a
   page on that list is dark top to bottom — nothing for a detector to decide.
   No `:not(.mobile-nav-activated)` guard, unlike the detector-driven rules
   below: those release to dark icons when the menu opens because the curtain
   is white, and on a dark page it is not (see the MOBILE section).
   -------------------------------------------------------------------------- */
/* Retune the glass itself for dark pages rather than re-declaring it per rule.
   Every dark treatment in this file — the bar frost, the megamenu panel, the
   cart sheet, the mobile curtain — reads these three variables, and the
   detector-driven rules are six classes deep and !important, so a literal
   colour written against them would lose. Overriding the variable reaches all
   of them and cannot lose a specificity fight.

   .8 let 20% of the backdrop through, and on this page the backdrop is the
   hero's orange bloom: anything the compositor did behind the panel arrived as
   a bright event. .95 is still glass (the blur does that work) with nothing
   showing through. saturate() goes for the same reason — it exists to keep a
   light frost lively, and over orange all it does is push toward white. */
body.oa-dark-page {
    --ocd-nav-glass-dark: rgba(18, 18, 20, 0.95);
    --ocd-nav-blur: blur(22px);
    --ocd-nav-blur-heavy: blur(26px);
}

body.oa-dark-page .main-header .navbar-brand img,
body.oa-dark-page .main-header .module-logo img {
    /* One dark SVG ships in the markup; inversion shows its white counterpart. */
    filter: brightness(0) invert(1);
}
body.oa-dark-page .main-header .nav-trigger .bar {
    /* The theme paints these and never recolours them. */
    background-color: #fff !important;
}
body.oa-dark-page .main-header .main-nav > li > a,
body.oa-dark-page .main-header .ld-module-trigger-txt,
body.oa-dark-page .main-header .ld-module-trigger-count,
body.oa-dark-page .main-header .elementor-button.btn,
body.oa-dark-page .main-header .elementor-button.btn .btn-txt {
    color: #fff !important;
}
body.oa-dark-page .main-header .ld-module-trigger-icon svg,
body.oa-dark-page .main-header .ld-module-trigger-icon svg path,
body.oa-dark-page .main-header .ld-module-trigger-icon svg * {
    fill: #fff !important;
    color: #fff !important;
}
/* The cart sheet's close X. It is not an icon and not the nav-trigger's bars —
   it is two pseudo-element rules on .ld-module-trigger-close-cross, both
   painted rgb(0,0,0) by the theme. Once the sheet under it went dark that was
   a black cross on a dark panel, i.e. no cross at all. */
body.oa-dark-page .main-header .ld-module-trigger-close-cross::before,
body.oa-dark-page .main-header .ld-module-trigger-close-cross::after {
    background-color: #fff !important;
}

/* --- FROST ON: scrolled (Hub's own sticky classes), flyout open, mobile
       curtain open. Light glass is the default; dark cases override below. */
.main-header.main-header-overlay.is-stuck::before,
.main-header.main-header-overlay.lqd-just-stuck::before,
.main-header.main-header-overlay.megamenu-item-active::before,
html.mobile-nav-activated .main-header.main-header-overlay::before {
    background: var(--ocd-nav-glass-light);
    -webkit-backdrop-filter: var(--ocd-nav-blur);
    backdrop-filter: var(--ocd-nav-blur);
}
/* cart (or any header module) dropdown open — hover or click */
.main-header.main-header-overlay:has(.ld-module-dropdown.is-active)::before,
.main-header.main-header-overlay:has(.ld-module-dropdown.show)::before,
.main-header.main-header-overlay:has(.ld-module-dropdown.collapsing)::before {
    background: var(--ocd-nav-glass-light);
    -webkit-backdrop-filter: var(--ocd-nav-blur);
    backdrop-filter: var(--ocd-nav-blur);
}

/* --- DARK FROST: scrolled over a theme-detected dark row, or the cart
       opened over one (incl. blog-post tops, where the bar is otherwise
       transparent and must frost dark to meet its dropdown).

       This used to release to the LIGHT bar while a flyout was open, because
       the curtain below it was white. Measured on /pricing/: the bar went from
       rgba(22,22,23,.8) to rgba(255,255,255,.72) the moment a dropdown opened,
       so on a dark page opening the menu flashed a white bar and a white
       curtain across dark content — the "multiple colours". The curtain is now
       dark on dark rows too (see FLYOUT below), so the bar no longer has to
       flip and the exclusion is gone. One material, one colour, both states. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark.is-stuck::before,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark.lqd-just-stuck::before,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark.megamenu-item-active::before,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark:has(.ld-module-dropdown.is-active)::before,
html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active):has(.ld-module-dropdown.is-active)::before {
    background: var(--ocd-nav-glass-dark);
    -webkit-backdrop-filter: var(--ocd-nav-blur);
    backdrop-filter: var(--ocd-nav-blur);
}

/* --- LOGO: single dark SVG ships in the markup; dark rows show its white
       (dark-version) counterpart via inversion — at the transparent top AND
       under the dark frost. Light bar: untouched. ------------------------- */
.main-header .navbar-brand img,
.main-header .module-logo img {
    transition: filter 0.36s var(--ocd-nav-ease);
}
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .navbar-brand img,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .module-logo img,
html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .navbar-brand img,
html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .module-logo img {
    filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   CART / MODULE DROPDOWNS (all widths): the same glass as the bar, flush
   against its bottom edge — Hub's 10px margin gap and solid white box are
   retired. Square top corners meet the bar; only the bottom is rounded.
   Opens as a top-down reveal instead of the floating fade-and-rise.
   -------------------------------------------------------------------------- */
.main-header .ld-module-dropdown {
    margin-top: 0 !important;
    background: var(--ocd-nav-glass-light) !important;
    -webkit-backdrop-filter: var(--ocd-nav-blur);
    backdrop-filter: var(--ocd-nav-blur);
    border: 0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.35s ease, clip-path 0.5s var(--ocd-nav-ease),
        visibility 0.35s !important;
}
.main-header .ld-module-dropdown.is-active,
.main-header .ld-module-dropdown.show {
    clip-path: inset(0 0 0 0);
}
/* Dark rows: same reasoning as the flyout curtain — the dropdown hangs off the
   bar's bottom edge as one sheet, so a light panel under a dark bar is the seam
   this file exists to remove. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .ld-module-dropdown {
    background: var(--ocd-nav-glass-dark) !important;
}
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .ld-module-dropdown
    :is(a, p, li, span, h1, h2, h3, h4, h5, h6):not([class*="icon"]) {
    color: rgba(255, 255, 255, 0.92) !important;
}
/* The quantity stepper and anything else the cart draws as a control. These
   ship black — measured at rgb(0,0,0) against the now-dark panel, which is the
   minus and plus being invisible. Borders come with them: a black hairline on
   a dark panel is the same problem one step quieter. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .ld-module-dropdown
    :is(button, input, select, [class*="qty"], [class*="quantity"], [class*="plus"], [class*="minus"], [class*="update"]) {
    color: #fff !important;
}
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .ld-module-dropdown
    :is(input, select) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
/* The stepper glyphs are inline SVGs authored with black fills that the theme
   never recolours. Repainting every path white filled the whole icon and turned
   the minus and plus into solid white squares — verified in a browser. Inverting
   the black to white keeps the glyph's own shape and transparency, which is the
   same technique the logo above uses for exactly this reason. The Checkout
   button paints its own background and is excluded. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .ld-module-dropdown
    :not(.btn):not([class*="button"]) > svg {
    filter: brightness(0) invert(1);
}
/* The per-product remove control. It is excluded from the inversion above by
   its own class — `remove_from_cart_button` matches [class*="button"] — so on a
   dark panel it kept the light treatment it ships with: a black cross inside a
   white chip. It now draws in currentColor (see custom-woocommerce.css), which
   leaves nothing to do here but set the colour for the dark panel. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
    a.ld-cart-product-remove {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
    a.ld-cart-product-remove:hover,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
    a.ld-cart-product-remove:focus-visible {
    background: rgba(255, 130, 1, 0.18) !important;
    border-color: #ff8201 !important;
    color: #ff8201 !important;
}
/* The scrolling product list on a dark panel: the light thumb is invisible. */
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
    .ld-cart-products {
    scrollbar-color: rgba(255, 255, 255, 0.30) transparent;
}
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
    .ld-cart-products::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
}

/* ==========================================================================
   DESKTOP (≥1025px — Elementor's hidden-tablet boundary for the wide nav)
   ========================================================================== */
@media (min-width: 1025px) {

    /* --- Blog-post top: detector is blind here, pin the site's white
           (dark-version) text/icons — colors only, sizes stay the theme's. */
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .main-nav > li > a,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .ld-module-trigger-txt,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .ld-module-trigger-count,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .ld-module-trigger-icon,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .elementor-button.btn,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .elementor-button.btn .btn-txt {
        color: #fff !important;
    }
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .ld-module-trigger-icon svg,
    .single-post .main-header.main-header-overlay:not(.is-stuck):not(.megamenu-item-active) .ld-module-trigger-icon svg path {
        fill: #fff !important;
        color: #fff !important;
    }

    /* --- Dark rows: the bar module icons (cart) ship as black inline SVGs
           the theme's dynamic colors never recolor — whiten them while the
           bar is transparent-over-dark or dark-frosted. Releases when a
           flyout opens (light bar needs the theme's dark icon back; the old
           theme-options rule lacked this guard and left a white icon on the
           white bar). ------------------------------------------------------ */
    .main-header.main-header-overlay.lqd-active-row-dark .ld-module-trigger-icon svg,
    .main-header.main-header-overlay.lqd-active-row-dark .ld-module-trigger-icon svg path,
    .main-header.main-header-overlay.lqd-active-row-dark .ld-module-trigger-icon svg * {
        fill: #fff !important;
        color: #fff !important;
    }

    /* --- FLYOUT: full-width frosted curtain ------------------------------
           Hub's morphing "slide" bg, hover bg and the panel's own white box
           + shadow (its ::before) are retired. The panel is the same glass
           as the bar and its top edge is exactly the bar's bottom edge (the
           menu items span the full bar height, so top:100% is flush) — one
           continuous sheet, no seam. It reveals top-down like a curtain.
           Panel CONTENT (links, headings, icons) keeps the theme's own
           colors and sizes — the Services/Shop icons stay colored. -------- */
    .main-header .megamenu-hover-bg,
    .main-header .lqd-megamenu-slide-stuff { display: none !important; }
    .main-header #primary-nav > li.megamenu > .nav-item-children::before {
        display: none !important;
    }

    /* --- DARK ROWS: the curtain is the same sheet as the bar, so when the bar
           is dark the curtain has to be dark too — otherwise the seam the whole
           design exists to hide comes back, inverted. Text is lifted to the
           light-on-dark pair; icons are deliberately left alone, as above. --- */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
        #primary-nav > li.megamenu > .nav-item-children {
        background: var(--ocd-nav-glass-dark) !important;
    }
    /* `div` is in the list because the column headings ("Website Development",
       "Social Media Advertising") are Elementor heading widgets, not h-tags —
       measured at rgb(29,29,31), i.e. near-black on the dark panel, while their
       child links were already white. Anything painting its own background
       (the promo card) is excluded so its own light-on-colour pairing survives. */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
        #primary-nav > li.megamenu > .nav-item-children
        :is(a, h1, h2, h3, h4, h5, h6, p, li, span, div):not([class*="icon"]):not([class*="badge"]) {
        color: rgba(255, 255, 255, 0.92) !important;
    }
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
        #primary-nav > li.megamenu > .nav-item-children a:hover :is(span, h1, h2, h3, h4, h5, h6),
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
        #primary-nav > li.megamenu > .nav-item-children a:hover {
        color: #fff !important;
    }
    /* Dividers and any hairline the panel draws for itself. */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark
        #primary-nav > li.megamenu > .nav-item-children :is(hr, .divider, [class*="separator"]) {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background-color: rgba(255, 255, 255, 0.14) !important;
    }
    /* The bar's own top-level links, while the curtain is open on a dark row. */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark.megamenu-item-active
        .main-nav > li > a {
        color: rgba(255, 255, 255, 0.92) !important;
    }

    .main-header #primary-nav > li.megamenu > .nav-item-children {
        background: var(--ocd-nav-glass-light) !important;
        -webkit-backdrop-filter: var(--ocd-nav-blur);
        backdrop-filter: var(--ocd-nav-blur);
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 36px 0 44px !important;
        transform: none !important;
        clip-path: inset(0 0 100% 0);
        transition: opacity 0.35s ease, clip-path 0.6s var(--ocd-nav-ease),
            visibility 0.35s;
    }
    .main-header #primary-nav > li.megamenu.is-active > .nav-item-children {
        clip-path: inset(0 0 0 0);
    }

    /* --- THE WHITE BLINK BETWEEN TWO DROPDOWNS ---------------------------
       Sweeping from one megamenu item to the next, both panels are
       visibility:visible for a moment — sampled at 40ms:

         0.52s  [op1 cp0%    vis] [op0 cp100%  hid]
         0.56s  [op0 cp96.8% vis] [op1 cp3.2%  vis]   <- two backdrop roots

       Stacked backdrop-filters do not compose (see the note at the top of this
       file), so the engine re-rasterises and samples the backdrop UNFILTERED
       for a frame — on /pricing/ that is the orange lamp at full strength, and
       saturate(1.8) pushes it brighter. No computed background ever changes,
       which is why it is not a colour swap: 96 samples found none.

       A panel at opacity 0 has no business filtering anything, so only the
       active one keeps its filter and there is never a second root. */
    .main-header #primary-nav > li.megamenu:not(.is-active) > .nav-item-children,
    .main-header #primary-nav > li:not(.megamenu):not(.is-active) > .nav-item-children,
    .main-header #primary-nav > li:not(.megamenu):not(.is-active) > .children {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* plain (non-mega) dropdowns, if a menu item ever grows one: same glass,
       flush at the bar edge, rounded only at the bottom */
    .main-header #primary-nav > li:not(.megamenu) > .nav-item-children,
    .main-header #primary-nav > li:not(.megamenu) > .children {
        background: var(--ocd-nav-glass-light);
        -webkit-backdrop-filter: var(--ocd-nav-blur);
        backdrop-filter: var(--ocd-nav-blur);
        border-radius: 0 0 14px 14px;
    }
    .main-header #primary-nav > li:not(.megamenu) > .nav-item-children::before,
    .main-header #primary-nav > li:not(.megamenu) > .children::before {
        display: none !important;
    }

    /* content rises in with a gentle stagger while the curtain opens */
    .main-header .nav-item-children #mega-menu > .e-con > .e-con-inner > * {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.45s ease, transform 0.55s var(--ocd-nav-ease);
    }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > * {
        opacity: 1;
        transform: none;
    }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > *:nth-child(1) { transition-delay: 0.05s; }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > *:nth-child(2) { transition-delay: 0.11s; }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > *:nth-child(3) { transition-delay: 0.17s; }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > *:nth-child(4) { transition-delay: 0.23s; }
    .main-header #primary-nav > li.megamenu.is-active .nav-item-children
        #mega-menu > .e-con > .e-con-inner > *:nth-child(5) { transition-delay: 0.29s; }

    /* --- DARK PAGES: the curtain never flips ------------------------------
       Reported 2026-08: moving along the bar from one dropdown to the next on
       /pricing/, the panel flashes WHITE and then settles back to dark.

       Cause is the same one the block at the top of this file exists for. Every
       dark rule above is gated on `.lqd-active-row-dark`, and that class is
       owned by the theme's dynamic-colour detector, which re-evaluates as the
       flyout opens and closes — so the class drops for a frame or two between
       panels and the curtain falls back to its light default. The note at the
       DARK FROST block records the same symptom being chased on the bar
       itself; fixing the bar left the fragile gate in place for the panels.

       Gating on `body.oa-dark-page` instead removes the dependency rather than
       re-tuning it: the class is in the markup on arrival, it cannot toggle,
       and on a page that is dark end to end there is nothing to detect. The
       detector's own rules still apply on top and agree with these. ------- */
    /* The non-megamenu dropdowns have no dark counterpart anywhere in this file
       — they are light-only — so they need the rule. The megamenu panel and the
       cart are listed too so a dark page is covered even before the detector
       class lands. The VALUE comes from the variable override at the top of the
       file, not from here: the detector-driven rule further up is six classes
       deep and also !important, so a literal written here would lose to it. */
    body.oa-dark-page .main-header #primary-nav > li.megamenu > .nav-item-children,
    body.oa-dark-page .main-header #primary-nav > li:not(.megamenu) > .nav-item-children,
    body.oa-dark-page .main-header #primary-nav > li:not(.megamenu) > .children,
    body.oa-dark-page .main-header .ld-module-dropdown {
        background: var(--ocd-nav-glass-dark) !important;
    }
    body.oa-dark-page .main-header.main-header-overlay.is-stuck::before,
    body.oa-dark-page .main-header.main-header-overlay.lqd-just-stuck::before,
    body.oa-dark-page .main-header.main-header-overlay.megamenu-item-active::before,
    body.oa-dark-page .main-header.main-header-overlay:has(.ld-module-dropdown.is-active)::before,
    body.oa-dark-page .main-header.main-header-overlay:has(.ld-module-dropdown.show)::before,
    body.oa-dark-page .main-header.main-header-overlay:has(.ld-module-dropdown.collapsing)::before {
        background: var(--ocd-nav-glass-dark);
        -webkit-backdrop-filter: var(--ocd-nav-blur);
        backdrop-filter: var(--ocd-nav-blur);
    }
    /* Panel type. The column headings are Elementor heading widgets rather than
       h-tags, hence `div` in the list; anything painting its own background
       (the promo card) keeps its own light-on-colour pairing. */
    body.oa-dark-page .main-header #primary-nav > li.megamenu > .nav-item-children
        :is(a, h1, h2, h3, h4, h5, h6, p, li, span, div):not([class*="icon"]):not([class*="badge"]),
    body.oa-dark-page .main-header .ld-module-dropdown
        :is(a, p, li, span, h1, h2, h3, h4, h5, h6):not([class*="icon"]) {
        color: rgba(255, 255, 255, 0.92) !important;
    }
    body.oa-dark-page .main-header #primary-nav > li.megamenu > .nav-item-children a:hover,
    body.oa-dark-page .main-header #primary-nav > li.megamenu > .nav-item-children a:hover
        :is(span, h1, h2, h3, h4, h5, h6) {
        color: #fff !important;
    }
    body.oa-dark-page .main-header #primary-nav > li.megamenu > .nav-item-children
        :is(hr, .divider, [class*="separator"]) {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background-color: rgba(255, 255, 255, 0.14) !important;
    }
    /* The cart panel's own controls ship black — same treatment as the
       detector-driven rules near the top of this file. */
    body.oa-dark-page .main-header .ld-module-dropdown
        :is(button, input, select, [class*="qty"], [class*="quantity"], [class*="plus"], [class*="minus"], [class*="update"]) {
        color: #fff !important;
    }
    body.oa-dark-page .main-header .ld-module-dropdown :is(input, select) {
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }
    body.oa-dark-page .main-header .ld-module-dropdown
        :not(.btn):not([class*="button"]) > svg {
        filter: brightness(0) invert(1);
    }
    body.oa-dark-page .main-header a.ld-cart-product-remove {
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.26) !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* --- PAGE DIM + BLUR behind an open flyout or cart -------------------- */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 98; /* header sits at 99 */
        background: rgba(0, 0, 0, 0.4);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s var(--ocd-nav-ease);
    }
    html:has(.main-header #primary-nav > li.megamenu.is-active) body::after,
    html:has(.main-header .ld-module-dropdown.is-active) body::after {
        opacity: 1;
    }
}

/* ==========================================================================
   MOBILE (≤1199px — the theme's mobile-nav breakpoint)
   ========================================================================== */
@media (max-width: 1199px) {

    /* scroll lock while the curtain is open — nav-glass.js toggles the class
       in sync with Hub's own mobile-nav-activated. Media-scoped so resizing
       to desktop with the menu open can never leave the page locked. */
    html.ocd-scroll-lock,
    html.ocd-scroll-lock body {
        overflow: hidden !important;
        /* `overflow: hidden` alone is not a scroll lock on iOS Safari — it has
           never stopped the document rubber-banding there, which is why the
           page could still be dragged behind the curtain. Paired with
           `overscroll-behavior: contain` on the curtain itself, this is the
           part iOS 16+ does honour. */
        overscroll-behavior: none;
    }

    /* the bar's own module background must not paint over the header frost */
    .main-header .lqd-mobile-sec,
    .main-header .lqd-mobile-sec-inner { background: transparent !important; }

    /* dark bar (theme-detected dark rows + blog-post tops), closed menu only
       — the open curtain is light and the X / icons must stay the theme's
       dark. The theme recolors neither of these in the mobile bar:
       hamburger bars ... */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .nav-trigger .bar,
    html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck) .nav-trigger .bar {
        background-color: #fff !important;
    }
    /* ... and the cart icon, which ships as a black inline SVG (was
       invisible, black on black, on dark bars) */
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .lqd-mobile-modules-container .ld-module-trigger-icon svg,
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .lqd-mobile-modules-container .ld-module-trigger-icon svg path,
    html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck) .lqd-mobile-modules-container .ld-module-trigger-icon svg,
    html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck) .lqd-mobile-modules-container .ld-module-trigger-icon svg path {
        fill: #fff !important;
        color: #fff !important;
    }
    html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .lqd-mobile-modules-container .ld-module-trigger-txt,
    html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck) .lqd-mobile-modules-container .ld-module-trigger-txt {
        color: #fff !important;
    }

    /* --- OPEN STATE: the bar's frost thickens to the curtain's glass ------ */
    html.mobile-nav-activated .main-header.main-header-overlay::before {
        background: var(--ocd-nav-glass-heavy);
        -webkit-backdrop-filter: var(--ocd-nav-blur-heavy);
        backdrop-filter: var(--ocd-nav-blur-heavy);
    }

    /* --- FULL-SCREEN FROSTED CURTAIN --------------------------------------
       Bootstrap 5 collapse drives open/close (state, aria, outside-click all
       stay Hub's). Retimed here — BS reads the duration from computed style,
       so it stays in sync. The curtain is the same heavy glass as the open
       bar, so bar + curtain read as one sheet. The inner list is min-height'd
       to the viewport so the height animation IS the full-screen curtain,
       both opening and closing. Once open, the panel scrolls. */
    .lqd-mobile-sec .mobile-navbar-collapse {
        background: var(--ocd-nav-glass-heavy) !important;
        -webkit-backdrop-filter: var(--ocd-nav-blur-heavy);
        backdrop-filter: var(--ocd-nav-blur-heavy);
        /* hub-elementor-addons caps the collapse at max-height:80vh (+ white
           bg + a faint shadow seam) and loads AFTER this file — without this
           the full-screen curtain stops ~15% short of the viewport bottom */
        max-height: none !important;
        box-shadow: none !important;
    }
    .lqd-mobile-sec .mobile-navbar-collapse.collapsing {
        transition-property: height, visibility !important;
        transition-duration: 0.6s !important;
        transition-timing-function: var(--ocd-nav-ease) !important;
    }
    /* The CURTAIN is a full viewport height — `.show` below — and not
       `100dvh - bar`. Subtracting the bar is only right if the panel starts
       below it, which is Hub's own `.lqd-mobile-sec-nav { top: 100% }`.
       custom-menu.css moves that box to `top: 0`, so the panel begins at
       viewport y=0 and the subtraction left the curtain one bar-height short,
       the dark page showing through as a strip along the bottom (measured on a
       390x844 phone: curtain 0..793, page visible 793..844).

       The LIST inside it is a different measurement, and this is where that
       reasoning was wrongly reused. `ul#mobile-primary-nav` carries
       `margin-top: calc(var(--ocd-nav-bar-h) + 12px)` from custom-menu.css to
       clear the bar, and a margin sits OUTSIDE the box it is on — so a flat
       100dvh here made the list 100dvh + 63px of content inside a container
       pinned to exactly 100dvh. Measured on 390x844, 320x568, 844x390 and
       /pricing/ alike: 64px of scroll on a menu whose seven items end at
       y=442. Every open menu rubber-banded against nothing, and a curtain that
       drifts under your thumb the moment you touch it is most of what "the
       menu doesn't feel right" is.

       It arrived with the fix that took --ocd-nav-bar-h from a broken 0px to a
       correct 51px: at 0px this margin was 12px and the slack was too small to
       see. The list is border-box, so its own `padding: 12px 0` is already
       inside the figure below — verified, computed min-height 844px rendered
       at exactly 844px rather than 868px. */
    .lqd-mobile-sec .mobile-navbar-collapse > .lqd-mobile-main-nav {
        min-height: calc(100vh - var(--ocd-nav-bar-h) - 12px);
        min-height: calc(100dvh - var(--ocd-nav-bar-h) - 12px);
        /* The curtain runs to the physical bottom of the screen, so on a
           notched phone its last rows sit under the home indicator. Nothing in
           this file or custom-menu.css read a safe-area inset. Inside the
           border-box min-height above, so it costs no scroll when it is 0. */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .lqd-mobile-sec .mobile-navbar-collapse.show {
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* Keep a flick that runs past the end of a long panel inside the
           curtain. Without it the scroll chains to the document behind — the
           page the curtain is covering — and on iOS the whole sheet
           rubber-bands off the top. Measured "auto" before this. */
        overscroll-behavior: contain;
    }
    /* ADMIN BAR. The curtain's containing block is the header, which this file
       pushes down by the admin bar's height at the top of the file
       (`body.admin-bar .main-header.main-header-overlay { top: 32px/46px }`).
       The curtain is absolute inside it at top:0, so a flat 100dvh height
       started 46px down and ended 46px BELOW the bottom of the screen: the last
       menu rows fell off the display and the panel gained 46px of dead scroll
       on top of everything else. Only logged-in users ever saw it, which is
       everyone who tests the site on their own phone. */
    body.admin-bar .lqd-mobile-sec .mobile-navbar-collapse.show {
        height: calc(100vh - 32px) !important;
        height: calc(100dvh - 32px) !important;
    }
    body.admin-bar .lqd-mobile-sec .mobile-navbar-collapse > .lqd-mobile-main-nav {
        min-height: calc(100vh - 32px - var(--ocd-nav-bar-h) - 12px);
        min-height: calc(100dvh - 32px - var(--ocd-nav-bar-h) - 12px);
    }
    @media screen and (max-width: 782px) {
        body.admin-bar .lqd-mobile-sec .mobile-navbar-collapse.show {
            height: calc(100vh - 46px) !important;
            height: calc(100dvh - 46px) !important;
        }
        body.admin-bar .lqd-mobile-sec .mobile-navbar-collapse > .lqd-mobile-main-nav {
            min-height: calc(100vh - 46px - var(--ocd-nav-bar-h) - 12px);
            min-height: calc(100dvh - 46px - var(--ocd-nav-bar-h) - 12px);
        }
    }

    /* --- DARK PAGES: the curtain is the sheet the bar belongs to ----------
       --ocd-nav-glass-heavy is white, unconditionally, so opening the menu on
       /pricing/ dropped a white full-screen panel over a near-black page — the
       "dark and light mode" report. Same reasoning as the desktop flyout
       further up: bar and curtain are one material, so on a dark page both are
       dark. The nav's own type is the theme's dark scheme, so it has to be
       lifted to the light-on-dark pair here. */
    body.oa-dark-page .lqd-mobile-sec .mobile-navbar-collapse,
    html.mobile-nav-activated body.oa-dark-page .main-header.main-header-overlay::before,
    body.oa-dark-page .lqd-mobile-sec .ld-module-cart .ld-module-dropdown {
        background: var(--ocd-nav-glass-dark) !important;
    }
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav
        :is(a, span, li, h1, h2, h3, h4, h5, h6):not([class*="badge"]) {
        color: rgba(255, 255, 255, 0.92) !important;
    }
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav a:hover,
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .menu-item.is-active > a {
        color: #ff8201 !important;
    }
    /* The chevrons are inline SVGs authored black — same inversion the logo and
       the cart stepper use, so the glyph keeps its own shape. */
    body.oa-dark-page .lqd-mobile-sec .submenu-expander svg {
        filter: brightness(0) invert(1);
    }
    /* Hub's close cross is drawn with the nav-trigger bars, which the dark-page
       block near the top of this file already paints white. Its own row
       dividers are near-black on a dark panel. */
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav > li > a {
        border-bottom-color: rgba(255, 255, 255, 0.10) !important;
    }
    /* The per-product remove control. custom-menu.css paints it a light chip
       (#f1f1f1 with #a5a5a5 glyph) for the white sheet it used to sit on, and
       the dark-page rule that matches it is in the DESKTOP block — so once this
       sheet went dark the chip stayed light on it. Same treatment as the
       desktop panel, at a weight that beats
       `.lqd-mobile-sec a.remove.ld-cart-product-remove`. */
    body.oa-dark-page .lqd-mobile-sec a.ld-cart-product-remove {
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.26) !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }
    body.oa-dark-page .lqd-mobile-sec a.ld-cart-product-remove:hover,
    body.oa-dark-page .lqd-mobile-sec a.ld-cart-product-remove:focus-visible {
        background: rgba(255, 130, 1, 0.18) !important;
        border-color: #ff8201 !important;
        color: #ff8201 !important;
    }

    /* --- MOBILE CART: the site opens it as a FULL-SCREEN sheet (positioned
           in custom-menu.css) — use the curtain's heavy glass and square
           corners instead of the bar-dropdown's rounded bottom ------------- */
    .lqd-mobile-sec .ld-module-cart .ld-module-dropdown {
        border-radius: 0 !important;
        background: var(--ocd-nav-glass-heavy) !important;
        -webkit-backdrop-filter: var(--ocd-nav-blur-heavy);
        backdrop-filter: var(--ocd-nav-blur-heavy);
    }

    /* --- CURTAIN CONTENT: soft cascade (fonts/colors stay the theme's) --- */
    @keyframes ocdMenuItemIn {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    html.mobile-nav-activated .lqd-mobile-main-nav > li {
        animation: ocdMenuItemIn 0.5s var(--ocd-nav-ease) both;
    }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(1) { animation-delay: 0.10s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(2) { animation-delay: 0.15s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(3) { animation-delay: 0.20s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(4) { animation-delay: 0.25s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(5) { animation-delay: 0.30s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(6) { animation-delay: 0.35s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(7) { animation-delay: 0.40s; }
    html.mobile-nav-activated .lqd-mobile-main-nav > li:nth-child(n+8) { animation-delay: 0.45s; }

    /* chevron rotates smoothly when its section opens (JS toggles is-active) */
    .lqd-mobile-sec .submenu-expander,
    .lqd-mobile-sec .submenu-expander svg {
        transition: transform 0.4s var(--ocd-nav-ease);
    }
    .lqd-mobile-sec .menu-item.is-active > .submenu-expander svg {
        transform: rotate(180deg);
    }

    /* --- SUBMENU CONTENTS -------------------------------------------------
       Audited 2026-08 by opening each of the three panels on a 390px phone.
       The top level was fine — 52px rows, none under the 44px minimum — but
       the panels under it were a different menu.

       The indent was the first half: links sat at x=86, from three stacked
       paddings — 20px on the megamenu's outer container, 30px on its column,
       and 36px on the widget container wrapping the link list. That last one
       reserves room for the service icon the DESKTOP flyout draws beside each
       list; the mobile panel drew nothing there, so the gutter was holding a
       gap open for an icon that never arrived. `:has(> .lqd-fancy-menu)`
       matches exactly that wrapper and nothing else, which is why this is not
       keyed to an element id.

       The two outer paddings stay: they are the template's own column layout,
       they differ per panel because the three megamenus are three different
       Elementor documents, and flattening them would mean restyling all three.

       --- ONE COLUMN (2026-08-08) ---
       The links used to run TWO UP in a CSS grid, 163px cells, to keep the
       Services panel off three screens of scroll. Owner's call: it reads as a
       broken table rather than a menu — and measured, it never lined up
       either. Grid cells are stretch-aligned, so every row was as tall as its
       taller label and the two columns ran 44 / 54.2 / 76.3px against each
       other, with a ragged right edge down both sides.

       One column now: every link 350px wide and 44px tall, one hairline
       between each, the whole list indented to sit under its group's label.
       Only "Google Business Setup and Optimization" is long enough to wrap,
       and it no longer does at the size below.

       That costs height — Services 1440px → ~1660px — which nav-glass.js pays
       back by scrolling the section you just opened up under the bar, so a tap
       lands you at the top of the list you asked for.

       TWO RULES IN THIS BLOCK USED TO BE DEAD, and the sizes their comments
       claimed were never on the screen. Both lost to per-element rules in
       uploads/elementor/css/post-19464.css — same 4-class weight, and it loads
       after this file, so order decided:
           .lqd-iconbox-heading   said 12.5px, rendered 17px
           .lqd-fancy-menu a      said 13.5px, rendered 17px
       17px labels in a 170px grid cell is what actually made them wrap. Both
       carry !important now. That is the only way to win a tie you lose on
       order without keying a selector to an Elementor element id, which dies
       silently the first time that template is rebuilt. */

    /* One gutter, and the width back. The panel's columns sat at x=50 and were
       290px wide, so a 390px screen spent 50px on indent and 50px on nothing.
       `:has(> .e-con-inner)` matches only the megamenu's BOXED column wrapper —
       the outer band is e-con-full and has no such child, so it keeps the 20px
       that becomes the single gutter. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .e-con:has(> .e-con-inner) {
        --padding-left: 0px;
        --padding-right: 0px;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .elementor-widget-container:has(> .lqd-fancy-menu) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* A panel opened onto ~75px of empty canvas before its first heading, and
       every group carried desktop-sized separation. This is a phone: the rows
       supply the rhythm now, so the containers between them give up theirs.
       Both halves of the Elementor container pair, not just the inner one —
       the megamenu's group wrappers are `.e-con-full` and take their gap from
       their own `--gap` (20px from the desktop layout). */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-megamenu-rows-wrap > .elementor > .e-con {
        --padding-top: 0px;
        --padding-bottom: 8px;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .e-con-inner,
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .e-con {
        --gap: 6px;
        gap: 6px;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .e-con {
        --padding-top: 0px;
        --padding-bottom: 0px;
    }

    /* --- GROUPS -----------------------------------------------------------
       A GROUP is any megamenu container that directly holds a link list. That
       is true of Services (icon-box heading + list) and of Shop (text heading +
       list) alike, so neither panel needs a selector of its own, and a fourth
       megamenu built the same way inherits this for free. The hairline is the
       only separation the stack needs now that the columns are gone.
       `:has()` carries its argument's specificity, so this beats the generic
       `.e-con` rules above wherever the two disagree. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .e-con:has(> .elementor-widget-ld_custom_menu) {
        border-top: 1px solid rgba(0, 0, 0, 0.09);
        --padding-top: 0px;
        --padding-bottom: 0px;
        --gap: 0px;
        gap: 0px;
        /* Same min() shape as the promo block below, and for the same reason:
           the groups carry desktop margins that differ per panel — Shop's
           second group has --margin-top: 20px where Services' have none — so
           the space between one list and the next heading measured 31px in one
           panel and 61px in the other. The cap only ever reduces. */
        margin-top: min(var(--margin-top, 0px), 8px);
    }

    /* --- GROUP HEADING: Services ------------------------------------------
       An ld_icon_box widget, not a heading — icon, label, and a `.lqd-overlay`
       anchor stretched over the pair. Every one of them is a LINK to that
       service's own hub page (/services/search-engine-advertising-agency/ and
       seven siblings), and on a phone they are the only route to those eight
       pages, so the row has to clear 44px.

       The min-height belongs on the BOX, not on the overlay: `.lqd-overlay` is
       absolutely positioned with top and bottom both 0, so a min-height on it
       grows downward out of its own box and hangs over whatever is below —
       measured 44px of anchor on a 22.3px icon box, i.e. ~17px of it lying
       across the first link of the list. Sizing the box makes the overlay
       exactly as tall as the thing it covers. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .iconbox {
        align-items: center;
        min-height: 46px;
        margin-bottom: 0;
    }
    /* the widget ships an empty <p> between the label and the overlay; as a
       flex item it is a live 0-width gap in the row */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .iconbox > p:empty {
        display: none;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .elementor-widget-ld_icon_box a.lqd-overlay {
        min-height: 0;
        display: block;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-iconbox-heading {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.25;
        opacity: 1;
        margin: 0 !important;
    }
    /* The icon: 40x28 in the desktop flyout, a fixed 22px cell here so every
       label in the panel starts on the same vertical line.

       These used to paint nothing — inline SVGs filled from their own
       `<linearGradient>` defs, with every gradient id defined four times in one
       document, so `fill="url(#id)"` resolved to the desktop nav's hidden,
       zero-size copy. This file worked around it by repainting the shapes with
       currentColor, which cost them their colour. The ids are unique per render
       now (mu-plugin oversee-svg-unique-ids.php) and the artwork paints as
       drawn, so nothing here touches fill. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .iconbox-icon-wrap {
        flex: 0 0 22px;
        width: 22px;
        margin-inline-end: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .iconbox-icon-container {
        width: 22px;
        justify-content: center;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .iconbox-icon-container svg {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px;
    }
    /* --- GROUP HEADING: Shop ----------------------------------------------
       A hub_fancy_heading widget above the list instead of an icon box, with
       the link INSIDE the heading rather than stretched over it — so it was
       18.8px tall, well under the minimum, and the only way into
       /product-category/marketing/ from a phone. Stretched to the same 46px
       row as the Services headings. Scoped through the group selector so the
       Ecosystem panel's card titles, which are the same widget, are untouched. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .e-con:has(> .elementor-widget-ld_custom_menu)
        > .elementor-widget-hub_fancy_heading .ld-fh-element {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-height: 46px;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.25;
        margin: 0 !important;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .e-con:has(> .elementor-widget-ld_custom_menu)
        > .elementor-widget-hub_fancy_heading .ld-fh-element > a {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* --- THE LINKS --------------------------------------------------------
       Full-width rows, 44px minimum, indented to start under their group's
       label. Elementor gives each item a per-widget margin-bottom — 3px in
       Services, 11px in Shop — which at one-up is a gap in the hairline and
       ~200px of nothing down the Shop panel. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-fancy-menu > ul {
        display: block;
        padding: 0;
        margin: 0;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-fancy-menu > ul > li {
        margin: 0 !important;
        padding: 0;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-fancy-menu a {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 44px;
        padding: 7px 0 7px 34px;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu > ul > li + li > a {
        border-top: 1px solid rgba(0, 0, 0, 0.055);
    }
    /* Shop's links carry their own leading icon. It takes the place of the
       indent rather than adding to it, so both panels' labels land on the same
       line as their heading's. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu a:has(> .link-icon) {
        padding-left: 0;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-fancy-menu .link-icon {
        flex: 0 0 22px;
        width: 22px;
        justify-content: center;
        margin: 0 !important;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children .lqd-fancy-menu .link-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* Where you are. The theme's own active colour is keyed to `.is-active`,
       which is the class the DESKTOP flyout script sets; the WordPress menu
       marks the current page with `current-menu-item` / `current_page_item`
       and nothing in the mobile panel ever read it. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu li:is(.current-menu-item, .current_page_item) > a {
        color: #fe7c10 !important;
        font-weight: 600;
    }

    /* The panel's trailing promo block carries a 50px top margin from the
       desktop layout, where it sits at the foot of a wide three-column
       flyout. Stacked on a phone that is half a thumb-scroll of nothing.

       min(), not a flat 14px. This selector matches the last container in
       EVERY megamenu panel, and a flat value would have *added* 14px to the
       ones that correctly have none — Ecosystem's last block sits at 0. The
       cap only ever reduces: Services and Shop have `--margin-top: 50px` and
       come down to 14, Ecosystem's 0 stays 0. */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .e-con-inner > .e-con:last-child {
        margin-top: min(var(--margin-top, 0px), 14px);
    }

    /* Dark pages: the curtain is near-black there (see the block above), so
       the hairlines have to invert with it or they read as black-on-black. */
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .e-con:has(> .elementor-widget-ld_custom_menu) {
        border-top-color: rgba(255, 255, 255, 0.12);
    }
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu > ul > li + li > a {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    /* ...and the sub-links have to sit back from their group's label. On a
       light page Elementor already gives them a grey (#747474) against a
       near-black heading; on a dark one the block near the top of this file
       pushes EVERY string in the panel to the same rgba(255,255,255,.92), so
       the two levels read at one weight. Not applied to the headings, which
       keep the full value. */
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu > ul > li > a {
        color: rgba(255, 255, 255, 0.72) !important;
    }
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu > ul > li > a:hover,
    body.oa-dark-page .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children
        .lqd-fancy-menu > ul > li:is(.current-menu-item, .current_page_item) > a {
        color: #ff8201 !important;
    }

    /* accordion contents fade up as nav-glass.js animates the height */
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children {
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.4s ease 0.05s, transform 0.45s var(--ocd-nav-ease) 0.05s;
    }
    .lqd-mobile-sec .lqd-mobile-main-nav .menu-item.is-active > .nav-item-children {
        opacity: 1;
        transform: none;
    }

    /* links: gentle press feedback */
    .lqd-mobile-sec .lqd-mobile-main-nav a {
        transition: color 0.25s ease, opacity 0.25s ease,
            transform 0.3s var(--ocd-nav-ease);
    }
    .lqd-mobile-sec .lqd-mobile-main-nav > li > a:active {
        transform: translateX(3px);
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .main-header.main-header-overlay::before,
    .main-header .navbar-brand img,
    .main-header .module-logo img,
    .main-header .ld-module-dropdown,
    .main-header #primary-nav > li.megamenu > .nav-item-children,
    .main-header .nav-item-children #mega-menu > .e-con > .e-con-inner > *,
    .lqd-mobile-sec .mobile-navbar-collapse.collapsing,
    .lqd-mobile-sec .submenu-expander,
    .lqd-mobile-sec .submenu-expander svg,
    .lqd-mobile-sec .lqd-mobile-main-nav .nav-item-children,
    .lqd-mobile-sec .lqd-mobile-main-nav a,
    body::after {
        transition: none !important;
    }
    html.mobile-nav-activated .lqd-mobile-main-nav > li {
        animation: none !important;
    }
}

/* --- PHONE BAR LOGIN (owner 2026-09-24) ---------------------------------
       nav-glass.js copies the desktop header's Login button into the phone
       bar, before the cart. A word, not an icon: the cart ships as a bag
       with a handle that already reads like the desktop login's padlock.
       44px tall so it is a real tap target; inherits the bar's text colour
       and turns white wherever the cart icon does. ---------------------- */
.lqd-mobile-sec .ocd-mobile-auth {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: 6px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: inherit;
    text-decoration: none;
}
/* custom-menu.css fixes every bar child at 40px (`.navbar-header>*`) — right
   for the logo and the trigger, but the modules box now holds a word and the
   cart, and at 40px it spilled the cart over the hamburger. One class more
   specific than that rule, so it wins despite loading earlier. */
.lqd-mobile-sec .navbar-header > .lqd-mobile-modules-container {
    width: auto;
}
.lqd-mobile-sec .ocd-mobile-auth:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 6px;
}
body.oa-dark-page .main-header .lqd-mobile-sec .ocd-mobile-auth,
html:not(.mobile-nav-activated) .main-header.main-header-overlay.lqd-active-row-dark .lqd-mobile-sec .ocd-mobile-auth,
html:not(.mobile-nav-activated) .single-post .main-header.main-header-overlay:not(.is-stuck) .lqd-mobile-sec .ocd-mobile-auth {
    color: #fff !important;
}