/* self-hosted fonts (no Google Fonts dependency) */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../assets/fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ==========================================================================
   DYSLEXIC DESIGN — styles
   Tokens → base → components → sections → responsive
   ========================================================================== */

:root {
  /* Color — single, committed dark world */
  --ink: #07050c;
  --ink-2: #0d0918;
  --ink-3: #151024;
  --line: rgba(214, 200, 255, 0.12);
  --line-strong: rgba(214, 200, 255, 0.24);
  --fog: #a49cb8;
  --fog-2: #6f6784;
  --paper: #f2eff8;
  --violet-deep: #1b0b45;
  --violet: #6a2cf0;
  --electric: #9a5cff;
  --magenta: #d94ee6;

  --grad-signature: linear-gradient(110deg, #040208 0%, #140733 20%, #3a15a6 42%, #7433f2 64%, #b646e8 84%, #e463ee 100%);

  /* Type */
  /* Inter Tight / Tiny5 only load for RU/UA (js/i18n.js) and fill in the Cyrillic glyphs */
  --display: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --pixel: "Silkscreen", "Tiny5", "Courier New", ui-monospace, monospace;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  --fs-xl: clamp(2rem, 1.2rem + 3.6vw, 4.75rem);
  --fs-2xl: clamp(2.6rem, 1rem + 7vw, 8.5rem);
  --fs-hero: clamp(2.7rem, 11.2vw, 10rem);

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1680px;
  --nav-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.px { font-family: var(--pixel); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.muted { color: var(--fog); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--ink); font-family: var(--pixel); font-size: 12px; transition: top .2s; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.display {
  font-family: var(--display);
  font-weight: 780;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.88;
  text-wrap: balance;
}

/* line-mask reveal primitives (only hidden once JS is confirmed) */
/* padding-top keeps accents above capitals (Й, Ї, Ñ, Í) from being clipped */
.line { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: inline-block; } /* no permanent will-change: ~40 headline spans each kept a GPU layer; GSAP promotes them while animating */
.js .reveal-lines .line > span { transform: translate3d(0, 108%, 0); }
.js .reveal-up { opacity: 0; transform: translate3d(0, 28px, 0); }

/* ---------- global layers ---------- */
#gl {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: var(--gl-o, 0);
  transition: opacity .2s linear;
}
.ambient {
  position: fixed; inset: -10%; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--amb-o, 1);
  background:
    radial-gradient(40% 35% at var(--ax, 78%) var(--ay, 30%), rgba(106, 44, 240, 0.20), transparent 70%),
    radial-gradient(30% 30% at 90% 85%, rgba(217, 78, 230, 0.10), transparent 70%),
    radial-gradient(35% 40% at 5% 10%, rgba(27, 11, 69, 0.55), transparent 70%);
  animation: ambientDrift 22s var(--ease-io) infinite alternate;
}
@keyframes ambientDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, .site-footer { position: relative; z-index: 2; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  background: #030206;
  clip-path: inset(0 0 0 0);
}
.loader__logo { position: relative; width: clamp(120px, 16vw, 190px); aspect-ratio: 1280 / 1472; }
.loader__glow {
  position: absolute; inset: -60%;
  background: radial-gradient(closest-side, rgba(122, 52, 242, 0.55), rgba(217, 78, 230, 0.12) 55%, transparent 75%);
  filter: blur(18px); opacity: 0; transform: translateX(-30%);
}
.loader__mark {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #efeaf8 0%, #efeaf8 38%, #c7a4ff 46%, #ffffff 50%, #e07cf0 54%, #efeaf8 62%, #efeaf8 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask: var(--lockup-mask) center / contain no-repeat;
  mask: var(--lockup-mask) center / contain no-repeat;
  clip-path: inset(100% 0 0 0);
}
.loader__meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; color: var(--fog-2);
}
.loader__bar { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--grad-signature); transform-origin: left; transform: scaleX(0); }
.no-js .loader { display: none; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--paper); mix-blend-mode: difference; transition: opacity .2s, transform .05s; }
.cursor__ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(242, 239, 248, 0.35);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background-color .35s, border-color .35s, opacity .3s;
}
.cursor__label { font-family: var(--pixel); font-size: 10px; letter-spacing: .08em; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease-out); }
.cursor.is-link .cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: rgba(154, 92, 255, 0.7); }
.cursor.is-view .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: rgba(106, 44, 240, 0.9); border-color: transparent; backdrop-filter: blur(2px); }
.cursor.is-view .cursor__label, .cursor.is-close .cursor__label { opacity: 1; transform: scale(1); }
.cursor.is-view .cursor__dot, .cursor.is-cta .cursor__dot { opacity: 0; }
.cursor.is-cta .cursor__ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-color: transparent; background: radial-gradient(closest-side, rgba(154, 92, 255, .35), transparent); }
.cursor.is-hidden .cursor__ring, .cursor.is-hidden .cursor__dot { opacity: 0; }

/* ---------- buttons ---------- */
.btn-order {
  --glow: 0;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  padding: 14px 20px 14px 22px;
  font-family: var(--pixel); font-size: 12px; letter-spacing: 0.08em; line-height: 1;
  color: #fff; white-space: nowrap;
  border-radius: 3px;
  background: #140733;
  box-shadow:
    0 12px 40px -14px rgba(122, 52, 242, calc(0.45 + var(--glow) * 0.35)),
    0 0 50px -18px rgba(217, 78, 230, calc(0.25 + var(--glow) * 0.45));
  transition: box-shadow .5s var(--ease-out);
  will-change: transform;
}
/* the signature gradient drifts on its own layer via transform (compositor only);
   animating background-position repainted every button on every frame */
