/* Client work Spotlight (/work, 28 Oct 2026). Light stage after the GetLayers "Carousel Spotlight" preview, in Buka's website tokens
   (--font, --mono, --ink, --magenta); the dark Care theme is not used here. Measurements: REFERENCE-MEASUREMENTS.md. */
.hc .sp { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, #fdfdfe 0%, #f6f7fa 52%, #eceef3 100%); border-bottom: 1px solid var(--subtle-2); }
.hc .sp::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 23%; height: 90px; background: radial-gradient(closest-side, rgba(19, 19, 19, .07), transparent); pointer-events: none; }
.hc .sp-stage { position: relative; width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 clamp(22px, 3vw, 36px); display: grid; }
.hc .sp-head { text-align: center; position: relative; z-index: 2; }
.hc .sp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.hc .sp-eyebrow::before, .hc .sp-eyebrow::after { content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: currentColor; opacity: .45; }
.hc .sp h1 { margin: 0 auto; max-width: none; text-align: center; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: var(--ink); }
.hc .sp h1 em { font-style: italic; font-weight: 400; color: var(--plum); }
/* the scene: perspective stage, cards hang from a common top line and turn inward (concave arc) */
.hc .sp-scene { --cw: 150px; position: relative; height: calc(var(--cw) * 1.36 * 1.38 + 40px); margin-top: clamp(18px, 3vw, 40px); perspective: 1150px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.hc .sp-scene.is-dragging { cursor: grabbing; }
.hc .sp-scene:focus-visible { outline: 3px solid var(--magenta); outline-offset: 6px; border-radius: 18px; }
.hc .sp-ghost { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); margin: 0; font: 300 clamp(9rem, 22vw, 20rem)/1 var(--font); letter-spacing: -.06em; color: rgba(19, 19, 19, .045); pointer-events: none; }
.hc .sp-track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.hc .sp-card { position: absolute; left: 50%; top: 18px; width: var(--cw); margin-left: calc(var(--cw) / -2); transform-origin: 50% 0; will-change: transform; }
.hc .sp-card__btn { all: unset; box-sizing: border-box; display: block; position: relative; width: 100%; aspect-ratio: 3 / 4.08; border-radius: 9px; padding: 3px; background: linear-gradient(160deg, #fff, #e9ebf0); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 30px -16px rgba(20, 24, 40, .38), 0 40px 60px -40px rgba(20, 24, 40, .35); cursor: pointer; }
.hc .sp-card__btn:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.hc .sp-card__frame { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background: #dfe2e8; }
.hc .sp-card__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
.hc .sp-card__frame::after { content: ""; position: absolute; inset: 3px; border-radius: 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 12, 20, .55) 100%); pointer-events: none; }
.hc .sp-card__n { position: absolute; top: 10px; left: 11px; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); padding: 3px 5px; border-radius: 4px; background: rgba(10, 12, 20, .28); }
.hc .sp-card__name { position: absolute; left: 12px; right: 10px; bottom: 11px; font: 500 italic clamp(12px, 1vw, 14px)/1.15 var(--font); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); overflow-wrap: anywhere; }
/* without JavaScript the cards sit in a plain scrolling row */
html:not(.sp-js) .hc .sp-scene { height: auto; perspective: none; overflow-x: auto; cursor: auto; }
html:not(.sp-js) .hc .sp-track { position: static; display: flex; gap: 16px; padding: 18px 4px; }
html:not(.sp-js) .hc .sp-card { position: static; margin: 0; flex: none; }
html:not(.sp-js) .hc .sp-card[aria-hidden="true"] { display: none; }
/* under the scene: hint, the front card's title and meta, dots, counter and arrows */
.hc .sp-foot { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px 16px; margin-top: 4px; }
.hc .sp-hint { grid-column: 1 / -1; justify-self: center; margin: 0 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.hc .sp-now { grid-column: 2; text-align: center; }
.hc .sp-now__title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) !important; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.hc .sp-now__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.hc .sp-dots { grid-column: 2; display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.hc .sp-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hc .sp-dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #c9ccd4; transition: width .3s var(--ease-expo), background-color .3s; }
.hc .sp-dot.is-on::before { width: 20px; background: #1d2a4d; }
.hc .sp-dot:focus-visible { outline: 3px solid var(--magenta); outline-offset: 0; border-radius: 6px; }
.hc .sp-count { grid-column: 1; grid-row: 2 / 4; align-self: end; margin: 0; font: 500 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.hc .sp-count span { margin-left: 4px; font-size: 13px; letter-spacing: .04em; color: var(--ink-3); }
.hc .sp-arrows { grid-column: 3; grid-row: 2 / 4; justify-self: end; align-self: end; display: flex; gap: 8px; }
.hc .sp-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--subtle-2); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(20, 24, 40, .45); transition: transform .14s var(--ease-expo); }
.hc .sp-arrow svg { width: 18px; height: 18px; }
.hc .sp-arrow:hover { border-color: var(--grey-300); }
.hc .sp-arrow:active { transform: scale(.96); }
.hc .sp-arrow:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
@media (max-width: 640px) {
  .hc .sp-foot { grid-template-columns: 1fr auto; }
  .hc .sp-now, .hc .sp-dots { grid-column: 1 / -1; }
  .hc .sp-count { grid-column: 1; grid-row: auto; }
  .hc .sp-arrows { grid-column: 2; grid-row: auto; }
}
/* the crawlable project list */
.hc .sp-list h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.hc .sp-list__items { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--subtle-2); }
.hc .sp-list__items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--subtle-2); }
.hc .sp-list__items h3 { margin: 0 0 4px; font-size: 1.15rem; }
.hc .sp-list__items p { margin: 0; color: var(--ink-2); }
.hc .sp-list__n { font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.hc .sp-list__act { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
.hc .sp-list__view { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
@media (max-width: 640px) { .hc .sp-list__items li { grid-template-columns: 32px minmax(0, 1fr); } .hc .sp-list__act { grid-column: 2; justify-content: flex-start; } }
/* the viewer: a modal dialog grown from the card; the screenshot scrolls inside it, the page does not move */
html.sp-lock { overflow: hidden; }
.sp-viewer { width: min(1120px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 22px; background: #fff; color: #131313; box-shadow: 0 40px 120px -30px rgba(10, 12, 20, .55); overflow: hidden; }
.sp-viewer::backdrop { background: rgba(14, 16, 24, .55); backdrop-filter: blur(6px); }
.sp-viewer__in { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; }
.sp-viewer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 22px 12px; border-bottom: 1px solid #ececec; }
.sp-viewer__k { margin: 0 0 4px; font: 500 12px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #6f6c6e; }
.sp-viewer h2 { margin: 0; font: 500 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.03em; }
.sp-viewer__scope { margin: 6px 0 0; color: #585858; font-size: 14px; }
.sp-viewer__act { display: flex; align-items: center; gap: 8px; flex: none; }
.sp-visit { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #131313; color: #fff; text-decoration: none; font: 500 14px/1 'Plus Jakarta Sans', system-ui, sans-serif; }
.sp-visit svg { width: 14px; height: 14px; }
.sp-visit:focus-visible, .sp-close:focus-visible, .sp-live:focus-visible, .sp-viewer__frame:focus-visible { outline: 3px solid #b3105e; outline-offset: 3px; }
.sp-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ececec; background: #fff; display: grid; place-items: center; cursor: pointer; color: #131313; }
.sp-close svg { width: 18px; height: 18px; }
.sp-viewer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 22px; background: #f7f7f8; border-bottom: 1px solid #ececec; }
.sp-viewer__label { margin: 0; font-size: 13px; color: #585858; }
.sp-live { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #c7c7c7; background: #fff; font: 500 13px/1 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; }
.sp-viewer__frame { overflow: auto; overscroll-behavior: contain; background: #eceef3; -webkit-overflow-scrolling: touch; }
.sp-viewer__frame img { display: block; width: min(100%, 900px); height: auto; margin: 0 auto; box-shadow: 0 0 0 1px #e2e4ea; }
.sp-viewer__frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 640px) { .sp-viewer { width: 100vw; height: 100dvh; border-radius: 0; } .sp-viewer__head { padding: 14px 16px 10px; } .sp-viewer__bar { padding: 8px 16px; } .sp-visit { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .hc .sp-dot::before, .hc .sp-arrow { transition: none; } .hc .sp-card { will-change: auto; } }
/* header: "Client login" pill (the Spotlight "Get access" button in Buka's ink) */
.hc .s1-header .header-access { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 16px; border-radius: 999px; background: #131313; color: #fff; font: 500 14px/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px -10px rgba(19, 19, 19, .55); transition: background-color .16s ease, transform .14s var(--ease-expo); }
.hc .s1-header .header-access__i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.hc .s1-header .header-access__i svg { width: 14px; height: 14px; }
.hc .s1-header .header-access:hover { background: #2f2f2f; color: #fff; }
.hc .s1-header .header-access:active { transform: scale(.97); }
.hc .s1-header .header-access:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.hc-a .s1-header .header-access { background: #fff; color: #131313; } .hc-a .s1-header .header-access__i { background: rgba(19, 19, 19, .08); }
.hc .s1-header .header-access__s { display: none; }
/* phones: the pill keeps its place with a short visible label ("Log in"); its accessible name stays "Client login" */
@media (max-width: 599.98px) {
  .hc .s1-header .container { gap: 10px; }
  .hc .s1-header .header-access { padding: 0 5px 0 12px; font-size: 13px; gap: 6px; min-height: 40px; }
  .hc .s1-header .header-access__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hc .s1-header .header-access__s { display: inline; }
  .hc .s1-header .header-access__i { width: 22px; height: 22px; }
  .hc .s1-header .s1-nav-toggle { padding: 0 12px; gap: 6px; letter-spacing: .06em; }
}
@media (max-width: 419.98px) {
  .hc .s1-header .logo-link img { width: 104px; }
  .hc .s1-header .s1-nav-toggle__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hc .s1-header .s1-nav-toggle { min-width: 44px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .hc .s1-header .header-access { transition: none; } .hc .s1-header .header-access:active { transform: none; } }