/* =====================================================================
   Homepage sections after Welcome, on the same 1920px canvas and in the
   Figma language (navy frame, #FBBD2C). All text in Arfilit; headings in its Black weight.
   Every scroll animation is driven by sections.js (progress from
   getBoundingClientRect, so it works under the CSS zoom).
   ===================================================================== */


:root {
  --f-head: "Arfilit", system-ui, sans-serif;   /* headings: Arfilit Black */
  --f-text: "Arfilit", system-ui, sans-serif;
  --cream: #f6efe0;
  --line: rgba(255, 255, 255, .14);
  --ease-out: cubic-bezier(.2, .9, .1, 1);
  --ar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='16.5 16.5 26 26'><path d='M18.1319 38.3898C18.138 38.5267 18.171 38.661 18.229 38.7851C18.287 38.9092 18.3689 39.0207 18.47 39.1131C18.5711 39.2056 18.6894 39.2772 18.8181 39.3239C18.9469 39.3707 19.0836 39.3916 19.2205 39.3855C19.4968 39.3732 19.757 39.2515 19.9437 39.0474C20.0362 38.9463 20.1078 38.828 20.1545 38.6993C20.2013 38.5705 20.2222 38.4338 20.2161 38.2969L19.424 20.8934L39.8247 41.2941C40.0203 41.4897 40.2856 41.5996 40.5622 41.5996C40.8388 41.5996 41.1041 41.4897 41.2997 41.2941C41.4953 41.0985 41.6052 40.8332 41.6052 40.5566C41.6052 40.28 41.4953 40.0147 41.2997 39.8191L20.9034 19.4228L38.2981 20.2149C38.435 20.2212 38.5717 20.2005 38.7005 20.1539C38.8294 20.1074 38.9478 20.0359 39.049 19.9436C39.1502 19.8513 39.2323 19.7399 39.2905 19.6159C39.3486 19.4919 39.3818 19.3576 39.3881 19.2207C39.3944 19.0839 39.3737 18.9472 39.3272 18.8183C39.2806 18.6895 39.2091 18.5711 39.1168 18.4698C39.0245 18.3686 38.9131 18.2866 38.7891 18.2284C38.6651 18.1702 38.5308 18.137 38.394 18.1307L18.8797 17.2428C18.635 17.2317 18.3912 17.2783 18.1678 17.3787C17.9444 17.4792 17.7477 17.6306 17.5935 17.821C17.3521 18.1185 17.2282 18.4943 17.2454 18.8771L18.1319 38.3898Z'/></svg>");
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.chapters { position: relative; display: block; }
.wrap { position: relative; width: 1600px; margin: 0 auto; }

/* ---------- shared type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-text); font-size: 22px; line-height: 1;
  color: var(--yellow); letter-spacing: .03em;
}
.eyebrow::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 18px rgba(251, 189, 44, .85);
}
.h2 {
  margin: 22px 0 0;
  font-family: var(--f-head); font-weight: 300;
  font-size: 98px; line-height: .94; letter-spacing: 0;
  color: var(--white);
}
.h2 em, .contact__h em { font-style: normal; color: var(--yellow); }

/* split letters rise out of a mask when the heading enters (data-chars) */
.ch-w { display: inline-block; overflow: hidden; padding: .1em .03em .04em; margin: -.1em -.03em -.04em; vertical-align: top; }
.ch { display: inline-block; transform: translateY(110%) rotate(8deg); transform-origin: 0 100%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 24ms); }
.in .ch { transform: none; }
/* words that light up with the scroll (data-words) */
.wd { opacity: calc(.13 + var(--o, 0) * .87); }
.wd--hl { color: color-mix(in srgb, var(--yellow) calc(var(--o, 0) * 100%), var(--white)); }

/* arrow (the Figma CTA arrow) as a mask, so it takes the text colour */
.btn__ar, .svc__ar::before {
  display: inline-block; width: 24px; height: 24px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ar) center / contain no-repeat; mask: var(--ar) center / contain no-repeat;
}
/* on the yellow WEIS-SHOP disc the same dark glowing button stands out on its own */
.btn--dark { border-color: rgba(18, 19, 37, .6); }

/* =====================================================================
   Band
   ===================================================================== */
