/* ═════════════════════════════════════════════
   ByLilly — shared chrome (nav, footer, FAB,
   modal, fonts, base). Used by every sub-page.
   ═════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400;1,500;1,600&family=Inter:wght@300;400;500;700&family=Space+Mono&family=Yellowtail&family=VT323&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ───────────────────────────────────────────────
   Global text-wrapping baseline.
   Words break only at whitespace — NEVER mid-word.
   Per-page decorative title-splitters opt in to their
   own behaviour via their own selectors.
   ─────────────────────────────────────────────── */
html, body, p, h1, h2, h3, h4, h5, h6, a, li, span, em, strong, label, button, input, textarea {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

:root {
  --white: #FFFFFF;
  --black: #0A0A0A;
  --hl-green: #d4ff00;
  --accent-pink: #f058b3;
  --off-white: #FAFAFA;
  --gray: #999;
  --light-gray: #F0F0F0;
  --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-script: 'Yellowtail', 'Snell Roundhand', cursive;
  --font-pixel: 'VT323', 'Space Mono', monospace;
}

html { scroll-behavior: smooth; }
html, body { width: 100%; }
body {
  font-family: var(--font-sans);
  background: transparent;
  color: var(--black);
}
a { color: inherit; }

/* ─── BOOT LOADER — ByLilly OS booting in dark room ─── */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #060606;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 48px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), visibility 1.1s ease;
  overflow: hidden;
}
.boot-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(120,176,138,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 52%, rgba(212, 255, 0,0.09) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 70%);
  opacity: 0;
  animation:
    bootHaloIn 1.4s cubic-bezier(.16,1,.3,1) .15s forwards,
    bootBreathe 7s ease-in-out 1.8s infinite;
  pointer-events: none;
}
.boot-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
  opacity: 0;
  animation: bootGrainIn 1.6s ease .15s forwards;
  pointer-events: none;
}
@keyframes bootHaloIn  { to { opacity: 1; } }
@keyframes bootGrainIn { to { opacity: .45; } }
@keyframes bootBreathe {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.04); opacity: .82; }
}
.boot-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-screen {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-pixel);
  font-weight: 400;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.boot-brand {
  font-size: 28px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0;
  opacity: 0;
  animation: bootFadeIn 1.1s cubic-bezier(.16,1,.3,1) .25s forwards;
}
.boot-sub {
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(212, 255, 0,0.95);
  margin: 0;
  opacity: 0;
  animation: bootFadeIn 1.1s cubic-bezier(.16,1,.3,1) .45s forwards;
  text-shadow: 0 0 14px rgba(212, 255, 0,0.35);
}
.boot-rule {
  width: 60px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin: 0;
  opacity: 0;
  animation: bootFadeIn 1s cubic-bezier(.16,1,.3,1) .65s forwards;
}
.boot-lines {
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.25;
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}
.boot-lines .line {
  opacity: 0;
  transform: translateY(4px);
  animation: bootFadeIn 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
.boot-lines .line:nth-child(1) { animation-delay: 0.95s; }
.boot-lines .line:nth-child(2) { animation-delay: 1.30s; }
.boot-lines .line:nth-child(3) { animation-delay: 1.65s; }
.boot-lines .line:nth-child(4) { animation-delay: 2.00s; }
.boot-lines .line:nth-child(5) { animation-delay: 2.35s; }
.boot-lines .line:nth-child(6) { animation-delay: 2.70s; }
.boot-lines .line:nth-child(7) { animation-delay: 3.05s; }
.boot-lines .ok   { color: rgba(120,176,138,0.95); margin-left: 8px; letter-spacing: 2px; }
.boot-lines .warn { color: rgba(212, 255, 0,1);    margin-left: 8px; letter-spacing: 2px; }
.boot-lines .dim  { color: rgba(255,255,255,0.40); }
.boot-lines .bar  { color: rgba(212, 255, 0,0.95); letter-spacing: 2px; }
.cursor-blink {
  display: inline-block; width: 10px; height: 18px;
  background: rgba(212, 255, 0,1);
  box-shadow: 0 0 12px rgba(212, 255, 0,0.65);
  animation: blink 1.1s step-end infinite;
  vertical-align: -2px; margin-left: 8px;
}
@keyframes bootFadeIn { to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 600px) {
  .boot-brand { font-size: 22px; letter-spacing: 4px; }
  .boot-sub   { font-size: 15px; letter-spacing: 2.5px; }
  .boot-lines { font-size: 17px; }
}

/* ─── PIXEL ARROWS — every "→" / "↓" / chevron on the site uses VT323
   so all indicators share one consistent pixel-art aesthetic. ─── */
.arrow,
.neon-cta-arrow,
.tile-arrow,
.featured-cta .arrow,
.works-cta .arrow {
  font-family: var(--font-pixel) !important;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: 0;
  display: inline-block;
  vertical-align: -0.06em;
}

/* ─── WAX-CRAYON NEON HIGHLIGHTS ─── */
/* Hand-drawn-feel acid-green underline + highlight strokes.
   Apply to words/phrases by wrapping in <span class="wax">.
   Variants:
   - .wax           → wavy hand-drawn underline
   - .wax-stroke    → thick crayon highlight strike-through-style behind text
   - .wax-circle    → loose circle around a word
*/
.wax {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.wax::after {
  content: '';
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -.05em;
  height: .18em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 C 18 2, 38 12, 58 6 S 98 1, 118 8 S 158 13, 198 4' stroke='%23d4ff00' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/><path d='M2 9 C 22 3, 42 13, 62 7 S 102 2, 122 9 S 162 14, 198 5' stroke='%23d4ff00' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 3px rgba(212,255,0,0.45));
  pointer-events: none;
  transform: rotate(-.3deg);
}
.wax-stroke {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.wax-stroke::before {
  content: '';
  position: absolute;
  left: -.15em;
  right: -.1em;
  top: .15em;
  bottom: .12em;
  background: #d4ff00;
  filter: blur(.5px);
  border-radius: 4px;
  transform: rotate(-.6deg) skewX(-2deg);
  z-index: -1;
  opacity: .88;
  box-shadow: 0 0 18px rgba(212,255,0,0.40);
}
.wax-circle {
  position: relative;
  display: inline-block;
  padding: 0 .15em;
}
.wax-circle::after {
  content: '';
  position: absolute;
  inset: -.15em -.25em -.05em -.25em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90' preserveAspectRatio='none'><path d='M40 12 C 12 18 6 50 18 70 C 36 92 130 92 180 76 C 220 60 218 22 180 14 C 130 4 60 6 40 12 Z' stroke='%23d4ff00' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 6px rgba(212,255,0,0.55));
  pointer-events: none;
  transform: rotate(-1deg);
}

/* ─── SOCIAL ROW — premium button chips with brand-color icons ─── */
/* Universal component used across all pages. Each chip is a tactile
   square that lifts on hover, casts a soft brand-tinted shadow, and
   feels physically clickable. */
.social-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 18px -10px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: rgba(10, 10, 10, 0.85);
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .55s cubic-bezier(.16, 1, .3, 1),
    background .35s ease;
  position: relative;
  isolation: isolate;
  cursor: pointer;
  overflow: hidden;
}
.social-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.social-chip .social-label {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
  transition: color .35s ease;
}
.social-chip:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 16px 30px -12px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.social-chip:hover img {
  transform: scale(1.08);
}
.social-chip:hover .social-label {
  color: rgba(10, 10, 10, 0.85);
}
.social-chip:active {
  transform: translateY(-1px);
  transition-duration: .12s;
}

/* Brand-tint glow on hover — tinted shadow per platform */
.social-chip[data-brand="instagram"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(217, 76, 132, 0.45); }
.social-chip[data-brand="behance"]:hover   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(23, 105, 255, 0.40); }
.social-chip[data-brand="telegram"]:hover  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(36, 161, 222, 0.45); }
.social-chip[data-brand="threads"]:hover   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(40, 40, 40, 0.45); }
.social-chip[data-brand="youtube"]:hover   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(255, 0, 0, 0.40); }
.social-chip[data-brand="linkedin"]:hover  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(0, 119, 181, 0.45); }
.social-chip[data-brand="email"]:hover     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(212, 255, 0, 0.45); }
.social-chip[data-brand="cv"]:hover        { box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.06), 0 16px 32px -10px rgba(120, 176, 138, 0.45); }

