/* ==========================================================================
   SERENITY CREATIVE — style.css
   Built from the Figma "Main Page" (visual DNA) + the supporting Figma screens.

   01 Tokens, fonts, reset         10 Tools
   02 Base, grain, utilities       11 Featured + projects grid
   03 Header + menu                12 CTA + footer
   04 Buttons                      13 Inner hero (aurora) + filters
   05 Hero (scaled to Figma)       14 Work modules
   06 Marquee                      15 Project page
   07 About + orbits               16 About page
   08 Accordion                    17 Contact + 404
   09 Motion primitives            18 Cursor, lightbox, video, responsive
   ========================================================================== */

/* 01 — TOKENS, FONTS, RESET --------------------------------------------- */
@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit-300.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fonts/outfit-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --sc-css: 1;                      /* read by the diagnostic guard: proves this file loaded */
  --bg: #0e0e0e; --bg2: #131313; --band: #18191b; --panel: #101010;
  --ink: #fff; --ink2: rgba(255, 255, 255, 0.72); --ink3: rgba(255, 255, 255, 0.46);
  --line: rgba(255, 255, 255, 0.16); --line2: rgba(255, 255, 255, 0.34);
  --lime: #deff00; --olive: #4b5b08; --orange: #f5731d;
  --serif: "Instrument Serif", "Playfair Display", Georgia, serif;
  --f: "Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --hh: 92px;
  --pad: min(6.4vw, 102px);
  --wide: min(87.2vw, 1420px); --narrow: min(77.5vw, 1240px); --xwide: var(--wide);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 20px); }
