/* ────────── Tokens ────────── */
:root {
  --ink: #111;
  --grey: #d7d7d7;
  --mute: #c2c2c2;
  --line: rgba(0, 0, 0, .05);
  --glass: rgba(29, 28, 25, .56);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --spring: cubic-bezier(.32, .72, 0, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --head: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #fff;
  color: #000;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--head) 1fr var(--head);
  height: 100svh;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { display: block; max-width: 100%; }

/* ────────── Intro ────────── */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: #000; color: #fff;
  display: grid; place-items: center;
  transition: opacity .7s ease, visibility .7s;
}
.intro.done { opacity: 0; visibility: hidden; }
.intro-line {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 22px; font-weight: 500; letter-spacing: -.04em;
}
.intro .ast { width: 22px; height: 22px; color: rgba(255, 255, 255, .9); }
.intro .dim { color: rgba(255, 255, 255, .35); }
.intro .w { opacity: 0; filter: blur(10px); transform: translateY(4px); animation: blurIn .9s var(--out) forwards; }
.intro .w:nth-child(2) { animation-delay: .25s; }
.intro .ast { animation: blurIn .9s var(--out) .25s forwards, spin 2.4s var(--spring) .4s; }
.intro .w:nth-child(3) { animation-delay: .5s; }
@keyframes blurIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes spin { to { rotate: 180deg; } }

/* ────────── Background frame ────────── */
.frame { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ────────── Menu dock ────────── */
.dock-wrap { position: fixed; top: 42px; left: 50%; transform: translateX(-50%); z-index: 40; }
.grabber {
  position: absolute; left: 50%; top: -12px; width: 18px; height: 3px; margin-left: -9px;
  border-radius: 3px; background: #444; opacity: 0; transition: opacity .3s;
}
.dock-wrap.open .grabber { opacity: 1; }

.hint {
  position: absolute; right: calc(100% + 4px); top: -16px;
  display: flex; align-items: flex-start; gap: 2px;
  font-family: var(--hand); font-size: 14px; color: #222; white-space: nowrap;
  transform: rotate(-4deg); transition: opacity .4s, filter .4s;
  animation: hintIn .8s var(--out) 2.6s both;
}
.hint svg { width: 40px; height: 20px; margin-top: 4px; color: #e5484d; }
.hint.gone { opacity: 0; filter: blur(4px); pointer-events: none; }
@keyframes hintIn { from { opacity: 0; filter: blur(6px); transform: rotate(-4deg) translateX(-6px); } }

.dock {
  position: relative; width: 78px; height: 30px;
  border-radius: 20px;
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .55s var(--spring);
}
.dock.open { border-radius: 22px; }
.glass {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: var(--glass);
  box-shadow:
    0 0 0 .65px rgba(0, 0, 0, .56),
    inset 0 -10.5px 14px rgba(255, 255, 255, .06),
    inset 0 3.5px 14px rgba(255, 255, 255, .16),
    inset 0 .65px .2px rgba(255, 255, 255, .12),
    inset 0 .2px .2px rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transition: box-shadow .5s;
}
.dock.open .glass {
  box-shadow:
    0 0 0 .65px rgba(0, 0, 0, .56),
    0 52px 21px rgba(0, 0, 0, .01), 0 29px 18px rgba(0, 0, 0, .03), 0 13px 13px rgba(0, 0, 0, .05), 0 3px 7px rgba(0, 0, 0, .06),
    inset 0 3.5px 14px rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.glass .sheen { position: absolute; inset: -7px -50%; background: linear-gradient(#fff, transparent); opacity: .12; }
.glass .vignette { position: absolute; inset: -7px -50%; background: radial-gradient(65% 65% at 50% 50%, #000, transparent); opacity: .32; }

.view {
  position: absolute; left: 50%; top: 0; width: var(--w);
  transform: translateX(-50%) scale(.96);
  opacity: 0; filter: blur(6px); pointer-events: none;
  transition: opacity .22s ease, filter .22s ease, transform .45s var(--spring);
}
.view.is-active {
  opacity: 1; filter: blur(0); pointer-events: auto; transform: translateX(-50%);
  transition: opacity .35s ease .12s, filter .35s ease .12s, transform .55s var(--spring);
}

.pill-btn {
  position: relative; width: 78px; height: 30px; overflow: hidden; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  color: #fff; font-size: 12px; font-weight: 500; letter-spacing: -.04em;
}
.shimmer {
  position: absolute; top: 0; bottom: 0; width: 26px; left: -30px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shimmer 4.2s ease-in-out 3s infinite;
}
@keyframes shimmer { 0% { left: -30px; } 28%, 100% { left: 90px; } }

.bar {
  height: 30px; display: flex; align-items: center; justify-content: center; position: relative;
  color: #fff; font-size: 12px; font-weight: 500; letter-spacing: -.02em;
}
.dots { position: absolute; left: 14px; display: flex; gap: 4px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.dots i + i { background: rgba(255, 255, 255, .35); }
.back { position: absolute; left: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; transition: background .2s; }
.back:hover { background: rgba(255, 255, 255, .12); }
.back svg, .back-pill svg, .v-nav svg, .g-close svg, .v-close svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card {
  margin: 0 4px 4px; background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
}

/* Menu list */
.menu-list { list-style: none; margin: 0; padding: 6px; }
.menu-list button {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 8px; border-radius: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: -.02em; color: #111;
  transition: color .2s, background .2s;
}
.menu-list button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.menu-list:hover button, .menu-list:has(:focus-visible) button { color: var(--mute); }
.menu-list button:hover, .menu-list button:focus-visible { color: #111 !important; background: #f6f6f6; outline: none; }

/* Inquiry */
.inq { padding: 14px 14px 14px; font-size: 12px; }
.lbl { margin: 0 0 9px; font-weight: 600; letter-spacing: -.01em; }
.radios { display: grid; gap: 6px; }
.radio {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 11px; border-radius: 10px; border: 1px solid #ececec; transition: border-color .25s, box-shadow .25s;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.rt { flex: 1; display: grid; gap: 1px; }
.rt b { font-weight: 500; font-size: 12px; }
.rt small { color: #b5b5b5; font-size: 10px; }
.radio .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #e3e3e3; position: relative; transition: border-color .25s; }
.radio .dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #000; transform: scale(0); transition: transform .3s var(--spring); }
.radio:has(input:checked) { border-color: #111; box-shadow: 0 0 0 .5px #111; }
.radio:has(input:checked) .dot { border-color: transparent; }
.radio:has(input:checked) .dot::after { transform: scale(1); }
.radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }
.inq hr { border: 0; border-top: 1px solid #efefef; margin: 15px 0; }
.inq-head { margin-bottom: 12px; }
.inq-icon { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #e6e6e6; display: grid; place-items: center; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.inq-icon svg { width: 13px; height: 13px; fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.inq-head h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.04em; }
.inq-head p { margin: 3px 0 0; color: #c2c2c2; font-size: 11px; }
.inq-head.swap > * { animation: swapIn .45s var(--out) both; }
.inq-head.swap > :nth-child(2) { animation-delay: .04s; }
.inq-head.swap > :nth-child(3) { animation-delay: .08s; }
@keyframes swapIn { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }

.field {
  display: flex; align-items: center; gap: 7px; height: 33px; padding: 0 10px; margin-bottom: 7px;
  background: #f7f7f7; border: 1px solid #f0f0f0; border-radius: 9px; transition: border-color .2s, background .2s;
}
.field:focus-within { border-color: #cfcfcf; background: #fff; }
.field.err { border-color: #f2b8b5; }
.field svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #9a9a9a; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.field input, .field select, .field textarea {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: #111;
}
.field ::placeholder { color: #a9a9a9; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; color: #111;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") right center/12px no-repeat;
}
.field select:invalid { color: #a9a9a9; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.field.area { height: auto; padding: 9px 10px; align-items: flex-start; }
.field textarea { resize: none; height: 56px; }
.submit {
  width: 100%; height: 33px; margin-top: 2px; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 500;
  background: linear-gradient(#6d6d6d, #555); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.2);
  transition: filter .2s, transform .15s;
}
.submit:hover { filter: brightness(1.12); }
.submit:active { transform: scale(.985); }
.form-msg { margin: 8px 0 0; min-height: 0; text-align: center; font-size: 11px; color: #888; }
.form-msg:empty { display: none; }

/* Contact tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 4px 4px; }
.tiles a {
  height: 58px; background: #fff; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: background .2s, transform .3s var(--spring);
}
.tiles a:first-child { border-top-left-radius: 18px; }
.tiles a:nth-child(2) { border-top-right-radius: 18px; }
.tiles a:nth-last-child(2) { border-bottom-left-radius: 18px; }
.tiles a:last-child { border-bottom-right-radius: 18px; }
.tiles a:hover { background: #f5f5f5; transform: scale(.97); }
.tiles svg { width: 13px; height: 13px; fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ────────── Pages ────────── */
.pages { grid-row: 2; position: relative; z-index: 1; min-height: 0; }
.page {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; filter: blur(8px); pointer-events: none; visibility: hidden;
  transition: opacity .5s ease, filter .5s ease, visibility .5s;
}
.page.is-active { opacity: 1; filter: none; pointer-events: auto; visibility: visible; }

/* Home */
.headline {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%); margin: 0;
  display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -.04em;
}
.headline .b { font-family: var(--serif); font-style: italic; font-size: 26px; letter-spacing: -.02em; color: var(--ink); }
.headline .g { color: var(--grey); }
.headline .ast { width: .92em; height: .92em; align-self: center; color: rgba(0, 0, 0, .24); transition: rotate .8s var(--spring); }
.headline:hover .ast { rotate: 90deg; }
.headline .s { opacity: 0; filter: blur(8px); transform: translateY(5px); }
.ready .headline .s { animation: blurIn .9s var(--out) forwards; }
.ready .headline .s:nth-child(2) { animation-delay: .08s; }
.ready .headline .s:nth-child(3) { animation-delay: .16s; }
.ready .headline .s:nth-child(4) { animation-delay: .24s; }
.ready .headline .s:nth-child(5) { animation-delay: .32s; }

.folder-slot { width: 347.27px; height: 301.4px; transform: scale(min(1, calc((100vw - 80px) / 347.27), calc((100svh - 300px) / 301.4))); flex: none; }
.folder {
  position: relative; display: block; width: 347.27px; height: 301.4px; cursor: pointer;
  opacity: 0; filter: blur(10px); transform: translateY(10px) scale(.97);
}
.ready .folder { animation: blurIn 1s var(--out) .35s forwards; }
.folder:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 24px; }

.fcards { position: absolute; inset: 0; }
.fc-drift { position: absolute; left: 0; top: 0; width: 106.33px; height: 119.12px; animation: drift var(--dd) ease-in-out var(--dl) infinite alternate; }
@keyframes drift { from { translate: 0 calc(var(--d) * -1); } to { translate: 0 var(--d); } }
.fc {
  position: absolute; inset: 0; overflow: hidden; background: #fff;
  border: 5px solid #fff; border-radius: 16.8px;
  box-shadow: 0 0 0 .8px #e5e5e5, 0 8px 24px rgba(0, 0, 0, .08);
  transform: var(--rest);
  transition: transform .7s var(--spring), box-shadow .5s;
}
.fc > span { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; }
.fc img, .fc .ph { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .8s var(--spring); }
.folder:hover .fc, .folder:focus-visible .fc { transform: var(--hover); box-shadow: 0 0 0 .8px #e5e5e5, 0 14px 30px rgba(0, 0, 0, .12); }
.folder:hover .fc img { transform: scale(1.02); }
.fc-drift:nth-child(2) .fc { transition-delay: .03s; }
.fc-drift:nth-child(3) .fc { transition-delay: .06s; }
.fc-drift:nth-child(4) .fc { transition-delay: .09s; }
.folder.launch .fc { transform: var(--launch); transition: transform .6s var(--spring), opacity .5s .1s; opacity: 0; }

.fshadow { position: absolute; width: 196.67px; height: 17.59px; left: 76.75px; top: 283.81px; background: #b5b5b5; border-radius: 50%; filter: blur(12.8px); opacity: .4; transition: opacity .5s, transform .6s var(--spring); }
.folder:hover .fshadow { opacity: .55; transform: scaleX(1.08); }

.ffront {
  position: absolute; left: 39.97px; top: 66.94px; width: 271.42px; height: 221.5px; z-index: 10;
  transform-origin: 50% 100%; transition: transform .7s var(--spring);
}
.folder:hover .ffront { transform: perspective(700px) rotateX(-9deg); }
.folder.launch .ffront { transform: perspective(700px) rotateX(-4deg) scale(.96); }
.fglass {
  position: absolute; inset: 0;
  clip-path: path("M 0 40 Q 0 20 20 20 L 138 20 Q 147 20 151 27 L 156 35 Q 160 41 170 41 L 251.4 41 Q 271.4 41 271.4 61 L 271.4 201.5 Q 271.4 221.5 251.4 221.5 L 20 221.5 Q 0 221.5 0 201.5 Z");
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fedge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fedge path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .14)); }

/* Stickers */
.stk { position: absolute; transition: transform .6s var(--spring); }
.stk-mono {
  left: 22px; top: 52px; width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center;
  background: #111; color: #fff; font-family: var(--serif); font-style: italic; font-size: 42px; letter-spacing: -.04em;
  border: 4px solid #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .38), 0 6px 14px rgba(0, 0, 0, .12);
  transform: rotate(-6deg);
}
.stk-reel { left: 140px; top: 70px; width: 84px; transform: rotate(7deg); filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 2.5px rgba(0,0,0,.3)); }
.stk-reel svg { width: 84px; height: 84px; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.stk-name {
  left: 88px; top: 160px; display: flex; align-items: center; gap: 3px;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 27px; letter-spacing: -.03em; color: #111;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1.5px 1.5px #fff, -1.5px -1.5px #fff, 1.5px -1.5px #fff, -1.5px 1.5px #fff, 0 0 4px rgba(0,0,0,.25);
  transform: rotate(-3deg);
}
.stk-name svg { width: 19px; height: 19px; filter: drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }
.folder:hover .stk-mono { transform: rotate(-10deg) translate(-3px, -3px); }
.folder:hover .stk-reel { transform: rotate(16deg) translate(3px, -2px); }
.folder:hover .stk-name { transform: rotate(-1deg) scale(1.04); }

/* Partners */
.partners {
  position: absolute; left: 0; right: 0; bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; filter: blur(6px);
}
.ready .partners { animation: blurIn 1s var(--out) .55s forwards; }
.partners > p { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.marquee-mask { position: relative; width: 100%; max-width: 538px; overflow: hidden; }
.marquee-mask::before, .marquee-mask::after { content: ""; position: absolute; top: 0; bottom: 0; width: 107px; z-index: 1; pointer-events: none; }
.marquee-mask::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.marquee-mask::after { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); }
.marquee { display: flex; width: max-content; animation: marquee 32s linear infinite; will-change: transform; }
.marquee-set { display: flex; align-items: center; flex: none; }
.marquee .m-item { display: flex; align-items: center; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.03em; color: #b3b3b3; }
.marquee .m-item img { height: 18px; width: auto; opacity: .55; filter: grayscale(1); }
.marquee .m-sep { margin: 0 14px; width: 6px; height: 1px; background: #d6d6d6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* About */
.page-about { justify-content: flex-start; overflow-y: auto; padding: 42px 20px 36px; }
.back-pill {
  position: absolute; top: -12px; left: max(16px, calc(50% - 300px));
  height: 26px; padding: 0 12px 0 9px; display: flex; align-items: center; gap: 4px;
  color: #fff; font-size: 11px; font-weight: 500; border-radius: 20px;
  background: var(--glass); box-shadow: 0 0 0 .65px rgba(0, 0, 0, .56), inset 0 3.5px 14px rgba(255, 255, 255, .16), 0 10px 18px rgba(0,0,0,.12);
  transition: transform .3s var(--spring);
}
.back-pill:hover { transform: translateX(-2px); }
.about-copy { width: min(620px, calc(100vw - 48px)); font-size: clamp(17px, 2.1vw, 21px); line-height: 1.48; font-weight: 500; letter-spacing: -.035em; color: #111; }
.about-copy p { margin: 0 0 22px; }
.about-copy .g { color: #626262; }
.about-copy .serif { font-family: var(--serif); font-style: italic; font-size: 1.08em; letter-spacing: -.02em; }
.about-copy .hand { font-family: var(--hand); font-weight: 700; font-size: 1.05em; letter-spacing: 0; }
.about-copy .emo { display: inline-block; font-size: .9em; transition: transform .5s var(--spring); }
.about-copy .emo:hover { transform: rotate(-14deg) scale(1.25); }
.chips { display: inline-flex; vertical-align: middle; margin: 0 4px; }
.chips img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); background: #eee; transition: transform .4s var(--spring); }
.chips img + img { margin-left: -10px; transform: rotate(8deg); }
.chips img:first-child { transform: rotate(-6deg); }
.chips:hover img { transform: rotate(0) translateY(-2px); }
.chips:hover img + img { transform: translateX(8px) rotate(0); }
.page-about .about-copy p { opacity: 0; filter: blur(8px); transform: translateY(6px); }
.page-about.is-active .about-copy p { animation: blurIn .9s var(--out) forwards; }
.page-about.is-active .about-copy p:nth-child(2) { animation-delay: .1s; }
.page-about.is-active .about-copy p:nth-child(3) { animation-delay: .2s; }
.page-about.is-active .about-copy p:nth-child(4) { animation-delay: .3s; }

/* Footer */
.foot { grid-row: 3; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: #111; transition: opacity .4s; }
.foot p { margin: 0; }
.foot span { color: var(--mute); }
.foot svg { color: #9a9a9a; }
body.on-about .foot { opacity: 0; }

/* ────────── Gallery ────────── */
.gallery {
  position: fixed; inset: 0; z-index: 60; background: #000; color: #fff;
  opacity: 0; transition: opacity .45s ease;
}
.gallery.show { opacity: 1; }
.gallery[hidden] { display: none; }
.g-top { position: absolute; top: 22px; left: 0; right: 0; z-index: 3; pointer-events: none; display: flex; justify-content: center; }
.filters {
  position: relative; pointer-events: auto; display: flex; gap: 0; padding: 3px; border-radius: 12px;
  background: rgba(40, 40, 40, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08);
}
.filters button { position: relative; z-index: 1; height: 26px; padding: 0 13px; font-size: 11px; font-weight: 500; color: #9a9a9a; border-radius: 9px; transition: color .3s; }
.filters button[aria-selected="true"] { color: #000; }
.f-ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: #fff; transition: transform .45s var(--spring), width .45s var(--spring); }
.g-close {
  position: absolute; right: max(20px, calc(50% - 560px)); top: 0; pointer-events: auto;
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #bbb;
  background: rgba(40, 40, 40, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: color .2s, transform .3s var(--spring);
}
.g-close:hover { color: #fff; transform: rotate(90deg); }
.g-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.g-scroll::-webkit-scrollbar { display: none; }
.masonry { display: flex; gap: 8px; width: min(1040px, calc(100% - 24px)); margin: 0 auto; padding: 8px 0 80px; }
.m-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile {
  position: relative; display: block; width: 100%; overflow: hidden; border-radius: 14px; background: #141414; cursor: zoom-in;
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .6s var(--out), transform .8s var(--spring);
}
.tile.in { opacity: 1; transform: none; }
.tile.out { opacity: 0 !important; transform: scale(.96) !important; transition-duration: .25s; }
.tile img, .tile video, .tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .9s var(--spring); }
.tile .loaded, .tile .ph { opacity: 1; }
.tile:hover img, .tile:hover video, .tile:hover .ph { transform: scale(1.035); }
.tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tile .badge {
  position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); opacity: .9; transition: opacity .3s, transform .4s var(--spring);
}
.tile .badge svg { width: 10px; height: 10px; fill: #fff; margin-left: 2px; }
.tile:hover .badge { transform: scale(1.12); }
.tile.playing .badge { opacity: 0; }

/* Placeholder art */
.ph { display: grid; place-items: center; text-align: center; background: var(--ph); color: rgba(255, 255, 255, .7); }
.ph b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.ph small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.fc .ph b { font-size: 15px; }
.fc .ph small { display: none; }

/* ────────── Viewer ────────── */
.viewer {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/46px 46px,
    rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .35s ease;
}
.viewer.show { opacity: 1; }
.viewer[hidden] { display: none; }
.v-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: calc(100vw - 150px); }
.v-media { position: relative; border-radius: 18px; overflow: hidden; background: #111; max-height: calc(100svh - 150px); max-width: min(1000px, calc(100vw - 150px)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.v-media img, .v-media video { display: block; max-height: calc(100svh - 150px); max-width: min(1000px, calc(100vw - 150px)); width: auto; height: auto; }
.v-media .ph { position: relative; }
.v-stage figcaption { font-size: 14px; color: #d9d9d9; letter-spacing: -.02em; text-align: center; }
.v-stage figcaption b { font-weight: 500; color: #fff; }
.v-stage figcaption .v-project-link { display: inline-block; margin-left: 10px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.v-stage.enter .v-media { animation: vIn .5s var(--spring); }
.v-stage.enter figcaption { animation: blurIn .5s var(--out) .1s both; }
@keyframes vIn { from { opacity: 0; transform: scale(.94); filter: blur(6px); } }
.v-nav, .v-close {
  position: absolute; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #ddd;
  background: rgba(40, 40, 40, .8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); transition: color .2s, background .2s, transform .3s var(--spring);
}
.v-nav:hover, .v-close:hover { color: #fff; background: rgba(70, 70, 70, .9); }
.v-nav { top: 50%; margin-top: -17px; }
.v-nav.prev { left: max(16px, calc(50% - 600px)); }
.v-nav.next { right: max(16px, calc(50% - 600px)); }
.v-nav.prev:hover { transform: translateX(-2px); }
.v-nav.next:hover { transform: translateX(2px); }
.v-close { top: 22px; right: max(16px, calc(50% - 600px)); }

/* ────────── Responsive ────────── */
@media (max-width: 767px) {
  :root { --head: 120px; }
  .headline { top: 24px; font-size: clamp(13px, 4.3vw, 22px); gap: 5px; }
  .headline .b { font-size: clamp(14px, 4.7vw, 24px); }
  .field input, .field select, .field textarea { font-size: 16px; }
  .partners { bottom: 18px; gap: 12px; }
  .partners > p { font-size: 12px; }
  .marquee-mask { max-width: 341px; }
  .marquee-mask::before, .marquee-mask::after { width: 60px; }
  .hint { display: none; }
  .v-inquiry { --w: min(322px, calc(100vw - 24px)) !important; }
  .about-copy { font-size: 18px; }
  .back-pill { top: -40px; }
  .page-about { justify-content: flex-start; padding-top: 30px; overflow-y: auto; }
  .v-stage { max-width: calc(100vw - 24px); }
  .v-media, .v-media img, .v-media video { max-width: calc(100vw - 24px); max-height: calc(100svh - 180px); }
  .v-nav { top: auto; bottom: 24px; margin: 0; }
  .v-nav.prev { left: calc(50% - 44px); }
  .v-nav.next { right: calc(50% - 44px); }
  .masonry { gap: 6px; }
  .m-col { gap: 6px; }
  .tile { border-radius: 12px; }
  .g-close { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}