.band { position: relative; height: 300px; margin: 80px 33px 0; overflow: hidden; }
.band__strip {
  position: absolute; left: -200px; width: 2254px;
  display: flex; align-items: center; overflow: hidden;
  font-family: var(--f-head); font-weight: 900; line-height: 1; white-space: nowrap;
}
.band__strip--a { top: 84px; height: 86px; background: var(--yellow); color: var(--navy); font-size: 34px; transform: rotate(-4deg); z-index: 2; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.band__strip--b { top: 96px; height: 74px; background: #1b1c35; color: transparent; -webkit-text-stroke: 1px var(--yellow); font-size: 30px; transform: rotate(3deg); border-block: 1px solid rgba(251, 189, 44, .25); }
.band__run { display: flex; direction: ltr; width: max-content; will-change: transform; }
.band__run span { display: inline-flex; align-items: center; padding: 0 30px; }
.band__run span::after { content: ""; width: 14px; height: 14px; margin-left: 60px; border-radius: 50%; background: currentColor; flex: none; }
.band__strip--b .band__run span::after { background: var(--yellow); }

/* =====================================================================
   Services
   ===================================================================== */
.svc { position: relative; height: calc(var(--vh, 953px) * 3.6); }
/* one service at a time: the big number on the right, name + line beside it, its illustration on the left */
.svc__pin { position: sticky; top: 0; height: var(--vh, 953px); }
.svc__h { position: absolute; right: 0; top: 140px; margin: 0; font-family: "Karantina", var(--f-head); font-weight: 700; font-size: 168px; line-height: .8; color: var(--white); }
.svc__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.svc__row { position: absolute; left: 0; right: 0; top: max(400px, calc(var(--vh, 953px) - 520px)); height: 420px; pointer-events: none; }
.svc__row.is-on { pointer-events: auto; }
.svc__link { position: absolute; inset: 0; z-index: 2; }
.svc__n { position: absolute; right: 0; top: 0; font-family: "Karantina", var(--f-head); font-weight: 700; font-size: 500px; line-height: .78; color: #6f6a7d;
  opacity: 0; translate: 0 160px; transition: opacity .55s, translate 1s var(--ease-out); }
.svc__txt { position: absolute; right: 900px; top: 4px; width: 560px; text-align: right;
  opacity: 0; translate: 0 40px; transition: opacity .55s .08s, translate .9s .08s var(--ease-out); }
.svc__t { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 52px; line-height: 1; color: var(--white); }
.svc__d { margin: 12px 0 0; font-family: var(--f-text); font-weight: 400; font-size: 25px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.svc__art { position: absolute; left: -80px; top: 110px; width: 440px; height: 320px; rotate: -14deg; translate: -40px 80px;
  opacity: 0; transition: opacity .55s .14s, rotate 1s .14s var(--ease-out), translate 1s .14s var(--ease-out); }
.svc__art .peek { opacity: 1; transform: none; box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 12px 50px rgba(251, 189, 44, .18); }
.svc__row.is-on .svc__n, .svc__row.is-on .svc__txt { opacity: 1; translate: 0 0; }
.svc__row.is-on .svc__art { opacity: 1; translate: 0 0; rotate: -5deg; }
.svc__row.was .svc__n { translate: 0 -160px; }
.svc__row.was .svc__txt { translate: 0 -40px; }
.svc__row.was .svc__art { translate: 40px -80px; rotate: 4deg; }

.peek {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  background: var(--cream); box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  opacity: 0; transform: scale(.92); transition: opacity .3s, transform .45s var(--ease-out);
}
.peek i { position: absolute; display: block; border-radius: 8px; }
.peek__bar { right: 22px; left: 22px; top: 18px; height: 10px; background: rgba(18, 19, 37, .12); }
.peek--site .peek__h1 { right: 26px; top: 70px; width: 190px; height: 34px; background: var(--navy); }
.peek--site .peek__h2 { right: 26px; top: 114px; width: 140px; height: 34px; background: var(--yellow); }
.peek--site .peek__p { right: 26px; top: 168px; width: 170px; height: 8px; background: rgba(18, 19, 37, .25); }
.peek--site .peek__btn { right: 26px; top: 196px; width: 96px; height: 30px; border-radius: 15px; background: var(--navy); }
.peek--site .peek__img { left: 24px; top: 58px; width: 150px; height: 200px; border-radius: 18px; background: linear-gradient(160deg, #e9d7b2, #c9a25a); }
.peek--shop { background: #fff; }
.peek--shop .peek__tile { top: 58px; width: 112px; height: 190px; border-radius: 16px; background: linear-gradient(#f2eadb 62%, transparent 62%), linear-gradient(#121325, #121325) 14px 140px / 60px 9px no-repeat, linear-gradient(#fbbd2c, #fbbd2c) 14px 160px / 36px 9px no-repeat; border: 1px solid rgba(18, 19, 37, .08); }
.peek--shop .peek__tile:nth-of-type(2) { right: 22px; }
.peek--shop .peek__tile:nth-of-type(3) { right: 154px; }
.peek--shop .peek__tile:nth-of-type(4) { right: 286px; }
.peek--shop .peek__cart { left: 20px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--navy); font: 700 15px/30px var(--f-text); font-style: normal; text-align: center; }
.peek--brand { background: var(--navy); display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 120px; }
.peek--brand b { position: absolute; top: 26px; right: 0; left: 0; text-align: center; font: 700 120px/1 var(--f-head); color: var(--yellow); }
.peek--brand i { position: static; width: 64px; height: 64px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, .2); }
.peek--bot { background: #0e1424; }
.peek__msg { height: 38px; border-radius: 19px !important; }
.peek__msg--a { right: 24px; width: 210px; background: var(--cream); }
.peek__msg--b { left: 24px; width: 160px; background: #2b2d4a; }
.peek__msg:nth-child(1) { top: 34px; } .peek__msg:nth-child(2) { top: 90px; } .peek__msg:nth-child(3) { top: 146px; width: 150px; } .peek__msg:nth-child(4) { top: 202px; width: 230px; background: var(--yellow); }

/* =====================================================================
   Contact
   ===================================================================== */
.contact { position: relative; margin: 0 33px; padding: 240px 0 260px; overflow: hidden; isolation: isolate; }
.contact .wrap { width: 1600px; }
.contact__stripes {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; isolation: isolate; background: var(--navy);
  -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
.contact__stripes i {
  position: absolute; left: var(--x); top: -60px; bottom: -60px; width: 33px;
  background: rgb(251, 176, 0); mix-blend-mode: color-dodge; filter: blur(16px);
  opacity: var(--a, .2);
}
.contact__stripes .contact__glow { left: 0; top: 0; bottom: auto; width: 900px; height: 820px; margin: -410px 0 0 -450px; border-radius: 50%; background: linear-gradient(#ffe6c9, #fbbd2c); opacity: .3; filter: blur(200px); transform: translate(var(--gx, 900px), var(--gy, 500px)); }
.contact__h { margin: 0 0 120px; font-family: var(--f-head); font-weight: 900; font-size: 270px; line-height: .84; text-align: center; }
.contact__h > span, .contact__h > em { display: block; }

.form { width: 1180px; margin: 0 auto; display: grid; gap: 46px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.fld { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld > span { padding: 0; font-family: var(--f-text); font-size: 22px; color: rgba(255, 255, 255, .6); }
.fld small { font-size: .8em; opacity: .7; }
.fld input, .fld textarea {
  width: 100%; padding: 12px 0 14px; border: 0; border-radius: 0; outline: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  background: linear-gradient(var(--yellow), var(--yellow)) right bottom / 0 2px no-repeat;
  color: var(--white); font: 300 30px/1.4 var(--f-text);
  transition: background-size .55s var(--ease-out);
}
.fld input:focus, .fld textarea:focus { background-size: 100% 2px; }
.fld textarea { resize: vertical; min-height: 130px; }
.fld[aria-invalid="true"] input { border-bottom-color: #ff8d7a; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; align-items: center; gap: 40px; margin-top: 14px; }
.form__send { width: 300px; height: 84px; font-size: 26px; cursor: pointer; }
.form__send[disabled] { opacity: .6; cursor: progress; }
.form__msg { margin: 0; font-family: var(--f-text); font-size: 24px; }
.form__msg.is-ok { color: var(--yellow); }
.form__msg.is-err { color: #ff8d7a; }

/* =====================================================================
   Hero additions: the lead line and the two buttons
   ===================================================================== */
.hero__lead {
  position: absolute; left: 0; right: 0; top: 616px; margin: 0;
  font-family: var(--f-text); font-size: 26px; line-height: 34px; text-align: center;
  color: rgba(255, 255, 255, .72);
}
.hero__cta { left: 962px; top: 694px; width: 300px; height: 72px; display: flex; gap: 8px; }
.hero__cta-arrow { position: static; width: 50px; height: 50px; }
.hero__cta-text { position: static; width: auto; }
.hero__cta2 { position: absolute; left: 658px; top: 694px; width: 280px; height: 72px; }
.btn--line { border-color: rgba(255, 255, 255, .35); color: var(--white); background: rgba(255, 255, 255, .02); }
.btn--line::before, .btn--line::after { display: none; }
.btn--line:hover { background: transparent; border-color: var(--yellow); color: var(--yellow); }

.sec-sub { margin: 26px 0 0; font-family: var(--f-text); font-size: 30px; line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* =====================================================================
   Spotlight: one project, what you see and what works behind it (pinned)
   ===================================================================== */
.spot { height: calc(var(--vh, 900px) * 2.6); }
.spot__pin { position: sticky; top: 0; height: var(--vh, 900px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 56px; }
.spot__head .h2 { font-size: 104px; }
.spot__body { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 90px; align-items: center; }
.spot__name { margin: 0 0 30px; font-family: var(--f-head); font-weight: 700; font-size: 54px; line-height: 1.05; color: var(--white); }
.spot__block { padding: 22px 0; border-top: 1px solid var(--line); opacity: calc(.28 + var(--on, 0) * .72); transition: opacity .5s; }
.spot__label { display: block; margin-bottom: 8px; font-family: var(--f-text); font-size: 18px; letter-spacing: .02em; color: var(--yellow); }
.spot__block p { margin: 0; font-family: var(--f-text); font-weight: 300; font-size: 26px; line-height: 1.5; }
.spot__foot { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.spot__cta { height: 68px; padding: 0 34px; font-size: 21px; }
.spot__nav, .testi__nav { display: flex; align-items: center; gap: 14px; }
.spot__count { font-family: var(--f-text); font-size: 18px; color: rgba(255, 255, 255, .6); min-width: 52px; text-align: center; }
.spot__arrow {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: transparent; color: var(--white); cursor: pointer; display: grid; place-items: center;
  transition: border-color .3s, color .3s, background .3s;
}
.spot__arrow::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ar) center / contain no-repeat; mask: var(--ar) center / contain no-repeat; transform: rotate(135deg); }
.spot__arrow[data-dir="-1"]::before { transform: rotate(-45deg); }
.spot__arrow:hover { border-color: var(--yellow); color: var(--yellow); }
.spot__frame {
  border-radius: 26px; overflow: hidden; background: #0c0d1c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px rgba(0, 0, 0, .5);
  transform: perspective(2000px) rotateY(calc((1 - var(--in, 1)) * -14deg)) scale(calc(.86 + var(--in, 1) * .14));
  opacity: calc(.3 + var(--in, 1) * .7);
}
.spot__bar { display: flex; gap: 8px; padding: 14px 18px; background: #191a31; }
.spot__bar i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.spot__view { position: relative; aspect-ratio: 16 / 10; max-height: calc(var(--vh, 900px) - 380px); width: 100%; overflow: hidden; cursor: ew-resize; }
.spot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .5s; }
/* the blueprint layer is revealed from the left up to the scan line (RTL: what's behind sits on the left) */
.spot__img--back { clip-path: inset(0 calc(100% - var(--split, 0%)) 0 0); }
.spot__scan {
  position: absolute; top: 0; bottom: 0; left: var(--split, 0%); width: 2px; margin-left: -1px;
  background: var(--yellow); box-shadow: 0 0 24px var(--yellow), 0 0 4px var(--yellow);
  opacity: var(--scan, 0);
}
.spot__scan b {
  position: absolute; top: 22px; white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  font-family: var(--f-text); font-weight: 400; font-size: 16px;
}
.spot__scan b:first-child { left: 16px; background: var(--white); color: var(--navy); }
.spot__scan b:last-child { right: 16px; background: var(--yellow); color: var(--navy); }
.spot.is-swapping .spot__img, .spot.is-swapping .spot__txt { opacity: 0; }
.spot__txt { transition: opacity .4s; }

/* =====================================================================
   Shops (pinned): the nav's yellow dot grows over the frame
   ===================================================================== */
.shopx { height: calc(var(--vh, 900px) * 2.8); }
.shopx__pin { position: sticky; top: 0; height: var(--vh, 900px); overflow: hidden; }
.shopx__pre {
  position: absolute; right: 0; left: 0; top: 50%; transform: translateY(calc(-50% - 120px - (1 - var(--pre, 1)) * 80px));
  display: flex; flex-direction: column; align-items: center; text-align: center; opacity: var(--pre, 1);
}
.shopx__pre .h2 { font-size: 120px; }
.shopx__disc {
  position: absolute; left: 33px; right: 33px; top: 0; bottom: 0;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--navy);
  clip-path: circle(var(--r, 19px) at 50% 62%);
}
.shopx__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.shopx__toggle { margin-bottom: 30px; opacity: var(--ui, 0); }
.shopx__knob { transform: translateX(calc(var(--k, 0) * 29px)); }
.shopx__k {
  margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 210px; line-height: .8;
  letter-spacing: var(--ls, 0px); transform: scale(var(--ks, 1)); white-space: nowrap;
}
.shopx__p { max-width: 980px; margin: 56px 0 0; font-family: var(--f-text); font-size: 40px; line-height: 1.3; opacity: var(--ui, 0); transform: translateY(calc((1 - var(--ui, 0)) * 30px)); }
.shopx__cta { position: relative; height: 80px; padding: 0 44px; margin-top: 50px; opacity: var(--ui, 0); }

/* =====================================================================
   Studio + process (pinned): three steps joined by a line, the knob travels along
   ===================================================================== */
.studio { height: calc(var(--vh, 900px) * 2.2); }
.studio__pin { position: sticky; top: 0; height: var(--vh, 900px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 110px; }
.studio__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.studio__head { max-width: 1100px; }
.studio__head .h2 { font-size: 130px; }
.studio__head .sec-sub { max-width: 900px; }
.studio__badge { position: relative; flex: none; width: 260px; height: 260px; }
.studio__ring { width: 100%; height: 100%; direction: ltr; overflow: visible; transform: rotate(var(--rot, 0deg)); }
.studio__ring text { font-family: var(--f-text); font-size: 21px; letter-spacing: .24em; fill: var(--yellow); }
.studio__toggle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.25); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; padding: 0; list-style: none; }
.steps__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 60px; opacity: calc(.3 + var(--lit, 0) * .7); transition: opacity .4s; }
.steps__n { font-family: var(--f-text); font-size: 20px; color: var(--yellow); }
.steps__t { font-family: var(--f-head); font-weight: 700; font-size: 64px; line-height: 1; color: var(--white); }
.steps__item::before {                                 /* stop on the line */
  content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--navy); border: 2px solid color-mix(in srgb, var(--yellow) calc(var(--lit, 0) * 100%), rgba(255, 255, 255, .3));
  transition: border-color .3s;
}
.steps__line { position: absolute; right: 0; left: 33.333%; top: 0; height: 2px; background: var(--line); }
.steps__line i { position: absolute; right: 0; top: 0; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
.steps__line b {                                       /* the hero toggle's knob, travelling */
  position: absolute; right: calc(var(--p, 0) * 100%); top: 0; width: 34px; height: 34px; margin: -17px -17px 0 0; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 8px rgba(251, 189, 44, .15), 0 0 30px var(--yellow);
}
/* =====================================================================
   Cursor + intro
   ===================================================================== */
.cur { display: none; }
.has-cursor .cur { display: block; position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; }
.cur__dot, .cur__ring { position: fixed; left: 0; top: 0; border-radius: 50%; }
.cur__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--yellow); }
.cur__ring {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center;
  border: 1px solid rgba(251, 189, 44, .6);
  transition: width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out), background .3s, border-color .3s;
}
.cur__ring span { font-family: var(--f-text); font-size: 18px; color: var(--navy); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur__ring.hov { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.cur__ring.big { width: 128px; height: 128px; margin: -64px 0 0 -64px; background: var(--yellow); border-color: transparent; }
.cur__ring.big span { opacity: 1; }
.cur.hide .cur__dot, .cur.hide .cur__ring { opacity: 0; }

@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.intro { display: none; }
.play-intro .intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #0b0c1a;
  animation: intro-out 1s cubic-bezier(.8, 0, .2, 1) 1.25s forwards;
}
.intro__n { --n: 0; display: flex; align-items: baseline; gap: 10px; direction: ltr; font-family: var(--f-head); font-weight: 900; font-size: 240px; line-height: 1; color: var(--yellow); animation: intro-count 1.1s cubic-bezier(.5, 0, .2, 1) forwards; counter-reset: n var(--n); }
.intro__n::before { content: counter(n); }
.intro__n small { font-size: 60px; color: rgba(255, 255, 255, .5); }
@keyframes intro-count { to { --n: 100; } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.play-intro .hero-gl, .play-intro .hero__title { animation: hero-reveal 1.3s var(--ease-out) 1.45s backwards; }
.play-intro .hero__sub-a, .play-intro .hero__toggle, .play-intro .hero__sub-b, .play-intro .hero__cta, .play-intro .nav__item, .play-intro .logo { animation: hero-rise 1.1s var(--ease-out) backwards; animation-delay: 1.75s; }
.play-intro .hero__toggle { animation-delay: 1.85s; }
.play-intro .hero__sub-b { animation-delay: 1.95s; }
.play-intro .hero__lead { animation: hero-rise 1.1s var(--ease-out) 2s backwards; }
.play-intro .hero__cta, .play-intro .hero__cta2 { animation: hero-rise 1.1s var(--ease-out) 2.15s backwards; }
.play-intro .hero-stripes i:not(.hero-stripes__glow) { animation: stripe-in 1.6s var(--ease-out) 1.3s backwards; }
.play-intro .hero-stripes__glow { animation: glow-in 2s ease 1.3s backwards; }
@keyframes hero-reveal { from { clip-path: inset(100% 0 0 0); transform: translateY(60px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes stripe-in { from { transform: translateY(-105%); } to { transform: none; } }
@keyframes glow-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ch { transition: none; transform: none; opacity: 1; }
  .play-intro .intro { display: none; }
}

/* =====================================================================
   Mobile + tablet (below 1024px)
   ===================================================================== */
@media (max-width: 1023px) {
  .wrap, .contact .wrap { width: auto; padding: 0 24px; }
  .eyebrow { font-size: 15px; gap: 10px; }
  .eyebrow::before { width: 9px; height: 9px; }
  .h2, .spot__head .h2, .studio__head .h2, .shopx__pre .h2 { margin-top: 14px; font-size: clamp(38px, 10.5vw, 84px); line-height: 1; }
  .sec-sub { margin-top: 16px; font-size: clamp(16px, 4.4vw, 22px); }

  .hero__lead { position: static; margin-top: 20px; font-size: 16px; line-height: 1.5; max-width: 340px; }
  .hero__cta { position: relative; left: auto; top: auto; width: 250px; height: 58px; margin-top: 26px; }
  .hero__cta-arrow { width: 42px; height: 42px; }
  .hero__cta2 { position: relative; left: auto; top: auto; width: 250px; height: 54px; margin-top: 12px; font-size: 18px; }

  .band { height: 170px; margin: 40px var(--edge) 0; }
  .band__strip--a { top: 46px; height: 54px; font-size: 22px !important; }
  .band__strip--b { top: 52px; height: 46px; font-size: 20px !important; }
  .band__run span { padding: 0 16px; font-size: inherit !important; }
  .band__run span::after { width: 9px; height: 9px; margin-left: 32px; }

  .sec-head { margin-bottom: 44px; }
  /* phones: the four services stacked, no pinning */
  .svc { height: auto; padding: 90px 0 60px; }
  .svc__pin { position: static; height: auto; }
  .svc__h { position: static; font-size: clamp(64px, 19vw, 110px); margin-bottom: 40px; }
  .svc__list { position: static; display: grid; gap: 48px; }
  .svc__row { position: relative; top: auto; height: auto; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .svc__n, .svc__txt, .svc__art { opacity: 1 !important; translate: none !important; }
  .svc__n { position: static; font-size: 96px; line-height: .8; }
  .svc__txt { position: static; width: auto; padding-top: 6px; }
  .svc__t { font-size: clamp(26px, 7.4vw, 40px); }
  .svc__d { font-size: 16px; }
  .svc__art { display: none; }

  .spot { height: calc(var(--vh, 800px) * 2.4); }
  .spot__pin { gap: 22px; padding-top: 30px; }
  .spot__body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .spot__frame { order: -1; border-radius: 16px; }
  .spot__bar { padding: 9px 12px; gap: 6px; } .spot__bar i { width: 8px; height: 8px; }
  .spot__view { max-height: 34vh; }
  .spot__scan b { top: 10px; font-size: 11px; padding: 4px 9px; }
  .spot__name { margin-bottom: 8px; font-size: 26px; }
  .spot__block { padding: 10px 0; }
  .spot__label { font-size: 13px; margin-bottom: 2px; }
  .spot__block p { font-size: 15px; }
  .spot__foot { margin-top: 12px; gap: 14px; justify-content: space-between; }
  .spot__cta { height: 48px; padding: 0 20px; font-size: 16px; }
  .spot__arrow { width: 44px; height: 44px; }


  .shopx { height: calc(var(--vh, 800px) * 2.4); }
  .shopx__pre { padding: 0 24px; }
  .shopx__disc { left: var(--edge); right: var(--edge); }
  .shopx__in { padding: 0 24px; }
  .shopx__toggle { width: 96px; height: 60px; margin-bottom: 20px; }
  .shopx__k { font-size: 19vw; }
  .shopx__p { margin-top: 26px; font-size: clamp(18px, 4.8vw, 28px); }
  .shopx__cta { height: 58px; padding: 0 26px; margin-top: 30px; font-size: 17px; }

  .studio { height: calc(var(--vh, 800px) * 2); }
  .studio__pin { gap: 44px; }
  .studio__badge { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .steps__item { padding: 0 44px 0 0; gap: 4px; }
  .steps__item::before { right: 0; top: 10px; margin: 0; }
  .steps__t { font-size: clamp(30px, 8.6vw, 54px); }
  .steps__n { font-size: 14px; }
  .steps__line { right: 32px; left: auto; top: 10px; bottom: auto; width: 2px; height: calc(100% - 46px); }
  .steps__line i { width: 100%; height: calc(var(--p, 0) * 100%); }
  .steps__line b { right: auto; left: 50%; top: calc(var(--p, 0) * 100%); width: 24px; height: 24px; margin: -12px 0 0 -12px; }

  .contact { margin: 0 var(--edge); padding: 110px 0 120px; }
  .contact__h { font-size: clamp(46px, 12.5vw, 110px); margin-bottom: 0; }
  .contact__sub { margin-bottom: 44px; }
  .form { width: auto; gap: 30px; }
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .fld > span { font-size: 15px; }
  .fld input, .fld textarea { font-size: 18px; }
  .form__foot { flex-direction: column; align-items: stretch; gap: 18px; }
  .form__send { width: 100%; height: 62px; font-size: 20px; }
  .form__msg { font-size: 17px; text-align: center; }
  .intro__n { font-size: 34vw; }
}

/* Arfilit draws runs of digits as joined capsules (contextual alternates); plain digits read better in labels */
.svc__n, .spot__count, .steps__n, .fld input[type="tel"], .peek__cart { font-variant-ligatures: no-contextual; font-feature-settings: "calt" 0; }
.btn { white-space: nowrap; }
[hidden] { display: none !important; }
.contact__sub { text-align: center; margin: 30px 0 90px; }
@media (max-width: 1023px) { .contact__sub { margin: 16px 0 44px; } }

/* =====================================================================
   Atmosphere (pinned): the statement inside a halo of orbiting projects
   ===================================================================== */
.aura { height: calc(var(--vh, 900px) * 2.6); }
.aura__pin { position: sticky; top: 0; height: var(--vh, 900px); overflow: hidden; display: grid; place-items: center; perspective: 1800px; }
.aura__glow {
  position: absolute; left: 50%; top: 50%; width: 1300px; height: 760px; margin: -380px 0 0 -650px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 189, 44, .32), rgba(251, 189, 44, .08) 60%, transparent);
  filter: blur(30px); opacity: var(--gl, .6); transform: scale(var(--gs, 1)); pointer-events: none;
}
.aura__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.aura__card {
  position: absolute; left: -150px; top: -94px; width: 300px; height: 188px; border-radius: 18px; overflow: hidden;
  background: var(--bg, #1b1c35); box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12);
  will-change: transform, opacity, filter;
}
.aura__card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.aura__card .shot__ph { position: absolute; inset: 0; transform: scale(.47); transform-origin: 0 0; width: 640px; height: 400px; }
.aura__p { position: relative; z-index: 50; width: 1040px; margin: 0; font-family: var(--f-text); font-size: 68px; line-height: 1.18; text-align: center; color: var(--white); text-shadow: 0 6px 40px rgba(18, 19, 37, .9); }
.aura__p b { font-weight: 600; }

/* =====================================================================
   Projects: a browser frame per project; the full-page screenshot scrolls inside it
   ===================================================================== */
.works { position: relative; padding-bottom: 220px; }
.works__head { padding: 200px 0 100px; }
.works__list { display: grid; gap: 170px; width: 1240px; margin: 0 auto; }
.work { display: grid; gap: 30px; opacity: 0; transform: translateY(80px) scale(.96); transition: opacity .9s, transform 1.2s var(--ease-out); }
.work.in { opacity: 1; transform: none; }
.work__frame {
  position: relative; display: block; height: 720px; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 60px 120px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12);
}
.work__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #ececf1; direction: ltr; }
.work__bar i { width: 12px; height: 12px; border-radius: 50%; background: #c9c9d3; }
.work__bar span { margin: 0 auto; padding: 4px 18px; border-radius: 8px; background: #fff; color: #6b6d80; font: 400 15px var(--f-text); }
.work__page { position: absolute; top: 44px; left: 0; width: 100%; height: auto; display: block; }
/* --dist: how much taller the screenshot is than the frame; --dur grows with it (set in JS) */
.work.is-playing .work__page { animation: work-scroll var(--dur, 16s) ease-in-out infinite alternate; }
.work__frame:hover .work__page { animation-play-state: paused; }
@keyframes work-scroll { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(var(--dist, 0) * -1px)); } }
.work__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.work__name { margin: 0 0 12px; font-family: var(--f-head); font-weight: 900; font-size: 56px; line-height: 1; }
.work__go { height: 64px; padding: 0 30px; font-size: 20px; }
.works__inc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.works__inc li { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(251, 189, 44, .55); font-family: var(--f-text); font-size: 19px; color: var(--white); }

/* =====================================================================
   Testimonials: running quote cards
   ===================================================================== */
.testi { padding: 220px 0 200px; overflow: hidden; }
.testi__rows { display: grid; gap: 28px; margin-top: 30px; }
.testi__row { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.testi__run { display: flex; gap: 28px; padding-inline-end: 28px; width: max-content; direction: ltr; will-change: transform; }
.tcardx {
  position: relative; flex: none; width: 560px; min-height: 300px; padding: 44px 44px 36px; border-radius: 30px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--line);
  transition: border-color .3s, transform .5s var(--ease-out), background .3s;
}
.tcardx:hover { border-color: rgba(251, 189, 44, .6); transform: translateY(-8px); }
.tcardx::before { content: "”"; position: absolute; top: -10px; left: 30px; font-family: var(--f-head); font-weight: 900; font-size: 180px; line-height: 1; color: var(--yellow); opacity: .25; }
.tcardx__q { position: relative; margin: 0; font-family: var(--f-text); font-size: 28px; line-height: 1.45; color: var(--white); }
.tcardx__who { display: flex; align-items: center; gap: 16px; font-family: var(--f-text); }
.tcardx__av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--yellow); color: var(--navy); font: 900 26px/1 var(--f-head); }
.tcardx__who b { display: block; font-weight: 600; font-size: 22px; color: var(--white); }
.tcardx__who span { font-size: 18px; color: rgba(255, 255, 255, .6); }
.tcardx__link { margin-inline-start: auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--yellow); }
.tcardx__link .btn__ar { width: 18px; height: 18px; }
.tcardx__link:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* =====================================================================
   Clients who chose us: two rows of logos running opposite ways
   ===================================================================== */
.logos { padding: 200px 0 220px; overflow: hidden; }
.logos .sec-head { margin-bottom: 90px; }
.logos__row { display: flex; overflow: hidden; margin: 0 33px 24px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos__run { display: flex; gap: 24px; padding-inline-end: 24px; width: max-content; direction: ltr; will-change: transform; }
.logos__tile { flex: none; width: 280px; height: 140px; display: grid; place-items: center; }
/* each logo is a mask, so every client shows in one light tone and turns gold on hover */
.logos__logo {
  width: 72%; height: 58%;
  background: rgba(255, 255, 255, .6);
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  transition: background .35s, transform .5s var(--ease-out);
}
.logos__tile:hover .logos__logo { background: var(--yellow); transform: scale(1.08); }

@media (max-width: 1023px) {
  .aura { height: calc(var(--vh, 800px) * 2.2); }
  .aura__p { width: auto; padding: 0 28px; font-size: clamp(26px, 7vw, 54px); }
  .aura__glow { width: 120vw; height: 70vh; margin: -35vh 0 0 -60vw; }
  .aura__card { left: -80px; top: -50px; width: 160px; height: 100px; border-radius: 12px; }
  .aura__card .shot__ph { transform: scale(.25); }


  .testi { padding: 100px 0 90px; }
  .tcardx { width: 300px; min-height: 230px; padding: 28px 24px 22px; border-radius: 22px; }
  .tcardx::before { font-size: 120px; left: 16px; }
  .tcardx__q { font-size: 17px; }
  .tcardx__av { width: 42px; height: 42px; font-size: 20px; }
  .tcardx__who b { font-size: 16px; } .tcardx__who span { font-size: 14px; }

  .logos { padding: 100px 0 110px; }
  .logos .sec-head { margin-bottom: 44px; }
  .logos__row { margin: 0 var(--edge) 14px; }
  .logos__tile { width: 160px; height: 84px; }
  .logos__run { gap: 14px; padding-inline-end: 14px; }
}
.logos__row, .testi__row { direction: ltr; }   /* the runs loop from the left edge; the cards keep dir="rtl" */
.band__strip { direction: ltr; }   /* the runs loop from the left edge (same as the logo rows) */

/* services peek: apps & systems */
.peek--app { background: #f4f4f7; }
.peek--app .peek__side { right: 0; top: 0; bottom: 0; width: 80px; border-radius: 0; background: #121325; }
.peek--app .peek__kpi { top: 24px; width: 86px; height: 60px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.peek--app .peek__kpi:nth-of-type(2) { right: 100px; } .peek--app .peek__kpi:nth-of-type(3) { right: 196px; } .peek--app .peek__kpi:nth-of-type(4) { right: 292px; background: #fbbd2c; }
.peek--app .peek__chart { right: 100px; top: 100px; width: 230px; height: 170px; border-radius: 14px; background: linear-gradient(to top, rgba(251, 189, 44, .5) 0 30%, transparent 30%) 20px 100% / 30px 100% no-repeat, linear-gradient(to top, rgba(251, 189, 44, .8) 0 60%, transparent 60%) 70px 100% / 30px 100% no-repeat, linear-gradient(to top, #121325 0 45%, transparent 45%) 120px 100% / 30px 100% no-repeat, linear-gradient(to top, rgba(251, 189, 44, .9) 0 80%, transparent 80%) 170px 100% / 30px 100% no-repeat, #fff; }
.peek--app .peek__phone { left: 22px; top: 70px; width: 90px; height: 190px; border-radius: 18px; background: linear-gradient(#fbbd2c 0 30%, #fff 30%); border: 5px solid #121325; }

.sample-badge { position: relative; z-index: 5; width: max-content; max-width: 90%; margin: 0 auto 30px; padding: 10px 20px; border-radius: 999px; border: 1px dashed rgba(251, 189, 44, .7); background: rgba(251, 189, 44, .1); color: var(--yellow); font: 400 18px/1.3 var(--f-text); text-align: center; }
.works > .sample-badge { margin-top: 60px; }
.spot__pin > .sample-badge { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); }
@media (max-width: 1023px) { .sample-badge { font-size: 13px; padding: 8px 14px; } }

@media (max-width: 1023px) {
  .works { padding-bottom: 100px; }
  .works__head { padding: 100px 0 44px; }
  .works__list { width: auto; padding: 0 var(--edge); gap: 70px; }
  .work__frame { height: min(118vw, 560px); border-radius: 16px; }
  .work__bar { height: 30px; padding: 0 12px; gap: 6px; } .work__bar i { width: 8px; height: 8px; } .work__bar span { font-size: 11px; padding: 2px 10px; }
  .work__page { top: 30px; }
  .work__name { font-size: clamp(28px, 8vw, 44px); margin-bottom: 8px; }
  .work__go { height: 50px; padding: 0 22px; font-size: 16px; }
  .works__inc li { padding: 5px 12px; font-size: 14px; }
}

/* =====================================================================
   Laptop after the hero: a closed MacBook that scrolls in, turns and opens, showing a project
   (geometry in canvas px; sections.js moves the rig, opens the lid and plays the screen)
   ===================================================================== */
/* its own scene right after the hero: scrolls in closed, opens while pinned, then the projects follow */
.mac { position: relative; z-index: 3; height: calc(var(--vh, 953px) * 2.4); pointer-events: none; }
.mac__stage { position: sticky; top: 0; height: var(--vh, 953px); overflow: hidden; perspective: 4000px; perspective-origin: 50% 200px; }
.mac__glow { position: absolute; left: 50%; top: 0; width: 1500px; height: 620px; margin: -310px 0 0 -750px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 189, 44, .34), rgba(240, 122, 44, .12) 55%, rgba(251, 189, 44, 0)); filter: blur(40px); opacity: .3; will-change: transform, opacity; }
.mac__rig { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* lid: the screen side and the aluminium back */
.mac__lid { position: absolute; left: -480px; top: -600px; width: 960px; height: 600px; transform-origin: 50% 100%; transform: rotateX(-88.8deg); transform-style: preserve-3d; }
.mac__screen, .mac__back { position: absolute; inset: 0; border-radius: 30px 30px 12px 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mac__screen { background: #040406; overflow: hidden;
  box-shadow: inset 0 0 0 2px #5a5c67, inset 0 0 0 4px #0b0b0f, 0 50px 140px rgba(0, 0, 0, .6); }
.mac__notch { position: absolute; left: 50%; top: 4px; z-index: 2; width: 136px; height: 26px; margin-left: -68px; border-radius: 0 0 14px 14px; background: #040406; }
.mac__notch i { position: absolute; left: 50%; top: 9px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #10131d; box-shadow: inset 0 0 0 2px #1f2433, 0 0 0 1px #08090c; }
.mac__view { position: absolute; inset: 15px 15px 30px; overflow: hidden; border-radius: 12px 12px 3px 3px; background: #fff; }
.mac__page { display: block; width: 100%; height: auto; will-change: transform; }
.mac__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.mac__glare { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .12) 0 18%, rgba(255, 255, 255, 0) 36%); pointer-events: none; }
.mac__back { transform: rotateY(180deg); display: grid; place-items: center; color: rgba(255, 255, 255, .22);
  background: radial-gradient(120% 90% at 50% 0%, #4d4f5a, #2e3038 55%, #23242b); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), inset 0 -30px 60px rgba(0, 0, 0, .35); }
.mac__back svg { width: 140px; height: auto; transform: scaleY(-1); }

/* base: keyboard deck, front lip with the thumb notch, and the shadow on the floor */
.mac__deck, .mac__front, .mac__shadow, .mac__notch, .mac__glare { opacity: var(--body, 1); }
.mac__deck { position: absolute; left: -530px; top: 0; width: 1060px; height: 600px; transform-origin: 50% 0; transform: rotateX(90deg);
  border-radius: 0 0 34px 34px; background: linear-gradient(180deg, #2b2c34, #3a3c46 55%, #454752);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09), inset 0 2px 0 rgba(0, 0, 0, .6); }
.mac__keys { position: absolute; left: 100px; right: 100px; top: 40px; height: 300px; border-radius: 12px; background: #101116;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 56px, transparent 56px 62px), repeating-linear-gradient(180deg, #000 0 52px, transparent 52px 60px);
  -webkit-mask-composite: source-in; mask: repeating-linear-gradient(90deg, #000 0 56px, transparent 56px 62px) intersect, repeating-linear-gradient(180deg, #000 0 52px, transparent 52px 60px); }
.mac__pad { position: absolute; left: 50%; bottom: 36px; width: 400px; height: 210px; margin-left: -200px; border-radius: 16px; background: linear-gradient(180deg, #3f414b, #464853); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.mac__front { position: absolute; left: -530px; top: 0; width: 1060px; height: 24px; transform: translateZ(600px); border-radius: 0 0 26px 26px / 0 0 22px 22px;
  background: linear-gradient(180deg, #a7a9b4 0, #6c6e79 3px, #3d3f49 45%, #1f2026); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.mac__front i { position: absolute; left: 50%; top: 0; width: 170px; height: 8px; margin-left: -85px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #1c1d22, #2c2d34); }
.mac__shadow { position: absolute; left: -560px; top: 10px; width: 1120px; height: 70px; transform: translateZ(600px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); filter: blur(10px); }

.mac__cap { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; gap: 14px; text-align: center; opacity: 0; pointer-events: auto; }
.mac__name { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 44px; line-height: 1.1; color: var(--white); }
.mac__name:empty { display: none; }
.mac__go { height: 60px; padding: 0 32px; margin-top: 6px; font-size: 19px; }

@media (max-width: 1023px) {
  .mac { height: calc(var(--vh, 800px) * 2.1); }
  .mac__glow { width: 700px; height: 300px; margin: -150px 0 0 -350px; }
  .mac__name { font-size: clamp(24px, 6.4vw, 34px); }
  .mac__go { height: 50px; padding: 0 24px; font-size: 16px; }
  .mac__cap { gap: 10px; padding: 0 var(--edge); }
}

/* the wall's sticky stage starts exactly where the laptop's lets go, so the laptop screen becomes its centre card */
.showcase { margin-top: calc(var(--vh, 953px) * -1); }

/* a huge, faint Weisboard behind the laptop (fades in as it opens, out as the wall takes over) */
.mac__logo { position: absolute; left: 50%; top: 0; width: 1640px; height: auto; margin-left: -820px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
@media (max-width: 1023px) {
  .mac__logo { width: 92vw; margin-left: -46vw; }
}