/* ==========================================================================
   Navbar + Services mega menu — structural rebuild.

   The desktop header is NO LONGER rendered inside #toolkit-mob-header.
   resources/views/layouts/mainfrontend.blade.php now emits, as direct
   children of <header id="header">:

       .tk-topbar            full-bleed promo row       (#000000)
       .tk-main-navbar       full-bleed navigation row  (#0B0D0D)
       #toolkit-mob-header   legacy mobile header, display:none from 1025px

   Because the desktop rows live OUTSIDE #toolkit-mob-header, none of the
   legacy `div#toolkit-mob-header …` rules — the translucent
   rgba(8,8,9,.74) background, `border-radius: 0 0 1rem 1rem`, the
   border-bottom, box-shadow, backdrop-filter, the `height:160px /
   top:-100px / padding-top:100px` geometry, the `max-width:1130px`
   centering and the ::before/::after glow — can reach them at all.

   This file therefore DEFINES the desktop header rather than overriding
   an old one. The only legacy state it still has to cooperate with is the
   set of class flags the theme's jQuery puts on #toolkit-mob-header
   (`tk-search-open`, `tk-dropdown-visible`, `tk-desktop-menu-open`,
   `active`); tbtk-navbar-redesign.js mirrors those onto .tk-main-navbar
   so search, the portfolio dropdown and the mega menu keep working.
   ========================================================================== */