.btn-order::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; z-index: -2;
  background: var(--grad-signature);
  animation: gradShift 9s var(--ease-io) infinite alternate;
}
.btn-order::before { /* soft specular sweep + the inner edge highlights (above the gradient layer) */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 130% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(190, 150, 255, 0.22);
  transition: background-position 1s var(--ease-out);
}
.btn-order:hover { --glow: 1; }
.btn-order:hover::after { animation-play-state: paused; }
.btn-order:hover::before { background-position: -40% 0; }
.btn-order__label { position: relative; display: inline-block; }
.btn-order__arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 12px; box-sizing: content-box; transition: transform .5s var(--ease-out); }
.btn-order:hover .btn-order__arrow { transform: translateX(4px); }
.btn-order--lg { padding: 20px 26px 20px 30px; font-size: 14px; gap: 18px; }
/* same travel as the old background-position 0% → 55% on a 260%-wide gradient: 0.55 × 1.6 / 2.6 = 33.846% */
@keyframes gradShift { from { transform: translateX(0); } to { transform: translateX(-33.846%); } }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; color: var(--paper);
  position: relative;
}
.btn-ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(.35); transition: transform .6s var(--ease-out); }
.btn-ghost:hover::after { transform-origin: left; transform: scaleX(1); }
.btn-ghost .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.btn-ghost:hover .arr { transform: translateY(3px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 100; left: 0; right: 0; top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .6s var(--ease-out);
}
.nav__bar {
  display: flex; align-items: center; gap: 24px;
  height: var(--nav-h);
  transition: height .5s var(--ease-out);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(7, 5, 12, .82), rgba(7, 5, 12, .55));
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .5s;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled .nav__bar { height: 62px; }
.nav.is-hidden { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); min-height: 44px; }
.brand svg { width: 34px; height: auto; transition: transform .7s var(--ease-out); }
.brand:hover svg { transform: rotate(-8deg) scale(1.05); }
.brand__name { font-family: var(--display); font-variation-settings: "wdth" 110; font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand__name small { display: block; font-family: var(--pixel); font-size: 9px; letter-spacing: .1em; color: var(--fog-2); margin-top: 5px; font-weight: 400; }
.nav__links { display: flex; gap: clamp(16px, 2.4vw, 36px); margin-left: auto; }
.nav__links a {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  padding-block: 12px; white-space: nowrap;
  font-family: var(--display); font-variation-settings: "wdth" 108; font-weight: 600; font-size: 12.5px; letter-spacing: .06em;
  color: var(--fog);
  transition: color .3s;
}
.nav__links a sup { font-family: var(--pixel); font-size: 8px; color: var(--fog-2); top: -.6em; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--electric); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.nav__links a:hover, .nav__links a.is-active { color: var(--paper); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 12px; }
.nav__toggle { display: none; margin-left: auto; width: 48px; height: 48px; position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--paper); transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.nav__toggle span:nth-child(1) { top: 20px; }
.nav__toggle span:nth-child(2) { top: 27px; right: 20px; }
.menu-open .nav__toggle span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.menu-open .nav__toggle span:nth-child(2) { top: 24px; right: 12px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(80% 50% at 100% 100%, rgba(106, 44, 240, .35), transparent 70%),
    radial-gradient(60% 40% at 0% 0%, rgba(217, 78, 230, .12), transparent 70%),
    #07050c;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.menu__links { display: grid; gap: 4px; margin-bottom: auto; margin-top: 4vh; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.6rem, 13vw, 5rem); }
html:lang(es) .menu__links a { font-size: clamp(2.4rem, 11.4vw, 5rem); } /* "PROYECTOS" is the longest label */
.menu__links a .px { color: var(--fog-2); font-size: 11px; letter-spacing: .1em; transform: translateY(-1.4em); }
.menu__foot { display: grid; gap: 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.menu__foot .btn-order { justify-content: space-between; width: 100%; }
.menu__social { display: flex; gap: 22px; color: var(--fog); }
.menu__social a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- order popup (Telegram / WhatsApp) ---------- */
.order { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: var(--gutter); }
.order[hidden] { display: none; }
.order__backdrop { position: absolute; inset: 0; background: rgba(4, 3, 8, .74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.order__panel {
  position: relative; width: min(560px, 100%);
  padding: clamp(22px, 4vw, 36px);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(106, 44, 240, .3), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, rgba(217, 78, 230, .12), transparent 70%),
    #0b0914;
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(122, 52, 242, .55);
}
.order__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--fog); margin: -10px 0 22px; }
.order__close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--paper); letter-spacing: inherit; text-transform: inherit; }
.order__close:hover { color: var(--electric); }
.order__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }
.order__sub { color: var(--fog); margin-top: 14px; font-size: var(--fs-md); }
.order__options { display: grid; gap: 12px; margin-top: 28px; }
.order__opt {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px;
  padding: 14px 20px 14px 14px; border-radius: 4px; color: #fff; text-align: left;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), filter .3s;
}
.order__opt--tg { background: linear-gradient(110deg, #1c8fd0 0%, #2aabee 60%, #46bdf5 100%); box-shadow: 0 16px 40px -20px rgba(42, 171, 238, .85); }
.order__opt--wa { background: linear-gradient(110deg, #13994a 0%, #25d366 60%, #3fe07c 100%); box-shadow: 0 16px 40px -20px rgba(37, 211, 102, .75); }
.order__opt:hover, .order__opt:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.order__opt--tg:hover { box-shadow: 0 22px 50px -18px rgba(42, 171, 238, 1); }
.order__opt--wa:hover { box-shadow: 0 22px 50px -18px rgba(37, 211, 102, .95); }
.order__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.order__icon svg { width: 24px; height: 24px; fill: currentColor; }
.order__label { display: grid; gap: 4px; }
.order__label .px { font-size: 10px; opacity: .85; }
.order__label b { font-family: var(--display); font-weight: 750; font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.order__arrow { margin-left: auto; font-size: 1.25rem; transition: transform .45s var(--ease-out); }
.order__opt:hover .order__arrow { transform: translateX(4px); }

/* ---------- language switch ---------- */
.lang { display: flex; align-items: center; gap: 2px; }
.lang button { position: relative; min-width: 32px; min-height: 36px; padding: 0 6px; color: var(--fog-2); letter-spacing: .08em; transition: color .3s; }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--paper); }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 1px; background: var(--electric); }
.nav__lang { margin-left: 4px; }
.menu__foot .lang { margin-left: -6px; }
.menu__foot .lang button { min-width: 44px; min-height: 44px; font-size: 12px; }

/* ---------- section scaffolding ---------- */
.section { position: relative; padding-block: clamp(96px, 14vw, 200px); }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; margin-bottom: clamp(48px, 7vw, 110px); }
.sec-head__idx { grid-column: 1 / span 3; display: flex; gap: 12px; color: var(--fog-2); align-self: start; padding-top: .9em; }
.sec-head__idx b { color: var(--electric); font-weight: 400; }
.sec-head__title { grid-column: 4 / span 9; font-size: var(--fs-2xl); }
.sec-head__aside { grid-column: 4 / span 6; color: var(--fog); font-size: var(--fs-md); max-width: 46ch; margin-top: 28px; }
.rule { height: 1px; background: var(--line); transform-origin: left; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex; align-items: stretch;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}
.hero__inner { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding-block: 28px 36px; }
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--fog); }
.hero__top i { font-style: normal; color: var(--electric); margin-inline: 6px; }
.hero__render { display: flex; gap: 18px; color: var(--fog-2); }
.hero__render b { color: var(--paper); font-weight: 400; }
.hero__title { align-self: center; font-size: var(--fs-hero); margin-block: 2vh; }
.hero__title .line:nth-child(3) { padding-left: 8.5vw; }
.hero__title .line:nth-child(4) { padding-left: 17vw; }
.flip { display: inline-block; transform: scaleX(-1); transition: transform .9s var(--ease-out); }
.hero__title:hover .flip { transform: scaleX(1); }
.dot-grad { background: linear-gradient(135deg, var(--electric), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__bottom { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; }
.hero__desc { grid-column: 1 / span 4; color: var(--fog); font-size: var(--fs-md); max-width: 36ch; line-height: 1.5; }
.hero__desc strong { color: var(--paper); font-weight: 500; }
.hero__actions { grid-column: 5 / span 5; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero__sig { grid-column: 10 / span 3; justify-self: end; display: flex; align-items: flex-end; gap: 14px; color: var(--fog-2); text-align: right; }
.hero__sig svg { width: 46px; height: auto; color: var(--paper); }
.scroll-cue { position: absolute; right: var(--gutter); top: 50%; writing-mode: vertical-rl; color: var(--fog-2); display: flex; align-items: center; gap: 12px; }
.scroll-cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--electric), transparent); animation: cue 2.4s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.gl-fallback {
  position: absolute; right: 6vw; top: 22%; width: min(38vw, 520px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #d9ccff 0%, #5a2ad8 18%, #1b0b45 45%, #07050c 70%);
  box-shadow: 0 0 120px -20px rgba(122, 52, 242, .6);
  opacity: 0; transition: opacity 1s;
}
.gl-failed .gl-fallback { opacity: .55; }

/* ---------- marquee ---------- */
.marquee { position: relative; padding-block: clamp(28px, 4vw, 56px); border-block: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, rgba(13, 9, 24, .0), rgba(13, 9, 24, .85) 30%, rgba(13, 9, 24, .85) 70%, rgba(13, 9, 24, 0)); }
.marquee__row { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__row--big .marquee__group > * { font-size: clamp(3rem, 9vw, 9rem); padding-inline: .28em; white-space: nowrap; }
.marquee__row--big .o { color: transparent; -webkit-text-stroke: 1px rgba(242, 239, 248, .5); }
.marquee__row--big .sep { font-family: var(--pixel); font-size: clamp(1rem, 2.2vw, 2rem); color: var(--electric); padding-inline: .3em; }
.marquee__row--small { margin-top: 18px; color: var(--fog-2); }
.marquee__row--small .marquee__group > * { padding-inline: 22px; white-space: nowrap; }
.marquee__row--small b { color: var(--electric); font-weight: 400; }

/* ---------- intro statement ---------- */
.intro { position: relative; }
.intro__stage { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: 120px; }
.intro__label { color: var(--fog-2); margin-bottom: 36px; display: flex; gap: 12px; }
.intro__a, .intro__b { font-size: clamp(2.4rem, 7.4vw, 8.2rem); max-width: 14ch; }
.intro__a .w { display: inline-block; color: rgba(242, 239, 248, .16); transition: color .2s; }
.intro__a .w.on { color: var(--paper); }
.intro__a .strike { position: relative; }
.intro__b { margin-top: .2em; margin-left: auto; text-align: right; }
.intro__b .grad { background: linear-gradient(100deg, #fff 10%, #c9a8ff 45%, #e27af0 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .intro__b .line > span { transform: translate3d(0, 105%, 0); }
.intro__foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 90px); color: var(--fog); }
.intro__foot p { grid-column: 7 / span 5; font-size: var(--fs-md); max-width: 44ch; }

/* ---------- work ---------- */
.work { padding-bottom: 0; }
.work__pin { position: relative; overflow: hidden; }
.work__track { display: flex; gap: clamp(20px, 2.4vw, 40px); padding-inline: var(--gutter); padding-bottom: clamp(60px, 8vw, 120px); will-change: transform; }
.work__intro { flex: 0 0 auto; width: min(420px, 80vw); display: flex; flex-direction: column; justify-content: space-between; padding-right: 2vw; }
.work__intro p { color: var(--fog); font-size: var(--fs-md); max-width: 30ch; }
.work__note { margin-top: 24px; padding: 12px 14px; border: 1px dashed var(--line-strong); color: var(--fog); max-width: 34ch; }
.work__progress { display: flex; align-items: center; gap: 14px; color: var(--fog-2); margin-top: 28px; }
.work__progress .bar { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.work__progress .bar i { position: absolute; inset: 0; background: var(--grad-signature); transform-origin: left; transform: scaleX(var(--p, 0)); }

.card { flex: 0 0 auto; width: clamp(300px, 38vw, 620px); display: block; color: var(--paper); }
.card:nth-child(odd of .card) { margin-top: clamp(0px, 6vw, 110px); }
.card__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3);
  border: 1px solid var(--line);
  transform: translateZ(0);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease-out), filter .8s; will-change: transform; }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.14); }