body { margin: 0; background: linear-gradient(var(--bg), var(--bg2) 60%); background-color: var(--bg); color: var(--ink); font-family: var(--f); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }
b, strong { font-weight: 700; }
::selection { background: var(--lime); color: #0e0e0e; }

/* 02 — BASE, GRAIN, UTILITIES ------------------------------------------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 600; background: var(--lime); color: #0e0e0e; padding: 10px 18px; border-radius: 6px; font-weight: 600; transition: top 0.2s; }
.skip:focus { top: 14px; }
.wrap { width: var(--wide); margin-inline: auto; }
.wrap-n { width: var(--narrow); margin-inline: auto; }
.wrap-x { width: var(--wide); margin-inline: auto; }
.label { display: inline-block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2); }
.label::before { content: "( "; } .label::after { content: " )"; }
.lime { color: var(--lime); }
.ic { flex: none; }
/* "medium" weight: Outfit ships 400 + 700 only, so 500 is faked with a hairline stroke */
.med { -webkit-text-stroke: 0.028em currentColor; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; }

/* 03 — HEADER + MENU ---------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--hh); transition: transform 0.45s var(--ease), background-color 0.3s; }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.09); }
.hdr.is-solid { background: rgba(14, 14, 14, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr.is-hidden { transform: translateY(-101%); }
.hdr__in { height: 100%; width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 29.5px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.brand__mark { width: 52px; height: 52px; flex: none; transition: transform 0.7s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-14deg) scale(1.06); }
.brand__t b { font-weight: 600; }
.nav { display: flex; gap: clamp(16px, 2.6vw, 40px); transform: translateX(calc(var(--wide) * 0.022)); }
.nav a { position: relative; font-size: 10.5px; letter-spacing: 0.035em; white-space: nowrap; text-transform: uppercase; padding: 10px 0; transition: color 0.25s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--lime); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr__r { display: flex; align-items: center; gap: 22px; justify-self: end; }
.lang { display: inline-flex; gap: 5px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink3); padding: 8px 2px; }
.lang i { font-style: normal; } .lang .is-on { color: var(--ink); }
.lang:hover span:not(.is-on) { color: var(--lime); }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line2); border-radius: 50%; place-items: center; }
.burger__b { position: relative; width: 16px; height: 8px; }
.burger__b::before, .burger__b::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: #fff; transition: transform 0.35s var(--ease), top 0.35s var(--ease); }
.burger__b::before { top: 0; } .burger__b::after { top: 7px; }
.burger[aria-expanded="true"] .burger__b::before { top: 3px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__b::after { top: 3px; transform: rotate(-45deg); }
.mmenu { position: fixed; inset: var(--hh) 0 0 0; z-index: 190; background: var(--bg); padding: 24px var(--pad) 36px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; animation: menu-in 0.5s var(--ease) both; }
.mmenu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 50% at 0% 100%, rgba(75, 91, 8, 0.85), transparent 70%), radial-gradient(60% 40% at 100% 90%, rgba(75, 91, 8, 0.5), transparent 70%); }
.mmenu__l li { border-bottom: 1px solid var(--line); overflow: hidden; }
.mmenu__l a { display: flex; align-items: baseline; gap: 18px; padding: 12px 0; font-size: clamp(44px, 13vw, 76px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.mmenu__l a[aria-current="page"] { color: var(--lime); }
.mmenu__n { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink2); }
.mmenu__f { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; font-size: 15px; color: var(--ink2); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* 04 — BUTTONS ---------------------------------------------------------- */
.sb { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.sb__l, .sb__i { display: inline-flex; align-items: center; justify-content: center; height: 46px; border: 1px solid rgba(255, 255, 255, 0.85); transition: background-color 0.35s var(--ease), color 0.35s, border-color 0.35s; }
.sb__l { padding-inline: 26px; border-radius: 999px; }
.sb__l b { font-weight: 600; margin-inline: 0.35em; } .sb__l em { font-style: normal; color: var(--orange); margin-left: 0.35em; transition: color 0.3s; }
.sb__i { width: 46px; border-radius: 50%; margin-left: -1px; }
.sb__i .ic { transition: transform 0.45s var(--ease); }
.sb--sm .sb__l, .sb--sm .sb__i { height: 38px; } .sb--sm .sb__i { width: 38px; } .sb--sm .sb__l { padding-inline: 22px; }
.sb:hover .sb__l, .sb:hover .sb__i, .sb:focus-visible .sb__l, .sb:focus-visible .sb__i { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }
.sb:hover .sb__l em { color: #0e0e0e; }
.sb:hover .sb__i .ic { transform: rotate(45deg); }
.sb--lime .sb__l, .sb--lime .sb__i { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }
.sb--lime:hover .sb__l, .sb--lime:hover .sb__i { background: #fff; border-color: #fff; }
.btn-lime { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding-inline: 28px; background: var(--lime); color: #0e0e0e; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.3s, transform 0.4s var(--ease); }
.btn-lime--sq { border-radius: 4px; height: 54px; padding-inline: 34px; }
.btn-lime:hover { background: #fff; transform: translateY(-2px); }
.link-u { display: inline-flex; gap: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line2); padding-bottom: 4px; transition: color 0.25s, border-color 0.25s; }
.link-u:hover { color: var(--lime); border-color: var(--lime); }
.magnetic { transition: transform 0.4s var(--ease); will-change: transform; }

/* 05 — HERO (every measurement is Figma design-px × --k) ---------------- */
.hero { --w: var(--wide); --k: calc(var(--w) / 1290); position: relative; overflow: hidden; isolation: isolate; height: calc(var(--k) * 700); min-height: 440px; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(calc(var(--k) * 46)); translate: var(--gpx, 0px) var(--gpy, 0px); will-change: translate; }
.hero { --sx: calc(50% - var(--w) / 2); }
.hero__glow--a { left: calc(var(--sx) + var(--k) * -260); top: calc(var(--k) * -190); width: calc(var(--k) * 720); height: calc(var(--k) * 660); background: radial-gradient(closest-side, rgba(112, 128, 12, 1) 0%, rgba(101, 116, 12, 0.92) 30%, rgba(80, 93, 10, 0.55) 60%, rgba(75, 91, 8, 0.16) 86%, rgba(75, 91, 8, 0) 100%); }
.hero__glow--b { left: calc(var(--sx) + var(--k) * 930); top: calc(var(--k) * 230); width: calc(var(--k) * 680); height: calc(var(--k) * 660); background: radial-gradient(closest-side, rgba(116, 131, 13, 1) 0%, rgba(106, 120, 13, 0.94) 28%, rgba(84, 97, 11, 0.6) 58%, rgba(75, 91, 8, 0.18) 84%, rgba(75, 91, 8, 0) 100%); }
/* the pixel-tile texture at the top-left of the Figma hero */
.hero__pix { position: absolute; left: var(--sx); top: 0; width: calc(var(--k) * 520); height: calc(var(--k) * 330);
  background-image: linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: calc(var(--k) * 55) calc(var(--k) * 55); -webkit-mask-image: radial-gradient(70% 80% at 25% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 25% 30%, #000, transparent 75%); }
.hero__bg::before { content: ""; position: absolute; left: calc(var(--sx) + var(--k) * 290); top: calc(var(--k) * 4); width: calc(var(--k) * 56); height: calc(var(--k) * 56); background: rgba(150, 175, 20, 0.26);
  box-shadow: calc(var(--k) * -215) calc(var(--k) * 56) 0 rgba(150, 175, 20, 0.15), calc(var(--k) * -160) calc(var(--k) * 216) 0 rgba(150, 175, 20, 0.2), calc(var(--k) * -290) calc(var(--k) * 106) 0 rgba(150, 175, 20, 0.14), calc(var(--k) * 56) calc(var(--k) * 56) 0 rgba(150, 175, 20, 0.1); }
.hero__pix::before, .hero__pix::after { content: none; }
.hero__pix::before { left: calc(var(--k) * 290); top: calc(var(--k) * 6); width: calc(var(--k) * 55); height: calc(var(--k) * 55); }
.hero__pix::after { left: calc(var(--k) * 128); top: calc(var(--k) * 220); width: calc(var(--k) * 55); height: calc(var(--k) * 55); background: rgba(160, 190, 0, 0.1); }
.hero__stage { position: absolute; left: 50%; top: 0; width: calc(var(--k) * 1290); height: 100%; transform: translateX(-50%); }
.hero__stage > * { position: absolute; }
.hero__follow { left: calc(var(--k) * 34); top: calc(var(--k) * 482); display: flex; align-items: center; gap: 9px; white-space: nowrap; transform: rotate(-90deg); transform-origin: 0 0; font-size: max(12px, calc(var(--k) * 14)); letter-spacing: 0.02em; z-index: 4; }
.hero__follow i { width: calc(var(--k) * 24); height: 1px; background: #fff; }
.hero__follow .fl { letter-spacing: 0; }
.hero__follow a { transition: color 0.2s; } .hero__follow a:hover { color: var(--lime); }

.hero__t { inset: 0; margin: 0; font-weight: 400; letter-spacing: 0; z-index: 3; pointer-events: none; }
.hl { position: absolute; display: block; line-height: 1; white-space: nowrap; padding: calc(var(--k) * 14) calc(var(--k) * 40) calc(var(--k) * 26); margin: calc(var(--k) * -14) calc(var(--k) * -40) calc(var(--k) * -26); }
.hl__in { display: inline-flex; align-items: baseline; }
.hl--1 { left: calc(var(--k) * 262); top: calc(var(--k) * 124); }
.hero__im { font-size: calc(var(--k) * 147); font-weight: 700; letter-spacing: -0.03em; }
.hero__name { font-size: calc(var(--k) * 102); font-weight: 300; font-style: italic; letter-spacing: -0.054em; margin-left: calc(var(--k) * 21); position: relative; top: calc(var(--k) * -36); }
.hl--2, .hl--3 { font-weight: 300; }
.hl--2 { left: calc(var(--k) * 184); top: calc(var(--k) * 268); font-size: calc(var(--k) * 113); letter-spacing: -0.02em; padding-left: calc(var(--k) * 110); margin-left: calc(var(--k) * -110); }
.hl--3 { left: calc(var(--k) * 142); top: calc(var(--k) * 377); font-size: calc(var(--k) * 113); letter-spacing: -0.02em; }
.hl--2 .hl__in { align-items: center; }
.hero .asterisk { position: absolute; left: calc(var(--k) * 34); top: calc(var(--k) * 60); width: calc(var(--k) * 60); height: calc(var(--k) * 60); color: var(--lime); transform-origin: center; }
.js .hero .asterisk { animation: spark-spin 5s linear infinite, spark-pulse 2.2s ease-in-out infinite; }
@keyframes spark-spin { to { rotate: 360deg; } }
@keyframes spark-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.16; } }
.hero__cut { left: calc(var(--k) * 355); top: calc(var(--k) * 172); width: calc(var(--k) * 650); height: auto; z-index: 2; pointer-events: none; -webkit-user-select: none; user-select: none; transform-origin: 50% 100%; }
.hero__intro { left: calc(var(--k) * 948); top: calc(var(--k) * 300); z-index: 4; display: block; }
.hero__intro > .hero__dot { display: none; }
.hero__intro > [data-i18n-html] { display: flex; flex-direction: column; align-items: flex-start; }
.hero__w1 { font-size: max(15px, calc(var(--k) * 22)); font-weight: 300; line-height: 1.2; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); }
.hero__w15 { margin: calc(var(--k) * 2) 0 calc(var(--k) * -6) calc(var(--k) * 34); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: max(22px, calc(var(--k) * 34)); line-height: 1.05; color: rgba(255, 255, 255, 0.92); }
.hero__w2 { position: relative; display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: max(40px, calc(var(--k) * 68)); line-height: 1; letter-spacing: -0.01em; color: #fff; }
.hero__dot { flex: none; width: 9px; height: 9px; background: var(--lime); margin-top: calc(var(--k) * 12); }
.u { position: relative; display: inline-block; }
.u .scr, .ul .scr, .hero__w2 .scr { position: absolute; left: 0; bottom: -0.14em; width: 100%; height: 0.2em; color: var(--orange); }
.ul { position: relative; display: inline-block; }
.hero__card { left: calc(var(--k) * 846); top: calc(var(--k) * 538); width: calc(var(--k) * 376); height: calc(var(--k) * 224); z-index: 5; background: #f6f6f2; color: #0e0e0e; border-radius: calc(var(--k) * 8) calc(var(--k) * 8) 0 0; padding: calc(var(--k) * 18) calc(var(--k) * 20); }
.hero__seal { position: absolute; left: calc(var(--k) * 20); top: calc(var(--k) * 20); display: grid; place-items: center; width: calc(var(--k) * 52); height: calc(var(--k) * 52); border-radius: 50%; background: var(--lime); }
.hero__seal svg { width: 62%; height: 62%; }
.hero__q { margin-left: calc(var(--k) * 66); font-size: max(15px, calc(var(--k) * 22)); line-height: 1.16; letter-spacing: -0.015em; font-weight: 500; }
.hero__by { max-width: calc(var(--k) * 178); margin: calc(var(--k) * 10) 0 0 calc(var(--k) * 66); font-size: max(9px, calc(var(--k) * 9.5)); line-height: 1.4; color: #777; white-space: nowrap; }
.hero__btn { position: absolute; right: calc(var(--k) * 40); top: calc(var(--k) * 106); display: inline-flex; align-items: center; gap: 6px; height: calc(var(--k) * 34); padding-inline: calc(var(--k) * 18); background: var(--lime); border-radius: 999px; font-size: max(9.5px, calc(var(--k) * 11)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background-color 0.3s; }
.hero__btn-i { position: absolute; right: calc(var(--k) * -26); top: 0; display: grid; place-items: center; width: calc(var(--k) * 30); aspect-ratio: 1; border-radius: 50%; background: var(--lime); transition: background-color 0.3s; }
.hero__btn:hover, .hero__btn:hover .hero__btn-i { background: #0e0e0e; color: var(--lime); }

/* 06 — MARQUEE ---------------------------------------------------------- */
.marq { background: var(--band); overflow: hidden; height: clamp(72px, 7vw, 100px); display: flex; align-items: center; }
.marq__track { display: flex; width: max-content; animation: marq 60s linear infinite; will-change: transform; }
.marq__g { display: flex; align-items: center; flex: none; }
.marq__i { display: inline-flex; align-items: center; font-size: clamp(22px, 2.5vw, 35px); letter-spacing: -0.015em; white-space: nowrap; font-weight: 500; }
.marq__s { display: inline-flex; margin-inline: clamp(24px, 3.6vw, 56px); color: var(--lime); }
.marq__s .spark { width: clamp(20px, 2.2vw, 31px); height: clamp(20px, 2.2vw, 31px); }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 07 — ABOUT + ORBITS --------------------------------------------------- */
.about { padding-block: clamp(70px, 9vw, 130px) clamp(60px, 7vw, 100px); }
.about__g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.about__lead { margin: 14px 0 clamp(22px, 3vw, 34px); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; max-width: 17em; }
.pill { display: inline-block; width: 2.45em; height: 0.86em; margin-inline: 0.1em; vertical-align: -0.08em; border-radius: 999px; background: var(--lime); transform-origin: left center; }
.js .about__lead .pill { transform: scaleX(0); transition: transform 1s var(--ease) calc(var(--pi, 0) * 0.18s + 0.35s); }
.js .about__lead.is-in .pill { transform: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* 08 — ACCORDION (services) --------------------------------------------- */
.svc { padding-block: clamp(30px, 5vw, 70px) clamp(60px, 8vw, 110px); }
.svc__h { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 34px); }
.svc__h h2 { display: inline-flex; align-items: flex-start; gap: 6px; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -0.02em; font-weight: 600; }
.svc__h .scr--star { width: 26px; height: 26px; color: var(--orange); margin-top: -8px; }
.acc__r { border-top: 1px solid var(--line); }
.acc__r:last-child { border-bottom: 1px solid var(--line); }
.acc__h { display: grid; grid-template-columns: clamp(64px, 9.6vw, 110px) 1fr auto; align-items: center; width: 100%; text-align: left; }
.acc__n { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink2); }
.acc__n::before { content: "( "; } .acc__n::after { content: " )"; }
.acc__t { font-size: clamp(38px, 6.3vw, 90px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; padding-block: 0.06em 0.02em; transition: color 0.3s, transform 0.6s var(--ease); }
.acc__h:hover .acc__t { color: var(--lime); transform: translateX(10px); }
.acc__x { position: relative; width: 26px; height: 26px; margin-right: 10px; transition: transform 0.55s var(--ease), color 0.3s; }
.acc__x::before, .acc__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
.acc__x::after { transform: rotate(90deg); }
.acc__r.is-open .acc__x { transform: rotate(45deg); color: var(--lime); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease); }
.acc__r.is-open .acc__p { grid-template-rows: 1fr; }
.acc__pi { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.7s; }
.acc__r.is-open .acc__pi { visibility: visible; transition-delay: 0s; }
.acc__b { display: grid; grid-template-columns: clamp(64px, 9.6vw, 110px) minmax(0, 335px) minmax(0, 1fr); column-gap: 0; padding-block: 14px clamp(30px, 4vw, 54px); }
.acc__m { grid-column: 2; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #161616; position: relative; box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.045); }
.acc__m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease); }
.acc__r.is-open .acc__m img { transform: none; }
.acc__m--v { display: grid; place-items: center; background: transparent; border: 1px solid var(--line2); border-radius: 50%; }
.acc__tx { grid-column: 3; padding: 12px 0 0 clamp(24px, 4.4vw, 62px); }
.acc__bl { font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.26; letter-spacing: -0.015em; max-width: 21em; }
.chk { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px clamp(28px, 4.5vw, 70px); margin-block: 30px 32px; }
.chk li { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink2); }
.chk .ic { color: #fff; }
.rel { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.rel a { display: block; width: 92px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--band); opacity: 0.85; transition: opacity 0.3s, transform 0.5s var(--ease); }
.rel a:hover, .rel a:focus-visible { opacity: 1; transform: translateY(-4px); }
.rel img { width: 100%; height: 100%; object-fit: cover; }
.acc--page .acc__t { font-size: clamp(42px, 7vw, 100px); }

/* 09 — MOTION PRIMITIVES ------------------------------------------------ */
.js [data-r] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.65s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-r].is-in { opacity: 1; transform: none; }
.js .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.14em 0.14em 0; margin: 0 -0.14em -0.14em 0; }
.js .w > span { display: inline-block; transform: translateY(112%); transition: transform 0.95s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.js .is-in .w > span, .js .w.is-in > span { transform: none; }
.scr path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s var(--ease) 0.08s; }
.is-in .scr path, .scr.is-in path { stroke-dashoffset: 0; }
html:not(.js) .scr path { stroke-dashoffset: 0; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js main { animation: pin 0.7s var(--ease) both; }
.js body.is-leaving main { opacity: 0; transform: translateY(-10px); transition: opacity 0.22s ease, transform 0.22s ease; }
/* hero entrance: one orchestrated sequence */
.js .hl { overflow: hidden; }
.js .hl__in > * { animation: rise 1.05s var(--ease) both; }
.js .hl--1 .hero__name { animation-delay: 0.14s; } .js .hl--2 .hl__in > * { animation-delay: 0.28s; } .js .hl--3 .hl__in > * { animation-delay: 0.4s; }
.js .hero__cut { animation: fade 1.3s ease 0.15s both, cut-in 1.3s var(--ease) 0.15s both, cut-float 6.5s ease-in-out 1.5s infinite; translate: var(--px, 0px) var(--py, 0px); will-change: translate; }
@keyframes cut-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-0.5deg); } }
@keyframes cut-in { from { transform: translateY(24px) scale(0.985); } to { transform: none; } }
.js .hero__intro { animation: fade 1s ease 0.95s both; }
.js .hero__card { animation: card-in 1.1s var(--ease) 0.9s both; translate: var(--cpx, 0px) var(--cpy, 0px); will-change: translate; }
@keyframes card-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.hero .scr path { transition-delay: 1.5s; }
.js .hero .u .scr path, .js .hero .ul .scr path { stroke-dashoffset: 1; }
.js .hero.is-live .scr path { stroke-dashoffset: 0; }

/* 10 — TOOLS ------------------------------------------------------------ */
.tools { text-align: center; padding-block: clamp(20px, 4vw, 60px) clamp(50px, 7vw, 100px); }
.tools h2 { margin-top: 12px; font-size: clamp(26px, 2.75vw, 38px); letter-spacing: -0.02em; line-height: 1.22; }
.ring { display: inline-block; padding: 0.02em 0.62em 0.14em; margin-top: 8px; border: 1px solid var(--lime); border-radius: 50%; }
.tools__cloud { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 1000px; margin: clamp(30px, 5vw, 70px) auto 0; padding-inline: 16px; }
.tool { display: grid; place-items: center; align-content: center; gap: 12px; width: var(--sz, 200px); aspect-ratio: 1; margin: 0 -14px; border-radius: 50%; background: #111; border: 1px solid rgba(255, 255, 255, 0.14); transition: background-color 0.4s var(--ease), border-color 0.4s, transform 0.7s var(--ease); animation: bob 10s ease-in-out infinite; }
.tool:nth-child(1) { --sz: clamp(120px, 15vw, 200px); } .tool:nth-child(2) { --sz: clamp(140px, 18vw, 255px); margin-top: 40px; animation-delay: -2s; }
.tool:nth-child(3) { --sz: clamp(130px, 16vw, 220px); margin-top: -30px; animation-delay: -4s; } .tool:nth-child(4) { --sz: clamp(150px, 19vw, 270px); animation-delay: -1s; }
.tool:nth-child(5) { --sz: clamp(120px, 15vw, 205px); margin-top: 36px; animation-delay: -5s; } .tool:nth-child(6) { --sz: clamp(135px, 17vw, 235px); margin-top: -24px; animation-delay: -3s; }
.tool:nth-child(7) { --sz: clamp(120px, 15vw, 200px); margin-top: 30px; animation-delay: -6s; }
.tool__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.tool__n { font-size: 15px; letter-spacing: 0.01em; font-weight: 500; }
.tool:hover { background: #1a1c12; border-color: var(--lime); z-index: 2; }

/* 11 — FEATURED + PROJECTS GRID ----------------------------------------- */
.featured-sec { padding-block: clamp(10px, 2vw, 30px) clamp(60px, 9vw, 130px); }
.feat { display: block; position: relative; width: 75%; margin-left: 12.6%; }
.feat__m { position: relative; overflow: hidden; border-radius: 4px; background: #161616; aspect-ratio: 2 / 1; }
.feat__m img, .feat__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease), opacity 0.7s; }
.feat:hover .feat__m img { transform: scale(1.035); }
.feat__b { position: absolute; z-index: 2; left: 18px; top: 18px; background: var(--lime); color: #0e0e0e; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.feat__c { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 18px; }
.feat__t { font-size: clamp(28px, 3.6vw, 52px); letter-spacing: -0.035em; transition: transform 0.6s var(--ease), color 0.3s; }
.feat:hover .feat__t { transform: translateX(12px); color: var(--lime); }
.feat__s { color: var(--ink2); margin-top: 6px; }
.xv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease); pointer-events: none; }
[data-vwrap].is-playing .xv { opacity: 1; }

.projects { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(30px, 5vw, 70px) clamp(70px, 9vw, 130px); }
.projects__glow { position: absolute; z-index: -2; left: 50%; top: 42%; width: min(46vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(78, 94, 8, 1) 0%, rgba(75, 91, 8, 0.82) 22%, rgba(75, 91, 8, 0.5) 45%, rgba(75, 91, 8, 0.22) 68%, rgba(75, 91, 8, 0.06) 86%, rgba(75, 91, 8, 0) 100%); filter: blur(30px); }
.pword { position: absolute; z-index: -1; left: 0; top: clamp(150px, 20vw, 290px); display: flex; width: max-content; font-size: clamp(64px, 7.4vw, 108px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; will-change: transform; pointer-events: none; }
.pword span { padding-right: 0.72em; }
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 19.8%, 200px); align-items: start; }
.hcol { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 92px); }
.hcol--b { padding-top: clamp(60px, 8.6vw, 124px); }
.projects__cta { display: flex; justify-content: center; margin-top: clamp(50px, 7vw, 100px); }

/* project card (home grid + work modules + related) */
.pc { display: block; position: relative; }
.pc__m { position: relative; overflow: hidden; border-radius: 10px; background: #161616; box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.045); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.pc:hover .pc__m { box-shadow: 0 26px 54px -18px rgba(0,0,0,.72), 0 6px 18px rgba(0,0,0,.4); transform: translateY(-3px); }
.pc__m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 0.6s; }
.pc:hover .pc__m img, .pc:focus-visible .pc__m img { transform: scale(1.06); }
.pc[data-slot="square"] .pc__m { aspect-ratio: 1; } .pc[data-slot="tall"] .pc__m { aspect-ratio: 4 / 5; }
@media (max-width: 640px) { .pc[data-slot="tall"] .pc__m, .pc[data-slot="square"] .pc__m, .pc[data-slot="uniform"] .pc__m { aspect-ratio: 4 / 3; } }
.pc[data-slot="wide"] .pc__m, .pc[data-slot="wide-lg"] .pc__m, .pc[data-slot="wide-sm"] .pc__m { aspect-ratio: 400 / 258; }
.pc[data-slot="uniform"] .pc__m { aspect-ratio: 4 / 3; } .pc[data-slot="port"] .pc__m { aspect-ratio: 3 / 4; }
.pc__c { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-top: 16px; }
.pc__cat { display: block; font-size: 14px; color: var(--ink2); }
.pc__t { margin-top: 2px; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.01em; line-height: 1.2; transition: transform 0.6s var(--ease), color 0.3s; }
.pc:hover .pc__t { transform: translateX(6px); color: var(--lime); }
.pc__a { flex: none; color: #d0d0d0; transition: transform 0.5s var(--ease), color 0.3s; }
.pc:hover .pc__a, .pc:focus-visible .pc__a { transform: translate(4px, -4px); color: var(--lime); }
.pc__badge { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(14, 14, 14, 0.75); border: 1px solid var(--line2); color: var(--lime); pointer-events: none; transition: background-color 0.3s, color 0.3s; }
.pc:hover .pc__badge { background: var(--lime); color: #0e0e0e; }
.pc__pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s var(--ease), transform 1.1s var(--ease); pointer-events: none; }
.pc.is-playing .pc__pv { opacity: 1; }
.pc:hover .pc__pv { transform: scale(1.06); }

/* 12 — CTA + FOOTER ----------------------------------------------------- */
.foot { position: relative; }
.cta { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(80px, 9vw, 130px); }
.cta--off { padding-top: 0; }
.cta__glow { position: absolute; z-index: -1; top: 8%; height: 86%; width: 26%; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.cta__glow--l { left: -13%; background: radial-gradient(closest-side, rgba(84, 100, 6, 1), rgba(75, 91, 8, 0.6) 60%, rgba(75, 91, 8, 0)); }
.cta__glow--r { right: -12%; top: 5%; background: radial-gradient(closest-side, rgba(84, 100, 6, 1), rgba(75, 91, 8, 0.6) 60%, rgba(75, 91, 8, 0)); }
.cta__rings { position: absolute; z-index: -1; right: -2%; top: 22%; width: 12%; aspect-ratio: 1.15 / 1; pointer-events: none; }
.cta__rings i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; transform: rotate(-38deg) scaleY(0.62); animation: ring 26s linear infinite; }
.cta__rings i:nth-child(2) { inset: 4% 3% -2% 4%; border-color: rgba(255, 255, 255, 0.2); animation-duration: 34s; animation-direction: reverse; }
@keyframes ring { to { transform: rotate(322deg) scaleY(0.62); } }
.cta__in { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.cta__t { font-size: clamp(38px, 5.5vw, 76px); letter-spacing: -0.035em; line-height: 1.12; }
.cta__t > span { display: block; }
.cta__l1 { display: inline-flex !important; align-items: flex-start; gap: 4px; }
.cta__star { width: 0.42em; height: 0.42em; color: var(--orange); margin-top: -0.1em; }
.cta__c { flex: none; display: grid; place-items: center; text-align: center; width: clamp(96px, 8.6vw, 116px); aspect-ratio: 1; margin-top: clamp(8px, 1.5vw, 20px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); font-size: 13px; line-height: 1.25; transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s, transform 0.5s var(--ease); }
.cta__c:hover, .cta__c:focus-visible { background: var(--lime); color: #0e0e0e; border-color: var(--lime); transform: scale(1.07) rotate(-6deg); }
.cta__c:hover svg { stroke: #0e0e0e; }
.cta__c .ic, .orbit-btn .ic { display: inline-block; vertical-align: -1px; }
.foot__in { padding-top: clamp(50px, 6vw, 84px); }
.foot--plain .foot__in { padding-top: clamp(40px, 5vw, 60px); }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-block: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; }
.foot__l { display: flex; gap: clamp(30px, 5vw, 64px); color: rgba(255, 255, 255, 0.78); }
.foot__l a, .foot__m { transition: color 0.2s; } .foot__l a:hover, .foot__m:hover { color: var(--lime); }
.foot__c { text-align: center; padding-top: 26px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.foot__made { text-align: center; padding-block: 4px 40px; font-size: 11px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.4); }
.foot__c b { color: #fff; }

/* 13 — INNER HERO (aurora), FILTERS ------------------------------------- */
.ihero { position: relative; display: grid; place-items: center; height: clamp(300px, 26.6vw, 470px); padding-top: var(--hh); text-align: center; background-color: #000; background-image: var(--aurora-img, url("assets/images/aurora.jpg")); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.ihero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, var(--bg)); opacity: 0.55; }
.ihero__c { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ihero__back { position: absolute; z-index: 3; left: calc((100vw - var(--wide)) / 2); top: calc(var(--hh) + 26px); display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 10px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink2); transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease); }
.ihero__back:hover { color: #0e0e0e; background: var(--lime); border-color: var(--lime); transform: translateX(-2px); }
@media (max-width: 700px) { .ihero__back { position: static; margin-bottom: 4px; } }
.ihero h1 { font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -0.02em; }
.crumb { display: inline-flex; align-items: center; gap: 12px; background: var(--lime); color: #0e0e0e; border-radius: 4px; padding: 6px 22px; font-size: 15px; }
.crumb a:hover { text-decoration: underline; }
.crumb .ic { opacity: 0.8; }
.wf-wrap { position: sticky; top: var(--hh); z-index: 30; background: rgba(14, 14, 14, 0.94); border-bottom: 1px solid var(--line); }
.wf { display: flex; overflow: hidden; padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.wf__track { display: flex; width: max-content; animation: wf-scroll 34s linear infinite; }
.wf__g { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 10px; }
.wf:hover .wf__track, .wf:focus-within .wf__track { animation-play-state: paused; }
.wf.is-static .wf__track { animation: none; }
.wf.is-static .wf__g[aria-hidden="true"] { display: none; }
@keyframes wf-scroll { to { transform: translateX(-50%); } }
.wf::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 20px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s, border-color 0.3s; }
.chip sup { font-size: 10px; color: var(--ink3); position: relative; top: -0.5em; }
.chip:hover { border-color: var(--lime); color: var(--lime); }
.chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }
.chip[aria-pressed="true"] sup { color: rgba(14, 14, 14, 0.6); }

/* 14 — WORK MODULES ----------------------------------------------------- */
.wrk { padding-bottom: clamp(60px, 8vw, 120px); }
.wrk__count { padding-block: 26px 10px; font-size: 14px; color: var(--ink2); }
.mh { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 44px); border-top: 1px solid var(--line); margin-top: clamp(70px, 10vw, 150px); padding-top: 18px; }
.mh__n { font-size: 15px; color: var(--ink2); min-width: 3.4em; } .mh__n::before { content: "( "; } .mh__n::after { content: " )"; }
.mh__t { font-size: clamp(44px, 7vw, 104px); letter-spacing: -0.045em; line-height: 0.95; }
.mh__c { margin-left: auto; font-size: 13px; color: var(--ink3); }
.mods > * + * { margin-top: clamp(44px, 6vw, 86px); }
.mf { display: block; }
.mf__m { position: relative; overflow: hidden; border-radius: 10px; background: #161616; aspect-ratio: 2113 / 1102; max-width: 1120px; margin-inline: auto; box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.045); }
.mf__m img, .mf__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity 0.7s; }
.mf:hover .mf__m img { transform: scale(1.03); }
.mf__k { position: absolute; z-index: 2; left: 18px; top: 18px; background: var(--lime); color: #0e0e0e; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.mf__c { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-top: 20px; }
.mf__t { font-size: clamp(34px, 5.2vw, 78px); letter-spacing: -0.045em; line-height: 0.98; transition: transform 0.7s var(--ease), color 0.3s; }
.mf:hover .mf__t { transform: translateX(14px); color: var(--lime); }
.mf__s { color: var(--ink2); margin-top: 8px; }
.mf__a { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line2); border-radius: 50%; transition: background-color 0.4s, color 0.4s, transform 0.6s var(--ease), border-color 0.4s; }
.mf:hover .mf__a { background: var(--lime); color: #0e0e0e; border-color: var(--lime); transform: rotate(45deg); }
.md { display: grid; grid-template-columns: var(--cols, 1fr 1fr); column-gap: clamp(34px, 8vw, 130px); align-items: start; }
.md > :nth-child(2) { margin-top: var(--off, clamp(60px, 10vw, 160px)); }
.md--lg { --cols: 1.45fr 1fr; } .md--sm { --cols: 1fr 1.45fr; }
.md--lg > :nth-child(2), .md--sm > :nth-child(1) { align-self: end; margin-top: 0; }
.md--sm > :nth-child(1) { margin-bottom: clamp(20px, 6vw, 90px); } .md--sm > :nth-child(2) { margin-top: 0; }
.mt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3.4vw, 50px); align-items: start; }
.mt > :nth-child(2) { margin-top: clamp(40px, 6vw, 90px); } .mt > :nth-child(3) { margin-top: clamp(80px, 12vw, 180px); }
.mw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: start; max-width: 1180px; margin-inline: auto; }
.mw > :nth-child(2) { margin-top: clamp(30px, 5vw, 70px); } .mw > :nth-child(3) { margin-top: clamp(10px, 2vw, 30px); } .mw > :nth-child(4) { margin-top: clamp(50px, 8vw, 110px); }
.hstrip { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x proximity; padding-block: 6px 26px; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; cursor: grab; }
.hstrip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.hstrip .pc { flex: none; width: clamp(240px, 27vw, 380px); scroll-snap-align: start; }
.hstrip .pc:nth-child(even) { margin-top: clamp(20px, 4vw, 60px); }
.hstrip--full { padding-inline: var(--pad); margin-top: 10px; }
.hstrip--full::before { content: ""; flex: none; width: max(0px, calc((100vw - var(--wide)) / 2 - var(--pad))); }
.wrk__video { margin-top: clamp(70px, 10vw, 150px); }
.vcard { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: clamp(28px, 4vw, 60px); border: 1px solid var(--line2); border-radius: 10px; transition: background-color 0.5s var(--ease), color 0.4s, border-color 0.4s; }
.vcard h3 { font-size: clamp(32px, 5vw, 76px); letter-spacing: -0.045em; }
.vcard p { color: var(--ink2); margin-top: 10px; transition: color 0.3s; }
.vcard:hover { background: var(--lime); color: #0e0e0e; border-color: var(--lime); } .vcard:hover p { color: rgba(14, 14, 14, 0.7); }

/* 15 — PROJECT PAGE ----------------------------------------------------- */
.pv { padding-bottom: 20px; }
.pv__hero { position: relative; margin-top: clamp(30px, 5vw, 70px); }
.pv__m { position: relative; overflow: hidden; border-radius: 10px; background: #111; box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.045); }
.pv__m img, .pv__m video { width: 100%; height: auto; }
.pinfo { position: absolute; right: clamp(-30px, -2vw, -12px); bottom: clamp(-90px, -6vw, -30px); z-index: 3; width: min(310px, 44%); background: #0a0a0a; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.pinfo__h { background: var(--lime); color: #0e0e0e; padding: 13px 22px; font-weight: 600; font-size: 17px; }
.pinfo__r { padding: 13px 22px; border-bottom: 1px solid var(--line); }
.pinfo__r:last-child { border-bottom: 0; }
.pinfo dt { font-size: 12px; color: var(--ink3); } .pinfo dd { font-size: 15px; font-weight: 600; margin-top: 1px; }
.pv__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 310px); gap: 30px; margin-top: clamp(50px, 8vw, 110px); }
.pv__h { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.03em; }
.pv__s { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.28; color: rgba(255, 255, 255, 0.9); max-width: 26em; }
.pv__vis { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 44px); padding-block: clamp(40px, 6vw, 90px) clamp(40px, 6vw, 90px); }
.vis__btn { display: block; width: 100%; position: relative; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.045); }
.vis__btn img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.vis__btn:hover img { transform: scale(1.02); }
.vis__hint { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: #0e0e0e; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.4s var(--ease); }
.vis__btn:hover .vis__hint, .vis__btn:focus-visible .vis__hint { opacity: 1; transform: none; }
.vis__cap { display: flex; gap: 18px; padding-top: 12px; font-size: 14px; color: var(--ink2); }
.vis__cap b { font-weight: 400; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.pn__l { display: block; }
.pn__l--next { text-align: right; }
.pn__k { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink2); display: inline-flex; gap: 10px; align-items: center; }
.pn__t { margin-block: 10px 18px; font-size: clamp(30px, 5.4vw, 80px); letter-spacing: -0.045em; line-height: 0.98; transition: color 0.3s, transform 0.7s var(--ease); }
.pn__l:hover .pn__t { color: var(--lime); transform: translateX(10px); } .pn__l--next:hover .pn__t { transform: translateX(-10px); }
.pn__i { aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden; background: #111; }
.pn__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pn__l:hover .pn__i img { transform: scale(1.05); }
.rl { padding-block: clamp(30px, 5vw, 70px) clamp(70px, 9vw, 130px); }
.rl__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); }

/* 16 — ABOUT PAGE ------------------------------------------------------- */
.ab { padding-block: clamp(50px, 7vw, 100px) clamp(60px, 8vw, 110px); }
.ab__h { font-size: clamp(56px, 9vw, 132px); letter-spacing: -0.05em; line-height: 0.95; }
.ab__it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.08em; }
.ab__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1.5fr) minmax(0, 3fr); grid-template-areas: "img mid side" "txt txt side2"; gap: clamp(20px, 3vw, 40px); margin-top: clamp(30px, 5vw, 60px); }
.ab__img { grid-area: img; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #d9d9d9; }
.ab__img img { width: 100%; height: 100%; object-fit: cover; }
.ab__mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.ab__out { font-size: clamp(90px, 11vw, 170px); font-weight: 600; line-height: 0.86; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.24); letter-spacing: -0.03em; }
.orbit-btn { display: grid; place-items: center; text-align: center; width: clamp(96px, 9vw, 126px); aspect-ratio: 1; margin-top: clamp(20px, 3vw, 40px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 600; line-height: 1.3; transition: background-color 0.4s, color 0.4s, transform 0.6s var(--ease); animation: bob 8s ease-in-out infinite; }
.orbit-btn:hover { background: var(--lime); color: #0e0e0e; }
.ab__side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ab__stat { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); }
.ab__stat::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.18); }
.ab__num { font-size: clamp(48px, 6.2vw, 84px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.ab__cap { margin-top: 4px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); text-align: center; }
.ab__note { align-self: flex-start; max-width: 320px; margin-top: clamp(20px, 4vw, 40px); font-size: 14.5px; line-height: 1.55; color: var(--ink2); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.ab__note p { border-top: 1px solid var(--line); padding-top: 10px; }
.ab__note p:first-child { border-top: 0; padding-top: 0; }
.ab__txt { grid-area: txt; max-width: 35em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.65; color: var(--ink2); }
.ab__txt p + p { margin-top: 1em; } .ab__txt .end { color: var(--lime); }
.band { background: var(--band); padding-block: 34px; }
.band__in { display: flex; align-items: center; gap: clamp(24px, 5vw, 70px); flex-wrap: wrap; }
.band__n { display: flex; flex-direction: column; padding-right: clamp(24px, 5vw, 60px); border-right: 1px solid rgba(255, 255, 255, 0.18); }
.band__n b { font-size: 40px; line-height: 1; } .band__n span { font-size: 15px; color: var(--ink2); }
.band__l { display: flex; gap: clamp(24px, 6vw, 90px); flex-wrap: wrap; font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.86); }
.path { padding-block: clamp(70px, 9vw, 130px) 0; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: clamp(64px, 9.6vw, 110px) minmax(0, 1fr) minmax(0, 0.7fr); gap: 20px 40px; align-items: center; padding-block: clamp(20px, 3vw, 34px); border-bottom: 1px solid var(--line); }
.row__n { font-size: 15px; color: var(--ink2); } .row__n::before { content: "( "; } .row__n::after { content: " )"; }
.row__t { font-size: clamp(30px, 4.4vw, 64px); letter-spacing: -0.04em; line-height: 1; transition: color 0.3s, transform 0.6s var(--ease); }
.row:hover .row__t { color: var(--lime); transform: translateX(8px); }
.row__d { color: var(--ink2); font-size: 15px; line-height: 1.55; } .row__d b { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
.sel { padding-block: clamp(70px, 9vw, 130px) clamp(60px, 8vw, 110px); }

/* 17 — CONTACT + 404 ---------------------------------------------------- */
.ct { padding-block: clamp(60px, 8vw, 110px) clamp(70px, 9vw, 130px); }
.ct__g { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.ct__l h2 { margin-block: 14px 22px; font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -0.04em; line-height: 1.02; }
.ct__p { color: var(--ink2); max-width: 26em; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: #fff; background: var(--band); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 20px 24px; transition: border-color 0.25s, background-color 0.25s; }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 24px center; padding-right: 54px; color: rgba(255, 255, 255, 0.8); }
.field select option { background: #161616; color: #fff; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); background: #1d1f20; }
.field [aria-invalid="true"] { border-color: #ff6b6b; }
.field__e { font-size: 13px; color: #ff8b8b; min-height: 1.1em; }
.form__f { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form__note { font-size: 14px; color: var(--ink2); max-width: 44ch; } .form__note a { color: var(--lime); border-bottom: 1px solid currentColor; }
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(50px, 7vw, 100px); }
.cc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 20px 40px; background: var(--band); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; transition: transform 0.6s var(--ease), border-color 0.4s; }
.cc:hover { transform: translateY(-6px); border-color: var(--lime); }
.cc__i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: #0e0e0e; margin-bottom: 14px; transition: transform 0.6s var(--ease); }
.cc:hover .cc__i { transform: rotate(-12deg) scale(1.06); }
.cc h3 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 4px; }
.cc a, .cc p { font-size: 15px; color: rgba(255, 255, 255, 0.82); overflow-wrap: anywhere; } .cc a:hover { color: var(--lime); }

.nf { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--hh) + 30px) var(--pad) 60px; }
.nf__glow { position: absolute; z-index: -1; bottom: -18%; width: 40vw; aspect-ratio: 1; border-radius: 50%; filter: blur(50px); background: radial-gradient(closest-side, rgba(84, 100, 6, 1), rgba(75, 91, 8, 0.55) 60%, rgba(75, 91, 8, 0)); }
.nf__glow--l { left: -14%; } .nf__glow--r { right: -12%; }
.nf__rings { right: 4%; top: 18%; width: 16%; }
.nf__n { display: flex; justify-content: center; align-items: center; font-size: clamp(130px, 27vw, 380px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; }
.nf__n span { color: var(--lime); display: inline-block; margin-inline: 0.02em; animation: nf-spin 12s ease-in-out infinite; }
@keyframes nf-spin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) scale(1.03); } }
.nf h1 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 50px); letter-spacing: -0.03em; }
.nf__p { margin: 14px auto 32px; color: var(--ink2); max-width: 42ch; }
.nf__a { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* 18 — CURSOR, LIGHTBOX, VIDEO, RESPONSIVE ------------------------------ */
.cursor { position: fixed; left: 0; top: 0; z-index: 500; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cursor.is-on { opacity: 1; }
.cursor__t { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lime); color: #0e0e0e; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), opacity 0.3s; overflow: hidden; }
.cursor.is-view .cursor__t { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.cursor.is-hide .cursor__t { width: 0; height: 0; margin: 0; opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { .js.has-cursor, .js.has-cursor a, .js.has-cursor button { cursor: none; } .js.has-cursor input, .js.has-cursor textarea, .js.has-cursor select { cursor: auto; } }

.lb { position: fixed; inset: 0; z-index: 700; background: rgba(6, 6, 6, 0.96); display: grid; grid-template-rows: auto 1fr auto; padding: 16px clamp(12px, 3vw, 40px) 20px; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; font-size: 14px; color: var(--ink2); }
.lb__st { display: grid; place-items: center; min-height: 0; padding-block: 12px; }
.lb__st img, .lb__st video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #000; }
.lb__nav { display: flex; justify-content: center; gap: 12px; }
.rb { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line2); border-radius: 50%; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.rb:hover, .rb:focus-visible { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }

/* video frames (project pages) — follow the video's own ratio, capped to the viewport */
.vframe { position: relative; isolation: isolate; overflow: hidden; width: min(100%, calc(86vh * var(--ratio, 1.7778))); aspect-ratio: var(--ratio, 1.7778); margin-inline: auto; border-radius: 10px; background: #111; cursor: pointer; }
.vframe[data-native] { cursor: default; }
.vmedia { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #111; object-fit: cover; }
.vplay { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; margin: calc(clamp(64px, 8vw, 96px) / -2) 0 0 calc(clamp(64px, 8vw, 96px) / -2); border-radius: 50%; background: var(--lime); color: #0e0e0e; opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), background-color 0.25s; }
.vplay .ic { width: 30px; height: 30px; margin-left: 4px; }
.vframe.is-manual:not(.is-playing) .vplay, .vframe.is-userpaused:not(.is-playing) .vplay { opacity: 1; transform: none; pointer-events: auto; }
.vplay:hover, .vplay:focus-visible { background: #fff; }
.vctl { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.3s var(--ease); }
.vframe:hover .vctl, .vframe:focus-within .vctl { opacity: 1; }
.vframe[data-native] .vctl { top: 14px; bottom: auto; left: auto; }
.vbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(14, 14, 14, 0.7); border: 1px solid var(--line2); color: #fff; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.vbtn:hover, .vbtn:focus-visible { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }
.vbtn--x { margin-left: auto; }
.vbtn .i-pause, .vbtn .i-snd { display: none; }
.vframe.is-playing .vbtn .i-play { display: none; } .vframe.is-playing .vbtn .i-pause { display: inline-grid; }
.vframe.is-unmuted .vbtn .i-mute { display: none; } .vframe.is-unmuted .vbtn .i-snd { display: inline-grid; }
.vframe.is-broken { cursor: default; }
.vframe.is-broken::after { content: attr(data-broken); position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(14, 14, 14, 0.85); font-size: 14px; color: var(--ink2); }
.vframe.is-broken .vplay, .vframe.is-broken .vctl { display: none; }
@media (hover: none) { .vctl { opacity: 1; } }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.pc:focus-visible, .mf:focus-visible, .feat:focus-visible { outline-offset: 6px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .marq__track { width: auto; flex-wrap: wrap; justify-content: center; } .marq { height: auto; padding-block: 18px; } .marq__g[aria-hidden="true"] { display: none; }
  .js [data-r], .js .w > span { opacity: 1; transform: none; }
  .scr path { stroke-dashoffset: 0; }
  .pword { transform: none !important; }
  .pc__pv, .xv, .cursor { display: none; }
}

/* Tablet */
@media (max-width: 1100px) {
  .nav { gap: 26px; } .hdr__r .sb { display: none; }
  .acc__b { grid-template-columns: clamp(50px, 8vw, 90px) minmax(0, 260px) minmax(0, 1fr); }
  .ab__g { grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 3fr); }
  .rl__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rl__g .pc:nth-child(3) { display: none; }
}
/* Mobile: the hero re-composes (it is not simply stacked) */
@media (max-width: 860px) {
  :root { --hh: 70px; --pad: 22px; --wide: calc(100vw - 44px); --narrow: calc(100vw - 44px); }
  .nav { display: none; } .burger { display: grid; }
  .hdr__in { grid-template-columns: 1fr auto; } .brand { font-size: 22px; } .brand__mark { width: 38px; height: 38px; }
  .hero { --w: var(--wide); --k: calc(var(--w) / 430); height: calc(var(--k) * 864); min-height: 0; }
  .hero__stage { width: calc(var(--k) * 430); }
  .hero__follow { display: none; }
  .hl--1 { left: calc(var(--k) * 22); top: calc(var(--k) * 104); } .hero__im { font-size: calc(var(--k) * 70); } .hero__name { font-size: calc(var(--k) * 45); margin-left: calc(var(--k) * 8); top: calc(var(--k) * -8); letter-spacing: -0.05em; }
  .hl--2 { left: calc(var(--k) * 58); top: calc(var(--k) * 178); font-size: calc(var(--k) * 74); } .hl--3 { left: calc(var(--k) * 26); top: calc(var(--k) * 246); font-size: calc(var(--k) * 74); }
  .hl--2 { padding-left: calc(var(--k) * 40); margin-left: calc(var(--k) * -40); }
  .hero .asterisk { left: calc(var(--k) * 6); top: calc(var(--k) * 28); width: calc(var(--k) * 30); height: calc(var(--k) * 30); }
  .hero__cut { left: calc(var(--k) * 44); top: calc(var(--k) * 262); width: calc(var(--k) * 392); }
  .hero__intro { left: calc(var(--k) * 26); top: calc(var(--k) * 326); width: calc(var(--k) * 200); }
  .hero__w1 { font-size: calc(var(--k) * 16); } .hero__w15 { font-size: calc(var(--k) * 24); margin-left: calc(var(--k) * 22); } .hero__w2 { font-size: calc(var(--k) * 38); }
  .hero__dot { margin-top: calc(var(--k) * 7); }
  .hero__card { left: calc(var(--k) * 16); top: calc(var(--k) * 552); width: calc(var(--k) * 398); height: calc(var(--k) * 200); border-radius: 12px 12px 0 0; padding: 16px 18px; }
  .hero__seal { left: 18px; top: 18px; width: 46px; height: 46px; } .hero__q { margin-left: 58px; font-size: 19px; } .hero__by { margin-left: 58px; font-size: 10px; }
  .hero__btn { top: auto; bottom: 24px; right: 62px; height: 30px; padding-inline: 14px; font-size: 9px; } .hero__btn-i { width: 30px; right: -36px; }
  .hero__glow--a { width: calc(var(--k) * 520); height: calc(var(--k) * 460); } .hero__glow--b { top: calc(var(--k) * 420); }
  .about__g { grid-template-columns: 1fr; } .orbits { margin: 20px auto 0; max-width: 360px; }
  .acc__h { grid-template-columns: 44px 1fr auto; } .acc__b { grid-template-columns: 44px minmax(0, 1fr); } .acc__m { grid-column: 2; max-width: 340px; } .acc__tx { grid-column: 2; padding: 22px 0 0; } .chk { grid-template-columns: 1fr; }
  .feat { margin-left: 0; width: 100%; } .feat__c { flex-direction: column; align-items: flex-start; }
  .hgrid { grid-template-columns: 1fr; } .hcol { display: contents; }
  .hcol--b { padding: 0; } .hgrid .pc { order: var(--o, 0); } .hgrid { display: flex; flex-direction: column; gap: 40px; max-width: 320px; margin-inline: auto; }
  .pc__m { max-height: 62vh; }
  .mods .pc, .mods .mf { max-width: 340px; margin-inline: auto; }
  .mf__m, .mods .pc__m { max-height: 58vh; }
  .mw { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
  .pword { top: 90px; font-size: clamp(60px, 17vw, 110px); }
  .cta__in { flex-direction: column; gap: 34px; } .cta__glow { width: 46%; } .cta__rings { display: none; }
  .mh { flex-wrap: wrap; gap: 8px 20px; } .mh__c { margin-left: 0; width: 100%; }
  .md, .md--lg, .md--sm { grid-template-columns: 1fr; row-gap: 40px; } .md > :nth-child(n) { margin: 0; align-self: auto; }
  .mt { grid-template-columns: 1fr; row-gap: 40px; } .mt > :nth-child(n) { margin-top: 0; }
  .mw { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mw > :nth-child(n) { margin-top: 0; } .mw > :nth-child(even) { margin-top: 36px; }
  .mf__c { grid-template-columns: 1fr; } .mf__a { display: none; }
  .pinfo { position: static; width: 100%; margin-top: 16px; box-shadow: none; } .pv__intro { grid-template-columns: 1fr; margin-top: 44px; }
  .pn { grid-template-columns: 1fr; } .pn__l--next { text-align: left; } .rl__g { grid-template-columns: 1fr; } .rl__g .pc:nth-child(3) { display: block; }
  .ab__g { grid-template-columns: 1fr 1fr; grid-template-areas: "img img" "mid side" "txt txt"; } .ab__mid { flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: center; } .ab__out { font-size: 100px; }
  .orbit-btn { display: none; }
  .row { grid-template-columns: 44px 1fr; } .row__d { grid-column: 2; }
  .ct__g { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } .ccards { grid-template-columns: 1fr; }
  .vcard { grid-template-columns: 1fr; }
  .tool { margin: 0 -8px; }
}
@media (max-width: 520px) {
  .lang { display: none; }
  .band__in { flex-direction: column; align-items: flex-start; } .band__n { border-right: 0; padding-right: 0; }
  .tool:nth-child(n) { margin-top: 0; }
  .vctl { left: 10px; right: 10px; bottom: 10px; } .vbtn { width: 38px; height: 38px; }
}
@media print { body::after, .hdr, .marq, .cursor { display: none; } body { background: #fff; color: #000; } }

/* 19 — HERO VIDEO SLOT, SCROLL HINT, BACK-TO-TOP ---------------------------
   home.heroVideo in projects.json fills the hero background with a local MP4 (kept subtle). */
.hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__bg[data-vwrap].is-playing .hero__vid { opacity: 0.32; }
.hero__scroll { left: calc(var(--k) * 96); top: calc(var(--k) * 606); z-index: 6; display: grid; place-items: center; width: calc(var(--k) * 54); min-width: 40px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.42); transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s, transform 0.5s var(--ease); }
.hero__scroll .ic { animation: nudge 2.4s ease-in-out infinite; }
.hero__scroll:hover, .hero__scroll:focus-visible { background: var(--lime); color: #0e0e0e; border-color: var(--lime); transform: scale(1.08); }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.foot__up { margin-left: 14px; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); transition: color 0.2s, border-color 0.2s; }
.foot__up:hover { color: var(--lime); border-color: var(--lime); }
@media (max-width: 860px) { .hero__scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll .ic, .hero__vid, .hero__cut { animation: none !important; } .hero__vid { display: none; } }

/* 20 — TYPE + ALIGNMENT PASS ------------------------------------------- */
.pc__cat, .foot__l, .foot__c, .hero__by, .label { font-weight: 300; } .pc__cat { color: rgba(255, 255, 255, 0.78); }
.foot__c b, .foot__row a { font-weight: 400; }
.js .pc[data-r], .js .feat[data-r], .js .mf[data-r] { opacity: 1; transform: translateY(30px); }
.js .pc[data-r].is-in, .js .feat[data-r].is-in, .js .mf[data-r].is-in { transform: none; }

/* the big word behind the grid keeps turning by itself (and also drifts with scroll) */
.pword__t { display: flex; width: max-content; animation: pword 70s linear infinite; }
@keyframes pword { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pword__t { animation: none; } }

@media (min-width: 861px) { .hgrid { margin-left: calc(-1 * min(3.72vw, 54px)); margin-right: min(3.72vw, 54px); } }

/* placeholders that keep the Figma composition when a link is not set yet (e.g. Instagram) */
.is-off { cursor: default; opacity: 0.9; }
.hero__follow .is-off, .foot__l .is-off { color: inherit; }
.svc__l { transition: color 0.3s; } .svc__l:hover { color: var(--lime); }

/* Figma "Main": the nav has no active highlight on the home screen */
.brand__t b { font-weight: 600; } .brand__t { font-weight: 300; }

/* header proportions measured on the Figma frame */
.brand { gap: 4px; }
.hdr .sb__l, .hdr .sb__i { height: 40px; } .hdr .sb__i { width: 40px; } .hdr .sb__l { padding-inline: 24px; }

.pc__concept { color: var(--ink3); }
.meta__concept dd { color: var(--ink2); }

/* 21 — TOOLS MARKS, PLAYGROUND, BLOG --------------------------------------- */
.tool__i--mark { display: grid; place-items: center; }
.tool__i--mark svg { display: block; }

.pg { padding-block: clamp(30px, 5vw, 60px) clamp(70px, 9vw, 130px); }
.pg__lede { margin-top: 14px; max-width: 46ch; }
.pg__tool { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--band); }
.pg__bar { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pg__bar > * + * { padding-left: clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--line); }
.pg__tools { display: flex; gap: 4px; }
.pg__tb { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink2); border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pg__tb:hover { color: #fff; } .pg__tb.is-on { background: var(--lime); color: #0e0e0e; border-color: var(--lime); }
.pg__swatches { display: flex; align-items: center; gap: 8px; }
.pg__sw { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid transparent; transition: transform 0.25s var(--ease), border-color 0.25s; }
.pg__sw:hover { transform: scale(1.12); }
.pg__sw.is-on { border-color: #fff; transform: scale(1.15); }
.pg__custom { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.pg__custom::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.pg__custom::-webkit-color-swatch { border: 0; border-radius: 50%; }
.pg__custom.is-on { border-color: #fff; }
.pg__brush { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); }
.pg__brush input[type="range"] { accent-color: var(--lime); width: 90px; }
.pg__bg { display: flex; gap: 6px; }
.pg__bgb { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 2px solid transparent; transition: border-color 0.2s, transform 0.2s; }
.pg__bgb--dark { background: #141414; border: 1px solid var(--line); }
.pg__bgb.is-on { border-color: var(--lime); transform: scale(1.1); }
.pg__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pg__board { position: relative; aspect-ratio: 16 / 9; background: #fff; touch-action: none; transition: background 0.3s; }
.pg__board[data-bg="dark"] { background: #141414; }
.pg__board canvas { display: block; width: 100%; height: 100%; }
.pg__board canvas[data-pg-canvas] { cursor: crosshair; }
.pg__board .pg__preview { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 700px) {
  .pg__bar { gap: 10px 0; }
  .pg__bar > * + * { padding-left: 10px; border-left: 0; }
  .pg__actions { margin-left: 0; width: 100%; justify-content: space-between; padding-left: 0 !important; border-left: 0 !important; margin-top: 4px; padding-top: 10px !important; border-top: 1px solid var(--line) !important; }
  .pg__board { aspect-ratio: 4 / 5; }
}

.bl { padding-block: clamp(30px, 5vw, 60px) clamp(70px, 9vw, 130px); }
.bl__list { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.bl__card { border-bottom: 1px solid var(--line); transition: background 0.35s var(--ease); }
.bl__card:hover { background: rgba(255, 255, 255, 0.025); }
.bl__h { display: grid; grid-template-columns: clamp(72px, 8vw, 108px) 1fr auto; align-items: center; gap: clamp(16px, 3vw, 32px); width: 100%; text-align: left; padding: clamp(22px, 3.4vw, 34px) clamp(14px, 2vw, 24px); }
.bl__n { display: grid; place-items: center; width: clamp(34px, 3.4vw, 42px); aspect-ratio: 1; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; color: var(--ink2); transition: border-color 0.35s, color 0.35s, background 0.35s; }
.bl__cov { flex: none; width: clamp(72px, 8vw, 108px); aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.bl__cov img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.bl__h:hover .bl__cov img { transform: scale(1.06); }
.bl__card:hover .bl__n, .bl__card.is-open .bl__n { border-color: var(--lime); color: var(--lime); }
.bl__ht h3 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.02em; transition: color 0.3s; }
.bl__h:hover .bl__ht h3 { color: var(--lime); }
.bl__ht p { margin-top: 8px; color: var(--ink2); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.bl__x { position: relative; width: 24px; height: 24px; margin-top: 10px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 0.5s var(--ease), color 0.3s, border-color 0.3s; }
.bl__card:hover .bl__x { border-color: var(--lime); }
.bl__x::before, .bl__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.bl__x::after { transform: rotate(90deg); }
.bl__card.is-open .bl__x { transform: rotate(45deg); color: var(--lime); }
.bl__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.bl__card.is-open .bl__p { grid-template-rows: 1fr; }
.bl__pi { overflow: hidden; min-height: 0; }
.bl__body { max-width: 62ch; padding: 0 clamp(14px, 2vw, 24px) clamp(28px, 4.4vw, 44px) calc(clamp(72px, 8vw, 108px) + clamp(16px, 3vw, 32px) + clamp(14px, 2vw, 24px)); color: var(--ink2); font-size: 16.5px; line-height: 1.75; border-left: 2px solid rgba(222, 255, 0, 0.25); margin-left: clamp(14px, 2vw, 24px); }
.bl__body p + p { margin-top: 1em; }
.bl__lede.lede { max-width: 46em; }
@media (max-width: 700px) { .bl__h { grid-template-columns: 64px 1fr auto; padding-inline: 4px; } .bl__cov { width: 64px; } .bl__body { padding-left: 16px; margin-left: 4px; } }

@media (prefers-reduced-motion: reduce) { .js .hero .asterisk { animation: none; } .hero__cut, .hero__card, .hero__glow { translate: none !important; } }


.cursor-trail { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 398; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cursor-trail { display: none; } }

.pg__typein { position: absolute; z-index: 5; background: transparent; border: 1px dashed rgba(222, 255, 0, 0.6); outline: none; padding: 2px 4px; font-family: Inter, "Helvetica Neue", Arial, sans-serif; min-width: 40px; }

.pg__tabs { display: flex; gap: 4px; padding: 10px 20px 0; }
.pg__tabb { padding: 9px 18px; border-radius: 8px 8px 0 0; font-size: 13px; color: var(--ink2); border: 1px solid transparent; border-bottom: 0; transition: color 0.2s, background 0.2s; }
.pg__tabb:hover { color: #fff; } .pg__tabb.is-on { background: var(--card, #14140f); color: var(--lime); border-color: var(--line); }
.pg__panel { display: none; } .pg__panel.is-on { display: block; }
.pg__hint { font-size: 12.5px; color: var(--ink3); }
.pg__board--poster { aspect-ratio: 16 / 9; background: #0e0e0e; }
@media (max-width: 700px) { .pg__board--poster { aspect-ratio: 4 / 5; } .pg__hint { display: none; } }

/* HERO CARD — grid layout: nothing is absolutely positioned any more, so nothing can overlap */
.hero__card { display: grid; grid-template-columns: calc(var(--k) * 52) minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "seal q q" ". by btn"; column-gap: calc(var(--k) * 14); row-gap: calc(var(--k) * 12); align-items: start; height: auto !important; }
.hero__seal { position: static; grid-area: seal; display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(222,255,0,.14), rgba(14,14,14,.05) 70%); }
.hero__q { grid-area: q; margin: 0; align-self: center; }
.hero__by { grid-area: by; margin: 0; align-self: center; max-width: none; white-space: normal; }
.hero__btn { position: static; grid-area: btn; align-self: center; justify-self: end; gap: calc(var(--k) * 10); height: max(28px, calc(var(--k) * 34)); padding: 0 calc(var(--k) * 4) 0 calc(var(--k) * 16); font-size: max(9.5px, calc(var(--k) * 11)); }
.hero__btn-i { position: static; width: max(22px, calc(var(--k) * 26)); background: #0e0e0e; color: var(--lime); }
.hero__btn:hover { background: #0e0e0e; color: var(--lime); } .hero__btn:hover .hero__btn-i { background: var(--lime); color: #0e0e0e; }
.hero__btn { transition: background-color 0.3s, transform 0.5s var(--ease); }
.hero__btn.is-burst { transform: scale(1.06); background-color: var(--lime); background-image: linear-gradient(95deg, #deff00, #ff6b4a, #7f80ff, #2fb6ff); color: #0e0e0e; }
.hero__btn.is-burst .hero__btn-i { background: #0e0e0e; }

/* SERVICE CIRCLES — symmetric Venn: one on top, two below; labels sit in the outer (non-overlapping) parts */
.orbits { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 0.92; margin: 24px 0 0 auto; }
.orbit { position: absolute; width: 52%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.36); background: rgba(14, 14, 14, 0.5); font-size: clamp(13px, 1.15vw, 17px); font-weight: 500; text-align: center; transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s; }
.orbit__l { display: block; padding: 0 12%; line-height: 1.2; }
.orbit--a { left: 24%; top: 1%; } .orbit--a .orbit__l { transform: translateY(-38%); }
.orbit--b { left: 6.5%; top: 35%; } .orbit--b .orbit__l { transform: translate(-22%, 30%); }
.orbit--c { left: 41.5%; top: 35%; } .orbit--c .orbit__l { transform: translate(22%, 30%); }
.orbit:hover, .orbit:focus-visible { background: var(--lime); color: #0e0e0e; border-color: var(--lime); z-index: 3; }

/* POSTER STUDIO */
.pgs { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.pgs__ctl { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-right: 1px solid var(--line); }
.pgs__grp { display: flex; flex-direction: column; gap: 8px; }
.pgs__lb { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.pgs__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pgs__chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink2); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pgs__chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } .pgs__chip.is-on { background: var(--lime); border-color: var(--lime); color: #0e0e0e; }
.pgs__pal { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px var(--line); transition: transform 0.2s, border-color 0.2s; }
.pgs__pal:hover { transform: scale(1.1); } .pgs__pal.is-on { border-color: #fff; transform: scale(1.12); }
.pgs__f { display: flex; flex-direction: column; gap: 6px; }
.pgs__f input { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: #fff; font: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; }
.pgs__f input:focus { border-color: var(--lime); }
.pgs__tg { display: flex; gap: 18px; }
.pgs__chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.pgs__chk input { accent-color: var(--lime); width: 15px; height: 15px; }
.pgs__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pgs__seed { font-size: 12px; color: var(--ink3); line-height: 1.5; } .pgs__seed b { color: var(--ink2); font-weight: 500; }
.pgs__stage { display: grid; place-items: center; padding: 22px; background: #0c0c0c; min-height: 320px; }
.pgs__stage canvas { display: block; max-width: 100%; cursor: pointer; border-radius: 4px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8); }
@media (max-width: 860px) { .pgs { grid-template-columns: 1fr; } .pgs__stage { order: -1; padding: 14px; } .pgs__ctl { border-right: 0; border-top: 1px solid var(--line); } }

@media (min-width: 861px) { .hero__card { padding-bottom: calc(var(--k) * 18); } }
@media (max-width: 860px) { .hero { height: calc(var(--k) * 752); } }
.hero__w2 .scr { color: rgba(255, 255, 255, 0.75); }

/* ---- NEW HERO PORTRAIT (bust with orbit ring) ---- */
@media (min-width: 861px) { .hero__cut { left: calc(var(--k) * 392); top: calc(var(--k) * 190); width: calc(var(--k) * 640); } }
@media (max-width: 860px) { .hero__cut { left: calc(var(--k) * 60); top: calc(var(--k) * 272); width: calc(var(--k) * 392); } }

/* ---- CV CARD: anchored bottom-right so it keeps room at in-between widths (~860–1100px) ---- */
@media (min-width: 861px) {
  .hero__card { left: auto; right: calc(var(--k) * 68); top: auto; bottom: 0; width: max(calc(var(--k) * 376), 330px); }
}

/* ---- SERVICE CIRCLES on phones: stacked one below the other, same circle/label proportions as the web version ---- */
@media (max-width: 860px) {
  .orbits { display: flex; flex-direction: column; align-items: center; aspect-ratio: auto; width: 100%; max-width: 320px; margin: 30px auto 0; }
  .orbit { position: relative; left: auto; top: auto; width: min(72vw, 250px); font-size: clamp(14px, 4vw, 16px); }
  .orbit + .orbit { margin-top: -30px; }
  .orbit--a, .orbit--b, .orbit--c { left: auto; top: auto; }
  .orbit--a .orbit__l, .orbit--b .orbit__l, .orbit--c .orbit__l { transform: none; padding: 0 14%; }
}

/* IDEA MARK — the brand S drawn as fluid motion lines: one line (the idea) draws itself, coral/purple/blue
   strands join it, the gold sparkle lands (the visual story), then it all unwinds and starts again. */
.hero__seal.im { overflow: visible; background: radial-gradient(circle at 40% 35%, rgba(222, 255, 0, 0.22), rgba(75, 91, 8, 0.08) 68%, transparent 70%); }
.im__s { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: im-draw 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.im__s--glow { stroke: #deff00; stroke-width: 74; opacity: 0.55; animation-delay: 0s; }
.im__s--1 { stroke: #4b5b08; stroke-width: 20; animation-delay: 0.12s; }
.im__s--2 { stroke: #ff6b4a; stroke-width: 11; animation-delay: 0.38s; }
.im__s--3 { stroke: #7f80ff; stroke-width: 11; animation-delay: 0.58s; }
.im__s--4 { stroke: #2fb6ff; stroke-width: 9; animation-delay: 0.78s; }
@keyframes im-draw { 0% { stroke-dashoffset: 1; } 28% { stroke-dashoffset: 0; } 74% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.im__g { transform-box: fill-box; transform-origin: center; animation: im-float 6s ease-in-out infinite; }
@keyframes im-float { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.im__spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: im-spark 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes im-spark { 0%, 26% { transform: scale(0) rotate(-120deg); opacity: 0; } 36% { transform: scale(1.25) rotate(10deg); opacity: 1; } 42%, 70% { transform: scale(1) rotate(0deg); opacity: 1; } 80%, 100% { transform: scale(0) rotate(120deg); opacity: 0; } }
.im__ring, .im__c { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }

/* Surprise: the strands snap in all at once, the mark pops, a lime ring ripples out and confetti flies */
.im.is-burst .im__s { animation: im-draw-fast 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.im.is-burst .im__s--1 { animation-delay: 0.04s; } .im.is-burst .im__s--2 { animation-delay: 0.08s; }
.im.is-burst .im__s--3 { animation-delay: 0.12s; } .im.is-burst .im__s--4 { animation-delay: 0.16s; }
@keyframes im-draw-fast { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
.im.is-burst .im__g { animation: im-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes im-pop { 0% { transform: scale(1); } 35% { transform: scale(1.2) rotate(-8deg); } 100% { transform: scale(1) rotate(0deg); } }
.im.is-burst .im__spark { animation: im-spark-burst 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes im-spark-burst { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 50% { transform: scale(1.5) rotate(20deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.im.is-burst .im__ring { animation: im-ring 0.9s ease-out; }
@keyframes im-ring { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.im.is-burst .im__c { animation: im-conf 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes im-conf { 0% { transform: translate(0, 0) scale(0.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .im__s, .im__g, .im__spark { animation: none !important; }
  .im__s { stroke-dashoffset: 0; } .im__spark { opacity: 1; transform: none; }
}

/* FILTER EDGE ARROWS — hidden until the mouse nears the left/right end of the strip; hover = fast scroll, click = jump */
.wf-box { position: relative; }
.wf__arr { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--lime); color: #0e0e0e; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease), background-color 0.2s; }
.wf__arr--l { left: 4px; transform: translateX(-10px) scale(0.85); }
.wf__arr--r { right: 4px; transform: translateX(10px) scale(0.85); }
.wf-box.near-l .wf__arr--l, .wf-box.near-r .wf__arr--r, .wf__arr:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
.wf__arr:hover { background: #fff; }
.wf__arr:active { transform: scale(0.9); }
@media (hover: none), (pointer: coarse) { .wf__arr { opacity: 0.94; pointer-events: auto; transform: none; width: 34px; height: 34px; margin-top: -17px; } }

/* HERO SHOW overlay (Surprise me) — sits over the photo and card, never blocks clicks */
.hero__fx { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.hero__glow { transition: filter 0.6s ease; }
.hero.is-show .hero__glow { filter: blur(calc(var(--k) * 46)) hue-rotate(var(--fx-hue, 0deg)) saturate(1.3); }
.hero__btn:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .hero__fx { display: none; } }

/* WORK — tidy, uniform section grids (less "everything is huge", more breathing room) */
.mh { margin-top: clamp(56px, 7vw, 104px); }
.mh__t { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.035em; }
.mods > .mg { margin-top: clamp(22px, 2.6vw, 34px); }
.mg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.mg .pc { display: block; min-width: 0; }
.mg .pc__m { aspect-ratio: 4 / 3; }
.mg .pc__m img, .mg .pc__m video { width: 100%; height: 100%; object-fit: cover; }
.mg .pc__t { font-size: clamp(15px, 1.15vw, 18px); }
.mods > .mf:first-child .mf__m { max-width: 980px; }
@media (max-width: 1024px) { .mg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mg { grid-template-columns: 1fr; gap: 28px; } }

/* LIGHTBOX — the custom cursor must sit ABOVE the lightbox (700), otherwise the page has no visible pointer there */
.cursor { z-index: 900; }
.lb .rb[data-lb-close] { width: 48px; height: 48px; background: var(--lime); color: #0e0e0e; border-color: var(--lime); }
.lb .rb[data-lb-close]:hover { background: #fff; border-color: #fff; }

/* LIGHTBOX: always show the real system cursor (the custom cursor can end up underneath the viewer) */
.lb-open, .lb-open body, .lb, .lb * { cursor: auto !important; }
.lb button, .lb [data-lb-close] { cursor: pointer !important; }
.lb__st img { cursor: zoom-out !important; }
.lb-open .cursor, .lb-open .cursor-trail { display: none !important; }

/* WORK v2 — calmer: narrower content column, smaller headings, more air between rows */
.mods { max-width: 1100px; margin-inline: auto; }
.mh { margin-top: clamp(64px, 8vw, 120px); padding-top: 14px; }
.mh__t { font-size: clamp(24px, 2.5vw, 36px); }
.mh__n { font-size: 12px; }
.mods > .mg { margin-top: clamp(18px, 2vw, 26px); }
.mg { gap: clamp(36px, 4vw, 56px) clamp(18px, 2.2vw, 32px); }
.mg .pc__t { font-size: clamp(14px, 1.05vw, 16px); }
.mg .pc__cat { font-size: 11.5px; }
.mods > .mf:first-child .mf__m { max-width: 820px; }
.mods > .mf .mf__t { font-size: clamp(28px, 3.4vw, 48px); }
@media (max-width: 600px) {
  .mg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .mg .pc__t { font-size: 13px; } .mg .pc__cat { font-size: 10.5px; }
  .mg .pc__a { display: none; }
}

/* HERO CARD — idea mark a touch smaller */
.hero__card { grid-template-columns: calc(var(--k) * 44) minmax(0, 1fr) auto; }

/* ABOUT — portrait a little smaller */
.ab__img { width: min(100%, 460px); justify-self: start; }
@media (max-width: 860px) { .ab__img { width: min(100%, 360px); justify-self: center; } }

/* CURSOR CONSISTENCY — exactly one pointer visible at all times:
   - video frames must not bring the system cursor back on top of the custom one
   - where the custom cursor deliberately hides (Start-a-project circle), show the system pointer instead */
@media (hover: hover) and (pointer: fine) {
  .js.has-cursor .vframe, .js.has-cursor .vframe *, .js.has-cursor video { cursor: none !important; }
  .js.has-cursor [data-cursor="hide"], .js.has-cursor [data-cursor="hide"] * { cursor: pointer !important; }
}
@media (hover: hover) and (pointer: fine) {
  .js.has-cursor .hstrip, .js.has-cursor .hstrip * { cursor: none !important; }
  .js.has-cursor [data-pg-canvas][data-cursor="hide"] { cursor: crosshair !important; }
}

/* MOBILE HOME — consistency pass: no text over the photo, no gap under the card, compact circles, no clipped word */
@media (max-width: 860px) {
  .hero { height: calc(var(--k) * 660); }
  .hero__cut { left: calc(var(--k) * 105); top: calc(var(--k) * 300); width: calc(var(--k) * 300); }
  .hero__intro { left: calc(var(--k) * 24); top: calc(var(--k) * 318); }
  .hero__w1 { font-size: calc(var(--k) * 15); } .hero__w15 { font-size: calc(var(--k) * 21); margin-left: calc(var(--k) * 18); } .hero__w2 { font-size: calc(var(--k) * 33); }
  .hero__card { top: auto !important; bottom: 0; }
  .orbits { max-width: 280px; margin: 26px auto 0; }
  .orbits .orbit { position: relative; width: 62%; aspect-ratio: 1; margin-top: -16%; }
  .orbits .orbit:first-child { margin-top: 0; }
  .about { padding-bottom: 40px; }
  .cta { padding-top: 48px; }
}
@media (max-width: 600px) { .pword { display: none; } .projects { padding-top: 14px; } }