/* Dark-page version: chips sit on dark backgrounds (about, contacts hero, etc.) */
body.editorial .social-chip,
body.editorial-light .social-chip,
.dark-bg .social-chip {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 8px 18px -10px rgba(0, 0, 0, 0.40);
}
body.editorial .social-chip .social-label,
body.editorial-light .social-chip .social-label,
.dark-bg .social-chip .social-label {
  color: rgba(255, 255, 255, 0.55);
}
body.editorial .social-chip:hover,
body.editorial-light .social-chip:hover,
.dark-bg .social-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.editorial .social-chip:hover .social-label,
body.editorial-light .social-chip:hover .social-label,
.dark-bg .social-chip:hover .social-label {
  color: rgba(255, 255, 255, 0.92);
}

/* ─── REVEAL ANIMATION (after boot) — long, dramatic, CRT-flavored ─── */
.reveal { opacity: 0; transform: translateY(20px); }
body.boot-done .reveal { animation: pxRevealText 1.4s steps(14, end) forwards; }
body.boot-done .reveal-img { animation: pxRevealImg 1.6s steps(14, end) forwards; }
body.boot-done .reveal.r-1 { animation-delay: 0.00s; }
body.boot-done .reveal.r-2 { animation-delay: 0.20s; }
body.boot-done .reveal.r-3 { animation-delay: 0.42s; }
body.boot-done .reveal.r-4 { animation-delay: 0.66s; }
body.boot-done .reveal.r-5 { animation-delay: 0.92s; }
body.boot-done .reveal.r-6 { animation-delay: 1.18s; }
@keyframes pxRevealText {
  0%   { opacity: 0; transform: translateY(14px); clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0% 0 0); }
}
@keyframes pxRevealImg {
  0%   { opacity: 0; transform: translateY(24px) scale(0.96); filter: brightness(1.4); }
  40%  { opacity: 0.85; transform: translateY(8px) scale(0.99); filter: brightness(1.15); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img { opacity: 1 !important; transform: none !important; animation: none !important; text-shadow: none !important; filter: none !important; }
}

/* ─── TOP NAV (fixed — always follows scroll) ─── */
.top-nav {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  isolation: isolate;
  transition: padding .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
/* push body content below the fixed nav */
body { padding-top: 100px; }
@media (max-width: 900px) { body { padding-top: 88px; } }
@media (max-width: 720px) { body { padding-top: 76px; } }
.top-nav.is-scrolled {
  padding: 8px 32px;
  /* soft glass — readable on both light + dark sections, NO hard hairline */
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  /* removed the 1px shadow that was reading as a white/dark "line" */
  box-shadow: none;
}
.top-nav.is-scrolled .nav-logo { height: 36px; }
.top-nav.is-scrolled .menu-deck { width: 64px; height: 64px; }
.top-nav .nav-logo-link { display: inline-flex; align-items: center; }
.top-nav .nav-logo { height: 56px; width: auto; flex-shrink: 0; display: block; filter: brightness(0) saturate(100%); }

.menu-deck {
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; width: 110px; height: 110px; flex-shrink: 0;
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .2s;
}
.menu-deck img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.menu-deck:hover { transform: translateY(-2px); }
.menu-deck[aria-expanded="true"] { transform: translateY(2px); filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }

.cassette-menu {
  position: fixed;
  top: calc(var(--nav-h, 100px) - 4px);
  right: 24px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 200;
}
.top-nav.is-scrolled .cassette-menu { --nav-h: 80px; }

/* ─── Bear-parts decals — atmospheric tactile decoration on sub-pages ─── */
.bear-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  display: block;
  height: auto;
}
/* Make the page section a positioned context so absolutely-positioned bears
   are anchored to it, and bump main content above z=0 */
.page { position: relative; }
.page-hero,
.works-grid,
.services-list,
.about-grid,
.play-grid,
.contact-grid,
.contact-bottom {
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .bear-deco { display: none; }   /* keep mobile clean */
}
.cassette-menu[data-open="true"] { visibility: visible; }
.cassette {
  display: flex; align-items: center; justify-content: center;
  height: 130px; pointer-events: none; opacity: 0;
  transform: translateY(-30px) rotate(-2deg);
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .2s;
}
.cassette img {
  width: auto; height: 100%; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  transition: filter .2s, transform .2s;
}
.cassette:hover { z-index: 2; }
.cassette:hover img { transform: rotate(-2deg) scale(1.05); filter: drop-shadow(0 14px 22px rgba(0,0,0,.28)); }

/* HOME cassette — clean editorial label chip. NOT a black square.
   Off-white card matching the paper aesthetic, slim, just a number tag
   + the word HOME. Sits naturally next to the other cassettes without
   competing visually. */
.cassette.is-home {
  height: 130px;
  width: 150px;
  text-decoration: none;
  position: relative;
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  border: 1px solid rgba(10,10,10,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  padding: 16px 18px 16px;
  color: #0a0a0a;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.10));
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease, border-color .25s ease, background .25s ease;
}
.cassette.is-home .cassette-num {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.45);
}
.cassette.is-home .cassette-num::before { content: '●  '; color: var(--accent-pink); }
.cassette.is-home .cassette-label {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .9;
  color: #0a0a0a;
}
.cassette.is-home .cassette-arrow {
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--hl-green);
  filter: drop-shadow(0 0 4px rgba(212,255,0,0.5));
  align-self: flex-end;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.cassette.is-home:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.96);
  border-color: rgba(10,10,10,0.18);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
}
.cassette.is-home:hover .cassette-arrow { transform: translateX(4px) translateY(-1px); }
@media (max-width: 800px) {
  .cassette.is-home { width: 130px; padding: 14px 16px; }
  .cassette.is-home .cassette-label { font-size: 24px; }
}
.cassette-menu[data-open="true"] .cassette {
  pointer-events: auto;
  animation: cassetteDrop .55s cubic-bezier(.34,1.5,.5,1) forwards;
}
.cassette-menu[data-open="true"] .cassette:nth-child(1) { animation-delay: 0.00s; }
.cassette-menu[data-open="true"] .cassette:nth-child(2) { animation-delay: 0.06s; }
.cassette-menu[data-open="true"] .cassette:nth-child(3) { animation-delay: 0.12s; }
.cassette-menu[data-open="true"] .cassette:nth-child(4) { animation-delay: 0.18s; }
.cassette-menu[data-open="true"] .cassette:nth-child(5) { animation-delay: 0.24s; }
.cassette-menu[data-open="true"] .cassette:nth-child(6) { animation-delay: 0.30s; }
@keyframes cassetteDrop {
  0% { opacity: 0; transform: translateY(-40px) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(6px) rotate(.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (max-width: 800px) {
  .top-nav { gap: 12px; padding: 12px 20px; font-size: 14px; }
  .top-nav .nav-logo { height: 36px; }
  .menu-deck { width: 72px; height: 72px; }
  .cassette-menu { right: 12px; width: 220px; }
  .cassette { height: 100px; }
}

/* ─── FOOTER — black system strip ─── */
.footer-bar {
  padding: 18px clamp(20px, 4vw, 60px);
  border-top: 1px solid rgba(212,255,0,0.10);
  background: #050505;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  isolation: isolate;
}
.footer-bar::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .45;
  z-index: 0;
}
.footer-bar > * { position: relative; z-index: 1; }

.footer-bar .footer-left {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(212, 255, 0, 0.92);
  text-decoration: none;
  text-shadow: 0 0 12px rgba(212,255,0,0.35);
  transition: color .3s ease, text-shadow .3s ease;
}
.footer-bar .footer-left::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--hl-green);
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(212,255,0,0.75);
  animation: footerDot 2.4s ease-in-out infinite;
}
@keyframes footerDot {
  0%, 100% { opacity: 1;    transform: translateY(-1px) scale(1);    }
  50%      { opacity: .5;   transform: translateY(-1px) scale(.85);  }
}
.footer-bar .footer-left:hover {
  color: rgba(212, 255, 0, 1);
  text-shadow: 0 0 18px rgba(212,255,0,0.65);
}