@font-face {
    font-family: 'TK Heading';
    src: url('../fonts/themes/thebusinesstoolkit-child/assets/fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TK Heading';
    src: url('../fonts/themes/thebusinesstoolkit-child/assets/fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TK Heading';
    src: url('../fonts/themes/thebusinesstoolkit-child/assets/fonts/montserrat/Montserrat-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TK Body';
    src: url('../fonts/themes/thebusinesstoolkit-child/assets/fonts/poppins/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TK Body';
    src: url('../fonts/themes/thebusinesstoolkit-child/assets/fonts/poppins/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --tk-heading-font: 'TK Heading', Montserrat, system-ui, sans-serif;
    --tk-body-font: 'TK Body', Poppins, system-ui, sans-serif;

    /* The promo strip and the nav-items surface are always black, in both
       themes, so the type that sits ON them does not invert with the theme
       the way --tk-nav-text does. */
    --tk-navsurface-bg: #000000;
    --tk-navsurface-text: #F3F5F7;
    --tk-navsurface-hover: rgba(255, 255, 255, 0.08);
}

/* ---- Exact colour contract -------------------------------------------- */
:root,
html[data-tk-theme="dark"] {
    --tk-topbar-bg: #000000;
    --tk-navbar-bg: #0B0D0D;
    --tk-nav-text: #F3F5F7;
    --tk-nav-text-muted: rgba(243, 245, 247, 0.5);
    --tk-nav-item-hover: rgba(255, 255, 255, 0.07);

    /* One shared button surface for BOTH the top-bar promo buttons and the
       right-hand action controls: 12px radius, dark vertical gradient, an
       inset top highlight and a soft drop shadow. Icons/accents use the
       site's existing blue (--primary-color), never green. */
    --tk-btn-radius: 12px;
    --tk-btn-bg: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    --tk-btn-bg-hover: linear-gradient(rgb(40, 46, 52), rgb(31, 36, 41));
    --tk-btn-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 3px 7px rgba(0, 0, 0, 0.5);
    --tk-nav-icon-fg: var(--primary-color, #0073FC);

    --tk-mega-bg: #0E1114;
    --tk-mega-border: rgba(255, 255, 255, 0.06);
    --tk-mega-text: #F3F5F7;
    --tk-mega-text-muted: rgba(243, 245, 247, 0.55);
    --tk-mega-divider: rgba(255, 255, 255, 0.07);
    --tk-mega-card-bg: rgba(255, 255, 255, 0.045);
    --tk-mega-card-hover: rgba(255, 255, 255, 0.08);

    /* Category rail surface hierarchy:
       mega surface  →  deep-black rail panel  →  gradient category cards.
       The cards wear the premium button surface in their NORMAL state; hover
       only nudges the same gradient family a little lighter. */
    --tk-mega-rail-bg: #060708;
    --tk-mega-tab-bg: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    --tk-mega-tab-bg-hover: linear-gradient(rgb(38, 44, 50), rgb(29, 34, 39));
    --tk-mega-tab-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 3px 7px rgba(0, 0, 0, 0.5);
    --tk-mega-active-bg: #EDF0F3;
    --tk-mega-active-text: #14161A;
    --tk-mega-active-text-muted: rgba(20, 22, 26, 0.6);
    --tk-service-hover: #1B2024;
    --tk-feature-bg: #15181C;

    /* Used by the MOBILE header only (#toolkit-mob-header). */
    --tk-header-bg: #0F100F;
}

/* Light theme.

   The header is theme-independent — the promo strip, the navigation row,
   the nav-items surface, the action buttons and the navbar type keep their
   dark appearance in light mode — so none of the --tk-topbar-bg /
   --tk-navbar-bg / --tk-nav-* / --tk-btn-* tokens are redefined for light.

   The mega menu IS themed, and its light palette is declared on the mega
   menu element itself rather than on :root. Two reasons: the tokens are
   only ever read inside this subtree, and the navbar's own search dropdown
   (#search-results) reads --tk-mega-* too but must stay dark with the rest
   of the header — declaring them here keeps that automatic. */
html[data-tk-theme="light"] .tk-services-mega {
    --tk-mega-bg: #FFFFFF;
    --tk-mega-border: rgba(15, 17, 21, 0.09);
    --tk-mega-text: #14161A;
    --tk-mega-text-muted: rgba(20, 22, 26, 0.55);
    --tk-mega-divider: rgba(15, 17, 21, 0.08);
    --tk-mega-card-bg: #F5F6F8;
    --tk-mega-card-hover: #EDF0F3;

    /* Same three-layer hierarchy, expressed for the light menu: a recessed
       tinted rail holding raised white cards. */
    --tk-mega-rail-bg: #ECEFF3;
    --tk-mega-tab-bg: linear-gradient(#FFFFFF, #F6F8FA);
    --tk-mega-tab-bg-hover: linear-gradient(#FFFFFF, #EEF1F5);
    --tk-mega-tab-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 5px rgba(15, 17, 21, 0.1);
    --tk-mega-active-bg: #14161A;
    --tk-mega-active-text: #F3F5F7;
    --tk-mega-active-text-muted: rgba(243, 245, 247, 0.65);
    --tk-service-hover: #EDF0F3;
    --tk-feature-bg: #14161A;
}

html[data-tk-theme="light"] {
    /* mobile header surface only */
    --tk-header-bg: #F2F3F5;
}

/* ==========================================================================
   MOBILE HEADER (#toolkit-mob-header)

   Left structurally as the legacy theme built it. Its glass/glow chrome was
   deleted at source in mainfrontend.blade.php rather than overridden here,
   so all that is left is the light-theme surface.
   ========================================================================== */
html[data-tk-theme="light"] #toolkit-mob-header {
    background: var(--tk-header-bg);
}

/* ==========================================================================
   DESKTOP HEADER
   ========================================================================== */
@media (max-width: 1024px) {
    /* The desktop rows only exist for desktop. */
    .tk-topbar,
    .tk-main-navbar {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    /* The mobile header is fully out of the desktop composition — it is not
       transparent, not `display: contents`, it simply is not rendered. */
    div#toolkit-mob-header {
        display: none !important;
    }

    /* <header> carries Bootstrap's .d-flex; the two rows must STACK and each
       span the full viewport, so the header becomes a plain block here.

       `display` needs !important for one specific reason. The layout ships two
       copies of that utility: the inline <style> in mainfrontend.blade.php
       defines `.d-flex { display: flex }` with no !important, which this ID
       selector already outranks — that is why home and the printing pages were
       always correct. But mainfrontend.blade.php line 202 loads
       vendor/bootstrap/css/bootstrap.min.css inside `@if ($isServicePage)`,
       and that build declares `.d-flex { display: flex !important }`. An
       !important declaration cannot be beaten by specificity, only by another
       !important, so on service routes the header collapsed into a single flex
       row with .tk-topbar and .tk-main-navbar side by side. Scoped to this one
       property; nothing else here needs it. */
    header#header {
        display: block !important;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    /* ---- Row 1: promo strip — full width, pure black ------------------- */
    .tk-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        /* explicit height (rather than padding-driven) so it can collapse to
           0 cleanly when the page is scrolled — see .tk-scrolled below */
        height: 44px;
        margin: 0;
        padding: 0 24px;
        overflow: hidden;
        background: var(--tk-topbar-bg);
        border: 0;
        border-radius: 0;
        transition: height 0.28s ease, opacity 0.22s ease;
        box-shadow: none;
    }

    /* Same button surface as the action controls — dark gradient, 12px
       radius, inset highlight + drop shadow — with the blue accent on the
       icon and label (the reference's green is deliberately not used). */
    .tk-topbar a.tk-promo-pill {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 20px;
        border: 0;
        /* deliberately NOT --tk-btn-radius: these are softer rectangles,
           the 12px action-button radius stays untouched */
        border-radius: 8px;
        background: var(--tk-btn-bg);
        box-shadow: var(--tk-btn-shadow);
        color: var(--primary-color, #0073FC);
        font-family: var(--tk-body-font);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.045em;
        line-height: 1.5;
        text-decoration: none;
        text-transform: none;
        white-space: nowrap;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .tk-topbar a.tk-promo-pill:hover {
        background: var(--tk-btn-bg-hover);
        color: var(--primary-color, #0073FC);
        transform: translateY(-1px);
    }

    .tk-topbar a.tk-promo-pill svg {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        color: var(--primary-color, #0073FC);
    }

    /* Past a small scroll the promo row collapses to nothing and the
       navigation row takes the top. <header> is position:fixed, so the page
       below it does not reflow — there is no jump and no leftover gap, and
       --tk-header-h is re-measured by the JS so the mega menu follows. */
    header#header.tk-scrolled .tk-topbar {
        height: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* ---- Row 2: navigation — full width, edge to edge, #0B0D0D --------- */
    .tk-main-navbar {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 64px;
        margin: 0;
        padding: 0 24px;
        background: var(--tk-navbar-bg);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* LOGO — fixed width, hard left. */
    .tk-main-navbar .tk-logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        background: none;
        position: static;
    }

    .tk-main-navbar .tk-logo a {
        display: flex;
        align-items: center;
        line-height: 0;
    }

    /* logo.svg carries no intrinsic width/height, so `height: auto` would
       collapse it to nothing — the height has to be stated.

       `height` is !important for the same kind of reason as the header above,
       and only that one property. Some pages (web-design-and-development among
       them) render a CMS-stored custom-CSS blob into a body-level <style> that
       contains `.tk-logo img { height: 60px !important }` inside
       @media (min-width:1025px). That lives in the database, not in any Blade
       file, so it cannot be corrected at source from here — and !important can
       only be answered with !important. Without this the logo rendered 60px on
       those pages and 48px everywhere else, shifting the whole nav row.
       The DB rule is desktop-only, so the mobile header is unaffected. */
    .tk-main-navbar .tk-logo img {
        width: auto;
        /* The trimmed PNG has no empty margin, so 36px is the artwork's
           own height (about 105px wide) and the row height is unchanged. */
        height: 36px !important;
        max-width: 230px;
        object-fit: contain;
    }

    /* NAV LINKS — they sit on their own black surface with a small radius,
       as in the reference. The surface wraps ONLY the links: the logo sits
       before it and the action cluster after it, both outside.
       It is NOT centred — the `margin: 0 auto !important` that used to do
       that was deleted from mainfrontend.blade.php, so the controlled left
       gap below is simply the rule that applies; the `!important` here only
       guards against the 810–1200px `margin-left: 5px` further down that
       sheet. */
    .tk-main-navbar .tk-desktop-menu {
        /* The CONTAINER grows to fill the space up to the action cluster;
           the links inside do not. `justify-content: flex-start` plus
           `flex: 0 0 auto` on each .tk-menu-item keeps Services…Portfolio
           exactly where they are and leaves the extra width as empty black
           surface after Portfolio. The 16px right margin is the clean gap
           before the first icon button. */
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        width: auto;
        min-width: 0;
        height: 48px;
        margin: 0 16px 0 20px !important;
        padding: 0 8px;
        background: var(--tk-navsurface-bg);
        border: 0;
        border-radius: 8px;
        box-shadow: none;
    }

    .tk-main-navbar .tk-desktop-menu .tk-menu-item {
        position: relative;
        display: flex;
        align-items: center;
        /* never absorbs the container's extra width */
        flex: 0 0 auto;
        height: 100%;
    }

    .tk-main-navbar .tk-desktop-menu .tk-menu-item > a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 8px;
        color: var(--tk-navsurface-text);
        font-family: var(--tk-heading-font);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.2;
        text-decoration: none;
        text-transform: none;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .tk-main-navbar .tk-desktop-menu .tk-menu-item > a:hover,
    .tk-main-navbar .tk-desktop-menu .tk-menu-item > a:focus-visible {
        background: var(--tk-navsurface-hover);
        color: var(--tk-navsurface-text);
    }

    .tk-main-navbar .tk-desktop-menu .tk-nav-chevron {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        opacity: 0.55;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .tk-main-navbar.tk-desktop-menu-open .tk-services-item > a {
        background: var(--tk-navsurface-hover);
    }

    .tk-main-navbar.tk-desktop-menu-open .tk-services-item > a .tk-nav-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* PORTFOLIO (and any other simple) dropdown. Its `.active` flag is set
       by the theme on #toolkit-mob-header; the JS mirrors it here. */
    .tk-main-navbar .tk-menu-port {
        top: 100%;
        left: 0;
        margin-left: 0;
        background: var(--tk-mega-bg);
        border: 1px solid var(--tk-mega-border);
        border-radius: 14px;
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
        z-index: 1000;
    }

    .tk-main-navbar.active .tk-menu-port {
        display: block;
    }

    .tk-main-navbar .tk-menu-port a,
    .tk-main-navbar .tk-menu-port .tk-portfolio-static {
        display: block;
        color: var(--tk-mega-text);
        font-family: var(--tk-body-font);
        font-size: 12.5px;
        font-weight: 500;
        letter-spacing: 0.03em;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .tk-main-navbar .tk-menu-port a:hover {
        color: var(--primary-color, #0073FC);
    }

    .tk-main-navbar .tk-menu-port .tk-portfolio-static {
        color: var(--tk-mega-text-muted);
    }

    /* ---- FLEXIBLE SPACE + ACTION CLUSTER ------------------------------- */
    .tk-main-navbar .tk-search-wrap {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        min-width: 0;
        height: auto;
        /* This is the flexible space: everything before it stays left. */
        margin-left: auto;
        padding: 0;
        background: none;
        position: static;
        pointer-events: auto;
    }

    /* Every action control is the same 42x42 square wearing the shared
       button surface (--tk-btn-*): 12px radius, dark vertical gradient,
       inset top highlight + soft drop shadow. Blue 17px icon inside. */
    .tk-main-navbar .tk-search-wrap > .tk-call > a,
    .tk-main-navbar .tk-search-wrap > label.tk-search-toggle,
    .tk-main-navbar .tk-search-wrap > label.tk-question-toggle > a,
    .tk-main-navbar .tk-search-wrap > label.tk-user-toggle > a,
    .tk-main-navbar .tk-search-wrap > button.tk-cart-toggle {
        /* cart-drawer.blade.php styles `.tk-cart-toggle` as an absolutely
           positioned overlay button for the old header; inside the flex row
           it is an ordinary control. */
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--tk-btn-radius);
        background: var(--tk-btn-bg);
        box-shadow: var(--tk-btn-shadow);
        color: var(--tk-nav-icon-fg);
        cursor: pointer;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .tk-main-navbar .tk-search-wrap > .tk-call,
    .tk-main-navbar .tk-search-wrap > label.tk-question-toggle,
    .tk-main-navbar .tk-search-wrap > label.tk-user-toggle {
        display: flex;
        align-items: center;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        position: static;
        font-size: 0;
    }

    .tk-main-navbar .tk-search-wrap > .tk-call > a:hover,
    .tk-main-navbar .tk-search-wrap > label.tk-search-toggle:hover,
    .tk-main-navbar .tk-search-wrap > label.tk-question-toggle > a:hover,
    .tk-main-navbar .tk-search-wrap > label.tk-user-toggle > a:hover,
    .tk-main-navbar .tk-search-wrap > button.tk-cart-toggle:hover {
        background: var(--tk-btn-bg-hover);
        transform: translateY(-2px);
    }

    .tk-main-navbar .tk-search-wrap svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        stroke: currentColor;
    }

    /* Cart badge — the count element keeps its own `hidden` attribute from
       Blade, so an empty cart shows no bubble at all. */
    .tk-main-navbar .tk-search-wrap .tk-cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--primary-color, #0073FC);
        color: #FFFFFF;
        font-family: var(--tk-body-font);
        font-size: 10px;
        font-weight: 600;
        line-height: 17px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--tk-navbar-bg);
    }

    .tk-main-navbar .tk-search-wrap .tk-cart-count[hidden] {
        display: none;
    }

    /* ---- Theme toggle: ONE vertical pill, blue track, white thumb ------ */
    .tk-main-navbar .tk-search-wrap > button.tk-theme-toggle {
        position: relative;
        flex: 0 0 auto;
        display: block;
        width: 25px;
        height: 42px;
        margin: 0 0 0 2px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--primary-color, #0073FC);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .tk-main-navbar .tk-search-wrap > button.tk-theme-toggle .tk-theme-toggle-thumb {
        position: absolute;
        left: 3px;
        top: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #FFFFFF;
        color: #14161A;
        transition: top 0.25s ease;
    }

    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > button.tk-theme-toggle .tk-theme-toggle-thumb {
        top: 21px;
    }

    /* Only one of the two glyphs is ever in the thumb. No `display` is set
       on the sizing rule below on purpose — it would outrank these. */
    .tk-main-navbar .tk-theme-toggle .tk-icon-sun {
        display: none;
    }

    html[data-tk-theme="light"] .tk-main-navbar .tk-theme-toggle .tk-icon-moon {
        display: none;
    }

    html[data-tk-theme="light"] .tk-main-navbar .tk-theme-toggle .tk-icon-sun {
        display: block;
    }

    .tk-main-navbar .tk-theme-toggle .tk-theme-toggle-thumb svg {
        width: 11px;
        height: 11px;
        stroke: currentColor;
    }

    /* ---- Search overlay ------------------------------------------------
       The legacy overlay CSS was written as `#toolkit-mob-header.tk-search-open
       …`, which no longer matches the desktop row, so it is re-stated here
       against the real element instead of being patched. */
    .tk-main-navbar input#tk-search {
        position: absolute;
        left: 24px;
        /* stops short of the magnifier / cart / theme controls so they stay
           clickable while the overlay is open */
        right: 200px;
        top: 0;
        width: auto;
        height: 100%;
        padding: 0 8px;
        border: 0;
        background: transparent;
        color: var(--tk-nav-text);
        font-family: var(--tk-body-font);
        font-size: 15px;
        opacity: 0;
        z-index: -1;
        pointer-events: none;
    }

    .tk-main-navbar input#tk-search:focus {
        outline: 0;
    }

    .tk-main-navbar.tk-search-open input#tk-search {
        opacity: 1;
        z-index: 3;
        pointer-events: auto;
    }

    .tk-main-navbar.tk-search-open .tk-logo,
    .tk-main-navbar.tk-search-open .tk-desktop-menu,
    .tk-main-navbar.tk-search-open .tk-call,
    .tk-main-navbar.tk-search-open label.tk-question-toggle,
    .tk-main-navbar.tk-search-open label.tk-user-toggle {
        opacity: 0;
        pointer-events: none;
    }

    .tk-main-navbar #search-results {
        position: fixed;
        top: calc(var(--tk-header-h, 88px) + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 48px);
        max-width: 900px;
        height: 0;
        padding: 0 20px;
        overflow: auto;
        border-radius: 16px;
        background: var(--tk-mega-bg);
        opacity: 0;
        pointer-events: none;
        z-index: 1001;
    }

    .tk-main-navbar.tk-dropdown-visible #search-results {
        height: auto;
        max-height: 60vh;
        padding: 18px 20px;
        border: 1px solid var(--tk-mega-border);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
        opacity: 1;
        pointer-events: auto;
    }

    .tk-main-navbar #search-results ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tk-main-navbar #search-results li.result a {
        display: inline-flex;
        margin: 0 8px 8px 0;
        padding: 6px 14px;
        border: 1px solid var(--tk-mega-border);
        border-radius: 999px;
        background: var(--tk-mega-card-bg);
        color: var(--tk-mega-text);
        font-family: var(--tk-body-font);
        font-size: 13px;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .tk-main-navbar #search-results li.result a:hover {
        background: var(--tk-mega-card-hover);
        color: var(--primary-color, #0073FC);
    }
}

/* ==========================================================================
   Services mega menu — positioning
   ========================================================================== */
@media (min-width: 1025px) {
    /* `.tk-menu-item` (this dropdown's direct DOM parent) is
       `position: relative`, so `position: absolute` would size the panel
       against that ~45px-wide trigger. `position: fixed` sizes it against
       the viewport instead, and its `top` comes from the header's real
       measured height (--tk-header-h, set by tbtk-navbar-redesign.js) so
       it follows the navbar rather than a hardcoded guess.

       The panel starts flush under the navbar (no gap) so there is no
       hover dead-zone between "Services" and the menu. */
    .tk-main-navbar .tk-desktop-menu .tk-menu-dropdown.tk-services-dropdown {
        position: fixed;
        top: var(--tk-header-h, 88px);
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-6px);
        /* Generous, symmetrical side margins — the panel is centred and
           deliberately not close to the viewport edges. */
        width: calc(100% - 120px);
        max-width: 1400px;
        padding-top: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 1000;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .tk-main-navbar.tk-desktop-menu-open .tk-menu-dropdown.tk-services-dropdown {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


.tk-services-mega {
    background: var(--tk-mega-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--tk-mega-border);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* The three regions are separated by grid gap alone — no rules, no
   dividers. See .tk-services-panels, which used to carry borders. */
.tk-services-mega-inner {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 296px;
    gap: 30px;
    padding: 22px;
    min-height: 420px;
    max-height: 78vh;
}

/* ---- Left: deep-black rail holding the category cards ---------------- */
.tk-services-tabs {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--tk-mega-rail-bg);
    overflow-y: auto;
}

.tk-services-tabs-label {
    font-family: var(--tk-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tk-mega-text-muted);
    padding: 0 2px 4px;
}

/* NORMAL state already carries the premium surface — hover is not what
   makes these look finished. */
.tk-services-tab {
    display: block;
    width: 100%;
    border: none;
    /* The SEO category renders as an <a> so the tile itself navigates; this
       keeps it visually identical to the <button> tabs beside it. No-op for
       those buttons. */
    text-decoration: none;
    background: var(--tk-mega-tab-bg);
    box-shadow: var(--tk-mega-tab-shadow);
    color: var(--tk-mega-text);
    text-align: left;
    padding: 10px 13px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Same gradient family, a touch lighter, plus a 1px lift. Nothing that
   changes padding, size or position in the flow. */
.tk-services-tab:hover {
    background: var(--tk-mega-tab-bg-hover);
    transform: translateY(-1px);
}

/* Light card. Identical box metrics to the inactive cards, so switching
   categories never shifts the rail. */
/* `transition: none` is load-bearing, not a style choice. The base rule
   transitions `background`, and Chromium would not re-resolve the settled
   transition when a live theme toggle changed which rule matched — the card
   kept the previous theme's fill while its (untransitioned) `color`
   flipped, leaving dark text on a dark card. Dropping the transition here
   also stops the light/dark swap animating as you move between categories,
   which it never should. */
.tk-services-tab.is-active {
    background: #EDF0F3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #14161A;
    transform: none;
    transition: none;
}

html[data-tk-theme="light"] .tk-services-mega .tk-services-tab.is-active {
    background: #14161A;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(15, 17, 21, 0.22);
    color: #F3F5F7;
}

.tk-services-tab-label {
    display: block;
    font-family: var(--tk-heading-font);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 18px;
}

.tk-services-tab-desc {
    display: block;
    margin-top: 1px;
    font-family: var(--tk-body-font);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 15px;
    color: inherit;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Center: heading + services --------------------------------------- */
/* The border-left/border-right that used to sit here drew a visible rule
   down each side of this column — including the one beside the featured
   image. Both are gone: the grid gap does the separating. */
.tk-services-panels {
    /* the 12px horizontal padding absorbs the `margin: 0 -10px` that widens
       each service link's hover area; with less, the column overflowed
       sideways and grew a stray horizontal scrollbar */
    padding: 4px 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

.tk-services-panel {
    display: none;
}

.tk-services-panel.is-active {
    display: block;
    animation: tkServicesFadeIn 0.18s ease;
}

@keyframes tkServicesFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tk-services-panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
}

.tk-services-panel-head h4 {
    margin: 0;
    font-family: var(--tk-heading-font);
    font-size: 17px;
    font-weight: 800;
    line-height: 25.5px;
    color: var(--tk-mega-text);
}

.tk-services-panel-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
}

/* Print: two titled columns (Stationery Design / Apparel Design) with the
   "Printing Services" heading centred between them, on the titles' row. */
.tk-services-panel-groups {
    --tk-groups-gap: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px var(--tk-groups-gap);
}

/* Invisible copy of the heading that keeps the middle column its width, so
   the two link columns stay exactly where they were. */
.tk-services-panel-groups::before {
    content: attr(data-heading);
    grid-column: 2;
    grid-row: 1;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-family: var(--tk-heading-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tk-services-panel-groups > .tk-services-panel-group:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.tk-services-panel-groups > .tk-services-panel-group:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
}

/* Same type and rule as the column titles, so the three read as one row;
   only the brand colour sets it apart. The heading spans from the first
   column to the start of the last one; a hidden copy of the first title
   takes its place on the left, and auto margins centre the text in what is
   left, so the gaps to both titles' text are equal in every language. */
.tk-services-groups-heading {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: start;
    display: flex;
    margin: 0 calc(-1 * var(--tk-groups-gap)) 0 0;
    font-family: var(--tk-heading-font);
    font-size: 13px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary-color, #0073FC);
    pointer-events: none;
}

.tk-services-groups-heading::before {
    content: attr(data-left-title);
    flex: none;
    font-weight: 700;
    visibility: hidden;
}

.tk-services-groups-heading > span {
    margin: 0 auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tk-mega-border, rgba(127, 127, 127, 0.22));
    pointer-events: auto;
}

.tk-services-group-title {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tk-mega-border, rgba(127, 127, 127, 0.22));
    font-family: var(--tk-heading-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tk-mega-text-muted, #9AA1A9);
}

.tk-services-panel-links--single {
    grid-template-columns: minmax(0, 1fr);
}

.tk-main-navbar .tk-services-mega a.tk-services-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    color: var(--tk-mega-text) !important;
    font-family: var(--tk-body-font);
    font-size: 14px;
    font-weight: 500 !important;
    text-decoration: none;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20.25px;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Understated: the label picks up the site blue, with only a whisper of
   background behind it. No card, no block of colour. */
.tk-main-navbar .tk-services-mega a.tk-services-link:hover {
    background: var(--tk-service-hover);
    color: var(--primary-color, #0073FC) !important;
}

.tk-main-navbar .tk-services-mega a.tk-services-link.is-current {
    color: var(--primary-color, #0073FC) !important;
}

.tk-services-badge {
    flex-shrink: 0;
    font-family: var(--tk-body-font);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.4;
}

.tk-services-badge--top,
.tk-services-badge--new {
    background: rgba(0, 115, 252, 0.14);
    color: var(--primary-color, #0073FC);
}

.tk-services-badge--soon {
    background: var(--tk-mega-card-bg);
    color: var(--tk-mega-text-muted);
}

/* A service that is announced but not open yet (3D Acrylic Sign): same row
   as a link, but plain text with no hover, plus the footer's Coming soon
   pill in the brand blue. */
.tk-main-navbar .tk-services-mega .tk-services-link--soon {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    padding: 9px 10px;
    margin: 0 -10px;
    color: var(--tk-mega-text-muted, #9AA1A9);
    font-family: var(--tk-body-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20.25px;
    white-space: nowrap;
    cursor: default;
}

.tk-services-badge--coming {
    border: 1px solid color-mix(in srgb, var(--primary-color, #0073FC) 35%, transparent);
    background: color-mix(in srgb, var(--primary-color, #0073FC) 14%, transparent);
    color: var(--primary-color, #0073FC);
    font-size: 10.5px;
    line-height: 1.5;
    padding: 1px 8px;
    white-space: nowrap;
}

.tk-main-navbar .tk-services-mega a.tk-services-flat-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--primary-color, #0073FC);
    font-family: var(--tk-body-font);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-transform: none !important;
    white-space: normal !important;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(0, 115, 252, 0.1);
}

.tk-main-navbar .tk-services-mega a.tk-services-flat-link:hover {
    background: rgba(0, 115, 252, 0.18);
    color: var(--primary-color, #0073FC);
}

/* ---- Right: single feature card ---------------------------------------- */
/* No padding and no border here — the card fills its grid cell and the
   30px grid gap is the only thing between it and the service list. */
.tk-services-feature {
    position: relative;
}

.tk-main-navbar .tk-services-mega a.tk-services-feature-card {
    position: absolute;
    inset: 0;
    display: none !important;
    flex-direction: column;
    justify-content: flex-end;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    text-decoration: none;
    text-transform: none !important;
    white-space: normal !important;
    background: var(--tk-feature-bg);
    opacity: 0;
}

.tk-main-navbar .tk-services-mega a.tk-services-feature-card.is-active {
    display: flex !important;
    opacity: 1;
}

.tk-services-feature-card.is-empty {
    display: none !important;
}

.tk-services-feature-card img,
.tk-services-feature-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The AI Automation clip is portrait (9:16) and the card is shorter, so it
   crops. Anchor to the top: the title sits there, the bottom is only
   particles. */
.tk-services-feature-card video {
    object-position: center top;
    background: #05060a;
}

.tk-services-feature-info {
    position: relative;
    z-index: 1;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* A long, soft ramp rather than a hard black band, so the photo and the
       caption read as one card. */
    background: linear-gradient(0deg, rgba(5, 6, 7, 0.94) 0%, rgba(5, 6, 7, 0.78) 34%, rgba(5, 6, 7, 0.38) 68%, rgba(5, 6, 7, 0) 100%);
}

.tk-services-feature-info strong {
    font-family: var(--tk-heading-font);
    color: #F3F5F7;
    font-size: 15px;
    font-weight: 800;
}

.tk-services-feature-info span {
    font-family: var(--tk-body-font);
    color: rgba(243, 245, 247, 0.75);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 18px;
}

/* ---- AI Automation: animated backdrop ----------------------------------
   While that category is selected (tbtk-navbar-redesign.js sets
   data-tk-active) the box turns into a deep "command centre": a canvas
   neural network (tbtk-ai-menu-fx.js) plus a faint perspective grid in
   ::before. Everything sits under the content and ignores the pointer. */
.tk-services-mega {
    position: relative;
    isolation: isolate;
    transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.tk-services-mega-inner {
    position: relative;
    z-index: 1;
}

.tk-services-mega > .tk-ai-fx,
.tk-services-mega::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.tk-services-mega > .tk-ai-fx {
    width: 100%;
    height: 100%;
    display: block;
}

/* Floor grid receding toward a horizon, scrolling toward the viewer. */
.tk-services-mega::before {
    content: "";
    top: 45%;
    background-image:
        linear-gradient(rgba(80, 160, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 160, 255, 0.22) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 100%);
}

.tk-services-mega[data-tk-active="automation"] {
    background:
        radial-gradient(120% 90% at 55% 120%, rgba(0, 115, 252, 0.22), transparent 60%),
        radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, 0.16), transparent 60%),
        #05070d !important;
    border-color: rgba(80, 160, 255, 0.28);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(80, 160, 255, 0.08), 0 0 60px rgba(0, 115, 252, 0.18);
}

.tk-services-mega[data-tk-active="automation"] > .tk-ai-fx,
.tk-services-mega[data-tk-active="automation"]::before {
    opacity: 1;
}

.tk-services-mega[data-tk-active="automation"]::before {
    animation: tkAiFloor 2.8s linear infinite;
}

/* Glass rail so the network glows through it. */
.tk-services-mega[data-tk-active="automation"] .tk-services-tabs {
    background: color-mix(in srgb, var(--tk-mega-rail-bg) 62%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.10);
}

.tk-services-mega[data-tk-active="automation"] .tk-services-feature-card {
    box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.25), 0 0 40px rgba(0, 115, 252, 0.35), 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

/* Light theme: same scene on a pale, cool backdrop. */
html[data-tk-theme="light"] .tk-services-mega[data-tk-active="automation"] {
    background:
        radial-gradient(120% 90% at 55% 120%, rgba(0, 115, 252, 0.12), transparent 60%),
        radial-gradient(80% 70% at 100% 0%, rgba(139, 92, 246, 0.10), transparent 60%),
        #F6F9FF !important;
    border-color: rgba(0, 115, 252, 0.20);
    box-shadow: 0 30px 70px rgba(15, 30, 60, 0.18), 0 0 50px rgba(0, 115, 252, 0.12);
}

html[data-tk-theme="light"] .tk-services-mega::before {
    background-image:
        linear-gradient(rgba(0, 98, 230, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 98, 230, 0.14) 1px, transparent 1px);
}

html[data-tk-theme="light"] .tk-services-mega[data-tk-active="automation"] .tk-services-feature-card {
    box-shadow: 0 0 0 1px rgba(0, 115, 252, 0.2), 0 0 36px rgba(0, 115, 252, 0.22), 0 10px 26px rgba(15, 30, 60, 0.2) !important;
}

@keyframes tkAiFloor {
    from { background-position: 0 0; }
    to { background-position: 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-services-mega[data-tk-active="automation"]::before {
        animation: none;
    }
}

/* Below the desktop breakpoint, the mega menu markup is unused (mobile
   renders partials.service-menu instead), but keep it hidden defensively. */
@media (max-width: 1024px) {
    .tk-services-mega {
        display: none !important;
    }
}


/* ==========================================================================
   LOGO INK PER THEME

   Every logo spot renders two copies of the same artwork: the original
   (.tk-logo-ink-dark, navy text) and a copy whose navy text is white
   (.tk-logo-ink-light). Light theme shows the original; dark theme shows
   the white-text copy so it reads on the dark surfaces. Print always uses
   the original, since paper is white.
   ========================================================================== */
html:not([data-tk-theme="dark"]) .tk-logo-ink-light,
html[data-tk-theme="dark"] .tk-logo-ink-dark {
    display: none !important;
}

@media print {
    html[data-tk-theme="dark"] .tk-logo-ink-light {
        display: none !important;
    }

    html[data-tk-theme="dark"] .tk-logo-ink-dark {
        display: inline-block !important;
    }
}

/* ==========================================================================
   LIGHT THEME — WHITE DESKTOP HEADER

   In light mode the promo strip and the navigation row are pure white, and
   everything inside re-themes through the same tokens it already reads:
   the link pill becomes a soft grey surface with dark type, the action
   buttons become white raised tiles with a hairline and soft shadow (icons
   stay brand blue), and the portfolio dropdown, search results and language
   menu use the light palette. Dark mode is untouched.
   ========================================================================== */
html[data-tk-theme="light"] .tk-topbar,
html[data-tk-theme="light"] .tk-main-navbar {
    --tk-topbar-bg: #FFFFFF;
    --tk-navbar-bg: #FFFFFF;
    --tk-nav-text: #14161A;
    --tk-nav-text-muted: rgba(20, 22, 26, 0.5);
    --tk-nav-item-hover: rgba(15, 23, 42, 0.05);

    --tk-navsurface-bg: #F2F4F7;
    --tk-navsurface-text: #14161A;
    --tk-navsurface-hover: #FFFFFF;

    --tk-btn-bg: linear-gradient(#FFFFFF, #F4F6F9);
    --tk-btn-bg-hover: linear-gradient(#FFFFFF, #EAF1F9);
    --tk-btn-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(15, 23, 42, 0.07);

    --tk-mega-bg: #FFFFFF;
    --tk-mega-border: rgba(15, 17, 21, 0.09);
    --tk-mega-text: #14161A;
    --tk-mega-text-muted: rgba(20, 22, 26, 0.55);
    --tk-mega-divider: rgba(15, 17, 21, 0.08);
    --tk-mega-card-bg: #F5F6F8;
    --tk-mega-card-hover: #EDF0F3;
}

@media (min-width: 1025px) {
    /* hairlines so the white header separates from the page below it */
    html[data-tk-theme="light"] .tk-topbar {
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    html[data-tk-theme="light"] .tk-main-navbar {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    }

    /* the link pill: a recessed grey track; the hovered / open link lifts
       to a white chip */
    html[data-tk-theme="light"] .tk-main-navbar .tk-desktop-menu {
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
    }

    html[data-tk-theme="light"] .tk-main-navbar .tk-desktop-menu .tk-menu-item > a:hover,
    html[data-tk-theme="light"] .tk-main-navbar .tk-desktop-menu .tk-menu-item > a:focus-visible,
    html[data-tk-theme="light"] .tk-main-navbar.tk-desktop-menu-open .tk-services-item > a {
        color: var(--primary-color, #0073FC);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    }

    html[data-tk-theme="light"] .tk-main-navbar .tk-menu-port,
    html[data-tk-theme="light"] .tk-main-navbar.tk-dropdown-visible #search-results {
        box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
    }
}


/* ==========================================================================
   ACTION BUTTONS: ONE-AT-A-TIME HIGHLIGHT

   The same motion as the home page toolkit rail (tbtk-toolkit-redesign.css,
   `.tk-toolkit-slot.is-active .tk-toolkit-btn`): the active button lifts,
   tilts -5deg, grows a touch and lights up with a blue rim and glow, using
   the rail's own easing curves. tbtk-navbar-redesign.js moves .tk-nav-active
   from button to button. Scaled for these 42px buttons (4px lift instead of
   6px) and drawn with box-shadow only, so no button changes size. A hovered
   button simply becomes the active one.
   ========================================================================== */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .tk-main-navbar .tk-search-wrap > .tk-call > a,
    .tk-main-navbar .tk-search-wrap > label.tk-search-toggle,
    .tk-main-navbar .tk-search-wrap > label.tk-question-toggle > a,
    .tk-main-navbar .tk-search-wrap > label.tk-user-toggle > a,
    .tk-main-navbar .tk-search-wrap > button.tk-cart-toggle,
    .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle {
        transition:
            transform 0.32s cubic-bezier(0.34, 1.5, 0.64, 1),
            box-shadow 0.32s cubic-bezier(0.19, 1, 0.22, 1),
            background 0.2s ease;
    }

    .tk-main-navbar .tk-search-wrap > .tk-call > a.tk-nav-active,
    .tk-main-navbar .tk-search-wrap > label.tk-search-toggle.tk-nav-active,
    .tk-main-navbar .tk-search-wrap > label.tk-question-toggle > a.tk-nav-active,
    .tk-main-navbar .tk-search-wrap > label.tk-user-toggle > a.tk-nav-active,
    .tk-main-navbar .tk-search-wrap > button.tk-cart-toggle.tk-nav-active,
    .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle.tk-nav-active {
        transform: translateY(-4px) rotate(-5deg) scale(1.06);
        background: var(--tk-btn-bg-hover);
        /* fallback for engines without color-mix */
        box-shadow:
            var(--tk-btn-shadow),
            0 0 0 1px var(--primary-color, #0073FC),
            0 6px 18px rgba(0, 115, 252, 0.35);
        box-shadow:
            var(--tk-btn-shadow),
            0 0 0 1px var(--primary-color, #0073FC),
            0 0 10px color-mix(in srgb, var(--primary-color, #0073FC) 55%, transparent),
            0 4px 20px color-mix(in srgb, var(--primary-color, #0073FC) 38%, transparent),
            0 8px 30px color-mix(in srgb, var(--primary-color, #0073FC) 20%, transparent);
    }

    /* a light ground shows spread more readily, so the halo is tighter */
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > .tk-call > a.tk-nav-active,
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > label.tk-search-toggle.tk-nav-active,
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > label.tk-question-toggle > a.tk-nav-active,
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > label.tk-user-toggle > a.tk-nav-active,
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > button.tk-cart-toggle.tk-nav-active,
    html[data-tk-theme="light"] .tk-main-navbar .tk-search-wrap > .tk-lang .tk-lang-toggle.tk-nav-active {
        box-shadow:
            var(--tk-btn-shadow),
            0 0 0 1px var(--primary-color, #0073FC),
            0 0 9px color-mix(in srgb, var(--primary-color, #0073FC) 45%, transparent),
            0 4px 16px color-mix(in srgb, var(--primary-color, #0073FC) 28%, transparent);
    }
}

/* ==========================================================================
   A category that is announced but not open yet
   ==========================================================================
   Print stays in the list so the offering is still visible, but it is not
   a tab: the markup is a plain <div> with no role, no href and no
   data-tk-tab, so there is nothing for the navbar script to bind and it
   can be neither clicked nor hovered open. These rules make it read that
   way — dimmed, no pointer, no hover response — and give the Coming Soon
   line the accent so it reads as a status rather than a description.
   ========================================================================== */
.tk-services-tab--soon {
    cursor: default;
    opacity: 0.55;
}

/* the tile must not react the way a live one does */
.tk-services-tab--soon:hover,
.tk-services-tab--soon:focus {
    background: inherit;
    border-color: inherit;
    box-shadow: none;
    transform: none;
}

.tk-services-tab-desc--soon {
    color: var(--primary-color, #0073fc);
    font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 1;
    text-transform: uppercase;
}

/* The same state in the mobile/stacked service menu, where Print is one
   row rather than a tile: the label stays, the row does not behave like a
   link, and the status rides beside it as a small accent pill. */
.tk-service-category--soon .tk-menu-static {
    cursor: default;
}

.tk-coming-soon-badge {
    background: color-mix(in srgb, var(--primary-color, #0073fc) 16%, transparent);
    border-radius: 999px;
    color: var(--primary-color, #0073fc);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1;
    margin-left: 6px;
    padding: 4px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Mobile service menu, Print: plain "Stationery Design" / "Apparel Design"
   captions that split the list. Not links. */
.tk-service-category-print .sub-menu li.tk-menu-group-title {
    pointer-events: none;
    padding-top: 10px;
}

.tk-service-category-print .sub-menu li.tk-menu-group-title:first-child {
    padding-top: 0;
}

.tk-service-category-print .sub-menu li.tk-menu-group-title span {
    display: block;
    color: var(--primary-color, #0073fc);
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tk-service-category-print .sub-menu li.tk-menu-item--soon .tk-menu-static {
    display: inline-flex;
    align-items: center;
    cursor: default;
    opacity: 0.75;
}

/* ==========================================================================
   Services mega menu — laptop widths (1025–1439px)
   At these widths the centre column was too narrow and Print's third column
   (Apparel Design) ran under the feature card. The feature card keeps its
   full 296px size; the room comes from slimmer side margins, a slimmer rail
   and tighter gaps, so the text moves right towards the card instead.
   ≥1440px is unchanged.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1439px) {
    .tk-main-navbar .tk-desktop-menu .tk-menu-dropdown.tk-services-dropdown {
        width: calc(100% - 48px);
    }

    .tk-services-mega-inner {
        grid-template-columns: 220px minmax(0, 1fr) 296px;
        gap: 22px;
    }

    .tk-services-panel-groups {
        --tk-groups-gap: 20px;
    }
}

/* Safety net for Print's titled columns: a long label (e.g. Spanish
   "Sudaderas - Con Cierre Completo") wraps onto a second line instead of
   being cut off. */
.tk-main-navbar .tk-services-mega .tk-services-panel-group a.tk-services-link {
    white-space: normal !important;
    overflow: visible;
}