/* ==========================================================================
   TalentKonekt — scroll mechanism + the declared-mode board
   --------------------------------------------------------------------------
   Two things live here and nothing else:

   1. The DEVICE rules the scrollcraft engine drives. These are ported from
      engine/scrollcraft.css, deliberately WITHOUT its reset and design system:
      that file restyles html, body, img and every form control against tokens
      this site does not have, which would fight Tailwind's preflight and blank
      the page's own ground. The engine only needs the [data-sc-*] rules.

   2. The page's own classes for the declared-mode board.

   Every colour resolves through the site's existing --tk-* / --c-* theme
   tokens, so all of it works in light and dark with no second stylesheet.
   ========================================================================== */

:root {
    --tk-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --tk-flip-dur: 420ms;
}

/* ============================================================== DEVICES ==
   Driven by the engine. Do not restyle these from page CSS.               */

.sc-act--pinned { position: relative; }

[data-sc-stage] {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: clip;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* Cue pre-paint state. The engine writes opacity and transform inline; this is
   what the element looks like before the first read(), so nothing flashes. */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* Kinetic split. Descenders live below the baseline and a mask clipped to the
   line box eats the tails off g, y, p and j, so the line buys them room back. */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* Horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* Reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* Flow reveal, fires once on entry */
[data-sc-in],
[data-sc-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 620ms var(--tk-ease-out), transform 620ms var(--tk-ease-out);
}
[data-sc-in].sc-in,
[data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* Pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }

/* Anything that counts or tabulates holds its column width while digits change */
:where(.sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    /* Fewer and gentler, not zero: opacity still carries comprehension, every
       position change is dropped. */
    [data-sc-in],
    [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
    [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
    [data-sc-reveal] { clip-path: none !important; }
}

/* ========================================================== THE BOARD ==
   The declaration, the state strip, and the split-flap re-flip.          */

/* ---- 1. The declaration -------------------------------------------------
   Two real radio inputs. The visible card is the label, so the whole thing is
   keyboard-operable and announced correctly without any ARIA of my own. */

.tk-declare {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* The panel: the single raised object in the hero. Depth here is an offset
   shadow plus a 1px edge light, which is what a real lip catches. No wash and
   no glow. */
.tk-declare--panel {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: rgb(var(--tk-card));
    border: 1px solid rgb(var(--tk-border));
    box-shadow: var(--tk-sh-soft-lg);
}
/* The edge light that used to sit here is gone. A 1px-tall box cannot follow an
   18px corner radius: it rendered as a straight white hairline running the full
   width of the panel, so on dark it read as a second border poking out past both
   rounded corners rather than as a lip catching the light. It was invisible on
   the light theme by design, which is why this only ever looked wrong on dark.
   The panel keeps its own border and its shadow, which is enough lift. */

.tk-declare__legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--tk-muted));
}

.tk-declare__foot {
    margin: 14px 0 0;
    font-size: 12px;
    color: rgb(var(--tk-muted));
}

.tk-declare__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tk-declare__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 15px 44px 15px 17px;
    border-radius: 12px;
    border: 1.5px solid rgb(var(--tk-border));
    background: rgb(var(--tk-card));
    color: rgb(var(--tk-fg));
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms var(--tk-ease-out),
                background-color 160ms var(--tk-ease-out),
                transform 160ms var(--tk-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .tk-declare__opt:hover {
        border-color: rgb(var(--tk-p-500) / 0.55);
        transform: translateY(-1px);
    }
}

.tk-declare__opt:active { transform: translateY(0.5px); }

.tk-declare__input:focus-visible + .tk-declare__opt {
    outline: 2px solid rgb(var(--tk-p-500));
    outline-offset: 3px;
}

.tk-declare__input:checked + .tk-declare__opt {
    border-color: rgb(var(--tk-p-500));
    background: rgb(var(--tk-p-500) / 0.10);
}

.tk-declare__k {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
}

.tk-declare__sub {
    font-size: 12.5px;
    line-height: 1.35;
    color: rgb(var(--tk-muted));
}

/* The tick only exists once a side is declared. */
.tk-declare__tick {
    position: absolute;
    top: 12px; right: 12px;
    width: 16px; height: 16px;
    opacity: 0;
    transform: scale(0.86);
    color: rgb(var(--tk-p-600));
    transition: opacity 160ms var(--tk-ease-out), transform 160ms var(--tk-ease-out);
}
.tk-declare__input:checked + .tk-declare__opt .tk-declare__tick {
    opacity: 1;
    transform: scale(1);
}

/* ---- 2. The state strip -------------------------------------------------
   Persistent chrome. Shows the declared side and can change it from anywhere,
   which is what stops the hero control being a one-shot the visitor forgets. */

.tk-strip {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 140%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 14px;
    border-radius: 999px;
    border: 1px solid rgb(var(--tk-border));
    background: rgb(var(--tk-card) / 0.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--tk-sh-soft-lg);
    opacity: 0;
    transition: transform 320ms var(--tk-ease-out), opacity 320ms var(--tk-ease-out);
    max-width: calc(100vw - 24px);
}

.tk-strip.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tk-strip__label {
    font-size: 12.5px;
    font-weight: 600;
    color: rgb(var(--tk-fg));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-strip__label b {
    color: rgb(var(--tk-p-600));
    font-weight: 700;
}

.tk-strip__swap {
    flex: none;
    border: 1px solid rgb(var(--tk-border));
    background: transparent;
    color: rgb(var(--tk-fg));
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 140ms var(--tk-ease-out),
                border-color 140ms var(--tk-ease-out);
}

.tk-strip__swap:hover {
    background: rgb(var(--tk-p-500) / 0.12);
    border-color: rgb(var(--tk-p-500) / 0.5);
}
.tk-strip__swap:active { transform: translateY(1px); }
.tk-strip__swap:focus-visible {
    outline: 2px solid rgb(var(--tk-p-500));
    outline-offset: 2px;
}

/* How much of the page has re-flipped, drawn into the strip's own border. */
.tk-strip__meter {
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--tk-p-500) / 0.16);
    overflow: hidden;
}
.tk-strip__meter i {
    display: block;
    height: 100%;
    width: 100%;
    background: rgb(var(--tk-p-500));
    transform: scaleX(var(--tk-settled, 0));
    transform-origin: 0 50%;
    transition: transform 200ms linear;
}