.footer-bar .footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.footer-bar .footer-spec {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(212, 255, 0, 0.78);
}
.footer-bar .footer-meta {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

/* Mobile — keep single line readable, stack right column gracefully */
@media (max-width: 640px) {
  .footer-bar { gap: 12px; padding: 16px 22px; }
  .footer-bar .footer-right { align-items: flex-start; }
  .footer-bar .footer-spec  { font-size: 9px;  letter-spacing: .26em; }
  .footer-bar .footer-meta  { font-size: 8.5px; letter-spacing: .22em; }
}

/* ─── FLOATING CONTACT FAB — pixel-art talking smiley with rotating ring.
   Identical across all pages (driven from shell.css).
   - .fab-mark wraps the smiley + ring (96×96 box)
   - .fab-smiley is the centered pixel face (blinking eyes + 3-state mouth)
   - .fab-ring is the SVG with "GET IN TOUCH" text rotating around the smiley
   - .fab-tip is the acid-green "Say hi" pill that fades in
   - .on-dark flips colour to acid neon when over a dark section (JS-driven)
   ─────────────────────────────────────────────── */
.contact-fab {
  position: fixed; right: 20px; bottom: 20px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; z-index: 200;
  /* row-reverse → smiley sits on the RIGHT (against viewport edge) and
     the speech bubble appears to the LEFT, growing away from the edge.
     Without this, the bubble would push off-screen on the right. */
  display: flex; align-items: center; gap: 12px;
  flex-direction: row-reverse;
  color: #0a0a0a;
  transition: transform .35s cubic-bezier(.16,1,.3,1), color .35s ease, opacity .3s, visibility .3s;
}
.contact-fab.on-dark   { color: var(--hl-green); }
.contact-fab.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); }