.card__media::after { /* violet edge light on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at var(--mx, 50%) var(--my, 50%), rgba(154, 92, 255, .28), transparent 70%);
  opacity: 0; transition: opacity .6s;
}
.card:hover .card__media::after { opacity: 1; }
.card__tag { position: absolute; left: 14px; top: 14px; padding: 6px 8px; background: rgba(7, 5, 12, .72); backdrop-filter: blur(6px); color: var(--fog); z-index: 2; }
.card__idx { position: absolute; right: 14px; top: 14px; z-index: 2; color: var(--paper); }
.card__meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding-top: 18px; }
.card__title { font-size: clamp(1.4rem, 2.2vw, 2.3rem); line-height: 1; transition: transform .6s var(--ease-out), letter-spacing .6s var(--ease-out); }
.card:hover .card__title { transform: translateX(10px); }
.card__cat { color: var(--fog); grid-column: 1; overflow: hidden; }
.card__cat span { display: inline-block; transition: transform .5s var(--ease-out); }
.card__year { grid-row: 1; grid-column: 2; color: var(--fog-2); align-self: center; }
.card__more { grid-column: 2; color: var(--electric); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease-out); }
.card:hover .card__more { opacity: 1; transform: none; }
.work__end { flex: 0 0 auto; width: min(360px, 80vw); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-left: 2vw; }
.work__end h3 { font-size: clamp(1.8rem, 3vw, 3rem); }

/* ---------- services ---------- */
.svc { border-top: 1px solid var(--line); position: relative; }
.svc__row {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: center;
  padding-block: clamp(22px, 2.6vw, 38px);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.svc__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(106, 44, 240, .16), rgba(217, 78, 230, .06) 60%, transparent);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out);
}
.svc__row:hover::before, .svc__row:focus-within::before { transform: scaleY(1); }
.svc__num { grid-column: 1 / span 2; color: var(--fog-2); transition: color .4s; }
.svc__row:hover .svc__num { color: var(--electric); }
.svc__name { grid-column: 3 / span 5; font-size: clamp(1.7rem, 3.8vw, 4rem); transition: transform .7s var(--ease-out); }
.svc__row:hover .svc__name { transform: translateX(clamp(8px, 1.6vw, 28px)); }
.svc__desc { grid-column: 8 / span 4; color: var(--fog); max-width: 40ch; transition: color .4s; }
.svc__row:hover .svc__desc { color: var(--paper); }
.svc__arrow { grid-column: 12; justify-self: end; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--ease-out), background-color .4s, border-color .4s; }
.svc__row:hover .svc__arrow { transform: rotate(-45deg); background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* rows sliding under a still cursor (header jumps, wheel) must not trigger hover */
html.lenis-scrolling .svc { pointer-events: none; }
.svc__preview {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: 260px; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line-strong);
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.6);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(122, 52, 242, .5);
}
.svc__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.svc__preview img.on { opacity: 1; }