/* ---- 3. The split-flap re-flip -----------------------------------------
   A mode-bearing element holds both readings. The engine never sees this; the
   page's own JS flips it when the scroll reaches it. */

.tk-flip {
    display: inline-grid;
    vertical-align: bottom;
    perspective: 420px;
}

/* Both readings occupy the same cell, so the box never resizes mid-flip and
   nothing around it reflows. */
.tk-flip > .tk-flip__f {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: transform var(--tk-flip-dur) var(--tk-ease-out),
                opacity calc(var(--tk-flip-dur) * 0.6) var(--tk-ease-out),
                visibility 0s linear var(--tk-flip-dur);
}

/* A flip holding block-level content (a whole form) needs to be a block grid,
   not an inline one, or the faces shrink-wrap and misalign. */
.tk-flip--block {
    display: grid;
    width: 100%;
    vertical-align: initial;
}

/* Resting: the reading for the current mode is up, the other is folded away.

   `visibility: hidden` is not decoration here. A folded face is invisible but
   was still KEYBOARD REACHABLE, so tabbing through the hero walked into the
   two CTAs and the search form that are not on screen. Visibility takes it out
   of the tab order; the 0s transition is delayed by the flip duration so the
   face stays paintable while it folds away, then disappears. */
.tk-flip__f[data-tk-off] {
    opacity: 0;
    transform: rotateX(-90deg);
    pointer-events: none;
    visibility: hidden;
}
.tk-flip__f[data-tk-on] {
    opacity: 1;
    transform: rotateX(0deg);
    visibility: visible;
    transition-delay: 0s;
}