.contact-fab .fab-mark {
  position: relative;
  width: 96px; height: 96px;
  display: inline-block;
  animation: fabIdleBob 3.4s ease-in-out infinite;
}
/* Soft glass base behind the smiley — makes it readable on any background
   without becoming a hard button. Sits *behind* the spinning ring so the
   ring text still reads naturally. */
.contact-fab .fab-mark::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 50%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 8px 22px -8px rgba(10,10,10,0.18),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 24px -8px rgba(212,255,0,0.22);
  z-index: 0;
  pointer-events: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.contact-fab.on-dark .fab-mark::before {
  background: rgba(10,10,10,0.62);
  border-color: rgba(212,255,0,0.18);
  box-shadow:
    0 10px 26px -10px rgba(0,0,0,0.55),
    0 0 0 1px rgba(212,255,0,0.06) inset,
    0 0 26px -10px rgba(212,255,0,0.28);
}
.contact-fab .fab-ring,
.contact-fab .fab-smiley { z-index: 1; }
.contact-fab .fab-smiley {
  position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  fill: currentColor;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform .25s ease;
}
.contact-fab .fab-ring {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  animation: fabRingSpin 14s linear infinite;
}
.contact-fab .fab-ring-text {
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
}
@keyframes fabRingSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Eye blink — both eyes hide for a single frame every 4.2s */
.contact-fab .fab-smiley .eye-l,
.contact-fab .fab-smiley .eye-r {
  transform-origin: center;
  animation: fabEyeBlink 4.2s steps(1, end) infinite;
}
@keyframes fabEyeBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  97%, 99%      { transform: scaleY(.05); }
}
/* Mouth — 3-state talking cycle (closed → open → wide) */
.contact-fab .fab-smiley .mouth-m1    { animation: fabMouthClosed 0.9s steps(1, end) infinite; }
.contact-fab .fab-smiley .mouth-m2    { animation: fabMouthOpen   0.9s steps(1, end) infinite; }
.contact-fab .fab-smiley .mouth-side1,
.contact-fab .fab-smiley .mouth-side2 { animation: fabMouthSides  0.9s steps(1, end) infinite; }
@keyframes fabMouthClosed { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes fabMouthOpen   { 0%, 33% { opacity: 0; } 34%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes fabMouthSides  { 0%, 66% { opacity: 0; } 67%, 100% { opacity: 1; } }

/* Speech-bubble tip — graphite glass + acid-green text, mono.
   Auto-shown on page load (JS .show-tip), and also re-shown on hover.
   Subtle arrow points right toward the smiley. */
.contact-fab .fab-tip {
  position: relative;
  background: rgba(10,10,10,0.88);
  color: var(--hl-green);
  font-family: 'IBM Plex Mono', var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 10px 34px 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 22px -8px rgba(0,0,0,0.5),
    0 0 0 1px rgba(212,255,0,0.16);
}
.contact-fab .fab-tip::after {
  content: '';
  position: absolute;
  right: -5px; top: 50%;
  width: 10px; height: 10px;
  background: rgba(10,10,10,0.88);
  transform: translateY(-50%) rotate(45deg);
}
.contact-fab.show-tip .fab-tip {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}
/* a tiny pulsing dot before the text to call attention without shouting */
.contact-fab .fab-tip-text::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hl-green);
  box-shadow: 0 0 8px rgba(212,255,0,0.7);
  margin-right: 8px;
  animation: fabTipPulse 1.8s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes fabTipPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .6; } }