/* ---------- tech 3D ---------- */
.tech3d { position: relative; }
.tech3d__stage { position: relative; height: 100svh; min-height: 620px; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(var(--nav-h) + 20px) 36px; }
.tech3d__title { font-size: clamp(2.8rem, 9vw, 10rem); text-align: center; line-height: .86; mix-blend-mode: difference; position: relative; z-index: 2; }
.tech3d__title .line:nth-child(2) { color: transparent; -webkit-text-stroke: 1px rgba(242, 239, 248, .7); }
.tech3d__readouts { position: relative; }
.readout { position: absolute; display: grid; gap: 4px; color: var(--fog-2); min-width: 150px; }
.readout b { color: var(--paper); font-weight: 400; font-size: 12px; }
.readout::before { content: ""; width: 24px; height: 1px; background: var(--electric); margin-bottom: 6px; }
.readout--a { left: 0; top: 16%; }
.readout--b { right: 0; top: 24%; text-align: right; justify-items: end; }
.readout--c { left: 6%; bottom: 10%; }
.readout--d { right: 6%; bottom: 14%; text-align: right; justify-items: end; }
.tech3d__foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; }
.tech3d__foot p { grid-column: 1 / span 5; color: var(--fog); font-size: var(--fs-md); max-width: 42ch; }
.tech3d__hint { grid-column: 10 / span 3; justify-self: end; color: var(--fog-2); }