/* While a flip is pending the element is dimmed a touch, so a visitor who
   declared a side can see there is more to come further down. */
.tk-flip[data-tk-pending] > .tk-flip__f[data-tk-on] { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
    .tk-flip > .tk-flip__f { transition-duration: 1ms; transform: none !important; }
    .tk-flip[data-tk-pending] > .tk-flip__f[data-tk-on] { opacity: 1; }
    .tk-strip { transition-duration: 1ms; }
}

/* ---- 4. Order swap ------------------------------------------------------
   The two collections are siblings in one column. Declaring a side sets the
   order; the FLIP animation that carries it lives in tk-home.js. */

.tk-board { display: flex; flex-direction: column; }
.tk-board > * { min-width: 0; }
.tk-board[data-tk-lead="talent"] > [data-tk-slot="talent"] { order: 1; }
.tk-board[data-tk-lead="talent"] > [data-tk-slot="jobs"]   { order: 2; }
.tk-board[data-tk-lead="jobs"]   > [data-tk-slot="jobs"]   { order: 1; }
.tk-board[data-tk-lead="talent"] > [data-tk-slot="jobs"],
.tk-board[data-tk-lead="jobs"]   > [data-tk-slot="talent"] { order: 2; }

/* ---- 5. The pinned close ----------------------------------------------
   The stage clips to the viewport, which is right on a screen tall enough to
   hold the whole CTA and wrong on one that is not: the checks under the button
   would simply be cut off. Below 700px of height the stage stops pinning and
   becomes an ordinary block, so the content is always complete. Losing the pin
   on a short screen costs an effect; clipping the CTA would cost the page. */
@media (max-height: 699px), (max-width: 767px) {
    .tk-close[data-sc-stage] {
        position: static;
        height: auto;
        overflow: visible;
        /* The section already carries py-16/py-24. The stage's own 3rem was
           padding on top of padding once it stopped being a viewport-tall box,
           which put another 96px of nothing under the CTA. */
        padding-block: 0;
    }

    /* Releasing the stage is not enough on its own. The engine writes
       `height: <span>vh` INLINE on a pinned act, so the section kept its full
       pinned height with static content inside it: the CTA sat at the top of a
       780px box and the rest was void. That made the short-screen escape above
       only half an escape from the day it shipped. An inline style can only be
       beaten with !important, and the alternative is editing the engine, which
       is the one thing a page may not do. */
    .sc-act--pinned.tk-cta-bg { height: auto !important; }
}

/* Why the phone loses the pin too, not just the short screen.

   A pinned stage is one viewport tall and the closing CTA is 363px of it, so
   the phone got 240px of empty above the heading, 240px below the checks, and
   another 169px of hold after that: two near-empty screens to finish the page.
   The same stage on a desktop viewport reads as a held full-bleed close, which
   is the authored device, so the pin stays there. Touch has no wheel either,
   and a stage that stops responding to a swipe reads as a broken page rather
   than a hold. */

/* The scroll-velocity seasoning that lived here drove the live-totals ticker,
   and went out with it. Nothing else consumed it, and a published property no
   element reads is just a per-frame write. */

/* ---- 7. Brand button ----------------------------------------------------
   The logo green, with navy ink. Same in both themes, because the logo is the
   same in both themes. White on this green measures 1.9:1; navy measures 9.0:1,
   and it is the pairing the brand already uses on the job-card CTA. */
.tk-btn-brand {
    background-color: rgb(var(--tk-btn));
    color: rgb(var(--tk-btn-ink));
}
.tk-btn-brand:hover { background-color: rgb(var(--tk-btn-hover)); }
.tk-btn-brand:focus-visible {
    outline: 2px solid rgb(var(--tk-btn));
    outline-offset: 3px;
}


/* ---- 8. Hero, editorial split -------------------------------------------
   Type carries this, so the ramp matters more than anything else here.
   Tracking tightens as size grows: a display face at this scale with default
   tracking reads loose. The lede takes a real measure rather than the full
   column width. */

.tk-hero {
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

.tk-hero__label {
    margin: 0 0 1.25rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--tk-p-600));
}

