/* ==========================================================================
   Studio: a scroll story
   tech | art split hero (merges on scroll) → two halves → Since 2018 (horizontal) →
   values → services → clients → FAQ → CTA
   ========================================================================== */
.st-head { margin-bottom: clamp(36px, 5vw, 64px); }
.st-head .h1 { margin-top: 16px; }

/* ---------- Hero: tech | art, merging as you scroll ----------
   --m (0 → 1) is the merge, set by studio.js. */
.sx { position: relative; height: 240vh; }
.sx__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sx__half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform .2s linear; }
.sx__half--l { left: 0; background: #F1F1EE; transform: translateX(calc(var(--m, 0) * -102%)); }
.sx__half--r { right: 0; background: #fff; transform: translateX(calc(var(--m, 0) * 102%)); }
.sx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(11, 11, 12, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 11, 12, .05) 1px, transparent 1px); background-size: 28px 28px; }
.sx__px { position: absolute; border-radius: 2px; animation: pxBlink 3.2s steps(2) infinite; animation-delay: var(--d); }
.sx__px--v { background: var(--volt); } .sx__px--k { background: var(--ink); } .sx__px--g { background: #D9D9D4; }
@keyframes pxBlink { 50% { opacity: .15; } }
.sx__code { position: absolute; left: max(var(--gutter), calc(50vw - var(--max) / 2)); bottom: 9%; margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(0, 0, 0, .25); font-family: var(--mono); font-size: 13px; line-height: 1.75; color: rgba(11, 11, 12, .7); white-space: pre; }
.sx__ln { display: block; clip-path: inset(0 100% 0 0); animation: type 1s steps(28) forwards; animation-delay: calc(var(--i) * .7s + .4s); }
.sx__ln b { display: inline-block; width: 26px; font-weight: 400; color: rgba(11, 11, 12, .28); }
.sx__code .k { color: #6B4BE0; } .sx__code .f { color: #D9488F; } .sx__code .s { color: #1F8A66; } .sx__code .c { color: rgba(11, 11, 12, .35); }
.sx__caret { display: inline-block; width: 8px; height: 15px; margin-left: 26px; vertical-align: -2px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 50% { opacity: 0; } }
.sx__blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .75; animation: blobFloat 9s ease-in-out infinite alternate; }
.sx__blob--1 { width: 46%; aspect-ratio: 1; right: 6%; top: 10%; background: #FFD6E8; }
.sx__blob--2 { width: 40%; aspect-ratio: 1; right: 30%; top: 46%; background: #DDEBFF; animation-delay: -3s; }
.sx__blob--3 { width: 34%; aspect-ratio: 1; right: 2%; bottom: 4%; background: #FFF7CC; animation-delay: -6s; }
@keyframes blobFloat { to { transform: translate(-6%, 8%) scale(1.08); } }
.sx__strokes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: url(#sxPaint); stroke-width: 22; stroke-linecap: round; opacity: .5; }
.sx__strokes path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: paint 2.2s var(--ease) forwards; }
.sx__strokes path:nth-child(3) { animation-delay: .5s; } .sx__strokes path:nth-child(4) { animation-delay: 1s; }
@keyframes paint { to { stroke-dashoffset: 0; } }
.sx__tag { position: absolute; top: calc(var(--nav-h) + 18px); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sx__tag--l { left: max(var(--gutter), calc(50vw - var(--max) / 2)); }
.sx__tag--r { right: max(var(--gutter), calc(50vw - var(--max) / 2)); }
.sx__seam { position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, #E6F03C, #FF9BC4 55%, #9FC3FF); transform-origin: center; transform: scaleY(calc(1 - var(--m, 0))); opacity: calc(1 - var(--m, 0)); }
.sx__stage { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; row-gap: max(10px, 2vh); justify-items: center; text-align: center; padding: calc(var(--nav-h) + 5vh) var(--gutter) 3vh; }
.sx__label { margin: 0; }
.sx__title { margin: 0; display: flex; align-items: baseline; justify-content: center; font-size: clamp(54px, 9.6vw, 160px); font-weight: 500; letter-spacing: -.05em; line-height: .95; white-space: nowrap; }
.sx__w { display: inline-block; }
.sx__w--tech { font-size: .68em; letter-spacing: .02em; transform: translateX(calc((1 - var(--m, 0)) * -12vw)); }
.sx__w--art { font-weight: 400; letter-spacing: -.02em; padding-bottom: .04em; background: var(--thread) no-repeat 0 96% / calc(var(--m, 0) * 100%) .06em; transform: translateX(calc((1 - var(--m, 0)) * 12vw)); }
.sx__w--meets { overflow: hidden; max-width: calc(var(--m, 0) * 4em); opacity: var(--m, 0); padding: 0 calc(var(--m, 0) * .22em); }
/* The muse fills exactly the space left between title and text, so it can never cover the line */
.sx__muse { position: relative; width: 100%; height: 100%; min-height: 0; }
.sx__muse img { position: absolute; inset: 0; margin: auto; width: auto; height: 100%; max-width: 100%; max-height: 600px; object-fit: contain; transform: scale(calc(.94 + var(--m, 0) * .06)); }
.sx__lead { margin: 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; color: var(--text); opacity: var(--l, 0); transform: translateY(calc((1 - var(--l, 0)) * 16px)); }
.sx__lead b { font-weight: 500; color: var(--ink); }
.sx__hint { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); opacity: calc(1 - var(--m, 0) * 2); }
.sx__hint i { width: 20px; height: 30px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; }
.sx__hint i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 60% { transform: translateY(8px); opacity: 0; } }
@media (max-width: 860px) {
  .sx { height: 220vh; }
  .sx__code { font-size: 10px; padding: 10px 12px; bottom: 6%; left: 12px; }
  .sx__ln:nth-child(n+4) { display: none; }
  .sx__ln b { width: 18px; }
  .sx__tag { font-size: 9px; top: calc(var(--nav-h) + 8px); }
  .sx__tag--l { left: 12px; } .sx__tag--r { right: 12px; }
  .sx__stage { padding-top: calc(var(--nav-h) + 5vh); }
  .sx__title { font-size: clamp(44px, 14vw, 96px); }
  .sx__lead { font-size: 16px; }
}
/* Short screens (laptops, phones in landscape): size the title by height too */
@media (max-height: 820px) and (min-width: 861px) { .sx__title { font-size: min(9.6vw, 14vh); } .sx__stage { padding-top: calc(var(--nav-h) + 3vh); } }
@media (max-height: 520px) { .sx__title { font-size: min(9vw, 15vh); } .sx__hint { display: none; } .sx__lead { font-size: 14px; max-width: 44em; } .sx__code { display: none; } }
@media (prefers-reduced-motion: reduce) { .sx__px, .sx__blob, .sx__caret { animation: none; } .sx__ln { clip-path: none; animation: none; } .sx__strokes path { stroke-dashoffset: 0; animation: none; } }

/* ---------- Two halves ---------- */
.halves__head { text-align: center; display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.halves__head .lead { max-width: 34em; margin: 0; }
.halves__grid { display: grid; grid-template-columns: 1fr minmax(0, 1.1fr) 1fr; gap: clamp(16px, 4vw, 56px); align-items: center; }
.half { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.half__k { font-size: clamp(40px, 5vw, 72px); line-height: 1; margin-bottom: 10px; }
.half__k .pixel { font-size: .8em; background: var(--thread); -webkit-background-clip: text; background-clip: text; color: transparent; }
.half__k .serif { font-style: italic; }
.half li:not(.half__k) { display: flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink); }
.half .ico { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--bc); }
.half--art { justify-items: end; text-align: right; }
.half--art li:not(.half__k) { flex-direction: row-reverse; }
.half--tech li[data-reveal]:not(.is-in) { transform: translateX(-28px); }
.half--art li[data-reveal]:not(.is-in) { transform: translateX(28px); }
.halves__muse { position: relative; display: grid; place-items: center; }
.halves__muse img { position: relative; width: 100%; height: auto; }
.halves__ring { position: absolute; inset: 6%; border-radius: 50%; background:
  conic-gradient(from 180deg, #E6F03C, #FF9BC4, #9FC3FF, #DDF3E7, #E6F03C); opacity: .28; filter: blur(30px); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Since 2018: a horizontal journey ---------- */
.yrs { position: relative; height: 400vh; border-top: 1px solid var(--line); }
.yrs__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: clamp(20px, 4vh, 48px); padding-top: var(--nav-h); overflow: hidden; }
.yrs__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.yrs__head .h1 { margin-top: 16px; }
.yrs__head .pixel { font-size: .78em; background: var(--thread); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yrs__hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.yrs__hint .arrow { width: 16px; height: 16px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.yrs__view { min-width: 0; overflow: visible; }
.yrs__track { position: relative; display: flex; gap: clamp(28px, 4vw, 64px); padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); transform: translateX(calc(var(--x, 0) * -1px)); will-change: transform; }
.yrs__line { position: absolute; left: 0; right: 0; top: 42px; height: 3px; }
.yr { position: relative; flex: none; width: clamp(260px, 28vw, 380px); display: grid; align-content: start; gap: 12px; padding-top: 74px; opacity: .35; transform: translateY(16px); transition: opacity .6s, transform .8s var(--ease); }
.yr.is-on { opacity: 1; transform: none; }
.yr__dot { position: absolute; left: 0; top: 34px; width: 19px; height: 19px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-2); transition: background .4s, box-shadow .4s; }
.yr.is-on .yr__dot { background: var(--ink); box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #FF9BC4; }
.yr__y { position: absolute; left: 0; top: 0; font-size: 24px; line-height: 1; }
.yr.is-on .yr__y { background: var(--thread); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yr__art { aspect-ratio: 4 / 3; max-height: 38svh; border-radius: 20px; overflow: hidden; background: var(--bc); display: grid; place-items: center; }
.yr__art img { width: 100%; height: 100%; object-fit: cover; }
.yr--muse .yr__art img { width: 86%; height: 92%; object-fit: contain; object-position: bottom; align-self: end; }
.yr .h3 { margin: 6px 0 0; }
.yr p { margin: 0; color: var(--muted); font-size: 15px; }
.yr--next { align-content: center; gap: 22px; }
.yr__big { margin: 0; font-size: clamp(48px, 5.4vw, 84px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.yr--next .btn { justify-self: start; }

/* ---------- Values ---------- */
.vals { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.val { position: relative; display: grid; grid-template-columns: 56px 60px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.val::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--thread); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .2s; }
.val.is-in::after { transform: scaleX(1); }
.val__n { font-size: 14px; color: var(--faint); }
.val__i .ico { width: 48px; height: 48px; padding: 12px; border-radius: 15px; background: var(--bc); transform: rotate(-6deg); }
.val__t { margin: 0; font-size: clamp(26px, 3vw, 44px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.val p { margin: 0; color: var(--muted); font-size: 16px; max-width: 30em; }

/* ---------- Services ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 20px; align-items: center; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.svc__i .ico { width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: var(--bc); transition: transform .5s var(--ease); }
.svc__main { display: grid; gap: 8px; max-width: 46em; position: relative; z-index: 1; }
.svc__t { font-size: clamp(34px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.05em; line-height: 1; transition: transform .6s var(--ease); }
.svc__b { color: var(--muted); font-size: 16px; max-width: 34em; }
.svc__l { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.svc__go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .3s, color .3s, transform .5s var(--ease); }
.svc__go .arrow { width: 18px; height: 18px; }
.svc__muse { position: absolute; right: 90px; top: 50%; width: clamp(160px, 18vw, 260px); height: auto; opacity: 0; transform: translateY(-50%) scale(.7) rotate(-10deg); transition: opacity .4s, transform .7s var(--ease); pointer-events: none; }
.svc:hover .svc__muse, .svc:focus-visible .svc__muse { opacity: 1; transform: translateY(-50%) rotate(-4deg); }
.svc:hover .svc__t { transform: translateX(10px); }
.svc:hover .svc__i .ico { transform: rotate(-10deg) scale(1.08); }
.svc:hover .svc__go { background: var(--ink); color: #fff; transform: rotate(-45deg); }

/* ---------- Clients, FAQ, CTA ---------- */
.st-clients { padding-block: clamp(48px, 6vw, 80px); background: #fff; border-block: 1px solid var(--line); }
.st-clients__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.st-clients__head p { margin: 0; }
.st-clients .marquee__track { --gap: 48px; }
.st-clients__logo { display: grid; place-items: center; height: 56px; }
.st-clients__logo img { height: 52px; width: auto; filter: grayscale(1); opacity: .6; transition: opacity .3s, filter .3s; }
.st-clients__logo:hover img { opacity: 1; filter: none; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.faq__grid .h1 { margin-top: 18px; }
.st-end { padding-bottom: clamp(88px, 11vw, 140px); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .val { grid-template-columns: 44px 56px minmax(0, 1fr); }
  .val p { grid-column: 3; }
  .svc__muse { display: none; }
}
@media (max-width: 860px) {
  .halves__grid { grid-template-columns: 1fr 1fr; }
  .halves__muse { grid-column: 1 / -1; grid-row: 1; width: min(70%, 340px); justify-self: center; }
  .faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .halves__grid { grid-template-columns: 1fr; gap: 28px; }
  .half--art { justify-items: start; text-align: left; }
  .half--art li:not(.half__k) { flex-direction: row; }
  .half li:not(.half__k) { font-size: 16px; }
  .half .ico { width: 40px; height: 40px; padding: 10px; }
  .yr { width: 76vw; }
  .yrs__hint { display: none; }
  .val { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
  .val__n { display: none; }
  .val__i { grid-row: span 2; }
  .val p, .val__t { grid-column: 2; }
  .val__i .ico { width: 44px; height: 44px; padding: 11px; }
  .svc { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
  .svc__i .ico { width: 44px; height: 44px; padding: 11px; }
  .svc__go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .halves__ring, .yrs__hint .arrow { animation: none; } }