/* ---------- process ---------- */
.process__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.process__side { grid-column: 1 / span 5; }
.process__sticky { position: sticky; top: calc(var(--nav-h) + 40px); }
.process__side h2 { font-size: var(--fs-xl); }
.process__side p { color: var(--fog); margin-top: 24px; max-width: 34ch; font-size: var(--fs-md); }
.process__now { margin-top: 44px; display: flex; align-items: baseline; gap: 16px; }
.process__now .big { font-family: var(--pixel); font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: .8; background: var(--grad-signature); background-size: 200% 100%; background-position: 70% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.process__list { grid-column: 7 / span 6; position: relative; padding-left: 36px; }
.process__line { position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.process__line i { position: absolute; inset: 0; background: linear-gradient(var(--electric), var(--magenta)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.step { position: relative; padding-block: clamp(26px, 3.4vw, 46px); border-bottom: 1px solid var(--line); opacity: .32; transition: opacity .6s var(--ease-out); }
.step.is-on { opacity: 1; }
.step::before { content: ""; position: absolute; left: -40px; top: calc(clamp(26px, 3.4vw, 46px) + .5em); width: 9px; height: 9px; background: var(--ink); border: 1px solid var(--fog-2); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.step.is-on::before { background: var(--electric); border-color: var(--electric); box-shadow: 0 0 18px rgba(154, 92, 255, .8); }
.step__n { color: var(--electric); }
.step h3 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); margin-top: 10px; }
.step p { color: var(--fog); margin-top: 12px; max-width: 40ch; }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }
.about__title { grid-column: 1 / span 8; font-size: clamp(2.4rem, 0.8rem + 5.4vw, 7rem); }
.about__title .line:nth-child(3) { padding-left: 10vw; }
.about__media { grid-column: 9 / span 4; grid-row: 1 / span 2; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); margin-top: 8vw; }
.about__media img { width: 100%; height: 115%; object-fit: cover; }
.about__media .px { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 8px 10px; background: rgba(7, 5, 12, .75); color: var(--fog); }
/* 3D glass logo (js/logo3d.js) replaces the image once it has rendered */
.about__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); touch-action: pan-y; cursor: grab; outline-offset: -4px; }
.has-cursor .about__gl { cursor: none; }
.about__media img { transition: opacity 1.2s var(--ease-out); }
.about__media.is-3d .about__gl { opacity: 1; }
.about__media { transition: border-color 1.2s var(--ease-out); }
.about__media.is-3d { border-color: transparent; } /* the emblem floats on the page */
.about__media.is-3d img { opacity: 0; }
.about__media.is-dragging .about__gl { cursor: grabbing; }
.about__media .about__hint { right: auto; opacity: 0; transition: opacity .6s; pointer-events: none; }
.about__media.is-3d .about__hint { opacity: 1; }
.about__media.is-dragging .about__hint { opacity: 0; }
.about__body { grid-column: 3 / span 5; margin-top: clamp(40px, 5vw, 80px); display: grid; gap: 22px; color: var(--fog); font-size: var(--fs-md); }
.about__body p:first-child { color: var(--paper); font-size: var(--fs-lg); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.about__facts { grid-column: 3 / span 6; margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.about__facts li { padding: 18px 16px 0 0; display: grid; gap: 8px; }
.about__facts li span:last-child { color: var(--paper); font-size: var(--fs-sm); }

/* ---------- technology system ---------- */
.stack__wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch; }
.stack__field { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 10% 10%,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 6.25% 10%,
  radial-gradient(60% 60% at 50% 50%, rgba(106, 44, 240, .10), transparent 70%);
  overflow: hidden; touch-action: pan-y;
}
.stack__field svg.links { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack__field svg.links line { stroke: rgba(214, 200, 255, .16); stroke-width: 1; transition: stroke .3s; }
.stack__field svg.links line.hot { stroke: url(#linkGrad); stroke-width: 1.5; }
.node {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; min-height: 44px;
  background: rgba(13, 9, 24, .9); border: 1px solid var(--line-strong);
  font-family: var(--display); font-variation-settings: "wdth" 110; font-weight: 700; font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .04em;
  white-space: nowrap; will-change: transform;
  transition: border-color .3s, background-color .3s, box-shadow .3s, opacity .3s;
}
.node i { width: 8px; height: 8px; background: var(--fog-2); transition: background-color .3s, box-shadow .3s; }
.node:hover, .node.is-on, .node:focus-visible { border-color: var(--electric); background: rgba(40, 18, 96, .92); box-shadow: 0 0 40px -10px rgba(154, 92, 255, .7); }
.node.is-on i, .node:hover i { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.stack__field.has-focus .node:not(.is-on):not(.is-linked) { opacity: .35; }
.node.is-linked { border-color: rgba(154, 92, 255, .6); }
.stack__panel { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border: 1px solid var(--line); padding: clamp(18px, 2vw, 28px); background: rgba(13, 9, 24, .6); }
.stack__panel h3 { font-size: clamp(1.8rem, 3vw, 3rem); margin-top: 10px; }
.stack__panel p { color: var(--fog); margin-top: 14px; }
.stack__panel dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.stack__panel dt { color: var(--fog-2); }
.stack__panel dd { margin: 0; font-size: var(--fs-sm); }

/* ---------- principles ---------- */
.principles__list { border-top: 1px solid var(--line); }
.pr { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: baseline; padding-block: clamp(22px, 3vw, 44px); border-bottom: 1px solid var(--line); overflow: hidden; }
.pr__tag { grid-column: 1 / span 2; color: var(--fog-2); }
.pr h3 { grid-column: 3 / span 6; font-size: clamp(1.7rem, 4.4vw, 4.6rem); transition: color .4s, transform .7s var(--ease-out); }
.pr p { grid-column: 9 / span 4; color: var(--fog); max-width: 38ch; }
.pr:hover h3 { transform: translateX(14px); }
.pr:hover h3 .accent { color: var(--electric); }

/* ---------- testimonials / clients ---------- */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.slot { position: relative; border: 1px dashed var(--line-strong); padding: clamp(24px, 3vw, 44px); display: grid; gap: 28px; min-height: 280px; align-content: space-between; background: repeating-linear-gradient(135deg, rgba(214, 200, 255, .025) 0 1px, transparent 1px 14px); }
.slot blockquote { font-family: var(--display); font-variation-settings: "wdth" 100; font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--paper); }
.slot blockquote::before { content: "“"; display: block; font-family: var(--pixel); font-size: 3rem; line-height: .6; color: var(--electric); margin-bottom: 18px; }
.slot footer { display: flex; justify-content: space-between; gap: 12px; color: var(--fog-2); flex-wrap: wrap; }
.clients { margin-top: clamp(80px, 10vw, 140px); }
.clients__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.clients__head h3 { font-size: var(--fs-lg); }
.clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clients__grid li { aspect-ratio: 3 / 2; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; place-items: center; color: var(--fog-2); }
.clients__grid li img { max-width: 60%; max-height: 40%; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .7; }

/* ---------- final CTA ---------- */
.final { position: relative; overflow: hidden; padding-block: clamp(120px, 16vw, 240px); isolation: isolate; }
.final__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.final__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, transparent 25%, transparent 75%, var(--ink) 100%); z-index: 2; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.blob--1 { width: 60vw; height: 60vw; left: -10vw; top: 10%; background: radial-gradient(closest-side, rgba(58, 21, 166, .85), transparent); animation: blob1 18s var(--ease-io) infinite alternate; }
.blob--2 { width: 50vw; height: 50vw; right: -8vw; top: 20%; background: radial-gradient(closest-side, rgba(116, 51, 242, .75), transparent); animation: blob2 22s var(--ease-io) infinite alternate; }
.blob--3 { width: 36vw; height: 36vw; left: 40%; bottom: -5%; background: radial-gradient(closest-side, rgba(228, 99, 238, .55), transparent); animation: blob3 16s var(--ease-io) infinite alternate; }
.final:not(.is-inview) .blob { animation-play-state: paused; } /* nobody sees them off-screen */
@keyframes blob1 { to { transform: translate3d(22vw, -6vw, 0) scale(1.1); } }
@keyframes blob2 { to { transform: translate3d(-26vw, 8vw, 0) scale(.9); } }
@keyframes blob3 { to { transform: translate3d(-18vw, -14vw, 0) scale(1.25); } }
.final__inner { text-align: center; display: grid; justify-items: center; gap: clamp(28px, 3vw, 44px); }
.final__eyebrow { color: var(--fog); }
.final__title { font-size: clamp(3rem, 10vw, 12rem); line-height: .84; }
.final__title .line:nth-child(2) { font-variation-settings: "wdth" 118; }
.final__sub { color: var(--fog); font-size: var(--fs-lg); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 100px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 20px; }
.foot__brand { grid-column: 1 / span 4; color: var(--paper); }
.foot__brand svg { width: 120px; height: auto; }
.foot__col { grid-column: span 2; display: grid; align-content: start; gap: 4px; }
.foot__col:first-of-type { grid-column: 7 / span 2; }
.foot__col h4 { color: var(--fog-2); margin-bottom: 10px; }
.foot__col a { display: inline-flex; min-height: 36px; align-items: center; color: var(--fog); transition: color .3s, transform .4s var(--ease-out); width: fit-content; }
.foot__col a:hover { color: var(--paper); transform: translateX(4px); }
.foot__col a.is-placeholder::after { content: "·SET"; font-family: var(--pixel); font-size: 8px; color: var(--magenta); margin-left: 6px; }
.foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 40px; color: var(--fog-2); }
.foot__base button { min-height: 44px; }
.foot__huge { grid-column: 1 / -1; font-size: clamp(3rem, 15.2vw, 17rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(214, 200, 255, .14); white-space: nowrap; margin-top: 40px; user-select: none; }

/* ---------- case study overlay ---------- */
.cs {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(100% 0 0 0);
}
.cs.is-open { visibility: visible; }
.cs__wipe { position: fixed; inset: 0; z-index: 111; background: var(--grad-signature); background-size: 200% 100%; pointer-events: none; clip-path: inset(100% 0 0 0); }
.cs__bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px; background: linear-gradient(rgba(7, 5, 12, .92), rgba(7, 5, 12, .6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cs__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-inline: 14px; border: 1px solid var(--line-strong); transition: background-color .3s, color .3s; }
.cs__close:hover { background: var(--paper); color: var(--ink); }
.cs__banner { background: repeating-linear-gradient(135deg, rgba(217, 78, 230, .14) 0 10px, rgba(217, 78, 230, .05) 10px 20px); border-block: 1px solid rgba(217, 78, 230, .35); color: #f0c4f5; padding: 12px var(--gutter); text-align: center; }
.cs__hero { padding-block: clamp(48px, 7vw, 110px) clamp(32px, 4vw, 60px); }
.cs__kicker { display: flex; gap: 14px; flex-wrap: wrap; color: var(--fog-2); margin-bottom: 26px; }
.cs__title { font-size: clamp(2.8rem, 10vw, 11rem); }
.cs__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--line); padding-top: 20px; }
.cs__meta div { display: grid; gap: 8px; align-content: start; }
.cs__meta span:last-child { font-size: var(--fs-sm); }
.cs__cover { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-block: 1px solid var(--line); }
.cs__cover img { width: 100%; height: 100%; object-fit: cover; }
.cs__cover .px, .cs__shot .px { position: absolute; left: 14px; top: 14px; padding: 6px 8px; background: rgba(7, 5, 12, .72); color: var(--fog); }
.cs__block { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; padding-block: clamp(48px, 6vw, 100px); border-bottom: 1px solid var(--line); }
.cs__block h2 { grid-column: 1 / span 4; font-size: clamp(1.6rem, 2.8vw, 2.8rem); }
.cs__block h2 small { display: block; font-family: var(--pixel); font-size: 11px; color: var(--electric); letter-spacing: .08em; margin-bottom: 12px; font-weight: 400; }
.cs__block .body { grid-column: 6 / span 6; color: var(--fog); font-size: var(--fs-md); display: grid; gap: 16px; }
.cs__block .ph { color: #e7a9f0; }
.cs__gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; padding-block: clamp(48px, 6vw, 100px); }
.cs__shot { position: relative; overflow: hidden; border: 1px solid var(--line); }
.cs__shot img { width: 100%; height: 100%; object-fit: cover; }
.cs__shot:nth-child(1) { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.cs__shot:nth-child(2) { grid-column: 8 / span 5; aspect-ratio: 3 / 4; }
.cs__shot:nth-child(3) { grid-column: 1 / span 12; aspect-ratio: 21 / 9; }
.cs__tech { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 6 / span 6; }
.cs__tech li { padding: 10px 14px; border: 1px solid var(--line-strong); }
.cs__next { display: block; padding-block: clamp(60px, 8vw, 140px); text-align: center; border-top: 1px solid var(--line); }
.cs__next .display { font-size: clamp(2.4rem, 8vw, 8rem); transition: letter-spacing .8s var(--ease-out); }
.cs__next:hover .display { letter-spacing: 0; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 160; transform: translate(-50%, calc(100% + 60px)); visibility: hidden; max-width: calc(100% - 32px); padding: 14px 18px; background: var(--ink-3); border: 1px solid rgba(217, 78, 230, .45); color: var(--paper); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); transition: transform .6s var(--ease-out); }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }
.toast code { font-family: var(--pixel); font-size: 11px; color: #f0c4f5; }

/* distortion filter host */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.is-distorting img { filter: url(#distort); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* translated nav labels + language switch need more room than the English bar did */
@media (max-width: 1280px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; margin-left: 8px; }
  .nav__lang { margin-left: auto; }
  .nav__lang + .nav__cta { margin-left: 8px; }
}

@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; margin-left: 8px; }
  .nav__cta { margin-left: auto; }
  .hero__desc { grid-column: 1 / span 6; }
  .hero__actions { grid-column: 7 / span 6; justify-content: flex-end; }
  .hero__sig { display: none; }
  .svc__name { grid-column: 3 / span 6; }
  .svc__desc { grid-column: 9 / span 3; }
  .stack__field { grid-column: 1 / -1; }
  .stack__panel { grid-column: 1 / -1; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col, .foot__col:first-of-type { grid-column: span 4; }
}

@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav__lang { display: none; }
  .scroll-cue, .hero__render { display: none; }
  .hero__title { font-size: clamp(2.3rem, 11vw, 6rem); margin-block: 6vh 4vh; align-self: end; }
  .hero__title .line:nth-child(3) { padding-left: 5vw; }
  .hero__title .line:nth-child(4) { padding-left: 10vw; }
  .hero__bottom { grid-template-columns: 1fr; gap: 26px; }
  .hero__desc, .hero__actions { grid-column: 1; justify-content: flex-start; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-head__idx, .sec-head__title, .sec-head__aside { grid-column: 1; }
  .sec-head__aside { margin-top: 8px; }
  .intro__stage { min-height: auto; padding-block: 40px; }
  .intro__foot { grid-template-columns: 1fr; }
  .intro__foot p { grid-column: 1; }
  .work__track { flex-direction: column; gap: 56px; }
  .work__intro, .work__end { width: 100%; padding: 0; }
  .card { width: 100%; }
  .card:nth-child(odd of .card) { margin-top: 0; }
  .card__media { aspect-ratio: 4 / 4.4; }
  .card__more { opacity: 1; transform: none; }
  .svc__row { grid-template-columns: auto 1fr auto; gap: 8px 16px; }
  .svc__num { grid-column: 1; grid-row: 1; }
  .svc__name { grid-column: 1 / span 2; grid-row: 2; }
  .svc__desc { grid-column: 1 / span 3; grid-row: 3; }
  .svc__arrow { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .svc__preview { display: none; }
  .tech3d__stage { height: 92svh; }
  .readout--a { top: 6%; } .readout--b { top: 6%; }
  .readout--c { left: 0; bottom: 4%; } .readout--d { right: 0; bottom: 4%; }
  .tech3d__foot { grid-template-columns: 1fr; }
  .tech3d__foot p, .tech3d__hint { grid-column: 1; justify-self: start; }
  .process__grid { grid-template-columns: 1fr; }
  .process__side, .process__list { grid-column: 1; }
  .process__sticky { position: static; }
  .process__now { display: none; }
  .process__list { margin-top: 36px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__title, .about__body, .about__facts { grid-column: 1; }
  .about__title .line:nth-child(3) { padding-left: 0; }
  .about__media { grid-column: 1; grid-row: auto; margin-top: 36px; aspect-ratio: 4 / 3; }
  .about__facts { grid-template-columns: 1fr; }
  .about__facts li { padding-block: 14px; border-bottom: 1px solid var(--line); grid-template-columns: 110px 1fr; }
  .stack__field { aspect-ratio: 4 / 5; }
  .pr { grid-template-columns: 1fr; gap: 10px; }
  .pr__tag, .pr h3, .pr p { grid-column: 1; }
  .slots { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .cs__meta { grid-template-columns: repeat(2, 1fr); }
  .cs__block { grid-template-columns: 1fr; }
  .cs__block h2, .cs__block .body, .cs__tech { grid-column: 1; }
  .cs__gallery { grid-template-columns: 1fr; }
  .cs__shot:nth-child(n) { grid-column: 1; aspect-ratio: 4 / 3; }
  .cs__cover { aspect-ratio: 4 / 3; }
  .foot__col, .foot__col:first-of-type { grid-column: span 6; }
  .gl-fallback { right: -20vw; top: 12%; width: 80vw; }
}

@media (max-width: 520px) {
  .brand__name { display: none; }
  .nav__cta { padding: 12px 14px; font-size: 11px; gap: 10px; }
  .nav__cta .btn-order__arrow { display: none; }
  .hero__top { flex-direction: column; align-items: flex-start; }
  .btn-order--lg { padding: 18px 20px; font-size: 12px; }
  .final__title { font-size: clamp(2.5rem, 13.4vw, 5rem); }
  .final__title .line:nth-child(2) { font-variation-settings: "wdth" 100; }
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal-lines .line > span, .js .intro__b .line > span { transform: none; }
  .js .reveal-up { opacity: 1; transform: none; }
  .intro__a .w { color: var(--paper); }
  .step { opacity: 1; }
}

/* late additions */
.js .hero-in { opacity: 0; }
@media (min-width: 900px) {
  .work__track { align-items: flex-start; padding-top: 72px; padding-bottom: 0; }
  .card { width: min(40vw, calc((100svh - 240px) * 0.8)); }
  .card:nth-child(odd of .card) { margin-top: 0; }
  .card:nth-child(even of .card) { margin-top: 48px; }
  .work__intro, .work__end { align-self: stretch; height: calc(100svh - 120px); }
}
@media (prefers-reduced-motion: reduce) { .js .hero-in { opacity: 1; } }
.gl-fallback--lab { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: min(60vw, 520px); }

:root { --lockup-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201280%201472%22%3E%3Cg%20transform%3D%22translate%280.000000%2C1472.000000%29%20scale%280.100000%2C-0.100000%29%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M5250%2014333%20c-41%20-14%20-40%20-1%20-40%20-943%200%20-786%20-2%20-908%20-15%20-927%20l-15%20-21%20-717%20-1%20c-631%20-1%20-853%20-8%20-913%20-26%20-9%20-3%20-65%20-12%20-125%20-20%20-234%20-32%20-454%20-84%20-635%20-150%20-520%20-190%20-942%20-457%20-1315%20-830%20-436%20-435%20-714%20-892%20-911%20-1495%20-188%20-574%20-211%20-1246%20-63%20-1825%2042%20-164%2062%20-231%2079%20-275%2010%20-25%2023%20-61%2029%20-80%2048%20-162%20146%20-371%20294%20-630%20255%20-445%20687%20-885%201129%20-1148%20182%20-109%20283%20-160%20478%20-244%2063%20-27%20129%20-55%20145%20-63%2071%20-31%20361%20-110%20480%20-130%2022%20-4%2074%20-15%20115%20-26%20115%20-28%20388%20-50%20641%20-52%20l227%20-2%2026%2024%20c15%2014%2061%2077%20103%20140%2079%20120%20281%20400%20364%20506%2025%2033%2077%20105%20114%20160%2038%2055%20120%20171%20184%20258%20118%20162%20206%20285%20320%20449%2036%2051%20149%20206%20251%20343%20103%20138%20202%20273%20220%20300%2019%2028%2048%2068%2066%2090%2017%2022%2054%2072%2080%20111%2042%2061%20176%20246%20457%20629%2037%2050%20118%20162%20181%20250%2063%2088%20135%20187%20159%20220%2024%2033%2091%20124%20148%20201%2057%2078%20128%20175%20157%20215%20119%20167%20207%20286%20283%20381%2045%2056%2085%20113%2091%20127%206%2017%209%20786%209%202241%20l-1%202215%20-21%2018%20c-21%2017%20-78%2017%20-1033%2016%20-556%20-1%20-1018%20-3%20-1026%20-6z%20m-359%20-4039%20c18%20-17%2019%20-59%2019%20-1294%200%20-1445%208%20-1316%20-80%20-1326%20-106%20-12%20-353%20-46%20-445%20-62%20-76%20-12%20-163%20-16%20-360%20-16%20-281%200%20-323%206%20-510%2076%20-336%20125%20-641%20405%20-759%20698%20-90%20220%20-106%20293%20-113%20497%20-15%20466%20171%20868%20532%201152%20148%20117%20319%20198%20530%20251%20166%2043%20212%2045%20734%2043%20392%20-2%20435%20-4%20452%20-19z%20M9830%2010539%20c-213%20-19%20-405%20-50%20-525%20-84%20-27%20-8%20-84%20-24%20-125%20-36%20-263%20-74%20-477%20-174%20-750%20-350%20-307%20-198%20-602%20-481%20-837%20-804%20-40%20-55%20-100%20-136%20-133%20-180%20-77%20-102%20-255%20-345%20-345%20-470%20-38%20-54%20-104%20-143%20-145%20-199%20-41%20-55%20-109%20-148%20-150%20-206%20-40%20-58%20-119%20-165%20-174%20-239%20-56%20-73%20-163%20-219%20-238%20-325%20-136%20-190%20-184%20-256%20-347%20-476%20-153%20-207%20-166%20-225%20-184%20-250%20-57%20-84%20-145%20-205%20-237%20-329%20-58%20-79%20-139%20-189%20-180%20-245%20-41%20-57%20-115%20-157%20-164%20-222%20-154%20-206%20-191%20-257%20-251%20-344%20-32%20-47%20-67%20-96%20-77%20-109%20-25%20-33%20-23%20-60%208%20-71%2016%20-6%20812%20-10%202203%20-10%202123%200%202180%200%202254%20-19%20380%20-98%20430%20-615%2076%20-793%20-140%20-71%2034%20-66%20-2388%20-71%20l-2174%20-3%20-18%20-23%20c-29%20-36%20-29%20-2048%20-1%20-2074%2017%20-16%20209%20-17%202493%20-19%202547%20-3%202646%20-2%202811%2036%2034%208%2083%2019%20108%2024%20632%20139%201183%20515%201564%201067%20385%20557%20535%201318%20385%201945%20-101%20422%20-178%20600%20-397%20910%20-221%20312%20-602%20620%20-953%20770%20-41%2017%20-83%2035%20-94%2040%20-95%2044%20-315%20107%20-510%20147%20-129%2026%20-133%2026%20-780%2033%20-765%209%20-738%204%20-695%20111%2011%2027%2030%2073%2041%20102%2086%20213%20292%20426%20519%20537%20296%20144%20357%20150%201500%20144%20980%20-4%201246%202%201271%2027%2018%2018%2019%2059%2019%201022%200%20851%20-2%201006%20-14%201023%20-14%2019%20-38%2019%20-1143%2020%20-620%201%20-1171%20-2%20-1223%20-7z%20M2949%201164%20c-8%20-9%20-13%20-35%20-12%20-58%201%20-22%20-3%20-56%20-9%20-75%20l-10%20-34%20-73%207%20c-84%208%20-115%20-1%20-164%20-47%20-135%20-128%20-57%20-366%20118%20-360%2031%201%2088%202%20128%203%2049%201%2075%206%2083%2016%2018%2021%209%20526%20-9%20548%20-17%2020%20-35%2020%20-52%200z%20m-69%20-250%20c37%20-31%2060%20-73%2060%20-109%200%20-36%20-23%20-78%20-60%20-109%20-115%20-96%20-239%20112%20-128%20216%2039%2037%2085%2038%20128%202z%20M4697%201162%20c-25%20-27%20-26%20-532%20-1%20-556%2019%20-20%2025%20-20%2050%20-2%2027%2020%2035%20512%209%20552%20-19%2029%20-36%2030%20-58%206z%20M7971%201167%20c-6%20-7%20-12%20-42%20-15%20-76%20-5%20-81%20-11%20-86%20-105%20-86%20-87%200%20-119%20-16%20-177%20-84%20-44%20-52%20-43%20-187%200%20-244%2047%20-61%2082%20-81%20140%20-79%2028%200%2085%201%20126%202%2041%201%2080%206%2087%2012%2018%2015%2019%20538%201%20556%20-16%2016%20-43%2015%20-57%20-1z%20m-67%20-248%20c61%20-48%2073%20-128%2030%20-191%20-45%20-64%20-111%20-72%20-167%20-20%20-104%2098%2026%20298%20137%20211z%20M6531%201156%20c-31%20-37%209%20-103%2047%20-80%2036%2023%2023%2094%20-18%2094%20-10%200%20-23%20-6%20-29%20-14z%20M9746%201154%20c-30%20-29%20-11%20-84%2029%20-84%2023%200%2055%2032%2055%2057%200%2018%20-29%2043%20-50%2043%20-10%200%20-26%20-7%20-34%20-16z%20M1831%201136%20c-128%20-49%20-211%20-139%20-232%20-252%20-38%20-203%2086%20-375%20290%20-404%20112%20-16%20221%2019%20221%2071%200%2024%20-23%2025%20-98%203%20-97%20-28%20-228%207%20-287%2078%20-87%20103%20-77%20293%2019%20389%20117%20117%20268%20116%20388%20-2%2065%20-64%2083%20-113%2075%20-197%20-10%20-91%20-64%20-139%20-108%20-95%20-18%2017%20-19%2026%20-9%20115%2013%20130%205%20145%20-67%20132%20-44%20-8%20-51%20-26%20-24%20-60%2026%20-33%2030%20-137%206%20-171%20-26%20-37%20-99%20-59%20-130%20-39%20-86%2056%20-82%20147%208%20227%2039%2034%2040%2037%2020%2043%20-40%2013%20-110%20-39%20-132%20-97%20-33%20-87%20-1%20-173%2081%20-217%2047%20-25%2048%20-25%2097%20-7%2058%2020%2088%2021%20121%202%20102%20-58%20219%2062%20208%20214%20-16%20218%20-233%20348%20-447%20267z%20M6540%201005%20c-16%20-20%20-16%20-371%201%20-391%2015%20-19%2045%20-18%2053%202%2010%2027%207%20364%20-4%20385%20-13%2023%20-33%2025%20-50%204z%20M9749%201003%20c-20%20-23%20-25%20-347%20-6%20-383%2015%20-31%2039%20-36%2061%20-15%2019%2020%2024%20361%206%20396%20-13%2023%20-43%2025%20-61%202z%20M4123%20996%20c-62%20-28%20-88%20-99%20-57%20-157%2015%20-30%2099%20-79%20135%20-79%2019%200%2049%20-31%2049%20-51%200%20-43%20-60%20-51%20-120%20-16%20-63%2035%20-107%20-8%20-60%20-58%2075%20-79%20267%20-38%20286%2061%2010%2056%20-45%20129%20-105%20140%20-76%2014%20-111%2047%20-91%2085%2013%2024%2061%2025%20100%203%2055%20-33%2089%2027%2035%2062%20-34%2022%20-132%2028%20-172%2010z%20M7075%20991%20c-93%20-42%20-153%20-161%20-125%20-247%2040%20-120%20174%20-186%20284%20-140%2046%2019%2079%2062%2065%2087%20-12%2024%20-30%2024%20-76%20-1%20-94%20-50%20-183%203%20-183%20108%200%20115%2087%20173%20182%20122%2039%20-21%2063%20-19%2072%206%2024%2063%20-126%20108%20-219%2065z%20M8513%20999%20c-58%20-17%20-143%20-135%20-143%20-199%200%20-80%20103%20-193%20193%20-214%2069%20-16%20191%2045%20185%2093%20-4%2036%20-28%2038%20-90%207%20-29%20-14%20-60%20-26%20-71%20-26%20-46%200%20-107%2060%20-94%2094%205%2012%2029%2015%20133%2015%20138%201%20154%206%20154%2053%200%20128%20-132%20216%20-267%20177z%20m125%20-75%20c68%20-48%2048%20-84%20-48%20-84%20-83%200%20-100%206%20-100%2033%200%2056%2094%2089%20148%2051z%20M9172%20995%20c-23%20-10%20-39%20-27%20-53%20-59%20-32%20-72%20-8%20-106%20114%20-166%2043%20-21%2073%20-42%2075%20-53%209%20-47%20-58%20-62%20-116%20-27%20-45%2028%20-70%2026%20-78%20-5%20-8%20-31%2016%20-61%2063%20-81%20142%20-60%20286%2083%20192%20191%20-17%2019%20-43%2038%20-58%2042%20-49%2011%20-101%2043%20-101%2061%200%2042%2047%2054%20101%2027%2030%20-16%2069%20-7%2069%2016%200%2058%20-125%2090%20-208%2054z%20M10290%20995%20c-116%20-53%20-159%20-185%20-94%20-290%2048%20-78%2071%20-90%20172%20-90%2087%200%2087%200%2090%20-26%207%20-61%20-89%20-89%20-168%20-49%20-89%2045%20-115%20-6%20-32%20-64%2083%20-58%20217%20-26%20275%2067%20l27%2044%200%20194%20c0%20107%20-4%20200%20-8%20207%20-6%208%20-28%2012%20-63%2010%20-30%20-1%20-79%201%20-109%205%20-41%206%20-64%203%20-90%20-8z%20m130%20-70%20c99%20-51%2068%20-224%20-43%20-242%20-72%20-11%20-124%2055%20-115%20149%209%2089%2082%20132%20158%2093z%20M11070%201000%20c-19%20-5%20-53%20-7%20-75%20-4%20-69%208%20-70%206%20-72%20-187%20-2%20-183%204%20-212%2040%20-207%2035%205%2047%2044%2047%20161%200%20107%200%20107%2033%20142%2042%2045%2075%2052%20110%2025%2036%20-28%2047%20-75%2047%20-200%200%20-109%207%20-130%2042%20-130%2032%200%2040%2036%2036%20174%20-3%20140%20-17%20182%20-70%20215%20-26%2016%20-96%2022%20-138%2011z%20M3354%20986%20c-3%20-8%206%20-36%2020%20-63%2014%20-26%2026%20-53%2026%20-60%200%20-6%2020%20-54%2044%20-105%2068%20-145%2068%20-153%201%20-227%20-21%20-23%20-35%20-48%20-33%20-58%204%20-25%2060%20-29%2093%20-7%2032%2021%20109%20176%20164%20330%2021%2060%2044%20123%2051%20140%2023%2055%20-15%2089%20-52%2047%20-21%20-24%20-68%20-115%20-68%20-131%200%20-22%20-28%20-69%20-46%20-76%20-26%20-10%20-41%2010%20-69%2094%20-33%2098%20-56%20130%20-96%20130%20-16%200%20-32%20-6%20-35%20-14z%20M5210%20979%20c-154%20-92%20-123%20-327%2052%20-385%2078%20-26%20173%203%20200%2061%2020%2044%20-23%2071%20-67%2042%20-64%20-44%20-134%20-38%20-160%2014%20-30%2057%20-11%2067%20121%2064%20145%20-3%20170%2021%20125%20122%20-44%2095%20-180%20136%20-271%2082z%20m150%20-46%20c43%20-29%2056%20-75%2024%20-87%20-28%20-11%20-140%20-6%20-152%206%20-54%2054%2061%20127%20128%2081z%20M5847%20993%20c-15%20-14%20-6%20-37%2032%20-82%2075%20-90%2075%20-93%201%20-196%20-58%20-80%20-61%20-108%20-14%20-113%2026%20-3%2038%205%2081%2053%2060%2065%2071%2067%20109%2018%2044%20-58%2062%20-73%2088%20-73%2049%200%2044%2023%20-26%20117%20-54%2074%20-53%20113%207%20186%2053%2066%2059%2097%2017%2097%20-20%200%20-41%20-13%20-72%20-45%20-24%20-25%20-51%20-45%20-59%20-45%20-8%200%20-34%2020%20-57%2045%20-39%2043%20-86%2060%20-107%2038z%22/%3E%20%3C/g%3E%3C/svg%3E"); }