.tk-hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--tk-font-display, inherit);
    font-size: clamp(2.6rem, 5.4vw, 4.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: rgb(var(--tk-fg));
    text-wrap: balance;
}

.tk-hero__lede {
    margin: 0 0 1.75rem;
    max-width: 46ch;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.6;
    color: rgb(var(--tk-s-400));
    text-wrap: pretty;
}

.tk-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 15px;
    font-weight: 650;
    color: rgb(var(--tk-fg));
    text-decoration: underline;
    text-decoration-color: rgb(var(--tk-fg) / 0.28);
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 160ms var(--tk-ease-out), gap 160ms var(--tk-ease-out);
}
.tk-hero__link:hover {
    text-decoration-color: rgb(var(--tk-p-600));
    gap: 0.75rem;
}
.tk-hero__link:focus-visible {
    outline: 2px solid rgb(var(--tk-p-500));
    outline-offset: 3px;
    border-radius: 4px;
}

/* Below 700px the display floor is still a desktop floor, so step it down or a
   normal headline wraps to six lines on a phone. */
@media (max-width: 700px) {
    .tk-hero__title { font-size: clamp(2.1rem, 8.5vw, 2.6rem); letter-spacing: -0.02em; }
    .tk-hero__lede  { max-width: none; }
}

/* ---- 9. Search band ------------------------------------------------------
   A utility strip between the hero and the board. One row, hairline top and
   bottom, so it never competes with the hero above it.

   The row spans the SAME 1216px content box as the hero above it and every
   section heading below, left edge on the page's content line. A capped and
   centred group was tried and dropped: it kept the keyword field shorter, but
   made this the only block on the page not sharing the text column, which cost
   more than the long field did.

   The field stays proportionate through the CONTROL scale instead — 44px tall,
   14px text — rather than by shortening the row. */

.tk-searchband {
    /* The BAND is what is constrained, not the row inside it. It used to be a
       full-bleed strip running the whole page width with only its content
       inset — so reducing the content just moved the gap inside a strip that
       was still edge to edge.

       `min()` keeps a gutter at every size: 1088px where there is room, and
       100% minus 2rem below that, so it never touches the screen edge. */
    width: min(1088px, 100% - 2rem);
    margin-inline: auto;
    /* Contained on all four sides now. A bleed strip only needs a rule above and
       below; a block with ends needs an outline, or the background just stops.

       And once it is a block with ends, it is a CARD — so it is built from the
       values every other card on this site uses, rather than from the leftovers
       of the strip it used to be. It was `--tk-elevated` (#F9FBFA) with the heavy
       `--tk-border` hairline and no shadow, which on the page shell read as a
       washed-out panel belonging to nothing; the nav card above it and the step
       cards below are white, hairlined at 7%, and lifted.

         ground    --tk-card        white on light, #0F1E33 on dark
         hairline  --tk-fg / 0.07   the same rule the nav card carries
         lift      --tk-nav-shadow  the layout's shared card shadow, already
                                    theme-aware — near-black on dark, navy on
                                    light, because a black shadow on a light
                                    ground goes grey and muddy
         radius    1rem             identical to the nav card

       It now reads as a member of that family rather than as a strip that
       survived a redesign. */
    border: 1px solid rgb(var(--tk-fg) / 0.09);
    border-radius: 1rem;
    background: rgb(var(--tk-card));
    /* The shared card lift, plus a one-pixel inset highlight along the top edge.
       That second layer is what stops a flat fill reading as a rectangle of
       paint: it is the light catching the lip of a raised surface, and it costs
       nothing because it rides in the same shadow declaration. */
    box-shadow: var(--tk-nav-shadow),
                inset 0 1px 0 rgb(var(--tk-fg) / 0.05);
    /* 0.9rem left a 46px control in a 77px strip — four pixels of air above a
       control that is the single most important thing on the page after the
       headline. It read as squeezed between the hero and the board rather than
       placed between them. */
    padding-block: 1.15rem;
    margin-block: 1.75rem;
}

