/* ==========================================================================
   Mobile navigation — closed header row + bottom-sheet menu.

   EVERY rule in this file lives inside @media (max-width: 1024px) — the
   project's OWN breakpoint: the theme swaps to #toolkit-mob-header at 1024
   and shows .tk-main-navbar from 1025 up. Matching it means there is no band
   where the old flyout and the new sheet disagree, and desktop cannot be
   reached from this file at all.

   The open sheet follows the reference layout, with the site's brand blue
   (--tkm-accent) on the active tab, the icons, Show more and Call. The closed
   header row uses the same --primary-color (#0073FC).
   Surfaces: #121417 sheet, #1A1D21 field, rgb(37,41,46)->rgb(27,30,34)
   raised controls, rgba(255,255,255,.07) hairline; light theme uses
   #FFFFFF / #F2F4F7 / #0A0D0F / #4A535D.
   ========================================================================== */

@media (max-width: 1024px) {

    /* ======================================================================
       CLOSED HEADER ROW — phone | logo | hamburger
       ====================================================================== */

    /* The promo row is desktop-only content. Hidden here with no residual
       box, so the header row moves up to the top of the screen. */
    #toolkit-mob-header .top_bar {
        display: none;
    }

    /* The legacy sheet pins this at top:-100px with a 200px height, which is
       the empty black band above the controls. Reset to a compact bar that
       starts at the top of the viewport. */
    #toolkit-mob-header {
        top: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0;
        margin: 0;
    }

    #toolkit-mob-header .tk-wrap {
        display: grid;
        /* a real 3-column grid, so the logo is centred in the VIEWPORT and
           not merely in the space left over between the two controls */
        grid-template-columns: 52px 1fr 52px;
        grid-template-rows: auto;
        align-items: center;
        gap: 0;
        height: auto;
        min-height: 0;
        padding: 12px 16px;
    }

    /* grid-row matters as much as grid-column here: auto-placement had
       already advanced past column 2 (the hamburger comes before the logo in
       the markup and sits in column 3), so a column-only rule pushed the logo
       onto a SECOND row — which is why it vanished below the header. */
    #toolkit-mob-header .tk-wrap .tk-hide-desk {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
    }

    #toolkit-mob-header .tk-wrap .tk-logo {
        /* the legacy rule positions this absolutely, which kept it out of the
           grid entirely and collapsed the middle column to 0 — returning it
           to flow is what actually centres it in the viewport */
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
        align-self: center;
        margin: 0;
        padding: 0;
        transform: none;
    }

    #toolkit-mob-header .tk-wrap .tk-menu-wrap {
        grid-row: 1;
        grid-column: 3;
        justify-self: end;
    }

    #toolkit-mob-header .tk-wrap .tk-logo a {
        display: block;
        line-height: 0;
    }

    /* A definite height is required, not max-height: this logo is an SVG and
       with width/height:auto it lays out at 0x0. Its 185x150 ratio makes 46px
       tall about 57px wide, inside the 82px cap. */
    #toolkit-mob-header .tk-wrap .tk-logo img {
        display: block;
        width: auto;
        /* trimmed PNG (no empty margin): about 105px wide */
        height: 36px !important;
        max-width: 230px;
    }

    /* the two controls share one premium rounded-square treatment */
    #toolkit-mob-header .tk-wrap .mobbtn,
    #toolkit-mob-header .tk-wrap .tk-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.5);
        color: var(--primary-color, #0073FC);
        font-size: 0;            /* the labels become icons below */
        line-height: 0;
        text-indent: 0;
        cursor: pointer;
    }

    /* phone glyph replaces the "CALL NOW" text without touching the markup
       or its tel: href */
    #toolkit-mob-header .tk-wrap .mobbtn::before {
        content: "";
        width: 21px;
        height: 21px;
        background-color: currentColor;
        -webkit-mask: var(--tkm-phone) center / contain no-repeat;
        mask: var(--tkm-phone) center / contain no-repeat;
    }

    /* three clean bars, centred */
    #toolkit-mob-header .tk-wrap .tk-menu-toggle {
        position: relative;
        color: #F3F5F7;
    }

    #toolkit-mob-header .tk-wrap .tk-menu-toggle::before,
    #toolkit-mob-header .tk-wrap .tk-menu-toggle::after,
    #toolkit-mob-header .tk-wrap .tk-menu-toggle > div {
        content: "";
        position: absolute;
        left: 50%;
        width: 20px;
        height: 2px;
        margin-left: -10px;
        border-radius: 2px;
        background: currentColor;
    }

    #toolkit-mob-header .tk-wrap .tk-menu-toggle::before { top: 17px; }
    #toolkit-mob-header .tk-wrap .tk-menu-toggle > div   { top: 24px; }
    #toolkit-mob-header .tk-wrap .tk-menu-toggle::after  { top: 31px; }

    /* the middle bar when the theme ships no inner <div> */
    #toolkit-mob-header .tk-wrap .tk-menu-toggle {
        background-image: linear-gradient(currentColor, currentColor);
        background-size: 20px 2px;
        background-position: center;
        background-repeat: no-repeat;
    }

    :root {
        --tkm-accent: var(--primary-color, #0073FC);
        --tkm-accent-dark: var(--primary-color-dark, #005BC7);
        --tkm-accent-ink: var(--primary-color-dark, #005BC7);
        --tkm-phone: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3h3l1.5 3.8-1.9 1.4a12 12 0 0 0 5.6 5.6l1.4-1.9L20 13.4v3a2 2 0 0 1-2.2 2A15.6 15.6 0 0 1 4.6 5.2 2 2 0 0 1 6.6 3Z'/%3E%3C/svg%3E");
    }

    /* The block that used to compact the promo pills for mobile lived here.
       It is gone, not merely overridden: it declared display:flex on the same
       selector as the hide rule above, so at equal specificity it won on
       source order and the row kept rendering. The pills are desktop-only
       now, and their desktop styling is untouched. */

    /* ======================================================================
       THE SHEET
       ====================================================================== */
    /* The page's own sticky action bar is z-index 9998, so 4000 left the
       sheet underneath it. */
    .tk-menu-l-wrap.tkm-ready {
        position: fixed;
        inset: 0;
        z-index: 10000;
        visibility: hidden;
        pointer-events: none;
    }

    .tk-menu-l-wrap.tkm-ready.tk-menu-open {
        visibility: visible;
        pointer-events: auto;
    }

    /* the page behind, darkened and blurred */
    .tk-menu-l-wrap.tkm-ready .tk-menu-overflow {
        position: absolute;
        inset: 0;
        background: rgba(4, 6, 8, 0.66);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .tk-menu-l-wrap.tkm-ready.tk-menu-open .tk-menu-overflow {
        opacity: 1;
    }

    /* The original list is the sheet's shell now.

       `header ...` is deliberate. The legacy pair
         .tk-menu-l-wrap .tk-menu-list            { transform: translate(120%, 0) }
         .tk-menu-l-wrap.tk-menu-open .tk-menu-list { transform: translate(0, 0) }
       is the old horizontal slide-in drawer. The open half ties this rule on
       specificity (0,3,0), and it was winning on source order — which parked
       the whole sheet at left:468px, i.e. 120% off the right edge. That is
       why the menu "did not open": it opened off-screen. The element name
       lifts these to (0,3,1) so they win outright, in both states. */
    header .tk-menu-l-wrap.tkm-ready .tk-menu-list,
    header .tk-menu-l-wrap.tkm-ready.tk-menu-open .tk-menu-list {
        transform: none;
        /* transition:none as well — the theme ships `.tk-menu-l-wrap * {
           transition: .5s }`, so without this the shell spends half a second
           easing from the legacy 120% offset toward 0 every time the class
           changes. The sheet does its own vertical slide; this shell should
           simply be where it belongs, immediately. */
        transition: none;
    }

    .tk-menu-l-wrap.tkm-ready .tk-menu-list {
        position: absolute;
        /* top:auto matters: the legacy rule sets top:0 as well as bottom:0,
           which stretched the panel and anchored it to the TOP of the screen
           instead of letting it sit on the bottom edge. */
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        height: auto;
        height: 88dvh;
        max-height: 88dvh;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        transform: none;
        overflow: visible;
    }

    /* everything the legacy mobile menu rendered is the DATA SOURCE for the
       sheet; the sheet itself is what gets shown */
    .tk-menu-l-wrap.tkm-ready .tk-menu-list > div:not(.tkm-sheet) {
        display: none;
    }

    /* The legacy drawer styles its direct child as the scrolling panel:
       `.tk-menu-l-wrap .tk-menu-list > div` (0,2,1) sets height:calc(100% - 60px),
       padding:1rem 1rem 2rem 0, padding-bottom:90px and a mask fade. The sheet IS
       that child, so it inherited a 60px gap above the viewport edge, 106px of
       phantom padding and a faded top/bottom. This selector (0,4,0) outranks it. */
    .tk-menu-l-wrap.tkm-ready .tk-menu-list > .tkm-sheet {
        height: 88dvh;
        width: 100%;
        padding: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Same story for the social row: `.tk-menu-l-wrap .tk-menu-list .tk-social-list`
       (0,3,0) pins it absolute/bottom:0/right:0 against the panel, so it floated
       over the sheet's lower edge instead of scrolling with the content. */
    .tk-menu-l-wrap.tkm-ready .tk-menu-list .tkm-body .tk-social-list {
        position: static;
        right: auto;
        bottom: auto;
        width: 100%;
        padding: 0;
    }

    .tkm-sheet {
        display: flex;
        flex-direction: column;
        /* A definite height, not just a cap: the scroller below is a flex
           child, and it can only become scrollable if its parent box is
           bounded. dvh tracks the usable viewport as mobile browser chrome
           shows and hides. */
        height: 88dvh;
        max-height: 88dvh;
        border-radius: 24px 24px 0 0;   /* flat at the viewport edge */
        background: #121417;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
        transform: translateY(100%);
        opacity: 0;
        transition:
            transform 0.42s cubic-bezier(0.19, 1, 0.22, 1),
            opacity 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .tk-menu-open .tkm-sheet {
        transform: translateY(0);
        opacity: 1;
    }

    /* ---- head: handle + close ------------------------------------------ */
    /* The close button gets its own band. This row used to be ~23px tall
       while the 30px close sat at top:8px, so it hung 15px into the utility
       row and landed on the account button. min-height reserves the space. */
    .tkm-head {
        position: relative;
        flex: 0 0 auto;
        display: block;
        min-height: 34px;
        padding: 0;
        /* This strip is the drag region, so the browser must not claim the
           gesture for scrolling — pointermove has to reach the drag handler.
           Deliberately scoped to the head ONLY: .tkm-scroll below keeps
           touch-action: pan-y so the menu body still scrolls natively. */
        touch-action: none;
        cursor: grab;
    }

    .tkm-head:active {
        cursor: grabbing;
    }

    .tkm-handle {
        position: absolute;
        top: 12px;
        left: 50%;
        width: 44px;
        height: 4px;
        margin-left: -22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.24);
    }

    .tkm-close {
        position: absolute;
        top: 6px;
        right: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 22px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 7px;
        background: #22262B;
        color: #E6E9ED;
        cursor: pointer;
    }

    .tkm-close svg { width: 11px; height: 11px; }

    /* ---- scroll area ---------------------------------------------------- */
    .tkm-scroll {
        flex: 1 1 auto;
        /* min-height:0 is what lets a flex child shrink below its content and
           actually scroll instead of stretching its parent. */
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .tkm-body {
        padding: 10px 18px calc(40px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- utility row ---------------------------------------------------- */
    .tkm-utility {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 14px;
    }

    .tkm-search {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 9px;
        height: 52px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        background: #1A1D21;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
        color: var(--tkm-accent);
    }

    .tkm-search svg { flex: 0 0 auto; width: 18px; height: 18px; }

    .tkm-search input {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        background: none;
        color: #F3F5F7;
        font-size: 16px;
        outline: none;
    }

    .tkm-search input::placeholder { color: #7D858D; opacity: 1; }

    .tkm-util-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        background: linear-gradient(rgb(37, 41, 46), rgb(27, 30, 34));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.45);
        color: var(--tkm-accent);
    }

    .tkm-util-btn svg { width: 19px; height: 19px; }

    /* display:grid outranks the UA's [hidden]{display:none}, which left an
       empty results bar under the search field */
    .tkm-results[hidden] { display: none; }

    .tkm-results {
        display: grid;
        gap: 2px;
        margin: -6px 0 16px;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        background: #1A1D21;
    }

    .tkm-result {
        padding: 11px 12px;
        border-radius: 9px;
        color: #D6DBE1;
        font-size: 14.5px;
        text-decoration: none;
    }

    /* ---- category cards -------------------------------------------------- */
    .tkm-cats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-bottom: 18px;
    }

    /* an odd last category (five of them today) takes the full row rather
       than leaving a hole beside it */
    .tkm-cat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .tkm-cat {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        background: linear-gradient(rgb(37, 41, 46), rgb(27, 30, 34));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.45);
        color: #C9CED6;
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
        /* colour is not transitioned: a live theme toggle would otherwise
           leave the label on the previous theme's value */
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    /* the selected tab sits pressed in, darker, with blue text */
    .tkm-cat.is-active {
        border-color: rgba(255, 255, 255, 0.05);
        background: linear-gradient(rgb(20, 22, 25), rgb(24, 27, 30));
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.5);
        color: var(--tkm-accent);
    }

    /* ---- selected category's items --------------------------------------- */
    .tkm-panel { margin-bottom: 18px; padding: 0 6px; }

    /* grid-template-rows is set by the script so the list fills column by
       column */
    .tkm-panel-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: column;
        gap: 20px 18px;
    }

    .tkm-panel-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        color: #EEF0F3;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        text-transform: none;
    }

    /* display:flex above outranks the UA's [hidden] rule; the items past the
       Show more limit must leave the grid, or they open extra columns */
    .tkm-panel-link[hidden] { display: none; }

    /* announced, not open yet (3D Acrylic Sign): plain row + blue pill */
    .tkm-panel-link--soon {
        cursor: default;
        color: #9AA1A9;
    }

    .tkm-soon {
        flex: 0 0 auto;
        padding: 2px 8px;
        border: 1px solid rgba(0, 115, 252, 0.35);
        border-radius: 999px;
        background: rgba(0, 115, 252, 0.14);
        color: #5AA2FF;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.03em;
        line-height: 1.5;
        white-space: nowrap;
    }

    .tkm-panel-label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tkm-top {
        flex: 0 0 auto;
        padding: 3px 9px;
        border-radius: 999px;
        background: linear-gradient(#F4CF63, #D6A637);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
        color: #2A1F04;
        font-size: 9.5px;
        font-weight: 900;
        letter-spacing: 0.08em;
    }

    .tkm-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        min-width: 172px;
        height: 40px;
        margin: 18px auto 0;
        padding: 0 20px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(var(--tkm-accent), var(--tkm-accent-dark));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 5px 14px rgba(0, 115, 252, 0.26);
        color: #FFFFFF;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .tkm-more { display: flex; }
    .tkm-more svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
    .tkm-more.is-open svg { transform: rotate(180deg); }

    /* ---- standalone links ------------------------------------------------ */
    .tkm-links {
        display: flex;
        flex-direction: column;
        margin: 0 -18px;
        padding: 8px 18px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .tkm-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 60px;
        padding: 14px 18px;
        border: 0;
        background: none;
        color: #F3F5F7;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.07em;
        line-height: 1.2;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
    }

    .tkm-link svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        color: #8A929B;
        transition: transform 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .tkm-acc.is-open .tkm-link svg { transform: rotate(180deg); }

    /* `grid-template-rows: 0fr` only collapses the FIRST row, so with several
       children the rest landed in implicit auto rows and kept their height —
       that was the empty gap under an accordion such as PORTFOLIO. A single
       collapsing box has no such edge case. */
    .tkm-sub {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition:
            max-height 0.34s cubic-bezier(0.19, 1, 0.22, 1),
            opacity 0.28s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .tkm-acc.is-open .tkm-sub {
        max-height: 60vh;
        opacity: 1;
    }

    .tkm-sub-link {
        display: block;
        overflow: hidden;
        padding: 0 18px 16px 20px;
        color: #AEB6BE;
        font-size: 15.5px;
        text-decoration: none;
    }

    .tkm-sub-link.is-static { color: #7D858D; }

    /* ---- CTA -------------------------------------------------------------- */
    .tkm-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-width: 66%;
        min-height: 56px;
        margin: 18px auto;
        padding: 0 32px;
        border-radius: 14px;
        background: linear-gradient(var(--tkm-accent), var(--tkm-accent-dark));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(0, 115, 252, 0.3);
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .tkm-cta,
    .tkm-cta:hover,
    .tkm-cta:focus,
    .tkm-cta:visited {
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
    }

    /* ---- moved-in blocks -------------------------------------------------- */
    .tkm-body .tk-social-list {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 4px 0 10px;
    }

    .tkm-body .tk-language-links {
        display: flex;
        justify-content: center;
        margin-bottom: 4px;
    }

    /* page cannot scroll behind the sheet */
    body.tkm-locked {
        position: fixed;
        right: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    /* The chat launcher is fixed above everything (z-index 99998) and sat on
       top of the open sheet's tabs. It steps aside while the menu is open. */
    body.tkm-locked .tba-chat-launcher {
        visibility: hidden;
    }

    /* ======================================================================
       LIGHT THEME
       ====================================================================== */
    html[data-tk-theme="light"] #toolkit-mob-header .tk-wrap .mobbtn,
    html[data-tk-theme="light"] #toolkit-mob-header .tk-wrap .tk-menu-toggle {
        border-color: var(--primary-color-dark, #005BC7);
        background: linear-gradient(#1A85FF, #0067E6);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 10px rgba(0, 115, 252, 0.35);
        color: #FFFFFF;
    }

    /* the shorthand above would wipe the middle bar's background-image */
    html[data-tk-theme="light"] #toolkit-mob-header .tk-wrap .tk-menu-toggle {
        background: linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat,
                    linear-gradient(#1A85FF, #0067E6);
    }

    html[data-tk-theme="light"] .tk-menu-l-wrap.tkm-ready .tk-menu-overflow {
        background: rgba(15, 23, 42, 0.42);
    }

    html[data-tk-theme="light"] .tkm-sheet {
        background: #FFFFFF;
        box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.22);
    }

    html[data-tk-theme="light"] .tkm-handle { background: rgba(15, 23, 42, 0.18); }

    html[data-tk-theme="light"] .tkm-close {
        border-color: rgba(15, 23, 42, 0.1);
        background: #EDF1F5;
        color: #4A535D;
    }

    html[data-tk-theme="light"] .tkm-search,
    html[data-tk-theme="light"] .tkm-results {
        border-color: rgba(15, 23, 42, 0.1);
        background: #F2F4F7;
        box-shadow: none;
    }

    html[data-tk-theme="light"] .tkm-search,
    html[data-tk-theme="light"] .tkm-util-btn {
        color: var(--tkm-accent-dark);
    }

    html[data-tk-theme="light"] .tkm-util-btn {
        border-color: rgba(15, 23, 42, 0.1);
        background: linear-gradient(#FFFFFF, #EEF1F5);
        box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    html[data-tk-theme="light"] .tkm-search input { color: #0A0D0F; }
    html[data-tk-theme="light"] .tkm-search input::placeholder { color: #737C86; }
    html[data-tk-theme="light"] .tkm-result { color: #2C343C; }

    html[data-tk-theme="light"] .tkm-cat {
        border-color: rgba(15, 23, 42, 0.1);
        background: linear-gradient(#FFFFFF, #EEF1F5);
        box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 8px rgba(15, 23, 42, 0.08);
        color: #3C444D;
    }

    html[data-tk-theme="light"] .tkm-cat.is-active {
        border-color: rgba(0, 115, 252, 0.4);
        background: #EAF3FF;
        box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.08);
        color: var(--tkm-accent-ink);
    }

    html[data-tk-theme="light"] .tkm-panel-link { color: #1F262D; }
    html[data-tk-theme="light"] .tkm-panel-link--soon { color: #4A535D; }
    html[data-tk-theme="light"] .tkm-soon {
        border-color: rgba(0, 115, 252, 0.25);
        background: rgba(0, 115, 252, 0.08);
        color: #005BC7;
    }
    html[data-tk-theme="light"] .tkm-links { border-top-color: rgba(15, 23, 42, 0.1); }
    html[data-tk-theme="light"] .tkm-link { color: #0A0D0F; }
    html[data-tk-theme="light"] .tkm-link svg { color: #6B7480; }
    html[data-tk-theme="light"] .tkm-sub-link { color: #4A535D; }
    html[data-tk-theme="light"] .tkm-sub-link.is-static { color: #858D96; }

    /* The language switcher's own stylesheet hard-codes white text, which is
       invisible once the sheet is white. Scoped to the sheet, so the desktop
       and footer switchers keep their existing colours. */
    html[data-tk-theme="light"] .tkm-body .tk-language-links,
    html[data-tk-theme="light"] .tkm-body .tk-language-links a,
    html[data-tk-theme="light"] .tkm-body .tk-language-links span {
        color: #4A535D;
    }

    /* the legacy theme paints the icon glyph itself white, so the <i> needs
       the colour too, not only its link */
    html[data-tk-theme="light"] .tkm-body .tk-social-list a,
    html[data-tk-theme="light"] .tkm-body .tk-social-list a i {
        color: #4A535D;
        -webkit-text-fill-color: #4A535D;
    }

    /* ======================================================================
       NARROW PHONES — reduce padding and gaps before breaking the layout
       ====================================================================== */
    @media (max-width: 374px) {
        .tkm-body { padding-right: 14px; padding-left: 14px; }
        .tkm-links { margin: 0 -14px; padding-right: 14px; padding-left: 14px; }
        .tkm-cats { gap: 9px; }
        .tkm-cat { min-height: 54px; font-size: 12.5px; letter-spacing: 0.06em; }
        .tkm-panel-grid { gap: 16px 10px; }
        .tkm-panel-link { font-size: 14px; }
        .tkm-link { font-size: 15px; min-height: 54px; }
        .tkm-cta { min-width: 80%; font-size: 16px; min-height: 52px; padding: 0 22px; }
        .tkm-util-btn, .tkm-search { height: 46px; }
        .tkm-util-btn { width: 46px; }
        #toolkit-mob-header .tk-wrap { padding-right: 12px; padding-left: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .tkm-sheet,
        .tk-menu-l-wrap.tkm-ready .tk-menu-overflow,
        .tkm-sub,
        .tkm-link svg,
        .tkm-more svg {
            transition: none;
        }
    }
}

/* Spanish category names are longer than their English counterparts and one
   of them, AUTOMATIZACIÓN, is a single word wider than the card. The span is
   a flex child, so it needs min-width:0 before it is allowed to wrap at all;
   hyphens then breaks it properly for the page's language rather than mid-
   syllable, and break-word is the last-resort guard. The card keeps its size,
   its weight and its font — only the wrapping changes. */
@media (max-width: 1024px) {
    .tkm-cat > span {
        min-width: 0;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* ---- a category that is announced but not open yet ------------------- */
    .tkm-cat--soon {
        cursor: default;
        flex-direction: column;
        gap: 6px;
        opacity: 0.62;
    }

    .tkm-cat-soon {
        color: var(--primary-color, #0073FC);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.09em;
        line-height: 1;
        text-transform: uppercase;
    }
}