/* ==========================================================================
   Home
   ========================================================================== */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head .label { margin-bottom: 16px; }

/* ---------- Hero: two hands, one touch ----------
   A simple first screen. As the page opens the two hands glide in and touch, and a spark lights where they
   meet. Pure CSS, with no scroll involved, so it behaves the same in every browser. (While the first-visit
   intro is showing the animation waits, then plays.) The pixels below pour out of that spark (home.js). */
.hero { position: relative; }
.hero__stage { position: relative; height: 100svh; min-height: 620px; max-height: 1080px; overflow: hidden; }
/* A still background: soft lilac, butter and mint glows and a fine dot grid, all plain gradients. (No blur
   filters, animation or masks: on iPhones those made the hero repaint slowly, leaving blank or garbled
   patches when you scrolled back up to it.) */
.hero__bg { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(max(44vw, 300px) max(44vw, 300px) at 4% 2%, rgba(236, 231, 255, .95), rgba(236, 231, 255, 0) 70%),
    radial-gradient(max(38vw, 260px) max(38vw, 260px) at 96% 24%, rgba(255, 247, 204, .95), rgba(255, 247, 204, 0) 70%),
    radial-gradient(60% 38% at 52% 74%, rgba(221, 243, 231, .9), rgba(221, 243, 231, 0) 70%), /* fades out before the hero's edge */
    radial-gradient(rgba(11, 11, 12, .06) 1px, transparent 1.4px) 0 0 / 26px 26px; }