/* Dark carries its own edge values. The card is #0F1E33 on a #081B2E shell —
   seven points of separation, where light has white on #EDF3F1 and eighteen.
   A 9% hairline that reads cleanly on the light theme all but disappears on the
   dark one, so the border does the work the grounds cannot, and the top lip is
   brightened to match. */
html.dark .tk-searchband {
    border-color: rgb(var(--tk-fg) / 0.15);
    box-shadow: var(--tk-nav-shadow),
                inset 0 1px 0 rgb(var(--tk-fg) / 0.09);
}

.tk-searchband__row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.tk-searchband__label {
    flex: none;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--tk-fg) / 0.55);
}

.tk-searchband__form {
    display: flex;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
}


/* ---- Field: an input with room for a leading icon -----------------------
   The icon lives in the field, and the input is padded to clear it. Padding
   the input without reserving the space is how a leading icon ends up sitting
   on top of the caret. */
.tk-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.tk-field--select { flex: 0 0 13rem; }

.tk-field__icon,
.tk-field__chev {
    position: absolute;
    top: 50%;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    color: rgb(var(--tk-muted));
    pointer-events: none;
    z-index: 1;
}
/* The icon steps back instead. It was `--tk-muted`, the exact colour of the
   placeholder beside it, so the chrome and the hint carried identical weight.
   The glyph is decorative — the placeholder already says what the field is for
   — so it is free to sit below the text floor; the placeholder is not. */
.tk-field__icon { left: 16px; color: rgb(var(--tk-fg) / 0.38); }
.tk-field__chev { right: 15px; width: 15px; height: 15px; margin-top: -7.5px; }

.tk-field__input {
    width: 100%;
    height: 44px;
    padding: 0 1.1rem 0 2.75rem;
    /* `--tk-border` is the CARD hairline: 1.5:1 on white, which is fine for a
       card edge and not for a control. WCAG 1.4.11 asks 3:1 of anything that
       identifies an input, and app.css already defines `--tk-control-border`
       (#7C8C99, the lightest value clearing 3:1 on all three light grounds) for
       exactly this — it was applied to .form-input and friends and never reached
       the hero's fields, which are the first controls anyone meets. */
    border: 1px solid var(--tk-control-border, rgb(var(--tk-border)));
    border-radius: 10px;
    background: rgb(var(--tk-card));
    color: rgb(var(--tk-fg));
    font-size: 14px;
    line-height: 1;
    transition: border-color 160ms var(--tk-ease-out), box-shadow 160ms var(--tk-ease-out);
}

/* The select shipped the OS chevron, which is the one control on the page that
   looked unstyled. Suppress it and draw our own in the theme ink. */