.contact-fab .fab-tip-close {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  background: transparent; border: 0;
  color: rgba(212,255,0,0.55);
  font-size: 14px;
  cursor: pointer; padding: 0 6px; line-height: 1;
  transition: color .2s;
  font-family: inherit;
  pointer-events: auto;
}
.contact-fab .fab-tip-close:hover { color: var(--hl-green); }

.contact-fab:hover .fab-mark   { transform: scale(1.06); }
.contact-fab:active .fab-mark  { transform: scale(.95); }
.contact-fab:hover .fab-smiley { transform: translate(-50%, -50%) scale(1.05); }

@keyframes fabIdleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Compact on mobile — corner-tight, smaller smiley, shorter tip text */
@media (max-width: 720px) {
  .contact-fab            { right: 12px; bottom: 12px; gap: 10px; }
  .contact-fab .fab-mark   { width: 72px; height: 72px; }
  .contact-fab .fab-mark::before { width: 56px; height: 56px; }
  .contact-fab .fab-smiley { width: 38px; height: 38px; }
  .contact-fab .fab-ring-text { font-size: 9px; letter-spacing: .22em; }
  .contact-fab .fab-tip { font-size: 10px; padding: 8px 26px 8px 12px; letter-spacing: .18em; }
}

/* ─── CONTACT MODAL ─── */
.contact-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.contact-modal.is-open { opacity: 1; visibility: visible; }
.contact-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.contact-modal-card {
  position: relative;
  background: var(--white);
  color: var(--black);
  width: min(440px, calc(100vw - 32px));
  padding: 36px 28px 28px;
  border: 2px solid var(--black);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  transform: translateY(12px) scale(0.97);
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
}
.contact-modal-card h3, .contact-modal-card p, .contact-modal-card a { color: var(--black); }
.contact-modal-card .modal-sub { color: var(--black); opacity: .6; }
.contact-modal.is-open .contact-modal-card { transform: translateY(0) scale(1); }
.contact-modal-card h3 {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 28px; letter-spacing: -.01em; margin: 0 0 4px;
}
.contact-modal-card h3 .title-dot { color: var(--hl-green); }
.contact-modal-card .modal-sub {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  opacity: .6; margin: 0 0 18px;
}
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none;
  font-size: 28px; line-height: 1; color: var(--black);
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: background .15s, transform .15s;
}
.modal-close:hover { transform: rotate(90deg); }

/* ─── CONTACT MODAL — INLINE FORM (same on every page) ─── */
.contact-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 6px;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--black);
  background: var(--off-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color .15s, background .15s;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--black);
  background: var(--white);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(0,0,0,0.45);
}
.form-send-btn {
  margin-top: 4px;
  padding: 12px 18px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, transform .12s, color .15s;
}
.form-send-btn:hover  { background: var(--hl-green); color: var(--black); }
.form-send-btn:active { transform: scale(.98); }

.form-status {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--black);
  opacity: .7;
  min-height: 14px;
}

.contact-or {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
}
.contact-or::before,
.contact-or::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════
   LUX RISE — site-wide gentle fade-in utility. Add class
   .lux-rise on any element; JS toggles .is-in when it enters
   the viewport. Resulting motion: opacity 0→1, translateY
   24→0, blur 6→0, ~900ms cubic-bezier(.16,1,.3,1). Calm,
   editorial, not bouncy. Stagger via .lux-d1/d2/d3.
   ═══════════════════════════════════════════════════════ */
.lux-rise {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1),
    filter .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}
