/* ==========================================================================
   Work pages (/work/ and /work/<project>/). Builds on services-premium.css:
   dark header with a moving project reel, auto-playing featured carousel,
   filterable project grid, case study pages with gallery and lightbox.
   ========================================================================== */
:root {
    --wk-edge: max(1.5rem, calc((100vw - 1320px) / 2 + 1.5rem)); /* left edge of .container content */
    --wk-r: 26px;
}

/* Accent colours (Admin → case study → Accent colour) */
.wk-acc-violet { --acc: #8B5CF6; --acc2: #EC4899; }
.wk-acc-blue { --acc: #2D5BFF; --acc2: #4CC6FF; }
.wk-acc-pink { --acc: #EC4899; --acc2: #F97316; }
.wk-acc-orange { --acc: #FB923C; --acc2: #F43F5E; }
.wk-acc-teal { --acc: #14B8A6; --acc2: #38BDF8; }
.wk-acc-green { --acc: #22C55E; --acc2: #14B8A6; }

/* ---------- shared bits ---------- */
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7C3AED; }
.wk-meta span + span { display: inline-flex; align-items: center; gap: .9rem; color: #94A3B8; }
.wk-meta span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.sv-dark .wk-meta { color: #C4B5FD; }
.sv-dark .wk-meta span + span { color: rgba(226, 232, 255, .6); }
.wk-chips, .wk-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.wk-chips li, .wk-tags li { padding: .32rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #475569; background: #F1F0FA; border: 1px solid rgba(124, 58, 237, .08); }
.wk-badge { position: absolute; top: 1rem; left: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(11, 16, 35, .55); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--acc, #8B5CF6), var(--acc2, #EC4899)); }
.wk-badge-inline { position: static; letter-spacing: .12em; }

.wk-ctrl { display: flex; align-items: center; gap: .6rem; }
.wk-count { margin-right: .6rem; font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: #94A3B8; font-variant-numeric: tabular-nums; }
.wk-count strong { color: var(--sv-ink); }
.wk-arrow { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .14); background: #fff; color: var(--sv-ink); cursor: pointer; transition: background .3s, color .3s, transform .35s var(--sv-ease), border-color .3s; }
.wk-arrow:hover { background: var(--sv-ink); color: #fff; border-color: var(--sv-ink); transform: translateY(-2px); }
.wk-arrow:focus-visible, .wk-dot:focus-visible, .wk-filter:focus-visible, .wk-gal-open:focus-visible { outline: 3px solid #A78BFA; outline-offset: 3px; }
.wk-arrow[disabled] { opacity: .35; pointer-events: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.wk-hero { padding: calc(var(--sv-nav) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(3rem, 6vw, 4.5rem); }
.wk-hero-in { max-width: 980px; }
.wk-title { font-size: clamp(2.7rem, 6.4vw, 5.4rem); }
.wk-lead { max-width: 640px; }
.wk-stats { display: flex; flex-wrap: wrap; gap: 1.2rem clamp(2rem, 5vw, 3.6rem); margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; padding: 1.6rem 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.wk-stats li { display: flex; flex-direction: column; gap: .2rem; }
.wk-stats strong { font-family: var(--font-heading); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-stats span { font-size: .88rem; font-weight: 600; color: rgba(226, 232, 255, .65); }

/* Moving reel of project covers */
.wk-reel { position: relative; z-index: 2; margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wk-reel-row { overflow: hidden; }
.wk-reel-track { display: flex; width: max-content; animation: wkReel 70s linear infinite; }
.wk-reel-row.is-rev .wk-reel-track { animation-direction: reverse; animation-duration: 85s; }
.wk-reel:hover .wk-reel-track { animation-play-state: paused; }
@keyframes wkReel { to { transform: translateX(-50%); } }
.wk-reel-tile { position: relative; flex: 0 0 auto; width: clamp(220px, 23vw, 340px); aspect-ratio: 4 / 3; margin: 0 1rem 0 0; border-radius: 20px; overflow: hidden; background: #1A1438; border: 1px solid rgba(255, 255, 255, .1); }
.wk-reel-row.is-rev .wk-reel-tile { width: clamp(180px, 18vw, 270px); aspect-ratio: 16 / 10; }
.wk-reel-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .4s, transform .8s var(--sv-ease); }
.wk-reel-tile:hover img { opacity: 1; transform: scale(1.05); }
.wk-reel-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 5, 26, .85)); }
.wk-reel-tile figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; font-family: var(--font-heading); font-size: .95rem; font-weight: 700; line-height: 1.25; color: #fff; }
.wk-reel-tile figcaption small { display: block; margin-bottom: .2rem; font-family: var(--font-body, inherit); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc2, #F9A8D4); }

/* ==========================================================================
   Featured carousel
   ========================================================================== */
.wk-show { padding: clamp(4rem, 8vw, 6.5rem) 0; background: #F7F6FC; overflow: hidden; }
.wk-show-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem 2rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.wk-show-viewport { position: relative; overflow: hidden; border-radius: calc(var(--wk-r) + 6px); }
.wk-show-track { display: flex; transition: transform .9s var(--sv-ease); touch-action: pan-y; }
.wk-show-track.is-dragging { transition: none; cursor: grabbing; }
.wk-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: clamp(460px, 44vw, 580px); background: #fff; border: 1px solid var(--sv-line); border-radius: calc(var(--wk-r) + 6px); overflow: hidden; user-select: none; }
.wk-slide-media { position: relative; display: block; overflow: hidden; background: #E9E5F7; }
.wk-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s ease-out; pointer-events: none; }
.wk-slide.is-active .wk-slide-media img { transform: scale(1); }
.wk-slide-shade { position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--acc, #8B5CF6) 28%, transparent), transparent 55%); mix-blend-mode: multiply; }
.wk-slide-body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: clamp(2rem, 4.2vw, 3.6rem); }
.wk-slide-body::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--acc), var(--acc2)); }
.wk-slide-body h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; }
.wk-slide-body h3 a { color: var(--sv-ink); text-decoration: none; }
.wk-slide-text { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--sv-text); }
.wk-slide-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: .4rem 0; padding: 1.1rem 0; list-style: none; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); }
.wk-slide-facts strong { display: block; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.15; letter-spacing: -.02em; background: linear-gradient(110deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-slide-facts span { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.35; color: #64748B; }
.wk-slide-link { margin-top: .4rem; }
/* Slide-in of the text when a slide becomes active */
.sv-js .wk-slide .wk-slide-body > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--sv-ease), transform .8s var(--sv-ease); }
.sv-js .wk-slide.is-active .wk-slide-body > * { opacity: 1; transform: none; }
.sv-js .wk-slide.is-active .wk-slide-body > *:nth-child(2) { transition-delay: .08s; }
.sv-js .wk-slide.is-active .wk-slide-body > *:nth-child(3) { transition-delay: .16s; }
.sv-js .wk-slide.is-active .wk-slide-body > *:nth-child(4) { transition-delay: .24s; }
.sv-js .wk-slide.is-active .wk-slide-body > *:nth-child(5) { transition-delay: .32s; }
.sv-js .wk-slide.is-active .wk-slide-body > *:nth-child(6) { transition-delay: .4s; }

.wk-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.6rem; }
.wk-dot { position: relative; width: 44px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-dot::before, .wk-dot span { content: ''; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.wk-dot::before { right: 0; background: #DDD8EE; }
.wk-dot span { width: 0; background: linear-gradient(90deg, #8B5CF6, #EC4899); }
.wk-dot.is-active span { width: 100%; }
.wk-dot.is-active.is-timed span { width: 0; animation: wkFill var(--wk-dur, 6s) linear forwards; }
[data-wk-carousel].is-paused .wk-dot.is-timed span { animation-play-state: paused; }
@keyframes wkFill { to { width: 100%; } }

/* ==========================================================================
   Project grid + filters
   ========================================================================== */
.wk-grid-head { align-items: flex-end; }
.wk-select { position: relative; display: inline-flex; align-items: center; }
.wk-select > i:first-of-type { position: absolute; left: 1.05rem; color: #7C3AED; font-size: .85rem; pointer-events: none; }
.wk-select select { appearance: none; -webkit-appearance: none; min-width: 230px; padding: .85rem 2.6rem .85rem 2.6rem; border: 1px solid rgba(15, 23, 42, .12); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; font-size: .92rem; color: var(--sv-ink); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.wk-select select:hover, .wk-select select:focus { border-color: #A78BFA; box-shadow: 0 0 0 4px rgba(167, 139, 250, .18); outline: none; }
.wk-select-caret { position: absolute; right: 1.1rem; font-size: .7rem; color: #94A3B8; pointer-events: none; }
.wk-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.wk-filter { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .1); background: #fff; font-weight: 700; font-size: .92rem; color: #334155; text-decoration: none; transition: color .3s, background .3s, border-color .3s, transform .3s var(--sv-ease), box-shadow .3s; }
.wk-filter:hover { color: #6D28D9; border-color: #C4B5FD; transform: translateY(-1px); }
.wk-filter span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .4rem; border-radius: 999px; font-size: .74rem; background: #F1F0FA; color: #6D28D9; }
.wk-filter.is-active { color: #fff; border-color: transparent; background: linear-gradient(110deg, #7C3AED, #DB2777); box-shadow: 0 14px 30px -16px rgba(124, 58, 237, .8); }
.wk-filter.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }

.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1000px) { .wk-grid .wk-card.is-shift { margin-top: clamp(3rem, 7vw, 6rem); margin-bottom: calc(-1 * clamp(3rem, 7vw, 6rem)); } .wk-grid { padding-bottom: clamp(3rem, 7vw, 6rem); } .wk-grid.is-single { padding-bottom: 0; } }

.wk-card { position: relative; transition: opacity .45s var(--sv-ease), transform .55s var(--sv-ease); }
.wk-card.is-out { opacity: 0; transform: translateY(14px) scale(.97); }
.wk-card-link { display: block; color: inherit; text-decoration: none; }
.wk-card-media { position: relative; aspect-ratio: 16 / 11; border-radius: var(--wk-r); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 25%, #fff), color-mix(in srgb, var(--acc2) 25%, #fff)); isolation: isolate; box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .45); }
.wk-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sv-ease), filter .6s; }
.wk-card-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 120%), color-mix(in srgb, var(--acc) 38%, transparent), transparent 60%); opacity: 0; transition: opacity .5s; }
.wk-card-media::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); pointer-events: none; }
.wk-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-size: 5rem; font-weight: 800; color: rgba(255, 255, 255, .85); }
.wk-card-go { position: absolute; right: 1rem; top: 1rem; z-index: 3; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--sv-ink); transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform .5s var(--sv-ease), opacity .35s; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); }
.wk-card-link:hover .wk-card-media img, .wk-card-link:focus-visible .wk-card-media img { transform: scale(1.06); }
.wk-card-link:hover .wk-card-media::after { opacity: 1; }
.wk-card-link:hover .wk-card-go, .wk-card-link:focus-visible .wk-card-go { opacity: 1; transform: scale(1) rotate(-45deg); }
.wk-card-link:focus-visible { outline: none; }
.wk-card-link:focus-visible .wk-card-media { outline: 3px solid #A78BFA; outline-offset: 4px; }
.wk-card-body { display: grid; gap: .55rem; padding: 1.35rem .25rem 0; }
.wk-card-body h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.15; letter-spacing: -.025em; color: var(--sv-ink); transition: color .3s; }
.wk-card-link:hover h3 { color: #6D28D9; }
.wk-card-text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sv-text); }
.wk-card-body .wk-chips { margin-top: .35rem; }

.wk-none, .wk-empty { max-width: 560px; margin: 1rem auto 0; padding: 3rem 1.5rem; text-align: center; }
.wk-none > i { font-size: 1.6rem; color: #C4B5FD; }
.wk-none h3, .wk-empty h2 { margin: .8rem 0 .5rem; font-size: 1.4rem; color: var(--sv-ink); }
.wk-none p, .wk-empty p { margin: 0 0 1.4rem; color: var(--sv-text); line-height: 1.6; }
.wk-reset { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #6D28D9; text-decoration: underline; cursor: pointer; }
.wk-empty-mark { width: 64px; height: 64px; opacity: .9; }
.wk-tech { margin-top: 0; }

/* ==========================================================================
   Case study page
   ========================================================================== */
.wk-dhero { padding: calc(var(--sv-nav) + clamp(2.6rem, 6vw, 4.5rem)) 0 clamp(8rem, 15vw, 12rem); }
.wk-dhero .sv-glow { background: radial-gradient(55% 60% at 8% 0%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 70%), radial-gradient(50% 55% at 100% 100%, color-mix(in srgb, var(--acc2) 30%, transparent), transparent 70%); }
.wk-meta-lg { margin-top: .4rem; font-size: .78rem; }
.wk-dtitle { max-width: 960px; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.wk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.2rem 2rem; max-width: 980px; margin: clamp(2rem, 4vw, 2.8rem) 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.wk-facts dt { margin-bottom: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(226, 232, 255, .5); }
.wk-facts dd { margin: 0; font-weight: 700; line-height: 1.4; color: #fff; }

.wk-cover-wrap { position: relative; z-index: 3; margin-top: calc(-1 * clamp(5.5rem, 11vw, 8.5rem)); }
.wk-cover { position: relative; margin: 0; aspect-ratio: 16 / 8; border-radius: calc(var(--wk-r) + 6px); overflow: hidden; background: #E9E5F7; box-shadow: 0 50px 100px -50px rgba(15, 23, 42, .6); }
.wk-cover img { width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--wk-py, 0)); will-change: transform; }
.wk-cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 18%, transparent), transparent 45%); }

.wk-story-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.wk-outcome { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); font-family: var(--font-heading); font-size: clamp(1.55rem, 2.7vw, 2.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--sv-ink); }
.wk-block + .wk-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.wk-prose { margin-top: 1rem; font-size: 1.08rem; line-height: 1.8; color: var(--sv-text); }
.wk-prose p { margin: 0 0 1rem; }
.wk-steps { position: relative; display: grid; gap: 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.wk-steps::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #C4B5FD, rgba(196, 181, 253, 0)); }
.wk-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.wk-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-family: var(--font-heading); font-weight: 800; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 14px 30px -14px rgba(124, 58, 237, .8); }
.wk-steps h3 { margin: .35rem 0 .35rem; font-size: 1.2rem; letter-spacing: -.015em; color: var(--sv-ink); }
.wk-steps p { margin: 0; line-height: 1.65; color: var(--sv-text); }

.wk-side { position: sticky; top: calc(var(--sv-nav) + 1.5rem); }
.wk-side-card { position: relative; padding: clamp(1.6rem, 3vw, 2.1rem); border-radius: var(--wk-r); background: #fff; border: 1px solid var(--sv-line); box-shadow: 0 40px 80px -50px rgba(15, 23, 42, .4); overflow: hidden; }
.wk-side-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.wk-side-title { margin: 0 0 .9rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.wk-side-title:not(:first-child) { margin-top: 1.6rem; }
.wk-side-facts { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.wk-side-facts li { display: flex; align-items: baseline; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--sv-line); }
.wk-side-facts li:last-child { border-bottom: 0; }
.wk-side-facts strong { flex: 0 0 auto; min-width: 4.5rem; font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: -.02em; background: linear-gradient(110deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-side-facts span { color: var(--sv-text); line-height: 1.45; }
.wk-side-btn { display: flex; justify-content: center; width: 100%; margin-top: .6rem; }
.wk-side-cta { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--sv-line); }
.wk-side-cta strong { display: block; margin-bottom: .3rem; color: var(--sv-ink); }

/* Horizontal scrollers (gallery, more projects) */
.wk-scroller { display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wk-edge); padding: .5rem var(--wk-edge) 1.5rem; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.wk-scroller::-webkit-scrollbar { display: none; }
.wk-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }
.wk-gal-item { width: clamp(280px, 60vw, 820px); margin: 0; }
.wk-gal-open { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: var(--wk-r); overflow: hidden; background: #E9E5F7; cursor: zoom-in; }
.wk-gal-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sv-ease); }
.wk-gal-open:hover img { transform: scale(1.04); }
.wk-gal-zoom { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--sv-ink); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--sv-ease); }
.wk-gal-open:hover .wk-gal-zoom, .wk-gal-open:focus-visible .wk-gal-zoom { opacity: 1; transform: none; }
.wk-gal-item figcaption { margin-top: .8rem; font-weight: 600; color: #64748B; }
.wk-more-track .wk-card { width: clamp(280px, 31vw, 430px); }

.wk-quote { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.6rem); border-radius: calc(var(--wk-r) + 6px); text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 10%, #fff), color-mix(in srgb, var(--acc2) 10%, #fff)); border: 1px solid var(--sv-line); }
.wk-quote > i { font-size: 1.8rem; color: var(--acc); }
.wk-quote blockquote { margin: 1rem 0 1.4rem; font-family: var(--font-heading); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: var(--sv-ink); }
.wk-quote figcaption strong { display: block; color: var(--sv-ink); }
.wk-quote figcaption span { color: #64748B; }

.wk-next-sec { padding-top: clamp(1rem, 3vw, 2rem); }
.wk-next { position: relative; display: flex; align-items: flex-end; min-height: clamp(260px, 30vw, 380px); padding: clamp(1.6rem, 4vw, 3rem); border-radius: calc(var(--wk-r) + 6px); overflow: hidden; color: #fff; text-decoration: none; background: var(--sv-night); isolation: isolate; }
.wk-next img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.wk-next-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 5, 26, .9), rgba(7, 5, 26, .35) 70%), linear-gradient(0deg, color-mix(in srgb, var(--acc) 35%, transparent), transparent 60%); }
.wk-next:hover img { transform: scale(1.06); }
.wk-next-body { display: grid; gap: .4rem; }
.wk-next-body small { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(226, 232, 255, .7); }
.wk-next-body strong { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; }
.wk-next-body em { font-style: normal; color: rgba(226, 232, 255, .75); font-weight: 600; }
.wk-next-go { position: absolute; right: clamp(1.4rem, 3vw, 2.4rem); bottom: clamp(1.4rem, 3vw, 2.4rem); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--sv-ink); font-size: 1.2rem; transition: transform .5s var(--sv-ease); }
.wk-next:hover .wk-next-go { transform: translateX(6px) rotate(-45deg); }

/* Lightbox */
.wk-lb { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 4.5rem 1.2rem 2rem; background: rgba(5, 4, 20, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: wkFade .3s ease; }
.wk-lb[hidden] { display: none; }
@keyframes wkFade { from { opacity: 0; } }
.wk-lb-fig { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.wk-lb-fig img { max-width: 100%; max-height: 78vh; border-radius: 16px; object-fit: contain; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.wk-lb-fig figcaption { color: rgba(226, 232, 255, .8); font-weight: 600; text-align: center; }
.wk-lb-nav, .wk-lb-x { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .3s; }
.wk-lb-nav:hover, .wk-lb-x:hover { background: rgba(255, 255, 255, .2); }
.wk-lb-x { position: absolute; top: 1.1rem; right: 1.1rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .wk-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wk-slide-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-slide-facts li:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
    .wk-slide { grid-template-columns: 1fr; min-height: 0; }
    .wk-slide-media { aspect-ratio: 16 / 10; }
    .wk-slide-body::before { left: clamp(2rem, 4.2vw, 3.6rem); right: auto; top: 0; bottom: auto; width: 60px; height: 3px; }
    .wk-story-grid { grid-template-columns: 1fr; }
    .wk-side { position: static; }
    .wk-cover { aspect-ratio: 16 / 10; }
    .wk-cover img { height: 100%; transform: none; }
}
@media (max-width: 700px) {
    .wk-grid { grid-template-columns: 1fr; }
    .wk-show-head .wk-ctrl .wk-arrow { width: 44px; height: 44px; }
    .wk-show-head { align-items: center; }
    .wk-grid-head { align-items: stretch; }
    .wk-select, .wk-select select { width: 100%; }
    .wk-filters { flex-wrap: nowrap; overflow-x: auto; margin: -.6rem -1.5rem calc(clamp(2rem, 4vw, 3rem) - 1.6rem); padding: .6rem 1.5rem 1.6rem; scrollbar-width: none; }
    .wk-filters::-webkit-scrollbar { display: none; }
    .wk-filter { flex: 0 0 auto; }
    .wk-stats { gap: 1.2rem 2rem; }
    .wk-stats li { flex: 1 1 40%; }
    .wk-reel-tile { width: 200px; }
    .wk-reel-row.is-rev .wk-reel-tile { width: 170px; }
    .wk-reel-row.is-rev .wk-reel-tile figcaption small { display: none; }
    .wk-reel-tile figcaption { font-size: .85rem; }
    .wk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
    .wk-steps li { grid-template-columns: 46px minmax(0, 1fr); gap: 1rem; }
    .wk-step-n { width: 46px; height: 46px; border-radius: 14px; }
    .wk-steps::before { left: 22px; }
    .wk-gal-item { width: 84vw; }
    .wk-more-track .wk-card { width: 82vw; }
    .wk-next-go { width: 52px; height: 52px; }
    .wk-next-body { padding-right: 4rem; }
    .wk-lb { grid-template-columns: 1fr; padding: 4.5rem .8rem 5.5rem; }
    .wk-lb-nav { position: absolute; bottom: 1.2rem; }
    .wk-lb-nav.is-prev { left: calc(50% - 64px); }
    .wk-lb-nav.is-next { right: calc(50% - 64px); }
}
@media (hover: none) {
    .wk-card-go { opacity: 1; transform: scale(.85) rotate(-45deg); }
    .wk-gal-zoom { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wk-reel-track { animation: none; }
    .wk-show-track, .wk-slide-media img, .wk-card, .wk-card-media img { transition: none !important; }
    .wk-dot.is-active.is-timed span { animation: none; width: 100%; }
}

/* ==========================================================================
   Light header (Work page): white with soft brand glows and a dot grid
   ========================================================================== */
.wk-hero-light { position: relative; isolation: isolate; overflow: hidden; color: var(--sv-ink); background: #FBFAFF; }
.wk-hero-light .container { position: relative; z-index: 2; }
.wk-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
    radial-gradient(45% 55% at 0% 0%, rgba(139, 92, 246, .16), transparent 70%),
    radial-gradient(40% 50% at 100% 10%, rgba(76, 198, 255, .2), transparent 70%),
    radial-gradient(45% 45% at 70% 100%, rgba(236, 72, 153, .12), transparent 70%),
    radial-gradient(35% 40% at 15% 95%, rgba(251, 146, 60, .1), transparent 70%); }
.wk-hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(91, 33, 182, .14) 1.2px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000, transparent 85%); mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000, transparent 85%); }
.wk-hero-light .sv-crumbs { color: #64748B; }
.wk-hero-light .sv-crumbs a { color: #64748B; }
.wk-hero-light .sv-crumbs a:hover { color: #6D28D9; }
.wk-hero-light .sv-crumbs [aria-current] { color: var(--sv-ink); }
.wk-hero-light .sv-kick { color: #6D28D9; }
.wk-hero-light .sv-title { color: var(--sv-ink); }
.wk-hero-light .sv-lead { color: #475569; }
.wk-hero-light .sv-btn-light { color: #fff; background: var(--sv-ink); border-color: var(--sv-ink); }
.wk-hero-light .sv-btn-light:hover { color: #fff; box-shadow: 0 18px 40px -16px rgba(91, 33, 182, .55); }
.wk-hero-light .sv-btn-glass { color: var(--sv-ink); background: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 23, 42, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wk-hero-light .sv-btn-glass:hover { color: #6D28D9; background: #fff; border-color: #C4B5FD; }
.wk-hero-light .wk-stats { border-top-color: rgba(15, 23, 42, .1); }
.wk-hero-light .wk-stats span { color: #64748B; }
.wk-hero-light .wk-reel-tile { background: #EDE9FE; border-color: rgba(255, 255, 255, .9); box-shadow: 0 24px 50px -30px rgba(76, 29, 149, .45); }
.wk-hero-light .wk-reel-tile img { opacity: .95; }
.wk-hero-light .wk-reel { padding-bottom: .5rem; }

/* Project cover: a framed picture, not a full-screen one (library photos are ~1600 px wide) */
.wk-cover { max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; max-height: min(460px, 52vh); }
.wk-cover-wrap { margin-top: calc(-1 * clamp(4.5rem, 9vw, 7rem)); }
.wk-dhero { padding-bottom: clamp(6.5rem, 12vw, 9.5rem); }
@media (max-width: 900px) { .wk-cover { aspect-ratio: 16 / 10; max-height: none; } }
/* Light project header */
.wk-hero-light .wk-meta { color: #7C3AED; }
.wk-hero-light .wk-meta span + span { color: #94A3B8; }
.wk-hero-light .wk-badge-inline { color: #fff; background: var(--sv-ink); border-color: transparent; }
.wk-hero-light .wk-facts { border-top-color: rgba(15, 23, 42, .1); }
.wk-hero-light .wk-facts dt { color: #94A3B8; }
.wk-hero-light .wk-facts dd { color: var(--sv-ink); }
.wk-dhero.wk-hero-light .wk-hero-bg { background: radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%), radial-gradient(40% 55% at 100% 20%, color-mix(in srgb, var(--acc2) 16%, transparent), transparent 70%); }

/* ==========================================================================
   Featured carousel v2: centred card, neighbours peeking at the sides
   ========================================================================== */
.wk-show-viewport { overflow: visible; border-radius: 0; }
.wk-show-track { gap: clamp(1rem, 2.4vw, 1.75rem); transition: transform .8s var(--sv-ease); will-change: transform; }
.wk-slide { flex: 0 0 min(1040px, 86vw); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 0; height: clamp(360px, 32vw, 440px); box-shadow: 0 40px 80px -55px rgba(30, 16, 80, .55); transition: opacity .6s var(--sv-ease), transform .7s var(--sv-ease), box-shadow .6s; cursor: grab; }
.wk-slide:not(.is-active) { opacity: .38; transform: scale(.93); box-shadow: none; cursor: pointer; }
.wk-slide.is-near:hover { opacity: .6; }
.wk-slide-media { height: 100%; }
.wk-slide-body { gap: .85rem; padding: clamp(1.6rem, 3.2vw, 2.6rem); overflow: hidden; }
.wk-slide-body h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.wk-slide-text { font-size: .98rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wk-slide-facts { padding: .8rem 0; margin: .2rem 0; }
.wk-slide-facts span { font-size: .76rem; }
.wk-play i { font-size: .8rem; }
.wk-show .wk-dots { margin-top: 1.8rem; }
@media (max-width: 1100px) { .wk-slide { height: clamp(340px, 40vw, 420px); } }
@media (max-width: 900px) {
    .wk-slide { flex-basis: 88vw; height: auto; grid-template-columns: 1fr; }
    .wk-slide-media { height: auto; aspect-ratio: 16 / 10; }
    .wk-slide-media img { position: absolute; }
    .wk-slide .wk-chips { display: none; }
}

/* Project grid v2: three columns with smaller pictures, the middle column offset */
.wk-card-media { aspect-ratio: 4 / 3; }
.wk-card-body h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.wk-card-text { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1100px) {
    .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.4rem, 4vw, 3rem) clamp(1.4rem, 2.4vw, 2rem); }
    .wk-grid .wk-card.is-shift { margin-top: 4rem; margin-bottom: -4rem; }
    .wk-grid { padding-bottom: 4rem; }
}
@media (min-width: 1000px) and (max-width: 1099px) { .wk-grid .wk-card.is-shift { margin-top: 3rem; margin-bottom: -3rem; } }
.wk-slide { height: auto; min-height: clamp(360px, 30vw, 420px); }
.wk-slide .wk-chips { display: none; }
.wk-slide-media { min-height: 100%; }
@media (max-width: 1100px) { .wk-slide { height: auto; } }

/* Project content sections */
.wk-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.wk-goals li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; color: #334155; font-weight: 600; }
.wk-goals i { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; margin-top: .05rem; border-radius: 8px; font-size: .7rem; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); }
.wk-feat-sec { background: #F7F6FC; }
.wk-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.wk-feat { position: relative; padding: 1.7rem; border-radius: var(--wk-r); background: #fff; border: 1px solid var(--sv-line); transition: transform .4s var(--sv-ease), box-shadow .4s; }
.wk-feat:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(30, 16, 80, .45); }
.wk-feat-ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.1rem; border-radius: 15px; color: #fff; font-size: 1.1rem; background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: 0 14px 28px -16px var(--acc); }
.wk-feat h3 { margin: 0 0 .45rem; font-size: 1.12rem; letter-spacing: -.015em; color: var(--sv-ink); }
.wk-feat p { margin: 0; line-height: 1.6; color: var(--sv-text); }
.wk-plan { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.wk-phases { position: relative; display: grid; gap: 1.4rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.wk-phases::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #A78BFA, #F9A8D4); }
.wk-phases li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 1.1rem; }
.wk-phase-dot { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: .15rem; border-radius: 50%; background: #fff; border: 4px solid #8B5CF6; }
.wk-phase-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 .3rem; }
.wk-phase-head strong { font-size: 1.08rem; color: var(--sv-ink); }
.wk-phase-head em { font-style: normal; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; color: #6D28D9; background: #F1EDFE; }
.wk-phases li p:not(.wk-phase-head) { margin: 0; line-height: 1.6; color: var(--sv-text); }
.wk-deliv { position: sticky; top: calc(var(--sv-nav) + 1.5rem); padding: 1.8rem; border-radius: var(--wk-r); color: #fff; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acc) 55%, #0B1023), #0B1023 70%); }
.wk-deliv .wk-side-title { color: rgba(226, 232, 255, .65); }
.wk-deliv ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.wk-deliv li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; line-height: 1.45; }
.wk-deliv i { margin-top: .2rem; color: var(--acc2); }
@media (max-width: 1000px) { .wk-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wk-plan { grid-template-columns: 1fr; } .wk-deliv { position: static; } }
@media (max-width: 640px) { .wk-feats, .wk-goals { grid-template-columns: 1fr; } }
.wk-gal-item { width: clamp(260px, 42vw, 600px); }

/* Carousel controls: one compact pill */
.wk-pill { display: inline-flex; align-items: center; gap: .15rem; padding: .3rem; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 23, 42, .1); box-shadow: 0 14px 30px -20px rgba(30, 16, 80, .45); }
.wk-pill-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--sv-ink); font-size: .85rem; cursor: pointer; transition: background .25s, color .25s; }
.wk-pill-btn:hover { color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); }
.wk-pill-btn:focus-visible { outline: 3px solid #A78BFA; outline-offset: 2px; }
.wk-pill-count { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 4.4rem; justify-content: center; font-family: var(--font-heading); font-size: .92rem; font-weight: 700; color: #94A3B8; font-variant-numeric: tabular-nums; }
.wk-pill-count strong { color: var(--sv-ink); }
.wk-pill-sep { width: 1px; height: 22px; margin: 0 .2rem; background: rgba(15, 23, 42, .1); }
.wk-play i { font-size: .72rem; }

/* View project button */
.wk-btn { display: inline-flex; align-items: center; gap: .8rem; align-self: flex-start; padding: .45rem .5rem .45rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: #fff; text-decoration: none; background: var(--sv-ink); box-shadow: 0 16px 30px -18px rgba(15, 23, 42, .7); transition: transform .35s var(--sv-ease), box-shadow .35s; }
.wk-btn-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--acc, #8B5CF6), var(--acc2, #EC4899)); transition: transform .35s var(--sv-ease); }
.wk-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--acc, #8B5CF6) 70%, transparent); }
.wk-btn:hover .wk-btn-ic { transform: translateX(3px) rotate(-45deg); }

/* Carousel v3: project tabs instead of arrows */
.wk-auto { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .1); background: #fff; font: inherit; font-size: .85rem; font-weight: 700; color: #475569; cursor: pointer; transition: border-color .25s, color .25s; }
.wk-auto:hover { color: #6D28D9; border-color: #C4B5FD; }
.wk-auto-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: wkPulse 1.8s infinite; }
.is-paused .wk-auto-dot { background: #94A3B8; animation: none; }
@keyframes wkPulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.wk-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .8rem; max-width: 1040px; margin: 2rem auto 0; }
.wk-tab { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .6rem .7rem .9rem; border: 1px solid transparent; border-radius: 16px; background: transparent; text-align: left; font: inherit; cursor: pointer; opacity: .6; transition: opacity .3s, background .3s, border-color .3s, box-shadow .3s; }
.wk-tab:hover { opacity: .9; background: rgba(255, 255, 255, .7); }
.wk-tab.is-active { opacity: 1; background: #fff; border-color: rgba(15, 23, 42, .07); box-shadow: 0 16px 34px -24px rgba(30, 16, 80, .5); }
.wk-tab img { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.wk-tab-txt { display: grid; gap: .1rem; min-width: 0; }
.wk-tab-txt small { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7C3AED; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-tab-txt strong { font-size: .86rem; line-height: 1.3; color: var(--sv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-tab-bar { position: absolute; left: .7rem; right: .7rem; bottom: .4rem; height: 3px; border-radius: 3px; background: #ECE9F6; overflow: hidden; }
.wk-tab-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.wk-tab.is-active .wk-tab-bar i { width: 100%; }
.wk-tab.is-active.is-timed .wk-tab-bar i { width: 0; animation: wkFill var(--wk-dur, 6s) linear forwards; }
[data-wk-carousel].is-paused .wk-tab.is-timed .wk-tab-bar i { animation-play-state: paused; }
.wk-tab:focus-visible { outline: 3px solid #A78BFA; outline-offset: 2px; }
@media (max-width: 900px) {
    /* Room above and below so the active card's shadow isn't clipped by the scroller */
    .wk-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 1rem -1.5rem -1.6rem; padding: 1rem 1.5rem 2.2rem; scroll-padding: 0 1.5rem; scroll-snap-type: x proximity; }
    .wk-tabs::-webkit-scrollbar { display: none; }
    .wk-tab { flex: 0 0 auto; width: min(290px, 78vw); scroll-snap-align: start; }
    .wk-tab-txt small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .wk-tab.is-active.is-timed .wk-tab-bar i { animation: none; width: 100%; } }

/* Technology logo strip (same look as the homepage strip) */
.hm-strip { padding: 2.4rem 0; overflow: hidden; background: #fff; border-bottom: 1px solid rgba(15, 23, 42, .06); }
.hm-strip-title { margin: 0 0 1.2rem; text-align: center; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.hm-strip-row { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-strip-track { display: flex; flex-shrink: 0; align-items: center; gap: 2.8rem; padding: 0 1.4rem; animation: hmMarquee var(--hm-dur, 40s) linear infinite; }
.hm-strip-row:not(.is-playing) .hm-strip-track { animation-play-state: paused; }
.hm-strip-row:hover .hm-strip-track { animation-play-state: paused; }
@keyframes hmMarquee { to { transform: translateX(-100%); } }
/* full brand colour; a darker shade on hover */
.hm-tech { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #334155; white-space: nowrap; transition: color .3s, transform .3s; }
.hm-tech img { transition: filter .3s; }
.hm-tech:hover { color: #0F172A; transform: translateY(-1px); }
.hm-tech:hover img { filter: brightness(.6) saturate(1.2); }
@keyframes hmMarquee { to { transform: translateX(-100%); } }
.hm-strip-row + .hm-strip-row { margin-top: 1.4rem; }
.hm-strip-row.is-rev .hm-strip-track { animation-direction: reverse; }
.tl-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); }
@media (prefers-reduced-motion: reduce) { .hm-strip-track { animation: none !important; } .hm-strip-row { flex-wrap: nowrap; justify-content: center; } }