.tk-field__select {
    padding-left: 1.15rem;
    padding-right: 2.4rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html.dark .tk-field__input { border-color: rgb(var(--tk-border)); }

/* Stays `--tk-muted`, and deliberately. A lighter hint LOOKS better next to a
   filled field, but app.css sets every control's placeholder to this token
   because placeholders are text and answer to the 4.5:1 body floor — the token
   is 5.06:1 on white and 4.72:1 on the page ground. The light theme's rule
   there is `html.light`-scoped, so a lighter value here would have slipped past
   it and broken the dark theme only. */
.tk-field__input::placeholder { color: rgb(var(--tk-muted)); opacity: 1; }

.tk-field__input:hover { border-color: rgb(var(--tk-p-500) / 0.45); }
.tk-field__input:focus {
    outline: none;
    border-color: rgb(var(--tk-p-500));
    box-shadow: 0 0 0 4px rgb(var(--tk-p-500) / 0.14);
}
.tk-field:focus-within .tk-field__icon { color: rgb(var(--tk-p-600)); }

/* ---- Listbox: the search band's styled select (x-tk-listbox) ------------
   The trigger reuses .tk-field__input so it sits flush with the text field;
   only the open list is new. It floats as its own card one step above the
   band, with a tinted hover row and a tick on the current choice. */
.tk-lb__btn {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}
.tk-lb__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-lb__btn[aria-expanded="true"] {
    border-color: rgb(var(--tk-p-500));
    box-shadow: 0 0 0 4px rgb(var(--tk-p-500) / 0.14);
}
.tk-lb__chev { transition: transform 200ms var(--tk-ease-out), color 160ms var(--tk-ease-out); }
.tk-lb__chev.is-open { transform: rotate(180deg); color: rgb(var(--tk-p-600)); }

/* The flip face's transform makes the form its own stacking layer, so the
   sections after the band paint over an open list. Lift the band while one is
   open — below the sticky nav (50) and the mode strip (45). */
.tk-searchband:has(.tk-lb__btn[aria-expanded="true"]) {
    position: relative;
    z-index: 30;
}

.tk-lb__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
    background: rgb(var(--tk-card));
    border: 1px solid rgb(var(--tk-border));
    border-radius: 18px;
    box-shadow: 0 20px 44px -16px rgb(10 22 40 / 0.28),
                0 2px 6px rgb(10 22 40 / 0.06);
    transform-origin: top center;
    outline: none;
}
html.dark .tk-lb__panel {
    background: rgb(var(--tk-elevated));
    box-shadow: 0 20px 44px -16px rgb(0 0 0 / 0.65),
                0 0 0 1px rgb(var(--tk-p-500) / 0.06);
}

.tk-lb__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.8rem;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    color: rgb(var(--tk-fg) / 0.82);
    cursor: pointer;
    transition: background-color 120ms var(--tk-ease-out), color 120ms var(--tk-ease-out);
}
.tk-lb__opt + .tk-lb__opt { margin-top: 2px; }
.tk-lb__opt.is-active {
    background: rgb(var(--tk-p-500) / 0.1);
    color: rgb(var(--tk-fg));
}
.tk-lb__opt.is-selected {
    font-weight: 600;
    color: rgb(var(--tk-p-600));
}
html.dark .tk-lb__opt.is-selected { color: rgb(var(--tk-p-500)); }

.tk-lb__tick {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 140ms var(--tk-ease-out), transform 140ms var(--tk-ease-out);
}
.tk-lb__opt.is-selected .tk-lb__tick { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .tk-lb__chev, .tk-lb__opt, .tk-lb__tick { transition: none; }
}

/* The page's primary action, and it has to look like the OTHER primary action.
   This was `--tk-btn` (mint #1DD9A5, navy ink) in both themes while the nav's
   Post a Job is `--tk-p-500` with theme-aware ink — two different primary
   buttons a hundred pixels apart, which is the kind of thing that reads as
   unfinished rather than as a choice. Same ground and same ink rule as the nav
   now: deep green on white in light, mint on navy in dark, both well past 4.5:1. */
.tk-searchband__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 1.5rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    gap: 0.5rem;
    cursor: pointer;
    /* The sitewide primary: mint with navy ink, colour-only hover. The mint
       carries enough weight against the outlined fields without a glow. */
    background: rgb(var(--tk-btn));
    color: rgb(var(--tk-btn-ink));
    transition: background-color 160ms var(--tk-ease-out);
}
.tk-searchband__go svg { width: 16px; height: 16px; flex: none; }
.tk-searchband__go:hover { background: rgb(var(--tk-btn-hover)); }
.tk-searchband__go:focus-visible {
    outline: 2px solid rgb(var(--tk-p-500));
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .tk-searchband__label { display: none; }
}

@media (max-width: 767px) {
    .tk-searchband__form { flex-wrap: wrap; }
    .tk-field { flex: 1 1 100%; }
    .tk-field--select { flex: 1 1 100%; }
    .tk-searchband__go { flex: 1 1 100%; }
}

/* ---- Talent card (home "Top Vetted Filipino Talent") --------------------
   Avatar, then name with its verified mark, role, skill chips, a quiet
   meta line, and a primary + ghost action pair pinned to the bottom so cards
   in a row line up whatever their content. */