.hero__scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) * .6); }
.hero__text { position: relative; z-index: 2; text-align: center; }
.hero__title { margin: 22px 0 22px; font-size: clamp(54px, 8.4vw, 124px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.tw { display: inline-flex; align-items: center; font-size: .9em; letter-spacing: -.01em; vertical-align: .04em; }
.caret { display: inline-block; width: .42em; height: .78em; margin-left: .08em; background: var(--volt); box-shadow: 0 0 0 1px rgba(11, 11, 12, .08); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__title .serif { font-size: 1.14em; letter-spacing: -.035em; }
.hero__text .lead { margin-inline: auto; max-width: 32em; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
/* Both fingertips meet at the centre of this box: the hand's tip sits at 99.6% × 71.45% of the image,
   the cursor's tip (after its -90deg turn) 5.56% of its width left of its box and 72.2% of its width down. */
.hero__touch { --hw: min(36vw, 400px); --pw: min(8.4vw, 92px); position: relative; flex: 0 0 clamp(190px, 28vh, 270px); margin-top: clamp(16px, 4vh, 40px); }
.hero__hand { position: absolute; z-index: 2; width: var(--hw); max-width: none; height: auto; left: calc(50% - var(--hw) * .996); top: calc(50% - var(--hw) * .3489); animation: handL 1.6s cubic-bezier(.22, .8, .2, 1) .35s both; } /* its left edge fades out in the image itself */
.hero__pointer { position: absolute; z-index: 2; width: var(--pw); left: calc(50% + var(--pw) * .0556); top: calc(50% - var(--pw) * .7222); animation: handR 1.6s cubic-bezier(.22, .8, .2, 1) .35s both; }
@keyframes handL { from { transform: translateX(-36vw); } }
@keyframes handR { from { transform: translateX(36vw); } }
.pixel-hand { width: 100%; height: auto; transform: rotate(-90deg); }
.hero__seed { position: absolute; z-index: 3; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--volt); box-shadow: 0 0 0 1px rgba(11, 11, 12, .25), 0 0 18px 4px rgba(230, 240, 60, .55);  }
@keyframes seed { 50% { background: var(--ink); } }
/* the spark: lights the moment the fingertips meet (the hands finish gliding at 1.95s) */
.hero__seed { animation: seedIn .45s cubic-bezier(.34, 1.56, .64, 1) 1.9s both, seed 1s steps(2) 2.4s infinite; }
.hero__click { animation: click 1.8s var(--ease) 2s infinite; }
@keyframes seedIn { from { transform: scale(0); } }
/* The touch waits, holding its first frame, until the hand is ready to show (home.js adds .is-ready) and
   any first-visit intro has gone; then it plays from the start */
.hero__hand, .hero__pointer, .hero__seed, .hero__click { animation-play-state: paused; }
html:not(.intro-on) .hero__stage.is-ready :is(.hero__hand, .hero__pointer, .hero__seed, .hero__click) { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .hero__hand, .hero__pointer, .hero__seed, .hero__click { animation: none; } }
.hero__click { position: absolute; z-index: 1; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; }
@keyframes click { 0% { opacity: .55; transform: scale(.2); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
/* Phones: the headline sits in the middle of the space above the hands, and the hands rest below it,
   so the two never overlap; on very short phones the hero simply grows a little */
@media (max-width: 760px) {
  .hero__stage { height: auto; min-height: 0; max-height: none; }
  .hero__scene { position: relative; min-height: 100svh; justify-content: flex-start; padding: calc(var(--nav-h) + 8px) 0 calc(3svh + 22px); }
  .hero__text { margin-block: auto; }
  .hero__touch { --hw: 54vw; --pw: 13vw; flex: 0 0 150px; height: 150px; margin: 12px 0 0; }
}
.hero__cue { position: absolute; z-index: 6; left: 50%; bottom: 18px; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); opacity: var(--cue, 1); pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__cue i { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(11, 11, 12, .35); position: relative; }
.hero__cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) { .hero__cue { bottom: 10px; } .hero__cue span { display: none; } .hero__cue i { width: 18px; height: 28px; } }

/* ---------- The story: one joined section, the same on every screen ----------
   Each muse is built from pixels as she scrolls in (home.js paints them on her .mflow__px canvas, then the
   painted image takes over via --img); her words rise into place (--r) and her service name drifts behind
   (--wx). Laptops: muse beside the words, swapping sides. Phones: stacked. Soft colours fade between sections. */
.mflow { position: relative; padding-bottom: clamp(32px, 5vw, 72px); }
.mflow__sec { position: relative; padding-block: clamp(56px, 8vw, 120px); overflow: hidden; }
.mflow__sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, var(--c, transparent) 22%, var(--c, transparent) 78%, transparent); opacity: .6; }
.mflow__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 88px); }
.mflow__sec:nth-of-type(odd) .mflow__art { order: 2; }
.mflow__art { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; }
.mflow__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: var(--img, 0); }
.mflow__copy { display: grid; gap: 14px; justify-items: start; opacity: var(--r, 0); transform: translateY(calc((1 - var(--r, 0)) * 48px)); }
.mflow__copy .label { margin: 0; }
.mflow__t { margin: 0; font-size: clamp(48px, 6.4vw, 104px); font-weight: 500; letter-spacing: -.055em; line-height: .95; }
.mflow__sec--intro .mflow__t { font-size: clamp(44px, 5.4vw, 88px); }
.mflow__sec--intro .mflow__t .serif { font-weight: 400; letter-spacing: -.02em; padding-bottom: .04em; background: var(--thread) no-repeat 0 96% / calc(var(--r, 0) * 100%) .06em; }
.mflow__b { margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--text); max-width: 30em; }
.mflow__word { position: absolute; z-index: 0; left: 0; top: 50%; font-size: clamp(140px, 22vw, 380px); font-weight: 500; letter-spacing: -.06em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(11, 11, 12, .1); transform: translate(var(--wx, 0px), -50%); pointer-events: none; }
.hero__tags { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero__tags li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.hero__tags li::before { content: ''; width: 8px; height: 8px; flex: none; background: var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.hero__tags li:nth-child(2)::before { background: var(--volt); box-shadow: 0 0 0 1px rgba(11, 11, 12, .3), 0 0 0 3px rgba(255, 255, 255, .6); }
.hero__tags li:nth-child(3)::before { background: #FF9BC4; }
@media (max-width: 860px) {
  .mflow__sec { padding-block: 56px 72px; }
  .mflow__in { grid-template-columns: 1fr; gap: 6px; }
  .mflow__sec:nth-of-type(odd) .mflow__art { order: 0; }
  .mflow__art { width: min(84vw, 44svh, 400px); }
  .mflow__t { font-size: clamp(40px, 11vw, 58px); }
  .mflow__sec--intro .mflow__t { font-size: clamp(38px, 10.4vw, 52px); }
  .mflow__word { top: 22%; font-size: 34vw; -webkit-text-stroke-width: 1px; transform: translateX(var(--wx, 0px)); }
  .hero__tags { gap: 6px 16px; } .hero__tags li { font-size: 14px; }
}

/* The pixels that build each muse: one canvas per muse, placed on the page over her and the stretch above
   her (the first one reaches up into the hero, to the square between the fingertips). They are part of the
   page, so they scroll with it like a picture. Above the backgrounds, under the words and the hands. */
.mflow__px { position: absolute; left: 0; z-index: 1; display: block; width: 100%; pointer-events: none; }
/* The pixel field through the rest of the story: one screen-sized canvas, sticky inside .mflow, so it travels
   with you through the sections but can't reach the hero. Under the words. */
.mswarm { position: sticky; top: 0; z-index: 0; display: block; width: 100%; pointer-events: none; }
.show { position: relative; z-index: 2; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .mflow__copy { opacity: 1; transform: none; } .mflow__art img { opacity: 1; } .mflow__px, .mswarm { display: none; } .hero__text { transform: none; opacity: 1; } }

/* ---------- How we work: steady pin on phones, swipe hint ----------
   The pin fills the large viewport (100lvh) so the browser bar never uncovers a gap; --bar keeps content clear of it. */
.how__pin { --bar: 0px; }
@supports (height: 100lvh) { .how__pin { --bar: calc(100lvh - 100svh); height: 100lvh; } }
.how__pin { padding-bottom: var(--bar); }
/* How we work: on touch screens, say you can swipe as well as scroll */
.how__hint { display: none; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.how__hint i { display: inline-block; font-style: normal; animation: nudgeL 1.8s var(--ease) infinite; }
.how__hint i:last-child { animation-name: nudgeR; }
@keyframes nudgeL { 50% { transform: translateX(-4px); } }
@keyframes nudgeR { 50% { transform: translateX(4px); } }
@media (pointer: coarse) { .how__hint { display: block; } .how__pin { touch-action: pan-y; } }

/* ---------- Intro: the first pixel ----------
   Once per visit, under two seconds, skipped by any scroll, tap or key. A volt pixel types "pingmuse",
   folds the word back into itself, then drops to the spot where the hands will meet. */
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: background-color .5s var(--ease), opacity .35s; }
.no-intro .intro { display: none; }
html.intro-on { overflow: hidden; }
.intro__mark { display: flex; align-items: center; gap: 14px; }
.intro__px { width: 16px; height: 16px; background: var(--volt); box-shadow: 0 0 0 1px rgba(11, 11, 12, .25), 0 0 24px 6px rgba(230, 240, 60, .5); animation: introBlink .5s steps(1) infinite; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
@keyframes introBlink { 50% { background: var(--ink); } }
.intro__word { display: flex; font-size: clamp(28px, 4vw, 48px); letter-spacing: .04em; color: var(--ink); }
.intro__word b { font-weight: 400; opacity: 0; transform: translateY(6px); transition: transform .3s var(--ease), opacity .25s; }
.intro.is-type .intro__word b { animation: introType .01s steps(1) forwards; animation-delay: calc(.25s + var(--i) * .07s); }
@keyframes introType { to { opacity: 1; transform: none; } }
.intro.is-fold .intro__word b { opacity: 0 !important; transform: translateX(calc(var(--i) * -18px - 20px)) !important; transition-delay: calc((7 - var(--i)) * 18ms); }
.intro.is-out { background-color: rgba(250, 250, 248, 0); }
.intro.is-out .intro__px { animation: none; background: var(--volt); }
.intro.is-gone { opacity: 0; pointer-events: none; }


/* ---------- Services ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.scard {
  position: relative; overflow: hidden; isolation: isolate; min-height: 460px;
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 0;
  background: var(--c); border-radius: var(--r-lg); color: var(--ink);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.scard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .25); }
.scard__n { font-size: 14px; color: rgba(11, 11, 12, .45); }
.scard__title { font-size: 30px; letter-spacing: -.04em; margin-top: 18px; }
.scard p { margin: 0; font-size: 15px; color: rgba(11, 11, 12, .7); }
.scard .chip { background: rgba(255, 255, 255, .7); }
.scard__go { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .5s var(--ease), background .3s; }
.scard__go .arrow { width: 16px; height: 16px; transform: rotate(-45deg); transition: transform .5s var(--ease); }
.scard:hover .scard__go { background: var(--ink); color: #fff; }
.scard:hover .scard__go .arrow { transform: rotate(0); }
.scard__art { margin-top: auto; height: 210px; position: relative; z-index: -1; }
.scard__art img { position: absolute; left: 50%; bottom: -18px; width: 250px; max-width: none; transform: translateX(-50%); transition: transform .8s var(--ease); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .12)); }
.scard:hover .scard__art img { transform: translateX(-50%) translateY(-10px) scale(1.06) rotate(-2deg); }
@media (max-width: 1080px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .scard { min-height: 420px; } }

/* ---------- Showcase: scroll the list, the stage follows ---------- */
.browse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 48px 0 0; }
.browse > span { font-size: 14px; color: var(--muted); margin-right: 4px; }
.browse .chip { height: 36px; padding: 0 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: background .25s, color .25s; }
.browse .chip b { font-weight: 500; color: var(--faint); margin-left: 6px; }
.browse .chip:hover { background: var(--ink); color: #fff; }
.browse .chip:hover b { color: rgba(255, 255, 255, .5); }
.show__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); }
.show__list { list-style: none; margin: 0; padding: 0; }
.show__item { min-height: 62vh; display: flex; align-items: center; padding-block: 24px; }
.show__item:first-child { min-height: 48vh; align-items: flex-start; padding-top: 6vh; }
.show__item:last-child { min-height: 70vh; }
.show__item > a { display: grid; gap: 14px; opacity: .28; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.show__item.is-active > a { opacity: 1; transform: none; }
.show__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.show__name { font-size: clamp(40px, 4.8vw, 68px); line-height: 1; letter-spacing: -.05em; }
.show__name { justify-self: start; padding-bottom: .1em; background: var(--thread) no-repeat 0 100% / 0% .1em; transition: background-size .9s var(--ease); }
.show__item.is-active .show__name { background-size: 100% .1em; }
.show__tag { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--text); max-width: 20em; }
.show__item .chips { margin-top: 4px; }
.show__mobile { display: none; }
.show__stage { position: sticky; top: calc(var(--nav-h) + 6vh); align-self: start; height: min(76vh, 680px); }
.show__slide { position: absolute; inset: 0; clip-path: inset(100% 0 0 0 round 32px); transition: clip-path .9s cubic-bezier(.77, 0, .18, 1); }
.show__slide.is-active { clip-path: inset(0 0 0 0 round 32px); z-index: 2; }
.show__slide.was-active { clip-path: inset(0 0 0 0 round 32px); z-index: 1; }

.pan { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--pc2) 45%, transparent), transparent 60%), var(--pc); }
.pan::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px); background-size: 22px 22px; }
.pan--photo::after, .pan--posters::after { display: none; }
.pan__frame { position: relative; z-index: 1; width: 78%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55); transform: rotate(-3deg); transition: transform 1s var(--ease); }
.pan__frame .vis--browser { padding: 6% 6% 0; place-items: end center; }
.pan__frame .vframe { border-radius: 10px 10px 0 0; height: 100%; }
.is-active .pan__frame { transform: rotate(-2deg) scale(1.01); }
.pan__dots { position: absolute; z-index: 2; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); }
.pan__dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pan__photo, .pan__posters { position: absolute; inset: 0; }
.pan__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.is-active .pan__photo img, .show__mobile .pan__photo img { transform: none; }
.pan__posters .vis { height: 100%; background: transparent; }
.pan__mark { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(18px, 3vw, 32px); width: 100%; }
.pan__icon { width: clamp(110px, 34%, 220px); aspect-ratio: 1; border-radius: 28%; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); transform: rotate(-6deg); transition: transform 1s var(--ease); }
.is-active .pan__icon { transform: rotate(-3deg); }
.pan__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan__logo { width: clamp(130px, 44%, 280px); height: auto; filter: brightness(0) invert(1); }
.pan__strip { display: flex; width: clamp(170px, 52%, 320px); height: 14px; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.pan__strip i { flex: 1; }
.pan__phone { position: relative; z-index: 1; height: 84%; aspect-ratio: 1170 / 2532; padding: 8px; border-radius: 36px; background: #111; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .6); transform: rotate(4deg); transition: transform 1s var(--ease); }
.is-active .pan__phone { transform: rotate(2deg); }
.pan__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; display: block; }
@media (max-width: 900px) {
  .show__grid { grid-template-columns: 1fr; }
  .show__stage { display: none; }
  .show__item, .show__item:first-child, .show__item:last-child { min-height: 0; display: grid; gap: 20px; padding: 0 0 56px; }
  .show__item > a { opacity: 1; transform: none; }
  .show__name { background-size: 100% .1em; }
  .show__mobile { display: block; aspect-ratio: 1 / 1.05; }
}

/* ---------- Numbers ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-bottom: clamp(64px, 8vw, 112px); }
.num { display: grid; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: var(--c); }
.num b { font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.num span { color: rgba(11, 11, 12, .65); font-size: 15px; }
@media (max-width: 860px) { .numbers { grid-template-columns: 1fr 1fr; } }

/* ---------- Clients ---------- */
.clients { padding-block: clamp(48px, 6vw, 80px); background: #fff; border-block: 1px solid var(--line); }
.clients__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.clients__text { margin: 0; color: var(--muted); }
.clients .marquee__track { --gap: 48px; }
.clients__logo { display: grid; place-items: center; height: 56px; }
.clients__logo img { height: 52px; width: auto; filter: grayscale(1); opacity: .6; transition: opacity .3s, filter .3s; }
.clients__logo:hover img { opacity: 1; filter: none; }

/* ---------- How we work: five steps, one muse ----------
   The section pins for one screen per step. The Muse Thread fills across the top,
   the muse changes beside a big, simple line of copy. No boxes, no chat. */
.how { position: relative; height: calc(var(--n) * 75vh + 100vh); }
.how__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.how__inner { display: grid; gap: clamp(20px, 3.4vh, 40px); width: 100%; }
.how__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.how__head .label { order: 2; margin: 0 0 .7em; }
.how__track { position: relative; }
.how__track .thread { height: 3px; margin: 0 calc(50% / var(--n)); }
.how__nodes { position: relative; z-index: 1; list-style: none; margin: -9px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.how__nodes button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 10px; width: 100%; }
.how__nodes button:focus-visible span { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.how__nodes i { width: 15px; height: 15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-2); transition: box-shadow .4s, background .4s, transform .5s var(--ease); }
.how__nodes span { font-size: 14px; color: var(--faint); transition: color .4s; }
.how__nodes .is-done i { background: var(--ink); box-shadow: none; }
.how__nodes .is-on i { background: var(--ink); box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px #FF9BC4; transform: scale(1.1); }
.how__nodes .is-on span, .how__nodes .is-done span { color: var(--ink); }
.how__nodes button:hover span { color: var(--ink); }

.how__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.how__texts { display: grid; }
.how__text { grid-area: 1 / 1; display: grid; gap: clamp(10px, 1.6vh, 18px); align-content: center; opacity: 0; transform: translateY(32px); pointer-events: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.how__text.is-past { transform: translateY(-32px); }
.how__text.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.how__n { font-size: 15px; color: var(--ink); }
.how__n small { font-size: inherit; color: var(--faint); }
.how__t { margin: 0; font-size: clamp(52px, 7.4vw, 116px); font-weight: 500; letter-spacing: -.055em; line-height: .95; }
.how__w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.how__w.serif { font-weight: 400; letter-spacing: -.03em; }
.how__text.is-on .how__w { opacity: 1; transform: none; transition-delay: .15s; }
.how__text.is-on .how__w + .how__w { transition-delay: .3s; }
.how__em { font-style: italic; padding-bottom: .04em; background: var(--thread) no-repeat 0 92% / 0% .07em; transition: background-size .9s var(--ease) .55s; }
.how__text.is-on .how__em { background-size: 100% .07em; }
.how__line { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--text); max-width: 26em; }
.how__out { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.how__out b { font-weight: 400; color: var(--faint); }
.how__out span::before { content: '+ '; color: #FF9BC4; }

.how__arts { --ah: min(58vh, 560px); position: relative; display: grid; place-items: center; height: var(--ah); }
.how__big { position: absolute; z-index: 0; right: -2%; top: -6%; font-size: clamp(120px, 16vw, 240px); line-height: 1; background: var(--thread); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .9s var(--ease); pointer-events: none; }
.how__big.is-past { transform: translateY(-30px); }
.how__big.is-on { opacity: .5; transform: none; }
.how__glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--thread); filter: blur(70px); opacity: .32; transform: rotate(calc(var(--hue, 0) * 72deg)); transition: transform 1.2s var(--ease); }
.how__art { grid-area: 1 / 1; position: relative; height: var(--ah); width: auto; max-width: 100%; object-fit: contain; opacity: 0; transform: translateY(40px) scale(.94) rotate(3deg); transition: opacity .55s var(--ease), transform .9s var(--ease); }
.how__art.is-past { transform: translateY(-40px) scale(.94) rotate(-3deg); }
.how__art.is-on { opacity: 1; transform: none; transition-delay: .06s; }

@media (max-width: 900px) {
  .how { height: calc(var(--n) * 70vh + 100vh); }
  .how__head { display: grid; gap: 8px; }
  .how__head .label { order: 0; margin: 0; }
  .how__stage { grid-template-columns: 1fr; gap: 8px; }
  .how__arts { order: -1; --ah: min(34vh, 340px); }
  .how__big { position: absolute; z-index: 0; right: -2%; top: -6%; font-size: clamp(120px, 16vw, 240px); line-height: 1; background: var(--thread); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .9s var(--ease); pointer-events: none; }
.how__big.is-past { transform: translateY(-30px); }
.how__big.is-on { opacity: .5; transform: none; }
.how__glow { width: 60%; filter: blur(48px); }
  .how__t { font-size: clamp(42px, 11.5vw, 72px); }
  .how__line { font-size: 16px; }
  .how__big { font-size: clamp(90px, 24vw, 160px); right: 0; top: -4%; }
}
@media (max-width: 560px) {
  .how__nodes span { font-size: 11px; }
  .how__nodes li:not(.is-on) span { opacity: 0; }
  .how__out { gap: 12px; font-size: 11px; }
}
@media (max-height: 640px) and (min-width: 901px) { .how__arts { --ah: 50vh; } .how__t { font-size: clamp(48px, 7vw, 96px); } }

.cta-wrap { padding-bottom: clamp(88px, 11vw, 140px); }