.lux-rise.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.lux-d1 { transition-delay: .06s; }
.lux-d2 { transition-delay: .12s; }
.lux-d3 { transition-delay: .18s; }
.lux-d4 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .lux-rise { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ─── UNIVERSAL CARD HOVER POLISH ───
   Soft tactile lift for the major card classes site-wide. Each page can
   layer its own card-specific hover on top; this is the baseline so
   nothing reads as "dead" on hover. */
.pg-card,
.ct-path,
.case-more-card,
.svc-card,
.outro-card,
.head-photo,
.adv-card {
  transition-property: transform, box-shadow, border-color, filter;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}
.pg-card:hover,
.ct-path:hover,
.case-more-card:hover {
  transform: translateY(-4px);
}

/* ═══════════════════════════════════════════════════════
   HERO SOFT FADE — JS sets --hero-fade 0..1 on heroes.
   Big titles + leads in those heroes can opt-in to soft
   cinematic fade-out as the visitor scrolls past.
   Default rules below cover the standard hero patterns.
   ═══════════════════════════════════════════════════════ */
.svc-hero  > .svc-hero-title, .svc-hero  > .svc-hero-lead,
.ct-hero   .ct-title,        .ct-hero   .ct-lead,
.pg-hero   .pg-title,        .pg-hero   .pg-lead,
.about-hero .hero-title,     .about-hero .hero-sub,
.page-hero .page-title,      .page-hero .page-lead,
.hero      .hero-top {
  opacity: calc(1 - var(--hero-fade, 0) * 0.7);
  transform: translateY(calc(var(--hero-fade, 0) * -22px));
  filter: blur(calc(var(--hero-fade, 0) * 1.6px));
  transition: opacity .25s linear, transform .25s linear, filter .25s linear;
  will-change: opacity, transform, filter;
}

/* ═══════════════════════════════════════════════════════
   SIGNAL DRAW ZONE — site-wide interactive cursor trail.
   Any heading area with class .signal-draw-zone gets a
   floating canvas that paints soft liquid-ink blobs behind
   the cursor. Canvas is pointer-events:none so it never
   blocks links / forms. JS auto-discovers zones from main.js.
   ═══════════════════════════════════════════════════════ */
.signal-draw-zone { position: relative; }
.signal-draw-zone > * { position: relative; z-index: 2; }
.signal-draw-zone > .signal-draw-canvas,
.signal-draw-zone > canvas.signal-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
}
.signal-draw-zone.has-trail > .signal-draw-canvas { opacity: 1; }
/* mobile: trail disabled (too heavy, unclear UX) */
@media (hover: none) {
  .signal-draw-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-draw-canvas { display: none; }
}

/* ═══════════════════════════════════════════════════════
   CASE STUDY · "MORE WORK" — shared closing block for
   3d-poster-series / biskwit-valentine / inkroom
   Three cards: next case, another case, playground.
   ═══════════════════════════════════════════════════════ */
.case-more {
  position: relative;
  background: #fff;
  padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 56px) clamp(60px, 8vw, 100px);
  overflow: hidden;
}
.case-more-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.case-more h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5.8vw, 76px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--black);
  margin: 0 0 14px;
}
.case-more h2 em { font-family: var(--font-script); font-style: normal; font-weight: 400; }
.case-more h2 .dot { color: var(--hl-green); text-shadow: 0 0 22px rgba(212,255,0,0.4); }
.case-more p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: rgba(0,0,0,0.6);
  max-width: 540px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.case-more-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
@media (max-width: 880px) {
  .case-more-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

.case-more-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  color: var(--black);
  background: #f5f5f5;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.28);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
.case-more-card img,
.case-more-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .55s ease;
}
.case-more-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 38px 70px -28px rgba(0,0,0,0.38);
}
.case-more-card:hover img,
.case-more-card:hover video { transform: scale(1.05); }

.case-more-card .ovl {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
}
.case-more-card .info {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  color: #fff;
  text-align: left;
}
.case-more-card .info .small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 6px;
}
.case-more-card .info h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.15;
  color: #fff;
}
.case-more-card .info h3 em { font-family: var(--font-script); font-style: normal; font-weight: 400; }

.case-more-card::after {
  content: '→';
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-pixel);
  font-size: 22px;
  color: #fff;
  z-index: 2;
  opacity: .85;
  transition: transform .35s ease, opacity .35s ease;
}
.case-more-card:hover::after { transform: translateX(4px); opacity: 1; }

/* Playground card — distinct acid-green tint */
.case-more-card.is-playground { background: #0a0a0a; }
.case-more-card.is-playground::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 35% 25%, rgba(212,255,0,0.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(240,88,179,0.14), transparent 55%);
  z-index: 0;
  pointer-events: none;
}
.case-more-card.is-playground img,
.case-more-card.is-playground video {
  opacity: .55;
  filter: saturate(0.85);
}
.case-more-card.is-playground:hover img,
.case-more-card.is-playground:hover video { opacity: .7; }
.case-more-card.is-playground .info .small { color: var(--hl-green); opacity: 1; }

.case-more-back {
  margin-top: clamp(36px, 5vw, 64px);
  text-align: center;
}
.case-more-back a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding-bottom: 2px;
  color: rgba(0,0,0,0.7);
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}
.case-more-back a:hover { color: var(--accent-pink); border-color: var(--accent-pink); }