.tk-tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.125rem;
    border-radius: 20px;
    background: rgb(var(--tk-card));
    border: 1px solid rgb(var(--tk-border));
    box-shadow: 0 1px 2px rgb(10 22 40 / 0.04), 0 8px 24px -16px rgb(10 22 40 / 0.18);
    transition: transform 220ms var(--tk-ease-out), box-shadow 220ms var(--tk-ease-out), border-color 220ms var(--tk-ease-out);
}
.tk-tcard:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--tk-p-500) / 0.35);
    box-shadow: 0 1px 2px rgb(10 22 40 / 0.04), 0 18px 36px -18px rgb(10 22 40 / 0.28);
}
html.dark .tk-tcard { box-shadow: 0 10px 28px -18px rgb(0 0 0 / 0.6); }
html.dark .tk-tcard:hover { box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.75); }

.tk-tcard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tk-tcard__avatar {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(var(--tk-p-500) / 0.14);
    box-shadow: 0 0 0 1px rgb(var(--tk-border));
}
.tk-tcard__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: rgb(var(--tk-p-600));
}
html.dark .tk-tcard__initials { color: rgb(var(--tk-p-500)); }
.tk-tcard__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tk-tcard__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: rgb(var(--tk-fg));
}
.tk-tcard__name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The /find-talent card's mark (.ft-card__verified): the outline shield in
   brand teal beside the name — Teal Dark on light, Teal on dark. */
.tk-tcard__verified { display: inline-flex; flex: none; color: rgb(var(--tk-p-600)); }
html.dark .tk-tcard__verified { color: rgb(var(--tk-p-500)); }
.tk-tcard__verified svg { width: 1.05rem; height: 1.05rem; }
.tk-tcard__title {
    margin-top: 0.15rem;
    font-size: 14px;
    font-weight: 500;
    color: rgb(var(--tk-fg) / 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-tcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    /* Two rows at most. The welcome page script hides skills that spill and
       counts them into "+N"; this cap only matters if that script never ran. */
    max-height: calc(2 * 24px + 0.4rem);   /* 18px line + 4px padding + 2px edge */
    overflow: hidden;
}
.tk-tcard__chip[hidden] { display: none; }
.tk-tcard__chip {
    /* Block, not flex: text-overflow only ellipsises on a block box. */
    display: block;
    max-width: 14rem;
    padding: 2px 8px;
    border-radius: 6px;
    /* The Find Talent grid's tag (.ft-tag), so a skill reads the same on the
       home page as in the directory: a quiet inset ground, a hairline edge
       and slate ink. Skills are information, so no brand colour. */
    background: #EFF4F2;
    border: 1px solid #D7E2DE;
    color: #4E6377;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .tk-tcard__chip {
    background: #1B3050;
    border-color: #2A3D59;
    color: #94A9BF;
}
.tk-tcard__chip--more,
html.dark .tk-tcard__chip--more { background: transparent; }

.tk-tcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.9rem;
    font-size: 13px;
    color: rgb(var(--tk-fg) / 0.65);
}
.tk-tcard__meta > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tk-tcard__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--tk-p-500));
}

.tk-tcard__actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
}
.tk-tcard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 160ms var(--tk-ease-out), border-color 160ms var(--tk-ease-out),
                color 160ms var(--tk-ease-out), box-shadow 160ms var(--tk-ease-out);
}
.tk-tcard__btn--primary { background: rgb(var(--tk-btn)); color: rgb(var(--tk-btn-ink)); }
.tk-tcard__btn--primary:hover { background: rgb(var(--tk-btn-hover)); }
.tk-tcard__btn--ghost {
    color: rgb(var(--tk-fg));
    border: 1px solid rgb(var(--tk-fg) / 0.22);
}
.tk-tcard__btn--ghost:hover {
    background: rgb(var(--tk-fg) / 0.05);
    border-color: rgb(var(--tk-fg) / 0.35);
}
.tk-tcard__btn:focus-visible {
    outline: 2px solid rgb(var(--tk-p-500));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tk-tcard, .tk-tcard:hover { transition: none; transform: none; }
}