/* Root size scales with the viewport exactly like the reference: 16px, then vw-based below 1440 / 992 / 576 */
html { font-size: 16px; }
@media (max-width: 1440px) { html { font-size: 1.1111111vw; } }
@media (max-width: 992px)  { html { font-size: 1.6129032vw; } }
@media (max-width: 576px)  { html { font-size: 4.1025641vw; } }

:root {
  /* brand palette = the previous site's Tailwind theme (tailwind.config.js primary / indigo) */
  --brand: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --dark: #1e1b4b;   /* primary-950, used where the layout needs a dark section */
  --ink: #18181b;
  --green: #22c55e;
  --grey-50: #9e9e9e;
  --grey-100: #eaeaea;
  --grey-150: #d0d0d0;
  --grey-200: #bcbcbc;
  --grey-300: #818181;
  --H: 100vh; /* real viewport height, set by main.js */
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --alt: 'Outfit', var(--sans);      /* stand-in for Mazzard M */
  --wide: 'Krona One', var(--sans);  /* stand-in for ARP */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
a:focus-visible, button:focus-visible, .choice input:focus-visible + span { outline: 2px solid #7b6cf6; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { opacity: .5; }
.dot { display: inline-block; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--green); }
.chip { display: inline-block; background: var(--brand); border-radius: 3.125rem; padding: .3125rem .625rem; color: #fff; font-size: 1.0625rem; letter-spacing: -.03em; white-space: nowrap; transition: opacity .3s; }
.chip:hover { opacity: .8; }

/* ---------- Text effects ---------- */
/* hover roll: label slides up, copy rolls in from below */
.roll { position: relative; display: inline-flex; overflow: hidden; vertical-align: top; }
.roll__ghost { opacity: 0; white-space: nowrap; }
.roll__tr { position: absolute; inset: 0; display: flex; flex-direction: column; }
.roll__tr > span { white-space: nowrap; transition: transform .5s ease; }
.roll__tr > span:last-child { transform: translateY(50%) rotate(-10deg); }
:hover > .roll .roll__tr > span:first-child { transform: translateY(-150%) rotate(-10deg); }
:hover > .roll .roll__tr > span:last-child { transform: translateY(-100%); }

/* letter-by-letter rise */
.spell .w { display: inline-block; white-space: nowrap; }
.spell .l { display: inline-block; opacity: 0; transform: translateY(var(--spell-tr, 1.875rem));
  transition: transform var(--spell-dur, .3s) 0s, opacity .5s 0s; }
.is-in > .spell .l, .spell.is-in .l, .is-active .spell:not(.manual) .l {
  opacity: 1; transform: none;
  transition: transform var(--spell-dur, .3s) calc(var(--spell-delay, .3s) + var(--i) * var(--spell-step, .02s)),
              opacity .5s calc(var(--spell-delay, .3s) + var(--i) * var(--spell-step, .02s)); }

/* line tilts in when its section becomes active */
.tilt { display: block; opacity: 0; transform: rotate(3deg) translateY(3.125rem); transition: transform 0s .75s, opacity 0s .75s; }
.is-active .tilt { opacity: 1; transform: none; transition: transform .7s ease calc(.4s + var(--d, 0) * .1s), opacity .7s calc(.4s + var(--d, 0) * .1s); }

/* hero load-in */
.rise { display: inline-block; opacity: 0; transform: translateY(2.5rem); transition: transform .5s ease calc(.6s + var(--d) * .1s), opacity .5s ease calc(.6s + var(--d) * .1s); }
.is-loaded .rise { opacity: 1; transform: none; }

/* form rows rise in */
.tr { opacity: 0; transform: translateY(6.25rem); transition: transform 0s .7s, opacity 0s .7s; }
.is-active .tr { opacity: 1; transform: none; transition: transform .5s ease calc(.6s + var(--t) * .05s), opacity .3s calc(.6s + var(--t) * .05s); }

.underlink { position: relative; }
.underlink::before, .underlink::after { content: ''; position: absolute; left: 50%; top: calc(100% + 4px); height: 1px; width: 100%; background: currentColor; transform: translateX(-50%); }
.underlink::before { opacity: .3; }
.underlink::after { width: 0; transition: width .5s ease; }
.underlink:hover::after { width: 100%; }

/* ---------- Scroll controller layers ---------- */
.controller { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
.section { position: absolute; inset: 0; height: var(--H); overflow: hidden; background: #fff; transform: translate3d(0, 100%, 0); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.section.is-active { transform: none; }
.section.is-prev { transform: translate3d(0, -100%, 0); }
.section--black { background: var(--dark); }
.no-anim .section { transition: none !important; }
.inner { position: relative; will-change: transform; }
.pin { position: relative; height: calc(var(--len, 1) * var(--H)); }
.pin__stage { position: relative; height: var(--H); overflow: hidden; will-change: transform; }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 3rem 3.125rem .75rem; pointer-events: none; color: #000; transition: color .3s; }
.header > * { pointer-events: auto; }
.header.is-light, .flash-on .header { color: #fff; }
.header.menu-open { color: #000; }
.logo { display: flex; align-items: flex-end; font-family: var(--alt); font-weight: 700; font-size: 2.125rem; line-height: 2.6875rem; letter-spacing: -.02em; }
.logo img { display: block; width: 12.5rem; height: auto; transition: filter .3s; } /* 200px at 1440/992/390 wide, like the old navbar's <Image width={200}> */
.header.is-light .logo img, .flash-on .header .logo img { filter: brightness(0) invert(1); }
.header.menu-open .logo img { filter: none; }
.nav { position: absolute; left: 50%; top: 3.625rem; display: flex; gap: 5.1875rem; font-size: 1.1875rem; line-height: 1.5rem; transform: translateX(-50%); }
/* "Services" dropdown: opens on hover or keyboard focus (phones and tablets use the menu's Services list) */
.nav__drop { position: relative; }
.nav__drop > a { display: inline-flex; align-items: center; gap: .4rem; }
.nav__drop > a svg { width: .625rem; height: .375rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s; }
.nav__drop:hover > a svg, .nav__drop:focus-within > a svg { transform: rotate(180deg); }
.nav__panel { position: absolute; left: 50%; top: calc(100% + 1.25rem); width: 21rem; padding: .5rem; border-radius: 1.25rem; background: #fff; color: var(--ink); box-shadow: 0 1.5rem 3.5rem rgba(30, 27, 75, .16); opacity: 0; visibility: hidden; transform: translate(-50%, .5rem); transition: opacity .25s, transform .25s, visibility .25s; }
.nav__panel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.25rem; } /* hover bridge */
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__panel a { display: block; padding: .875rem 1rem; border-radius: .875rem; transition: background-color .2s; }
.nav__panel a:hover, .nav__panel a:focus-visible, .nav__panel a[aria-current] { background: var(--brand-50); }
.nav__panel b { display: block; font-size: 1.0625rem; font-weight: 600; }
.nav__panel span { display: block; margin-top: .25rem; color: var(--grey-300); font-size: .875rem; line-height: 1.4; }
.header__buttons { display: flex; align-items: center; }
.talk { display: flex; align-items: center; padding: .75rem 1rem .5625rem .8125rem; border: 2px solid var(--brand); background: var(--brand); color: #fff; border-radius: 1.4375rem; font-family: var(--alt); font-size: 1rem; font-weight: 500; line-height: 1.1875rem; }
.talk span { padding-left: .5625rem; white-space: nowrap; }
.header.is-light:not(.menu-open) .talk { border-color: #fff; } /* keeps the pill visible on indigo sections */
.burger { display: flex; align-items: center; height: 2.5rem; margin-left: 1.5625rem; padding: 0; overflow: hidden; background: none; border: 0; cursor: pointer; }
.burger__text { display: flex; flex-direction: column; transform: translateY(-1.5rem); transition: transform .3s ease; }
.burger__text span { margin: .6875rem 0; font-family: var(--alt); font-size: 1.25rem; font-weight: 500; line-height: 1.5rem; }
.burger[aria-expanded="true"] .burger__text { transform: translateY(1.5rem); }
.burger__lines { position: relative; width: 1.9375rem; height: 1.9375rem; margin-left: .625rem; }
.burger__lines i { position: absolute; left: 0; top: 50%; width: 1.9375rem; height: .125rem; border-radius: .125rem; background: currentColor; transition: transform .3s ease, width .3s, height .3s; }
.burger__lines i:first-child { transform: translateY(-.3125rem); }
.burger__lines i:last-child { transform: translateY(.125rem); }
.burger[aria-expanded="true"] .burger__lines i { width: 1.5rem; height: .09375rem; }
.burger[aria-expanded="true"] .burger__lines i:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child { transform: rotate(-45deg); }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; justify-content: center; padding: 0 3.125rem 2rem;
  background: linear-gradient(203.7deg, #fff 48.1%, var(--brand-50) 86.02%);
  opacity: 0; visibility: hidden; transform: translate(10%, -150%) rotate(12deg) scale(1.5);
  transition: transform .75s ease, visibility .75s ease, opacity .3s .5s; }
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: transform .75s ease, visibility .75s ease, opacity .3s; }
.menu__content { display: flex; align-items: center; }
.menu__label { display: block; margin-bottom: .8rem; color: var(--grey-200); font-size: 1rem; }
.menu__social, .menu__img, .menu__folder { opacity: 0; transform: translateY(-100px); transition: transform .75s ease .3s, opacity .75s .3s; }
.menu.is-open :is(.menu__social, .menu__img, .menu__folder) { opacity: 1; transform: none; }
.menu__social { display: flex; flex-direction: column; gap: .9rem; padding-right: 18.5rem; font-size: 1rem; }
/* Instagram / LinkedIn links (menu + footer): logo, then the rolling label; hovering anywhere on the link rolls it */
.social-link { display: inline-flex; align-items: center; gap: .625rem; width: fit-content; }
.social-icon { flex: none; width: 1.25em; height: 1.25em; transition: transform .3s ease; }
.social-link:hover .social-icon { transform: scale(1.12); }
.social-link:hover .roll__tr > span:first-child { transform: translateY(-150%) rotate(-10deg); }
.social-link:hover .roll__tr > span:last-child { transform: translateY(-100%); }
.menu__img { position: relative; flex: none; width: 21.1875rem; height: 29.5625rem; overflow: hidden; background: var(--dark); }
.menu__img i { position: absolute; inset: 0; transform: translateY(100%); transition: transform .5s ease; }
.menu__img i:nth-child(1) { background: var(--brand-100); } .menu__img i:nth-child(2) { background: var(--brand-200); }
.menu__img i:nth-child(3) { background: var(--brand-600); } .menu__img i:nth-child(4) { background: var(--brand); }
.menu__img i:nth-child(5) { background: #818cf8; } .menu__img i:nth-child(6) { background: var(--brand-700); }
.menu__img i:nth-child(7) { background: var(--brand-300); }
.menu__img[data-h="1"] i:nth-child(1), .menu__img[data-h="2"] i:nth-child(2), .menu__img[data-h="3"] i:nth-child(3),
.menu__img[data-h="4"] i:nth-child(4), .menu__img[data-h="5"] i:nth-child(5), .menu__img[data-h="6"] i:nth-child(6),
.menu__img[data-h="7"] i:nth-child(7) { transform: none; }
.menu__folder { display: flex; flex-direction: column; padding-left: 12.9375rem; }
.menu__folder a { margin: .3rem 0; font-size: min(3.5rem, 6vh); line-height: 1.22; } /* 7 items must clear the header on short screens */
.menu__bottom { position: absolute; left: 3.125rem; right: 3.125rem; bottom: 2rem; display: flex; justify-content: space-between; align-items: flex-end; font-size: 1rem; opacity: 0; transition: opacity .3s .5s; }
.menu.is-open .menu__bottom { opacity: 1; }
.menu__cp { text-align: right; line-height: 1.6; white-space: nowrap; }

/* ---------- 0 · Hero ---------- */
/* first row fills exactly one viewport (minus the top padding), so the showreel starts below the fold */
.main { --pad-x: 9.375rem; --pad-y: 15.0625rem; display: grid; grid-template-rows: minmax(calc(var(--H) - var(--pad-y)), auto) auto; min-height: var(--H); padding: var(--pad-y) var(--pad-x) 0; background: #fff; }
.main__content { display: flex; justify-content: space-between; align-self: start; }
.main__texts { width: 56.3125rem; }
.main__title { font-size: 3.4375rem; font-weight: 400; line-height: 4.125rem; }
.main__title .rise { display: block; }
.main__row { display: flex; align-items: center; padding-top: 1.875rem; }
.main__status { display: flex; align-items: center; gap: .625rem; min-width: 14rem; padding-right: 3.75rem; font-size: .84375rem; line-height: 1.0125rem; letter-spacing: -.02em; }
.main__status .dot { width: .625rem; height: .625rem; box-shadow: 0 0 0 .3rem rgba(34, 197, 94, .25); }
.main__sub { color: var(--grey-200); font-size: 1rem; font-weight: 500; line-height: 1.25rem; }
.main__points { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding-top: 1.4375rem; }
.eye { width: 8.3125rem; height: 8.125rem; padding: 0; background: none; border: 0; cursor: pointer; opacity: 0; transform: scale(.3); transition: transform 2s ease, opacity 1s; }
.is-loaded .eye { opacity: 1; transform: none; }
.eye svg { width: 100%; height: 100%; overflow: visible; }
.eye text { fill: var(--brand-300); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.eye__ring { transform-origin: 66.5px 65px; animation: spin 18s linear infinite; }
.eye__lid { transform-origin: 66.5px 66px; animation: blink 5s infinite; }
.main__image { margin: 0 calc(var(--pad-x) * -1); }
.image-clip { width: 100vw; height: var(--H); max-height: 0; overflow: hidden; transition: max-height 3s ease; }
.is-loaded .image-clip { max-height: var(--H); }
.image-sub { position: relative; width: 100vw; height: var(--H); transform: scale(var(--s, .8828)); }
.reel { position: absolute; inset: 0; background:
  radial-gradient(40% 30% at 50% 78%, #c7d2fe 0, transparent 70%),
  radial-gradient(70% 45% at 50% 85%, #6366f1 0, transparent 70%),
  radial-gradient(120% 90% at 50% 0%, #818cf8 0, #4f46e5 60%, #312e81 100%); }
.play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: .5px solid #000; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.play i { border-left: .75rem solid #000; border-top: .375rem solid transparent; border-bottom: .375rem solid transparent; opacity: .5; transform: translateX(.125rem); }

/* ---------- 1 · About ---------- */
.about { background: #fff; }
.about__scroll { display: flex; align-items: center; width: max-content; height: var(--H); transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); }
.about__title { display: flex; flex-direction: column; width: 31.25rem; min-width: 29rem; margin: 0 9.5rem 0 15.5rem; font-size: 5.125rem; font-weight: 500; line-height: normal; }
.cards { display: flex; gap: 1.5rem; margin-right: 3.75rem; transition: transform .7s ease; }
.section.is-next .cards { transform: translateX(50vw); }
.section.is-active .cards { transition: transform .5s ease .6s; }
.card { position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  width: 67.375rem; height: calc(var(--H) - 9.5rem); margin-top: 7.5rem; padding: 5rem 1.4375rem 5.0625rem 4.625rem; border-radius: 3rem; background: var(--bg); }
.card__circles { position: absolute; left: -30rem; top: 12.5rem; transform: rotate(-45deg); }
.card__circles i { position: absolute; top: 0; width: 36.4375rem; height: 36.4375rem; border: 1px solid var(--grey-150); border-radius: 50%; }
.card__circles i:last-child { left: 22.5625rem; }
.card__top { position: relative; display: flex; justify-content: flex-end; }
.card__img { width: calc(var(--H) * .6); min-width: 28.125rem; height: calc(var(--H) * .3); border-radius: 13.5625rem; background:
  radial-gradient(circle at 35% 30%, #fff, var(--b1) 55%, transparent 57%) 8% 40% / 7rem 7rem no-repeat,
  radial-gradient(circle at 35% 30%, #fff, var(--b1) 55%, transparent 57%) 36% 90% / 10rem 10rem no-repeat,
  radial-gradient(circle at 35% 30%, #fff, var(--b1) 55%, transparent 57%) 62% 10% / 8.5rem 8.5rem no-repeat,
  radial-gradient(circle at 35% 30%, #fff, var(--b1) 55%, transparent 57%) 90% 75% / 6rem 6rem no-repeat,
  radial-gradient(circle at 50% 50%, var(--b2), #fff 70%);
  animation: float 9s ease-in-out infinite alternate; }
.card__bottom { position: relative; }
.card h3 { width: 52.5rem; padding: 2rem 0 .9375rem; font-size: 5rem; font-weight: 500; line-height: 5.75rem; }
.card__text { display: flex; align-items: flex-start; }
.card__text p { flex: 1; margin-right: 15.625rem; color: var(--grey-300); font-size: 1.25rem; line-height: 1.5625rem; }
.card__index { margin: auto 3.1875rem 0 0; color: var(--grey-150); font-size: 5rem; font-weight: 500; line-height: normal; }

/* ---------- 2 · We create ----------
   Geometry and motion mirror the reference exactly. Everything inside .view-position is sized in em
   (1em = 1rem on desktop) so the whole interface scales to the phone size with one font-size change. */
.wc { background: #f8fafc; text-transform: uppercase; }
.wc__slider { display: flex; width: 400vw; height: 100%; will-change: transform; }
.wc__view { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100%; font-size: 7.5rem; font-weight: 700; }
.wc__view h2 { font: inherit; line-height: normal; }
.sub { position: absolute; opacity: 0; line-height: normal; }
.sub > span { display: block; overflow: hidden; }
.sub > span::before { content: attr(data-text); display: block; }
.sub:nth-child(1) > span { transform: translateY(-75%); }
.sub:nth-child(2) > span { transform: translateY(-115%); }
.sub:nth-child(1) > span::before, .sub:nth-child(2) > span::before { transform: translateY(45%); }
.sub:nth-child(4) > span { transform: translateY(100%); }
.sub:nth-child(5) > span { transform: translateY(140%); }
.sub:nth-child(4) > span::before, .sub:nth-child(5) > span::before { transform: translateY(-55%); }
.is-active.from-prev .sub:nth-child(1), .is-active.from-prev .sub:nth-child(4) { animation: echo1 .5s .75s; }
.is-active.from-prev .sub:nth-child(2), .is-active.from-prev .sub:nth-child(5) { animation: echo2 .5s .75s; }

.view-grid { position: absolute; inset: 0; opacity: 0;
  background-image: linear-gradient(#e2e8f0 2px, transparent 2px), linear-gradient(90deg, #e2e8f0 2px, transparent 2px);
  background-size: 8rem 8rem; background-position: 2.5rem 50%; }
.wc__ruler { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; width: 2.5rem; padding: 0 .5rem; color: #cbd5e1; font-size: 1.375rem; font-weight: 500; }
.wc__ruler span { position: relative; }
.wc__ruler span::after { content: ''; position: absolute; left: 0; top: 4rem; width: 1.5rem; height: 2px; background: #cbd5e1; }
.wc__dash { position: absolute; }
.wc__dash--h { left: 2.5rem; right: 0; top: 50%; border-top: 2px dashed #cfcfcf; }
.wc__dash--v { top: 0; bottom: 0; left: 50%; border-left: 2px dashed #cfcfcf; }

.view-position { position: relative; width: 50.125em; height: 37.5625em; font-size: 1rem; }
.interface { position: absolute; left: 0; top: 0; width: 50.125em; height: 37.5625em; color: #fff; font-weight: 400; text-transform: none; pointer-events: none; }
.interface__container, .interface__content, .interface__mode, .interface__trx, .interface__background,
.interface__stage-1, .interface__stage-2, .interface__stage-3 { position: absolute; left: 0; top: 0; width: 50.125em; height: 37.5625em; overflow: hidden; }
.interface__content { opacity: 0; }
.interface__mode { left: 50%; top: 50%; border-radius: 2.25em; transform: translate(-50%, -50%); }
.interface__background { background: #17181b; }
.interface__stage-2, .interface__stage-3 { opacity: 0; }
.interface .object { position: absolute; }
.interface__stage-2 .tasks    { left: 3.6107em;  top: 18.2507em; width: 45.4523em; height: 19.3118em; }
.interface__stage-2 .d-header { left: 4.0886em;  top: 1.0611em;  width: 44.9744em; height: 1.6977em; }
.interface__stage-2 .options  { left: 8.8144em;  top: 15.3858em; width: 40.2487em; height: 1.5916em; }
.interface__stage-2 .row      { left: 4.0886em;  top: 3.9791em;  width: 44.8682em; height: 5.9951em; }
.interface__stage-2 .title    { left: 4.0886em;  top: 11.3536em; width: 12.372em;  height: 5.6768em; }
.interface__stage-2 .sidebar  { left: .1062em;   top: .0531em;   width: 2.9735em;  height: 37.3503em; }
.interface__stage-3 .options  { left: 33.2928em; top: 15.4919em; width: 15.7703em; height: 5.5177em; }
.interface__stage-3 .m-header { left: 42.9567em; top: 1.1141em;  width: 5.4691em;  height: 1.5386em; }
.interface .logo { position: absolute; font-size: 1em; /* undo the header .logo size */ left: .7434em; top: 1.0611em; width: 1.7523em; height: 1.8038em; border: .22em solid #fff; border-radius: 50%; }
.interface__slot { position: absolute; left: 20.9208em; top: 26.5272em; width: 10.9914em; height: 7.5868em; overflow: hidden; border-radius: 1em; }
.interface__tag { position: absolute; left: 50%; top: 100%; width: 23.625rem; height: 4.4375rem; overflow: hidden; border-radius: 2.1875rem; background: #fff; color: #000;
  opacity: 0; transform: translate(-50%, .625rem) scale(.5); transition: opacity .5s ease, transform .5s ease; }
.interface__tag.is-on { opacity: 1; transform: translate(-50%, .625rem) scale(1); }
.interface__tag > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; font-size: 1.125rem; font-weight: 500; text-transform: uppercase; white-space: nowrap; }

/* artwork: an <img>/<video> dropped into any piece, the slot, a cursor or the grid fills it (as in the reference) */
.interface img, .interface video, .wc__cursors img, .view-grid img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* placeholder drawings (delete each once its artwork is in) */
.proto { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: .75em; height: 100%; padding: .75em .75em .75em 3.6em; background: #1d1e22; }
.sk-col { display: flex; flex-direction: column; gap: .6em; padding: .7em; border-radius: 1em; background: #25272b; }
.sk-col i, .sk-chips i, .sk-foot i { display: block; border-radius: 1em; background: #34363b; }
.sk-bar { width: 70%; height: .7em; }
.sk-card { flex: 1; border-radius: .9em !important; background: #2d2f34 !important; }
.sk-card--s { flex: .45; }
.sk-chips { display: flex; gap: .3em; } .sk-chips i { flex: 1; height: 1.1em; }
.sk-line { height: .45em; } .sk-line--s { width: 40%; }
.sk-gap { flex: 1; }
.sk-foot { display: flex; gap: .3em; } .sk-foot i { width: 1.3em; height: 1.3em; border-radius: 50%; }
.tasks { display: flex; gap: .7em; }
.tasks > .ph-col { font-size: .7em; }
.ph-col { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: .9em; border-radius: 1.2em; background: #1f2024; }
.ph-col > i { width: 35%; height: .7em; border-radius: .4em; background: #34363b; }
.ph-col b { display: flex; flex-direction: column; gap: .6em; padding: 1em; border-radius: 1em; background: #28292e; font-weight: 600; }
.ph-col b::after { content: ''; height: .5em; border-radius: .3em; background: #3a3c42; }
.ph-col em { font-style: normal; }
.ph-card { flex: 1; }
.ph-card::after { display: none; }
.ph-tags { display: flex; gap: .4em; font-weight: 400; }
.ph-tags u { padding: .2em .6em; border-radius: .5em; background: #1f3b33; color: #6ee7b7; text-decoration: none; }
.ph-tags u + u { background: #1d2f4a; color: #7fb2ff; }
.d-header { display: flex; justify-content: space-between; align-items: center; }
.ph-search { width: 40%; height: 100%; border-radius: 1em; background: #25272c; }
.ph-icons { display: flex; gap: .5em; } .ph-icons i { width: 1.5em; height: 1.5em; border-radius: 50%; background: #2f3136; }
.ph-icons i:last-child { background: linear-gradient(135deg, #f9c58d, #c46a6a); }
.row { display: flex; gap: .6em; }
.row b { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .3em; padding: 0 1.1em; border-radius: .9em; background: #212226; font-size: .95em; font-weight: 600; }
.row small, .title small { color: #8b8d93; font-size: .62em; font-weight: 400; }
.title { display: flex; flex-direction: column; justify-content: center; gap: .3em; }
.title em { color: #f5c851; font-style: normal; }
.title strong { font-size: 2.05em; font-weight: 600; line-height: 1; white-space: nowrap; }
.interface__stage-2 .options { display: flex; align-items: center; justify-content: space-between; }
.interface .options > * { font-size: .62em; }
.ph-filter { padding: .45em 1em; border-radius: 1em; background: #222327; color: #8b8d93; }
.ph-tabs { display: flex; gap: .3em; padding: .25em; border-radius: 1em; background: #222327; color: #8b8d93; }
.ph-tabs i { padding: .35em .8em; border-radius: .8em; font-style: normal; }
.ph-tabs .on { background: #34363b; color: #fff; }
.ph-add { padding: .45em 1em; border-radius: 1em; background: #2f7bff; color: #fff; }
.interface__stage-3 .options { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: .3em 0; }
.m-header { display: flex; justify-content: flex-end; align-items: center; gap: .35em; }
.m-header i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #2f3136; }
.m-header i:last-child { background: linear-gradient(135deg, #f9c58d, #c46a6a); }
.sidebar { display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding-top: 5em; background: #1b1c1f; }
.sidebar i { width: 1.1em; height: 1.1em; border-radius: .35em; background: #34363b; }
.slot-art { position: absolute; inset: 0; background:
  radial-gradient(14% 22% at 76% 30%, #fff6d8 0, #ffd9a8 40%, transparent 70%),
  radial-gradient(30% 50% at 30% 100%, #160f3f 0, transparent 70%),
  radial-gradient(35% 40% at 80% 100%, #1e1650 0, transparent 70%),
  linear-gradient(180deg, #f4b7c9 0%, #c9a4e0 38%, #7f73d6 62%, #3a3197 82%, #1d1a5c 100%); }

.wc__cursors { position: absolute; inset: 0; pointer-events: none; }
.wc__cursors .object { position: absolute; left: 0; top: 0; width: 4.25rem; height: 2.625rem; text-transform: none; will-change: transform; }
.wc__cursors .object::before { content: ''; position: absolute; left: 0; top: 0; width: 1rem; height: 1.15rem; background: var(--c); clip-path: polygon(0 0, 100% 62%, 52% 64%, 30% 100%); }
.wc__cursors span { position: absolute; left: .9rem; top: 1.1rem; padding: .15rem .45rem; border-radius: .35rem; background: color-mix(in srgb, var(--c) 30%, #fff); color: color-mix(in srgb, var(--c) 70%, #000); font-size: .7rem; font-weight: 500; white-space: nowrap; }

/* "WE CREATE" flash */
.flash { position: fixed; inset: 0; z-index: 950; overflow: hidden; background: var(--dark); pointer-events: none; visibility: hidden; }
.flash-on .flash { visibility: visible; animation: flash .75s forwards; }
.flash__rows { position: absolute; left: -15vw; top: 50%; width: 130vw; transform: translateY(-50%) rotate(-15deg); }
.flash__rows div { height: 13.1875rem; overflow: hidden; color: var(--brand-200); font-size: 11rem; font-weight: 700; line-height: 13.1875rem; white-space: nowrap; }
.flash__rows div:nth-child(even) { color: var(--brand-300); }
.flash-on .flash__rows div span { display: inline-block; animation: rowMove 1.5s linear infinite; }
.flash-on .flash__rows div:nth-child(2) span { animation-duration: .75s; }
.flash-on .flash__rows div:nth-child(3) span { animation-duration: 1.25s; }
.flash-on .flash__rows div:nth-child(4) span { animation-duration: .9s; }

/* ---------- 3 · Statement ---------- */
.designers { display: grid; place-items: center; background: var(--brand-100); }
.designers__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 90rem; font-size: 6rem; font-weight: 700; line-height: 8.375rem; text-align: center; transform: translateY(9.375rem); transition: transform .5s ease; }
.is-active .designers__text { transform: none; transition: transform 1s ease; }
.designers__text .hl { color: var(--brand); }
.designers__text .d3 { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.gap { position: relative; display: inline-block; flex: none; width: var(--gapw, 0px); height: 8.375rem; }
.avatars { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; width: var(--gapw, 0px); padding: .3125rem; overflow: hidden; border-radius: 3.6875rem; background: #fff; opacity: var(--av, 0); transform: translate(-50%, -50%); }
.avatars i, .avatars b { flex: none; width: 4.375rem; height: 4.375rem; margin-right: -.5rem; border: 2px solid #fff; border-radius: 50%; }
.avatars i { background: #eee var(--img) center / cover; }
.avatars b { display: grid; place-items: center; background: #fff; }
.avatars b img { width: 62%; }
.reveal { position: absolute; left: 50%; top: 50%; color: rgba(0, 0, 0, var(--ra, .3)); opacity: var(--ro, 0); white-space: nowrap; transform: translate(-50%, -50%) translateY(var(--ry, 6rem)) scale(var(--rs, .5)); }
.shots { position: absolute; inset: 0; pointer-events: none; }
.shots i { position: absolute; top: 0; z-index: 1; border-radius: 1.875rem; background: #eee var(--img) center top / cover; box-shadow: 0 2rem 4rem rgba(40, 20, 90, .12); transform: translateY(var(--fy, 120vh)) rotate(var(--r)); }
.shots i:nth-child(1) { left: 22%; width: 36.875rem; height: 27.6875rem; --r: -4deg; }
.shots i:nth-child(2) { left: 56%; width: 30rem; height: 22.25rem; --r: 5deg; }
.shots i:nth-child(3) { left: 46%; width: 26.1875rem; height: 19.3125rem; --r: -6deg; }
.sweep { position: absolute; left: 0; top: 50%; z-index: 3; width: 300vw; height: 300vw; border-radius: 50%; background: var(--dark); transform: translate(calc(-50% + 50vw + (1 - var(--q, 0)) * 200vw), -50%); }

/* ---------- 4 · Works ---------- */
.portfolio { background: var(--dark); color: #fff; }
.few { display: flex; align-items: center; padding: 0 6.25rem; }
.few__quote { position: relative; max-width: 56.25rem; padding: 9.375rem 0 0 5rem; color: #6e6aa8; font-size: 4.6875rem; font-weight: 400; line-height: 1.22; }
.few__mark { position: absolute; left: 0; top: 0; font-family: var(--alt); font-size: 18.125rem; font-weight: 500; line-height: 100%; transform: translateY(-8%); }
.few__text .w { transition: color .35s; }
.few__text .w.lit { color: #fff; }
.few__side { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.few__circles { position: absolute; right: .5rem; top: 50%; display: flex; flex-direction: column; transform: translateY(calc(-50% + (.5 - var(--p, 0)) * 30%)); }
.few__circles i { width: 28.75rem; height: 28.75rem; border-radius: 50%; background: #262260; opacity: 0; transition: opacity 1s .5s; }
.is-active .few__circles i { opacity: 1; }
.few__bar { position: absolute; right: 6.25rem; top: calc(50% - 7.8125rem); width: .25rem; height: 15.625rem; border-radius: 1.875rem; background: var(--brand-700); }
.few__bar i { display: block; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: #fff; }
.few__caption { position: absolute; right: 6.25rem; top: calc(50% + 7.8125rem + 15.1875rem); width: 28.625rem; color: rgba(255, 255, 255, .5); font-size: 1.25rem; text-align: right; }

.works { display: flex; flex-direction: column; justify-content: center; }
.slider { margin-top: 6.25rem; padding-bottom: 4.6875rem; transition: transform 1s ease .5s; }
.section:not(.is-active) .slider { transform: translateX(100%); transition: transform 0s .75s; }
.slider { cursor: grab; touch-action: pan-y; user-select: none; }
.slider:active { cursor: grabbing; }
.slider__track { display: flex; gap: 5rem; width: max-content; transform: translate3d(var(--tx, 0px), 0, 0); }
.slide { position: relative; display: block; flex: none; width: 37.625rem; height: 25.4375rem; background: var(--g); opacity: .45; transition: opacity .4s; }
.slide.is-on { opacity: 1; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 27, 75, 0), var(--dark)); }
.slide__text { position: absolute; left: -3rem; bottom: 1.875rem; z-index: 1; width: 14em; /* em: widest caption fits at every breakpoint */ font-family: var(--wide); font-size: 2.5rem; line-height: 100%; text-transform: uppercase; --spell-tr: 9.375rem; --spell-dur: .5s; --spell-delay: .2s; --spell-step: .01s; }
.slide__text span.spell { display: block; height: 1.2em; overflow: hidden; line-height: 1.2em; }
.slider__dots { display: flex; gap: .5rem; margin-top: -.1875rem; padding-left: 4rem; }
.slider__dots i { cursor: pointer; width: 1.25rem; height: .1875rem; border-radius: 3.125rem; background: var(--grey-100); opacity: .2; transition: width .5s ease, opacity .3s; }
.slider__dots i.on { width: 4.1875rem; background: #fff; opacity: 1; }
.slider__num { padding: 2.1875rem 7.5rem 0; color: var(--grey-300); font-family: var(--wide); font-size: 1.5rem; line-height: 1.625rem; }

.arm { position: relative; z-index: 1; height: calc(var(--H) * .59); margin-top: -18.75rem; }
.arm__circle { position: absolute; right: 3.125rem; top: 0; z-index: 1; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; overflow: hidden; border: 1px solid #fff; border-radius: 50%; background: #000; transform: translate(10%, -50%); }
/* line-art hand pointing down the line, tapping */
.hand { width: 58%; height: 58%; overflow: visible; fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; animation: tap 1.4s ease-in-out infinite; }
.hand circle { fill: var(--brand-300); stroke: none; }
.arm__line { position: absolute; inset: 0; width: 100%; height: 100%; }
.arm__line path { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ap, 0)); }

/* thank-you popup: drops in like the menu */
.modal { position: fixed; inset: 0; z-index: 1002; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; background: #fff;
  opacity: 0; visibility: hidden; transform: translate(10%, -150%) rotate(12deg) scale(1.5); transition: transform .75s ease, visibility .75s ease, opacity .3s .5s; }
.modal.is-active { opacity: 1; visibility: visible; transform: none; transition: transform .75s ease .3s, opacity .75s .3s; }
.modal__cross { --size: 2rem; position: absolute; right: 3.6875rem; top: 3.3125rem; width: var(--size); height: var(--size); padding: 0; border: 0; background: none; cursor: pointer; }
.modal__cross::before, .modal__cross::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #000; }
.modal__cross::before { transform: translateY(calc(var(--size) / 2)) rotate(45deg); }
.modal__cross::after { transform: translateY(calc(var(--size) / 2)) rotate(-45deg); }
.modal__title { font-family: var(--alt); font-size: 6rem; font-weight: 700; }
.modal__subtitle { max-width: 65.625rem; margin-top: 4.25rem; color: #737373; font-family: var(--alt); font-size: 1.5625rem; font-weight: 500; text-align: center; }

.pin[data-part="split"], .pin[data-part="follow"] { background: #fff; } /* hides the sub-pixel seam between the two pinned stages */
/* two black halves slide apart to reveal white (no seam at the edges) */
.split { background: #fff; }
.split::before, .split::after { content: ''; position: absolute; top: 0; bottom: 0; width: calc((1 - var(--p, 0)) * 50% - .5px); background: var(--dark); }
.split::before { left: 0; } .split::after { right: 0; }

.follow { background: #fff; color: #000; perspective: 125rem; }
.follow__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.cube { --cw: 37.5rem; --chh: 30rem; position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--chh); transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(calc(var(--cw) / -2)) rotateY(var(--ry, 0deg)); }
.cube__face { position: absolute; inset: 0; backface-visibility: hidden; }
.cube__front { display: flex; flex-wrap: wrap; align-content: flex-start; overflow: hidden; font-family: var(--alt); font-size: 1.9rem; font-weight: 700; line-height: 1.05; transform: translateZ(calc(var(--cw) / 2)); }
.cube__front span { display: flex; justify-content: center; width: 3.0303%; opacity: 0; transition: opacity .2s; }
.cube__front span.on { opacity: 1; }
.cube__side { display: flex; flex-direction: column; justify-content: center; transform: rotateY(90deg) translateZ(calc(var(--cw) / 2)); }
.cube__side a { display: block; font-family: var(--alt); font-weight: 700; line-height: .98; white-space: nowrap; transition: color .2s; }
.cube__side a:hover { color: var(--brand); }

/* ---------- 5 · Startups (geometry from the reference; sizes/opacity of the card, logo and blur are set per frame) ---------- */
.startups { display: flex; align-items: flex-start; justify-content: center; background: var(--dark); color: #fff; }
.startups__title { position: relative; width: 43.75rem; margin-top: 11.25rem; font-size: 2.5rem; font-weight: 400; line-height: normal; text-align: center; --spell-tr: 3.125rem; --spell-dur: .5s; --spell-delay: .3s; }
.startups__bg, .startups__content { opacity: 0; transform: translateY(6.25rem); transition: opacity 0s .75s, transform 0s .75s; }
.is-active .startups__bg, .is-active .startups__content { opacity: 1; transform: none; }
.is-active .startups__bg { transition: opacity 1s .3s, transform 1s .3s; }
.is-active .startups__content { transition: opacity 1s .5s, transform 1s .5s; }
.startups__bg { position: absolute; left: 0; bottom: 3.125rem; width: 100%; }
.startups__bg svg { display: block; width: 100%; height: auto; overflow: visible; }
.startups__bg path { fill: none; stroke: var(--brand-300); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s .75s; }
.is-active .startups__bg path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s .7s; }
.startups__fill { position: absolute; inset: 0; background: var(--brand-200); opacity: 0; }
.startups__content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 8.125rem 1.25rem 1.25rem; overflow: hidden; }
.idea { position: relative; flex: none; width: 28.75rem; height: 32.5rem; overflow: hidden; border-radius: 10rem; transform: translateY(-25%); transition: opacity .3s ease; }
.idea__media { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 55%, var(--brand-50), var(--brand-200) 70%); }
.idea__rope { position: absolute; inset: 0; width: 100%; height: 100%; }
.idea__marquee { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; width: 100%; height: 6.625rem; overflow: hidden; opacity: 0; color: rgba(67, 56, 202, .5); font-size: 1rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; transform: translateX(-50%); }
.idea__marquee div { flex: none; padding-right: .4em; animation: marquee 30s linear infinite; }
.idea__title { position: absolute; left: 50%; top: 40%; display: flex; flex-direction: column; align-items: center; color: #fff; line-height: normal; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%);
  --spell-tr: 6.25rem; --spell-delay: .1s; --spell-dur: .3s; }
.idea__title .spell { display: block; font-size: 7.5rem; font-weight: 400; }
.idea__title .idea__l2 { font-weight: 500; }
.idea__logo { position: absolute; left: calc(50% - 3.25rem); bottom: 0; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; opacity: 0; }
.idea__logo img { width: 80%; height: 80%; object-fit: contain; }
/* soft white bloom that swallows the screen at the end (reference: a blurred white image sized per frame) */
.startups__blur { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; border-radius: 50%; background: radial-gradient(closest-side, #fff 55%, rgba(255, 255, 255, .8) 72%, rgba(255, 255, 255, 0)); transform: translate(-50%, -50%); pointer-events: none; }

/* ---------- 6 · Contact ---------- */
.req { display: flex; flex-direction: column; justify-content: center; min-height: var(--H); padding: 15.625rem 9.375rem 3.125rem; background: #fff; }
.req__content { display: flex; justify-content: space-between; }
.req__aside { width: 27.125rem; }
.req__text { margin-bottom: 4.0625rem; font-size: 2.75rem; }
.req__title { display: flex; align-items: center; margin-bottom: .3125rem; font-weight: 500; }
.req__title span { margin: 0 .1875rem; }
.req__avatar { display: grid; place-items: center; width: 4.6875rem; height: 4.6875rem; margin: 0 .5rem !important; border-radius: 50%; background: linear-gradient(135deg, var(--brand-50), var(--brand-200)); }
.req__avatar img { width: 58%; height: 58%; object-fit: contain; }
.req__text p { font-weight: 400; }
.req__block { margin-bottom: 2.5rem; }
.req__block .underlink { display: inline-block; }
.req__block h4 { margin-bottom: 1.25rem; color: var(--grey-200); font-size: 1.5rem; font-weight: 500; }

.form { width: 49.0625rem; }
.form__inputs { display: flex; gap: 1.875rem; margin-bottom: 2.5625rem; }
.text-input { display: block; width: 100%; margin-bottom: 1.625rem; }
.form__inputs .text-input { margin: 0; }
.text-input > span { display: block; margin-bottom: .75rem; font-size: 1rem; font-weight: 500; }
.text-input input { width: 100%; padding: 1.3125rem 0; border: 0; border-bottom: 1px solid var(--grey-100); border-radius: 0; font: inherit; font-size: .875rem; outline: none; transition: .4s; }
.text-input input:focus { border-bottom-color: var(--brand); }
.text-input input::placeholder { color: var(--grey-50); }
.choices { margin: 0 0 2.5625rem; padding: 0; border: 0; }
.choices legend { margin-bottom: 1.25rem; padding: 0; font-size: 1rem; font-weight: 500; }
.choices > div { display: flex; flex-wrap: wrap; gap: 1.1875rem .9375rem; max-width: 50rem; } /* reference row pitch: 85px */
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: inline-block; padding: 1.3125rem 2.625rem; line-height: 1.3125rem; border: .09375rem solid var(--grey-100); border-radius: 3.75rem; background: #fff; font-size: .875rem; font-weight: 500; transition: border-color .3s ease; }
.choice:hover > span { border-color: var(--grey-200); }
.choice input:checked + span { border-color: var(--brand); background: var(--brand-50); }
.choice .roll__tr > span:last-child { transform: translateY(80%) rotate(5deg); }
.choice:hover .roll__tr > span:first-child { transform: translateY(-180%) rotate(5deg); }
.choice:hover .roll__tr > span:last-child { transform: translateY(-100%); }
.pulse { position: relative; width: fit-content; }
.submit { position: relative; z-index: 1; display: flex; align-items: center; min-height: 4.5rem; padding: 1rem 1.75rem; border: 0; border-radius: 6.25rem; background: var(--brand); color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer; }
.submit span { display: inline-block; margin: 0 .25rem; transition: transform .3s; }
.submit .w2 { transform: rotate(8.6deg); } .submit .w3 { transform: rotate(-8.4deg); }
.pulse:hover .submit span { transform: none; }
.pulse__rings { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.pulse__rings i { position: absolute; inset: 0; border: 1px solid var(--grey-200); border-radius: 6.25rem; animation: wave 1.5s ease infinite; }
.pulse__rings i:nth-child(1) { animation-delay: .375s; } .pulse__rings i:nth-child(2) { animation-delay: .75s; }
.pulse__rings i:nth-child(3) { animation-delay: 1.125s; } .pulse__rings i:nth-child(4) { animation-delay: 1.5s; }
.pulse:hover .pulse__rings { opacity: 1; }

.form__status { min-height: 1.25rem; margin-top: 1rem; color: #d44040; font-size: .875rem; }
.submit:disabled { opacity: .6; cursor: progress; }
.footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10.625rem; font-size: 1rem; }
.footer__left { display: flex; flex-direction: column; align-items: flex-start; }
.footer__badge { width: auto; height: 5rem; margin-bottom: 1.5rem; }
.footer__address { width: 17rem; margin-bottom: 2.1875rem; color: var(--grey-200); }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; color: var(--grey-200); }

/* phone popup form (reference ≤576px: slides up on reaching the last section; × slides it away) */
.req__cross, .req__modal-footer { display: none; }
@media (max-width: 576px) {
  .req--modal { position: fixed; inset: 0; z-index: 1001; display: block; height: var(--H); min-height: 0; padding: 6.25rem 1.875rem 3.125rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(100%); transition: transform .5s ease, opacity .5s ease, visibility .5s ease; }
  .req--modal.is-open { opacity: 1; visibility: visible; transform: none; }
  .req--modal.is-open .tr { opacity: 1; transform: none; transition: transform .5s ease calc(.6s + var(--t) * .05s), opacity .3s calc(.6s + var(--t) * .05s); }
  .req--modal .req__cross { display: block; }
  .req .footer { display: none; }
  .req__modal-footer { display: flex; justify-content: space-between; align-items: flex-start; margin: 65px 0 5rem; line-height: 1.6; }
}

/* ---------- Floating buttons & jump wipe ---------- */
.fixed-controls { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.fc { border: 1.5px solid transparent; background: linear-gradient(32deg, #b8c2ce, #fff 50%) padding-box, linear-gradient(80deg, #737989, #fbffff, #fbffff, #707988) border-box; box-shadow: 0 4px 12px 8px rgba(0, 0, 0, .1); transition: transform .2s ease; }
.fc:hover { transform: scale(1.08); }
.fc--round { display: flex; align-items: center; justify-content: center; width: 50px; aspect-ratio: 1; border-radius: 50%; }
.fc--book { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; color: #000; font: 400 14px/1.2 var(--sans); }
.jumper { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--dark); color: #fff; pointer-events: none; transform: translateX(-200vw); }
.jumper.is-light { background: #fff; color: #000; }
.jumper.is-on { animation: jump 1.4s ease; }
/* page-to-page wipe (homepage ↔ About/Blog): slides in on leave, fades out on the next page (flag set in <head>) */
.jumper.is-leaving { animation: wipeIn .42s cubic-bezier(.7, 0, .3, 1) forwards; }
html[data-wipe] .jumper { transform: none; animation: wipeOut .6s ease .2s forwards; }
.jumper img { width: min(26rem, 70vw); height: auto; filter: brightness(0) invert(1); }
.jumper.is-light img { filter: none; }

/* ---------- Custom cursor ---------- */
.custom-cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; user-select: none; mix-blend-mode: difference; transform: translate(-100px, -100px); }
.custom-cursor__point { position: absolute; left: 50%; top: 50%; width: .625rem; height: .625rem; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
  transition: background-color .3s ease, transform .3s ease, width .3s ease, height .3s ease; }
.custom-cursor__point.-hover-nav { width: 3.75rem; height: 3.75rem; }
.custom-cursor__point.-hover-menu-btn { width: 3.125rem; height: 3.125rem; }
.custom-cursor__point.-hover-button { width: 7.5rem; height: 7.5rem; }
@media (max-width: 992px), (hover: none) { .custom-cursor { display: none; } }

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes float { to { background-position: 12% 30%, 30% 80%, 66% 20%, 86% 65%, 0 0; } }
@keyframes echo1 { 0%, 24% { opacity: 0; } 25% { opacity: 1; } 79% { scale: 1; } 80%, 99% { opacity: 1; scale: 1.05; } 100% { opacity: 0; } }
@keyframes echo2 { 0%, 54% { opacity: 0; } 55% { opacity: 1; } 89% { scale: 1; } 90%, 99% { opacity: 1; scale: 1.1; } 100% { opacity: 0; } }
@keyframes flash { 0%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rowMove { to { transform: translateX(-50%); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes wave { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15, 1.4); } }
@keyframes tap { 0%, 100% { transform: rotate(195deg) translateY(0); } 50% { transform: rotate(195deg) translateY(-14%); } }
@keyframes wipeIn { from { transform: translateX(-100vw); } to { transform: none; } }
@keyframes wipeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: none; } }
@keyframes jump { 0% { transform: translateX(-200vw); } 25% { transform: none; } 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* ---------- Laptop (reference ≤1728px and ≤1440px rules) ---------- */
@media (max-width: 1728px) {
  .card { width: 62.5rem; padding: 1.875rem 1.4375rem 1.875rem 4.625rem; }
  .card h3 { padding: 1.875rem 0 .9375rem; }
  .designers__text { width: 98.125rem; font-size: 6.5rem; }
  .slide { width: 43.875rem; height: 31.6875rem; }
  .slide__text { font-size: 3.125rem; }
  .arm__circle { right: 1.25rem; width: 12.5rem; height: 12.5rem; }
  .few__caption { top: calc(50% + 7.8125rem + 7.8125rem); }
}
@media (max-width: 1440px) {
  .main__title { font-size: 2.8125rem; line-height: 1.2; }
  .main__points { margin-left: .75rem; }
  .designers__text { width: 86.25rem; font-size: 5.75rem; line-height: 7.5rem; }
  .req { padding: 15.625rem 3.125rem 3.125rem; }
  .menu__social { padding-right: 16.25rem; }
  .menu__folder { padding-left: 10.9375rem; }
  .menu__folder a { font-size: min(2.875rem, 6vh); }
}

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
  .nav { display: none; }
  .main { --pad-x: 6.25rem; --pad-y: 12.5rem; }
  .about__title { font-size: 2.5rem; }
  .card { width: 43.75rem; margin-top: 0; padding: .375rem .5rem 2.5rem 3rem; border-radius: 1.5rem; }
  .card__img { width: 18.75rem; min-width: 0; height: 12.5rem; }
  .card h3 { width: auto; padding: 1.5rem 0 .5rem; font-size: 1.875rem; line-height: 1.875rem; }
  .card__text p { margin-right: 3rem; }
  .card__circles i { width: 18.75rem; height: 18.75rem; }
  .card__circles i:last-child { left: 11.6rem; }
  .designers__text { width: 56.25rem; font-size: 3.75rem; line-height: 5rem; }
  .few__quote { padding-left: 2.5rem; font-size: 3.125rem; }
  .few__mark { font-size: 11.875rem; }
  .req__block { display: none; }
  /* stack the contact form in one column */
  .req__content { flex-direction: column; }
  .req__aside { width: auto; margin-bottom: 2.5rem; }
  .form { width: auto; }
  /* ≥16px stops iOS zooming into the field on focus (reference uses 1rem here) */
  .text-input input { padding: .75rem 0; font-size: max(1rem, 16px); }
  /* long statement line may wrap once the avatar pill opens */
  .designers__text .d3 { flex-wrap: wrap; }
}

/* ---------- Phone ---------- */
@media (max-width: 576px) {
  .header { gap: .625rem; padding: 1.25rem 1.25rem .75rem; }
  .burger { margin-left: 1rem; }
  .logo { flex: 0 1 auto; min-width: 0; } /* gives way before the pill wraps on narrow screens */
  .logo img { max-width: 100%; }
  .burger__text { display: none; }
  .talk { padding: .4375rem .75rem; border: 0; }
  .talk span { padding-left: .4rem; }

  .main { --pad-x: 1.25rem; --pad-y: 10.625rem; }
  .main__content { flex-direction: column; }
  .main__texts { width: auto; }
  .main__title { font-size: 2.125rem; line-height: 2.625rem; }
  .main__title .rise { display: inline; } /* let the three lines reflow as one paragraph */
  .main__sub br { display: none; }
  .main__row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .main__points { flex-direction: row; align-items: center; padding-top: 1.5rem; }
  .eye { display: none; }
  .image-clip, .image-sub { height: 35vh; }
  .is-loaded .image-clip { max-height: 35vh; }
  .image-sub { transform: none !important; }

  [data-name="about"] .pin { height: auto !important; }
  [data-name="about"] .pin__stage { height: auto; overflow: visible; transform: none !important; }
  .about__scroll { flex-direction: column; align-items: flex-start; width: auto; height: auto; padding: 9.375rem 1.25rem; transform: none !important; }
  .about__title { width: 15.9375rem; min-width: 0; margin: 0 0 3.625rem; }
  .cards { flex-direction: column; gap: .5625rem; margin: 0; }
  .section.is-next .cards { transform: none; }
  .card { width: calc(100vw - 2.5rem); height: auto; padding: .375rem .5rem 1.625rem 1.5rem; border-radius: .9375rem; }
  .card__img { width: 8.8125rem; height: 8.8125rem; border-radius: 50%; }
  .card h3 { width: 17rem; padding: 2.1875rem 0 0; font-size: 1.4375rem; line-height: 1.08; }
  .card__text p { margin: .5625rem 1.4375rem 0 0; font-size: .75rem; line-height: 1.3; }
  .card__index { margin-right: 1rem; font-size: 1.625rem; }
  .card__circles { left: -12rem; top: 6rem; }
  .card__circles i { width: 11.875rem; height: 11.875rem; }
  .card__circles i:last-child { left: 7.3rem; }

  .wc__slider { width: 500vw; }
  .wc__view { font-size: 3.75rem; }
  .view-position { font-size: calc(1rem * 22 / 50.125); } /* reference phone size: 22 × 16.5rem */
  .interface__tag { width: 15.625rem; height: 3.125rem; }
  .interface__tag > div { font-size: .875rem; }

  [data-name="designers"] .pin { --len: 3; }
  .designers__text { align-items: flex-start; width: 21.875rem; font-size: 2.5rem; line-height: 3.375rem; text-align: left; }
  .designers__text .d3 { justify-content: flex-start; gap: .5rem; }
  .gap { height: 3.375rem; }
  .avatars i, .avatars b { width: 2rem; height: 2rem; font-size: .6rem; }
  .shots i { scale: .45; transform-origin: left top; }

  .few { padding: 0 1.25rem; }
  .few__quote { max-width: 20rem; padding: 5rem 0 0 .625rem; font-size: 2.1875rem; }
  .few__mark { font-size: 6.25rem; }
  .few__circles i { width: 16.25rem; height: 16.25rem; }
  .few__bar { right: 1.25rem; top: calc(50% - 4rem); height: 8rem; }
  .few__caption { right: 1.25rem; top: calc(50% + 4rem + 6.25rem); width: 12.5rem; font-size: .9375rem; }
  .few__caption br { display: none; }
  .slide { width: 18.125rem; height: 13.125rem; }
  .slider__track { gap: 2.5rem; }
  .slide__text { left: -2rem; font-size: 1.25rem; }
  .slider { padding-bottom: 1.875rem; }
  .slider__dots { padding-left: 1.25rem; }
  .slider__dots i.on { width: 2.5rem; }
  .slider__num { padding: 1.375rem 1.25rem 0; }
  .cube { --cw: 20rem; --chh: 16rem; }
  .arm__circle { right: 1.25rem; width: 6.25rem; height: 6.25rem; transform: translate(30%, -50%); }
  .modal__title { font-size: 2.8125rem; }
  .modal__subtitle { margin-top: 1rem; font-size: 1rem; }
  .modal__cross { right: 1.25rem; top: 1.25rem; }
  .cube__front { font-size: 1rem; }

  [data-name="startups"] .pin { --len: 2; }
  .startups__title { width: 20.625rem; font-size: 1.375rem; }
  .startups__bg { width: 300%; }
  .idea { border-radius: 5rem; }
  .idea__title .spell { font-size: 2.5rem; }
  .idea__marquee { bottom: -1.5625rem; }
  .idea__logo { left: calc(50% - 1.5625rem); width: 3.125rem; height: 3.125rem; }

  .req { padding: 9.1875rem 1.25rem 1.6875rem; }
  .req__content { flex-direction: column; }
  .req__aside { width: auto; }
  .req__text { margin-bottom: 2.875rem; font-size: 1.5rem; }
  .req__avatar { width: 2.6rem; height: 2.6rem; }
  .form { width: auto; }
  .form__inputs { display: block; margin: 0; }
  .form__inputs .text-input, .choices { margin-bottom: 1.75rem; }
  .choices > div { gap: .75rem .5rem; }
  .choice > span { padding: .75rem 1.5rem; font-size: .75rem; }
  .pulse, .submit { width: 100%; justify-content: center; }
  .pulse__rings { opacity: 1; }
  .pulse__rings i { animation-duration: 3s; }
  .footer { margin-top: 5.5625rem; padding-top: 3rem; }
  .footer__left { display: flex; flex-direction: column; align-items: flex-start; }
.footer__address { width: 17rem; margin-bottom: 2.1875rem; color: var(--grey-200); }
.footer__right { display: none; }
  .menu { padding: 0 1.875rem 2rem; }
  .menu__content { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .menu__img { display: none; }
  .menu__social { order: 2; padding: 0; }
  .menu__folder { padding: 0; }
  .menu__folder a { font-size: min(2.5rem, 5vh); }
  .menu__bottom { left: 1.875rem; right: 1.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wipe] .jumper { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}