/* small "no cookies" fineprint inside the footer */
.footer-bar .footer-fineprint {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* ════════════════════════════════════════════════════════
   EDITORIAL SHARED — Obys-style typography & motion kit.
   Applied to sub-pages that opt-in via .editorial on body.
   ════════════════════════════════════════════════════════ */

/* dark theme variables for editorial pages */
body.editorial { background: #0a0a0a; color: #fff; }
body.editorial .top-nav { background: #0a0a0a !important; }
body.editorial .top-nav.is-scrolled { background: rgba(10,10,10,0.92) !important; }
body.editorial .nav-logo { filter: brightness(0) saturate(100%) invert(1); }
body.editorial .footer-bar { background: #0a0a0a; border-top: 1px solid rgba(255,255,255,0.08); }
body.editorial .footer-bar .footer-left,
body.editorial .footer-bar .footer-right { color: #fff; opacity: .75; }
body.editorial ::selection { background: var(--hl-green); color: #0a0a0a; }

/* light editorial — same kit but on white */
body.editorial-light { background: #fafafa; color: #0a0a0a; }

/* custom cursor */
body.editorial .cursor-dot, body.editorial-light .cursor-dot,
body.editorial .cursor-ring, body.editorial-light .cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: difference;
}
body.editorial .cursor-dot, body.editorial-light .cursor-dot {
  width: 6px; height: 6px;
  background: var(--hl-green);
}
body.editorial .cursor-ring, body.editorial-light .cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.85);
  transition: width .25s, height .25s;
}
body.is-hovering .cursor-ring {
  width: 70px; height: 70px;
  border-color: var(--hl-green);
}
@media (hover: none) {
  body.editorial .cursor-dot, body.editorial-light .cursor-dot,
  body.editorial .cursor-ring, body.editorial-light .cursor-ring { display: none; }
}
body.editorial, body.editorial-light { cursor: none; }
@media (hover: none) { body.editorial, body.editorial-light { cursor: auto; } }
body.editorial a, body.editorial button, body.editorial-light a, body.editorial-light button { cursor: none; }

/* big ghost section number */
.editorial-num {
  font-family: var(--font-pixel);
  font-size: clamp(120px, 18vw, 280px);
  line-height: .8;
  color: rgba(255,255,255,0.04);
  position: absolute;
  top: 20px;
  right: clamp(10px, 4vw, 60px);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -.04em;
}
body.editorial-light .editorial-num { color: rgba(0,0,0,0.05); }

/* marquee — BRAT-vibe black/white flash + VT323 pixel font */
.ed-marquee {
  overflow: hidden;
  white-space: nowrap;
  border: none;
  padding: 14px 0;
  line-height: 1;
  animation: edMarqueeFlash 4s steps(1, end) infinite;
}
body.editorial-light .ed-marquee {
  background: transparent;
  animation: edMarqueeFlash 4s steps(1, end) infinite;
}
@keyframes edMarqueeFlash {
  0%   { background: var(--white, #fff);    color: var(--black, #0a0a0a); }
  50%  { background: var(--black, #0a0a0a); color: var(--white, #fff); }
}
.ed-marquee-track {
  display: inline-flex;
  gap: 0;
  align-items: center;
  animation: edMarquee 22s linear infinite;
  white-space: nowrap;
}
.ed-marquee span {
  font-family: var(--font-pixel);
  font-size: 36px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 22px;
  color: currentColor;
}
.ed-marquee span em {
  font-family: var(--font-pixel);
  font-style: normal;
  font-weight: 400;
}
.ed-marquee .sep {
  padding: 0 4px;
  font-family: var(--font-pixel);
  font-size: 36px;
  vertical-align: middle;
  animation: edMarqueeSepFlash 4s steps(1, end) infinite;
}
@keyframes edMarqueeSepFlash {
  0%   { color: var(--accent-pink, #f058b3); }
  50%  { color: var(--hl-green, #d4ff00); }
}
@keyframes edMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* bidirectional reveal */
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* split-text reveal */
.split-text { display: inline-block; }
.split-text .char-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: .96; }
.split-text .char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.is-revealed .split-text .char { transform: translateY(0); }
.split-text .char:nth-child(1)  { transition-delay: .04s; }
.split-text .char:nth-child(2)  { transition-delay: .08s; }
.split-text .char:nth-child(3)  { transition-delay: .12s; }
.split-text .char:nth-child(4)  { transition-delay: .16s; }
.split-text .char:nth-child(5)  { transition-delay: .20s; }
.split-text .char:nth-child(6)  { transition-delay: .24s; }
.split-text .char:nth-child(n+7) { transition-delay: .28s; }

/* color bloom (pink or green) — scroll-progress driven via CSS var --bloom */
.bloom-pink, .bloom-green {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
}
.bloom-pink::before, .bloom-green::before {
  content: '';
  position: absolute; inset: 0;
  clip-path: circle(var(--bloom, 0%) at 50% 50%);
  transition: clip-path .25s linear;
  z-index: 1;
}
.bloom-pink::before  { background: var(--accent-pink); }
.bloom-green::before { background: var(--hl-green); }
.bloom-pink > .ed-inner,
.bloom-green > .ed-inner { position: relative; z-index: 2; }
.bloom-pink  > .ed-inner { color: var(--black); }
.bloom-green > .ed-inner { color: var(--black); }

/* big section title — scale-on-scroll handled via JS */
.ed-section {
  padding: clamp(80px, 11vw, 160px) clamp(20px, 5vw, 64px);
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}
.ed-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
body.editorial-light .ed-eyebrow,
.bloom-pink .ed-eyebrow,
.bloom-green .ed-eyebrow { color: rgba(0,0,0,0.55); }
.ed-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  margin-bottom: 38px;
  position: relative; z-index: 1;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
  transform-origin: left center;
}
.ed-title em { font-family: var(--font-script); font-style: normal; font-weight: 400; color: var(--hl-green); }
.ed-title .dot { color: var(--accent-pink); }
.bloom-pink .ed-title em { color: var(--white); }
.bloom-green .ed-title em { color: var(--accent-pink); }

/* ═══════════════════════════════════════════════════════════════════
   LUX — shared luxury-scroll system applied across the whole site.
   Treat the site as one organism: same easing, same reveal behaviour,
   same accent colour, same typographic rhythm everywhere.
   ─── Reference: typographyprinciples.obys.agency ─── */

:root {
  --lux-ease: cubic-bezier(.16, 1, .3, 1);
  --lux-pink: var(--accent-pink);
  --lux-ink:  var(--black);
}

/* Lux applies on every page, but typography stays page-specific.
   Marketing pages (home, services, contacts, playground, about) keep
   the Yellowtail script accents — they're part of the brand voice.
   Case-study pages (works.html and the case pages) opt-in to laconic
   sans through their own inline CSS. We don't force anything here. */

/* OVERSIZED HERO TITLE with letter-by-letter reveal — set up by JS */
.lux-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(60px, 12vw, 200px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}
.lux-title .word { display: inline-block; }
.lux-title .word + .word { margin-left: .25em; }
.lux-title .ch {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.2s var(--lux-ease), opacity .8s ease;
  will-change: transform, opacity;
}
.lux-title .dot { color: var(--accent-pink); }
body.is-revealed .lux-title .ch { transform: translateY(0); opacity: 1; }

/* SUBTITLE / LEAD that follows the title with a slight delay */
.lux-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(0,0,0,0.65);
  max-width: 540px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease 1.4s, transform .9s var(--lux-ease) 1.4s;
}
body.is-revealed .lux-lead { opacity: 1; transform: none; }

/* SMALL META above hero (eyebrow row) */
.lux-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin-bottom: 28px;
}
.lux-meta a {
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 1px;
}
.lux-meta a:hover { color: var(--accent-pink); border-color: var(--accent-pink); }

/* PINK BLUR ORBS — atmospheric depth, used in .lux-room sections */
.lux-room {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.lux-room::before,
.lux-room::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--accent-pink);
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}
.lux-room::before {
  top: 8%; right: -120px;
  width: 320px; height: 320px;
  opacity: .32;
}
.lux-room::after {
  bottom: 18%; left: -160px;
  width: 360px; height: 360px;
  opacity: .22;
}
.lux-room > * { position: relative; z-index: 1; }

/* CARD REVEAL — used by JS to animate any .lux-reveal element in.
   JS sets --reveal: 0..1 via IntersectionObserver. */
.lux-reveal {
  --reveal: 0;
  --base-rot: 0deg;
  transform:
    translateY(calc((1 - var(--reveal)) * 80px))
    scale(calc(0.92 + 0.08 * var(--reveal)))
    rotate(var(--base-rot));
  opacity: var(--reveal);
  transition: transform 1.2s var(--lux-ease), opacity 1s ease;
  will-change: transform, opacity;
}

/* PLAIN-TEXT LABEL under any media (no boxes) */
.lux-label {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.lux-label .name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color .25s;
}
.lux-label .meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

/* PILL CTA — pink-on-hover */
.lux-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .25s, gap .25s;
}
.lux-cta:hover {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
  color: var(--ink);
  transform: translateY(-3px);
  gap: 22px;
}
.lux-cta .arrow { font-family: var(--font-mono); font-size: 18px; }

/* SMOOTH PAGE-IN — every page fades+lifts on first paint, then JS
   adds .is-revealed which triggers the title/lead reveal. */
body.lux-page main,
body.lux-page > section {
  /* nothing — main animation lives in .lux-title / .lux-lead */
}

/* Smooth scroll system-wide (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* OUTRO CTA section pattern reused across pages */
.lux-outro {
  position: relative;
  text-align: center;
  padding: clamp(100px, 14vw, 180px) clamp(20px, 5vw, 64px);
  overflow: hidden;
  background: #fff;
}
.lux-outro::before {
  content: '';
  position: absolute;
  inset: 30% -10% auto -10%;
  height: 40vw;
  border-radius: 50%;
  background: var(--accent-pink);
  filter: blur(150px);
  opacity: .22;
  pointer-events: none;
}
.lux-outro-eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin-bottom: 18px;
}
.lux-outro h2 {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 100px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 1100px;
  margin: 0 auto;
}
.lux-outro h2 em { font-style: italic; font-weight: 700; }
.lux-outro h2 .dot { color: var(--accent-pink); }
.lux-outro p {
  position: relative;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(0,0,0,0.65);
  max-width: 540px;
  margin: 22px auto 40px;
}