/* vastav. — black/white system with subtle golden dust highlights.
   No frameworks, no build step. Black is primary, white is typography
   and the particle word, gold is only an occasional accent. */

:root {
  --bg: #060606;
  --bg-raised: #0c0c0d;
  --ink: #f4f4f5;
  --muted: rgba(244, 244, 245, 0.62);
  --faint: rgba(244, 244, 245, 0.42);
  --accent: #ffffff;
  --gold: #ffcf87;
  --line: rgba(255, 255, 255, 0.09);
  --card: rgba(255, 255, 255, 0.028);
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; }

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #ffffff; color: #000000; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #060606; }
::-webkit-scrollbar-thumb { background: #2a2a2d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f44; }

a { color: inherit; }

img, canvas, svg, video { max-width: 100%; }

/* ---------- page: one continuous background ---------- */
#global-dust,
#dust-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100svw;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.page {
  position: relative;
  z-index: 1;
  background: transparent;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
}

/* ---------- header / brand nav ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s;
}
.site-header.scrolled { background: rgba(6, 6, 6, 0.9); }
.nav {
  max-width: 76rem; margin-inline: auto; padding: 0.7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.72);
}
.brand {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.01em; color: #fff; text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1;
}
.brand-dot { color: var(--gold); }
.accent { color: #fff; }
.nav-links { display: none; }
.nav-links a {
  position: relative; text-decoration: none; padding: 0.4rem 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color 0.25s;
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 200, 120, 0.9);
}
.nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px;
  padding: 0.45rem 1.1rem !important; color: #fff;
}
.nav-cta:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-cta.active::after { display: none; }
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 0.6rem 0.25rem; cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: #f4f4f5; border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 859px) {
  /* Premium dropdown panel: calm, scannable, thumb-friendly.
     Always laid out (no display swap) so open/close can transition. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch;
    background: rgba(8, 8, 9, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 60px);
    max-height: calc(100svh - 60px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.3s ease,
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.34s;
  }
  .site-header.menu-open .nav-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.3s ease,
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Rows: 52px targets, hairlines, staggered entrance. */
  .nav-links a {
    display: flex; align-items: center;
    min-height: 52px; padding: 0.7rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px; font-weight: 600; letter-spacing: 0.2em;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.28s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s;
  }
  .site-header.menu-open .nav-links a { opacity: 1; transform: none; }
  .site-header.menu-open .nav-links a:nth-child(1) { transition-delay: 0.05s; }
  .site-header.menu-open .nav-links a:nth-child(2) { transition-delay: 0.09s; }
  .site-header.menu-open .nav-links a:nth-child(3) { transition-delay: 0.13s; }
  .site-header.menu-open .nav-links a:nth-child(4) { transition-delay: 0.17s; }
  .site-header.menu-open .nav-links a:nth-child(5) { transition-delay: 0.21s; }
  .site-header.menu-open .nav-links a:nth-child(6) { transition-delay: 0.25s; }
  /* Active row: quiet gold dot at the trailing edge. */
  .nav-links a.active::after {
    display: block; left: auto; right: 0.35rem; top: 50%; bottom: auto;
    width: 5px; height: 5px; margin: 0; transform: translateY(-50%);
  }
  /* Contact reads exactly like the rows above — no pill, no separation. */
  .nav-links a.nav-cta {
    justify-content: flex-start;
    margin: 0; padding: 0.7rem 0.25rem !important;
    border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0; background: none; color: inherit; text-align: left;
  }
  .nav-links a.nav-cta:hover { background: none; }
  /* Hamburger: slimmer mark, full 44px touch target. */
  .nav-toggle { padding: 0.85rem 0.5rem; }
  .nav-toggle span { width: 20px; }
}
@media (min-width: 860px) {
  .nav-links { display: flex; align-items: center; gap: 1.5rem; }
  .nav-toggle { display: none; }
}

main, .site-footer { position: relative; z-index: 1; background: transparent; }

/* ---------- hero ---------- */
/* Tall sticky scroll room: the word disperses fully before About arrives. */
.hero { position: relative; height: 230vh; height: 230svh; background: transparent; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
  background: transparent;
}
/* One faint warm haze behind the word — an accent, not a background. */
.hero-haze {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 32% at 50% 46%, rgba(255, 172, 84, 0.07), transparent 70%);
}
.hero-top {
  position: absolute; inset-inline: 0; top: 0; z-index: 2;
  display: flex; justify-content: flex-end; align-items: flex-start;
  gap: 1rem;
  padding: 4.25rem 1.25rem 0; pointer-events: none;
}
.hero-top p { flex-shrink: 0; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.35em; color: rgba(255, 255, 255, 0.85); }
.kicker-dim { font-size: 11px; letter-spacing: 0.25em; color: var(--faint); }
@media (max-width: 639px) {
  .hero-top { padding: 4rem 1rem 0; }
  .kicker, .kicker-dim { font-size: 10px; letter-spacing: 0.16em; }
}
.hero-bottom {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  padding: 1.25rem 1rem 1.75rem; text-align: center; pointer-events: none;
}
.hero-role { font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
.hero-intro {
  max-width: 34rem; font-size: 0.92rem; line-height: 1.6;
  color: var(--muted);
  text-wrap: balance;
}
/* Mobile hero is only the word + a whisper of guidance. */
@media (max-width: 639px) {
  .hero { height: 260vh; height: 260svh; }
  .hero-top { display: none; }
  .hero-role, .hero-intro { display: none; }
  .hero-bottom { gap: 0.6rem; padding: 1rem 1rem 1.6rem; }
  .hero-hint { font-size: 0.62rem; letter-spacing: 0.16em; }
}
.hero-hint { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); min-height: 1.2em; }
.scroll-cue {
  width: 1.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; padding: 0.375rem; display: flex; justify-content: center;
}
.scroll-cue span { width: 0.25rem; height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(0.7rem); opacity: 0.3; } }
.noscript-hero {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: clamp(2.5rem, 12vw, 5rem); font-weight: 700; color: #fff;
  padding-inline: 1rem; text-align: center;
}

/* ---------- sections: transparent, continuous ---------- */
.section {
  position: relative;
  background: transparent;
  padding: 4.5rem 1.25rem;
  scroll-margin-top: 3.5rem;
  overflow-x: clip;
}
@media (min-width: 640px) { .section { padding: 7rem 1.5rem; } }
.section-bordered { border-top: 1px solid var(--line); }
.container { max-width: 72rem; margin-inline: auto; width: 100%; min-width: 0; }
.center { text-align: center; }
.center .sub { margin-inline: auto; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 1.1rem + 3.2vw, 3rem);
  line-height: 1.1; margin-top: 1rem;
  text-wrap: balance;
}
.h2-xl { font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 5.5vw, 3.75rem); }
.sub { margin-top: 1rem; max-width: 36rem; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
.lead { font-size: 1rem; line-height: 1.9; color: rgba(244, 244, 245, 0.72); overflow-wrap: break-word; }
.lead + .lead { margin-top: 1.25rem; }
@media (min-width: 640px) { .lead { font-size: 1.08rem; } }

.sec-head { max-width: 46rem; margin-bottom: 1rem; min-width: 0; }
.sec-index {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; gap: 0.9rem;
}
.sec-index::after {
  content: ""; height: 1px; width: 3.5rem;
  background: linear-gradient(90deg, rgba(255, 207, 135, 0.45), transparent);
}
.sec-head .eyebrow { margin-top: 0.9rem; }
.sec-head .h2 { margin-top: 0.8rem; }

.about-grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1.4fr; gap: 3.5rem; } }

/* ---------- panels (toolkit) ---------- */
.toolkit { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .toolkit { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .toolkit { grid-template-columns: repeat(4, 1fr); } }
.panel {
  height: 100%; border: 1px solid var(--line); border-radius: 1rem;
  background: var(--card); padding: 1.5rem;
  transition: border-color 0.3s, background 0.3s;
  min-width: 0;
}
.panel:hover { border-color: rgba(255, 255, 255, 0.25); }
.panel-title { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.pills li {
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); border-radius: 0.5rem;
  padding: 0.38rem 0.8rem; font-size: 0.83rem; color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.25s, color 0.25s;
  overflow-wrap: break-word;
}
.pills li:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }

/* ---------- about ---------- */
.mark-card {
  --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px;
  --mx: 50%; --my: 42%; --glow: 0;
  --px: 0px; --py: 0px;
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 1.25rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 45%, transparent),
    rgba(12, 12, 13, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-height: 300px; padding: 2.5rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  transform: perspective(950px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx), var(--ty), 0);
  will-change: transform;
  touch-action: pan-y;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.mark-card.is-live { border-color: rgba(255, 255, 255, 0.16); }
.mark-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent);
}
/* Cursor reactive light. Small soft reveal, never a giant bright circle. */
.mark-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.09),
    rgba(255, 207, 135, 0.07) 42%,
    transparent 66%);
  opacity: var(--glow);
}
.mark-orbit, .mark-orbit::before, .mark-orbit::after {
  position: absolute; left: 50%; top: 46%; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14); transform: translate(-50%, -50%);
}
.mark-orbit { width: min(250px, 62vw); height: min(250px, 62vw); z-index: 0; animation: mark-breathe 7s ease-in-out infinite; }
@keyframes mark-breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.015; opacity: 0.96; } }
.mark-orbit::before { content: ""; width: 74%; height: 74%; border-color: rgba(255, 255, 255, 0.09); }
.mark-orbit::after {
  content: ""; width: 7px; height: 7px; left: auto; top: 8%; right: 18%;
  background: var(--gold); border: 0; border-radius: 50%;
  box-shadow: 0 0 12px 2px rgba(255, 190, 110, 0.55);
}
.mark-word {
  position: relative; z-index: 3; font-family: var(--font-display);
  font-size: clamp(2rem, 7vw + 0.5rem, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em; color: #fff;
  transform: translate3d(var(--px), var(--py), 0);
  will-change: transform;
}
.mark-sub { position: relative; z-index: 2; font-size: 10px; letter-spacing: 0.28em; color: var(--faint); text-align: center; transform: translate3d(calc(var(--px) * 0.5), calc(var(--py) * 0.5), 0); will-change: transform; max-width: 100%; }
/* Identity unit: vastav. over large monochrome Jack + label.
   In-flow so the Jack becomes a major element; bottom fade embeds it
   in the card instead of pasting it on. Inherits --px/--py for depth. */
.mark-jack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  width: 100%; margin-top: 0.2rem;
  pointer-events: none;
  transform: translate3d(calc(var(--px) * 0.3), calc(var(--py) * 0.3), 0);
  will-change: transform;
}
.mark-jack-mark {
  display: block; width: min(190px, 52vw); height: auto; aspect-ratio: 896 / 1200;
  object-fit: contain; object-position: top center;
  opacity: 0.92;
  /* Original is dark red / near-black on transparent: grayscale strips hue,
     invert lifts it to light monochrome so it reads on the black card. */
  filter: grayscale(1) invert(1) brightness(0.9) contrast(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
}
.mark-jack-label {
  font-size: 9px; font-weight: 500; letter-spacing: 0.32em; text-indent: 0.32em;
  text-transform: uppercase; color: rgba(244, 244, 245, 0.48);
  white-space: nowrap; text-align: center;
}

/* ---------- services ---------- */
.service-list { border-top: 1px solid var(--line); margin-top: 1rem; }
.service-row {
  display: grid; grid-template-columns: 52px 1fr 28px; gap: 1rem; align-items: center;
  padding: 1.5rem 0.75rem; border-bottom: 1px solid var(--line);
  transition: background 0.3s;
  min-width: 0;
}
.service-row:hover { background: rgba(255, 255, 255, 0.025); }
.service-num {
  font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.38); transition: color 0.3s;
}
.service-row:hover .service-num { color: #fff; }
.service-row h3 { font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 1.4vw, 1.3rem); font-weight: 700; margin-bottom: 0.35rem; overflow-wrap: break-word; }
.service-row h3 a.cap-link { color: inherit; text-decoration: none; }
.cap-ig,
.cap-studio {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-left: 0.6rem; padding-bottom: 1px;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  border-bottom: 1px solid transparent; vertical-align: middle;
  transition: color 0.25s, border-color 0.25s;
}
.cap-ig svg { width: 13px; height: 13px; flex-shrink: 0; }
.cap-ig:hover, .cap-studio:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.service-row p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; max-width: 40rem; overflow-wrap: break-word; }
.service-row > div { min-width: 0; }
.service-arrow { color: #fff; font-size: 1.2rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.service-row:hover .service-arrow { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .service-row { grid-template-columns: 36px 1fr; padding: 1.25rem 0.25rem; }
  .service-arrow { display: none; }
}

/* ---------- selected work ---------- */
.feature { display: grid; gap: 1.75rem; margin-top: 3rem; align-items: center; }
.feature + .feature { margin-top: 4rem; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
  .feature-flip .work-art { order: 2; }
}
.work-art {
  position: relative; display: block; aspect-ratio: 16 / 10;
  border-radius: 1.1rem; border: 1px solid rgba(255, 255, 255, 0.11);
  overflow: hidden; text-decoration: none;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  background: var(--bg-raised);
  min-width: 0;
}
.work-art:hover {
  transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 30px 80px -30px rgba(255, 255, 255, 0.18);
}
.work-art::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.art-01 {
  background: radial-gradient(60% 55% at 30% 25%, rgba(255, 255, 255, 0.13), transparent 60%),
    radial-gradient(50% 50% at 78% 82%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(150deg, #141416, #060606 70%);
}
.art-02 {
  background: radial-gradient(55% 60% at 72% 22%, rgba(255, 255, 255, 0.11), transparent 60%),
    radial-gradient(60% 55% at 25% 80%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(210deg, #121214, #060606 70%);
}
.art-03 {
  background: radial-gradient(45% 45% at 50% 45%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(70% 60% at 50% 110%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, #101012, #060606 75%);
}
.work-ghost {
  position: absolute; right: 1rem; bottom: -1.2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 16vw, 7rem);
  line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  transition: transform 0.35s;
}
.work-art:hover .work-ghost { transform: translateX(-8px); -webkit-text-stroke-color: rgba(255, 255, 255, 0.45); }
.work-art-tag {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  padding: 0.35rem 0.7rem; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px);
  max-width: calc(100% - 2rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.work-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.work-meta { min-width: 0; }
.work-meta h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -0.01em; margin: 0.7rem 0 0.8rem; overflow-wrap: break-word; }
.work-meta > p { color: var(--muted); font-size: 0.93rem; line-height: 1.7; overflow-wrap: break-word; }
.work-tech { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.work-tech li {
  font-size: 0.75rem; color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line); border-radius: 0.45rem;
  padding: 0.32rem 0.7rem; background: rgba(0, 0, 0, 0.35);
}
.work-links { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
.work-links a {
  color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px;
  transition: border-color 0.25s, color 0.25s;
}
.work-links a:hover { color: #fff; border-color: #fff; }

/* ---------- timeline ---------- */
.timeline { margin-top: 2.5rem; }
.timeline-row {
  display: grid; gap: 0.5rem; padding: 1.75rem 0;
  border-top: 1px solid var(--line); transition: background 0.3s;
  min-width: 0;
}
.timeline-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .timeline-row { grid-template-columns: 160px 1fr 1.4fr; gap: 1.75rem; padding-inline: 1rem; }
}
.timeline-row:hover { background: rgba(255, 255, 255, 0.02); }
.timeline-row h3 { font-family: var(--font-display); font-size: clamp(1rem, 0.95rem + 1vw, 1.15rem); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: break-word; }
.period { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.place { margin-top: 0.25rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); overflow-wrap: break-word; }
.detail { font-size: 0.86rem; line-height: 1.65; color: var(--muted); overflow-wrap: break-word; }

/* ---------- contact / footer ---------- */
.contact { text-align: center; }
.contact .sub { text-wrap: balance; }
/* ---------- brand buttons ---------- */
.btn {
  display: inline-block; border-radius: 999px;
  padding: 0.78rem 1.7rem;
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.03em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
  max-width: 100%;
  overflow-wrap: break-word;
}
.btn-primary {
  background: #ffffff; color: #000; border: 1px solid transparent;
  box-shadow: 0 10px 50px -18px rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { transform: translateY(-2px); background: #e8e8ea; }
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.25); color: #f4f4f5;
  background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn-lg { padding: 0.95rem 2.2rem; font-size: 0.92rem; overflow-wrap: anywhere; }
@media (max-width: 430px) {
  .btn-lg { padding: 0.85rem 1.25rem; font-size: 0.84rem; width: 100%; max-width: 22rem; }
}
.contact .btn-lg { margin-top: 2rem; }
/* About signature strip: one quiet contact row closing the section. */
.about-strip {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 0.4rem 0.9rem;
  margin: 1.9rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
}
.about-strip a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: rgba(244, 244, 245, 0.6); text-decoration: none;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  transition: color 0.25s ease;
}
.about-strip a:hover { color: #fff; }
/* Contact strip: same voice as the About strip, centered for Contact. */
.contact-strip {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.4rem 0.9rem;
  margin: 1.8rem 0 0; padding: 0;
}
.contact-strip a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: rgba(244, 244, 245, 0.6); text-decoration: none;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  transition: color 0.25s ease;
}
.contact-strip a:hover { color: #fff; }
.contact-strip .soc-icon { width: 13px; height: 13px; }
/* Social icons: monochrome line art, inside the link, never louder than text. */
.about-strip .soc-icon { width: 13px; height: 13px; }
.soc-icon {
  width: 14px; height: 14px; flex-shrink: 0; opacity: 0.8;
  transition: opacity 0.25s ease;
}
.about-strip a:hover .soc-icon, .contact-strip a:hover .soc-icon, .foot-base a:hover .soc-icon { opacity: 1; }
.foot-base a { display: inline-flex; align-items: center; gap: 0.35rem; }
.foot-base .soc-icon { width: 12px; height: 12px; }
.to-top { margin-top: 2rem; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.to-top a { text-decoration: none; transition: color 0.25s; }
.to-top a:hover { color: #fff; }
.site-footer {
  border-top: 1px solid var(--line); padding: 2rem 1.25rem; text-align: center;
  font-size: 0.72rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.4);
  background: transparent;
}
.foot-base { letter-spacing: 0.08em; line-height: 1.8; overflow-wrap: break-word; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  .mark-orbit { animation: none; }
  .mark-card { transform: none; }
  .mark-jack { transform: none; }
  .btn:hover, .work-art:hover, .service-row, .pills li { transform: none !important; }
}

/* ---------- footer ---------- */
.foot-word {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, 12vw, 5.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
  margin-bottom: 1.4rem; user-select: none;
  overflow-wrap: break-word;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; justify-content: center; margin-bottom: 1.4rem; }
.foot-nav a {
  color: rgba(255, 255, 255, 0.55); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.25s;
}
.foot-nav a:hover { color: #fff; }

/* ---------- small screens: guarantee no overflow ---------- */
@media (max-width: 380px) {
  .section { padding-inline: 1rem; }
  .nav { padding-inline: 1rem; }
  .work-art-tag { font-size: 9px; }
}

/* ————————————————————————————————————————————————
   EXPERIMENTAL Easter-egg Jacks (safe to delete).
   Uses exact JACK.svg asset, monochrome via filter.
   All absolute + pointer-events:none so layout, spacing,
   nav, particles and content are untouched.
   Remove the matching <!-- EGG EXPERIMENT --> spans too.
   ———————————————————————————————————————————————— */
.brand-jack {
  display: block; width: 18px; height: auto; aspect-ratio: 896 / 1200;
  flex-shrink: 0;
  opacity: 0.85;
  filter: grayscale(1) invert(1) brightness(0.9) contrast(1.1);
  transition: opacity 0.3s, transform 0.3s;
}
.brand:hover .brand-jack { opacity: 1; transform: rotate(-5deg) translateY(-1px); }
.egg { position: absolute; z-index: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s; }
.egg img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) invert(1) brightness(0.9) contrast(1.1);
}
/* Stack section content above underlaid eggs without moving anything. */
#about .container, #services .container, #contact .container,
#journey .container, #skills .container { position: relative; z-index: 1; }
/* About: half-cropped LEFT edge, sitting behind the heading block */
.egg-about { top: 4.5rem; left: -14px; width: 40px; opacity: 0.22; transform: rotate(-6deg); }
#about:hover .egg-about { opacity: 0.36; transform: rotate(-2deg) translateY(-2px); }
/* About: tiny front companion near the facts block (right, low) */
.egg-about-facts { right: 6%; bottom: 7%; width: 24px; opacity: 0.3; transform: rotate(8deg); z-index: 2; }
#about:hover .egg-about-facts { opacity: 0.45; transform: rotate(4deg) translateY(-2px); }
/* Services: small tuck beside the heading (right) */
.egg-services { top: 5.2rem; right: 9%; width: 30px; opacity: 0.22; transform: rotate(-7deg); z-index: 2; }
#services:hover .egg-services { opacity: 0.38; transform: rotate(-3deg) translateY(-2px); }
/* Services: large faint underlay behind the rows (left, cropped) */
.egg-services-list { left: -20px; top: 38%; width: 64px; opacity: 0.14; transform: rotate(4deg); }
#services:hover .egg-services-list { opacity: 0.22; transform: rotate(1deg); }
/* Contact: large whisper behind the big heading (center, behind) */
.egg-contact-hero { left: 50%; top: 3rem; width: 120px; margin-left: -60px; opacity: 0.1; transform: rotate(-4deg); }
#contact:hover .egg-contact-hero { opacity: 0.16; transform: rotate(-2deg); }
/* Contact: small front detail near the socials edge (right) */
.egg-contact-edge { right: 5%; bottom: 6rem; width: 26px; opacity: 0.28; transform: rotate(7deg); z-index: 2; }
#contact:hover .egg-contact-edge { opacity: 0.42; transform: rotate(3deg) translateY(-2px); }
/* Journey: half-tucked at the timeline edge (left, behind rows) */
.egg-journey { bottom: 14%; left: -16px; width: 52px; opacity: 0.2; transform: rotate(-5deg); }
#journey:hover .egg-journey { opacity: 0.34; transform: rotate(-1deg) translateY(-2px); }
/* Journey: small front detail near the heading (right) */
.egg-journey-head { top: 4.5rem; right: 7%; width: 28px; opacity: 0.24; transform: rotate(6deg); z-index: 2; }
#journey:hover .egg-journey-head { opacity: 0.38; transform: rotate(2deg) translateY(-2px); }
/* Skills: faint underlay beneath the panels (center-left, behind) */
.egg-skills-grid { left: 30%; bottom: 2rem; width: 70px; opacity: 0.12; transform: rotate(3deg); }
#skills:hover .egg-skills-grid { opacity: 0.2; transform: rotate(0deg); }
/* Skills: small front detail near the heading (left) */
.egg-skills-edge { top: 4.2rem; left: 5%; width: 24px; opacity: 0.26; transform: rotate(-8deg); z-index: 2; }
#skills:hover .egg-skills-edge { opacity: 0.4; transform: rotate(-4deg) translateY(-2px); }
/* Footer: quiet companion near the base, never competing */
.site-footer { overflow-x: clip; }
.egg-footer { bottom: 1.1rem; right: 1.25rem; width: 30px; opacity: 0.25; transform: rotate(5deg); z-index: 2; }
.site-footer:hover .egg-footer { opacity: 0.4; transform: rotate(1deg) translateY(-2px); }
@media (max-width: 639px) {
  .brand { font-size: 1.3rem; }
  .brand-jack { width: 15px; }
  .egg-about { width: 32px; top: 4rem; }
  .egg-about-facts { right: 1rem; width: 20px; }
  .egg-services { right: 1rem; width: 24px; }
  .egg-services-list { width: 44px; top: 42%; }
  .egg-contact-hero { width: 76px; margin-left: -38px; top: 2.5rem; }
  .egg-contact-edge { right: 1rem; width: 22px; }
  .egg-journey { width: 40px; }
  .egg-journey-head { right: 1rem; width: 22px; }
  .egg-skills-grid { width: 48px; left: 24%; }
  .egg-skills-edge { left: 1rem; width: 20px; }
  .egg-footer { width: 24px; bottom: 0.9rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links, .site-header.menu-open .nav-links,
  .nav-links a, .site-header.menu-open .nav-links a { transition: none; }
  .soc-icon { transition: none; }
  .brand-jack, .egg { transition: none; }
  .brand:hover .brand-jack,
  #about:hover .egg-about, #about:hover .egg-about-facts,
  #services:hover .egg-services, #services:hover .egg-services-list,
  #contact:hover .egg-contact-hero, #contact:hover .egg-contact-edge,
  #journey:hover .egg-journey, #journey:hover .egg-journey-head,
  #skills:hover .egg-skills-grid, #skills:hover .egg-skills-edge,
  .site-footer:hover .egg-footer { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE EDITORIAL REDESIGN — dedicated phone composition.
   Desktop is untouched: every rule below is scoped to ≤640px (plus
   small-phone refinements). Content is never removed, only re-spaced,
   re-sized and re-rhythmmed for comfortable one-thumb reading.
   Goals: clear hierarchy · breathing room · short line lengths ·
   no overlap · no horizontal scroll · subtle staggered reveals.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html { scroll-padding-top: 4.25rem; }

  /* ---- section rhythm: less shell padding, more internal air ---- */
  .section { padding: 3.9rem 1.25rem; scroll-margin-top: 4rem; }
  .container { max-width: 100%; }
  .sec-head { margin-bottom: 2.1rem; max-width: 100%; }
  .sec-index { font-size: 0.7rem; letter-spacing: 0.28em; gap: 0.75rem; }
  .sec-index::after { width: 2.4rem; }
  .sec-head .eyebrow { margin-top: 0.85rem; }
  .sec-head .h2 { margin-top: 0.75rem; }

  /* ---- editorial type scale: intelligent, not just smaller ---- */
  .eyebrow { font-size: 10px; letter-spacing: 0.26em; line-height: 1.5; }
  .h2 {
    font-size: clamp(1.7rem, 7.2vw, 2.05rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    text-wrap: balance;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .h2-xl {
    font-size: clamp(1.85rem, 8.4vw, 2.45rem);
    line-height: 1.11;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }
  .sub {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 1rem;
    max-width: 36ch;
    overflow-wrap: break-word;
  }
  .center .sub { max-width: 32ch; }

  /* ---- about prose: break the wall into breathable groups ---- */
  .about-grid { gap: 2.4rem; margin-top: 0; }
  .lead {
    font-size: 0.94rem;
    line-height: 1.76;
    letter-spacing: 0.002em;
    color: rgba(244, 244, 245, 0.7);
    max-width: 100%;
  }
  .lead + .lead { margin-top: 1.15rem; }
  /* Opening statement carries slightly more presence; supports recede. */
  #about .about-grid .reveal .lead:first-of-type {
    font-size: 1.0rem;
    line-height: 1.7;
    color: rgba(244, 244, 245, 0.88);
  }
  /* ---- Jack of All Trades card: dedicated mobile composition ----
     Same content (vastav. / Jack SVG / label), new hierarchy:
     word gets its own stage, Jack shrinks to an emblem, label gets
     air underneath. No squeeze, no giant dominating figure. */
  .mark-card {
    min-height: 0;
    padding: 2.1rem 1.3rem 1.85rem;
    gap: 0;
    border-radius: 1.1rem;
    align-items: center;
  }
  .mark-card::before { background-size: 32px 32px; }
  .mark-orbit { width: min(178px, 54vw); height: min(178px, 54vw); top: 41%; }
  .mark-word { font-size: 1.85rem; line-height: 1; letter-spacing: -0.02em; margin: 0; }
  .mark-jack { margin-top: 1.4rem; gap: 0.9rem; }
  .mark-jack-mark { width: 126px; opacity: 0.9; }
  .mark-jack-label { font-size: 8px; letter-spacing: 0.3em; text-indent: 0.3em; line-height: 1.6; }

  /* ---- services: air between rows, title vs. desc separation ---- */
  .service-list { margin-top: 0.4rem; }
  .service-row {
    grid-template-columns: 30px 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1.45rem 0.15rem;
  }
  .service-num { font-size: 0.72rem; letter-spacing: 0.12em; margin-top: 0.28rem; }
  .service-row h3 {
    font-size: 1.03rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin-bottom: 0.5rem;
  }
  .service-row p { font-size: 0.87rem; line-height: 1.68; max-width: 100%; }
  .cap-ig, .cap-studio {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
    padding-bottom: 1px;
  }
  .cap-ig svg { width: 12px; height: 12px; }
  .cap-ig, .cap-studio { padding: 0.4rem 0.15rem; }

  /* ---- journey: period → title → place → detail cascade ---- */
  .timeline { margin-top: 0.4rem; }
  .timeline-row { padding: 1.55rem 0; gap: 0.45rem; }
  .timeline-row h3 { font-size: 1.02rem; line-height: 1.35; }
  .period { font-size: 0.68rem; letter-spacing: 0.18em; line-height: 1.5; }
  .place { font-size: 0.82rem; margin-top: 0.35rem; line-height: 1.5; }
  .detail { font-size: 0.86rem; line-height: 1.68; margin-top: 0.6rem; max-width: 100%; }

  /* ---- toolkit: calmer panels, breathable pills ---- */
  .toolkit { gap: 0.9rem; margin-top: 0.4rem; }
  .panel { padding: 1.3rem 1.2rem; border-radius: 0.9rem; }
  .panel-title { font-size: 0.7rem; letter-spacing: 0.2em; line-height: 1.5; }
  .pills { gap: 0.45rem; margin-top: 1rem; }
  .pills li { font-size: 0.8rem; line-height: 1.4; padding: 0.42rem 0.75rem; }

  /* ---- contact: centered column with genuine pauses ---- */
  .contact .h2-xl { max-width: 100%; }
  .contact .sub { margin-top: 1.1rem; }
  .contact .btn-lg { margin-top: 1.8rem; }
  /* About strip on phones: compact, wraps to two lines max, stays unified. */
  .about-strip { gap: 0.35rem 0.85rem; margin-top: 1.7rem; padding-top: 1.2rem; }
  .about-strip a { font-size: 0.76rem; padding: 0.55rem 0.3rem; }
  .contact-strip { gap: 0.35rem 0.85rem; }
  .contact-strip a { font-size: 0.76rem; padding: 0.55rem 0.3rem; }
  .to-top { margin-top: 1.8rem; }

  /* ---- footer + nav stay usable with thumbs ---- */
  .site-footer { padding: 2.6rem 1.25rem calc(2.2rem + env(safe-area-inset-bottom, 0px)); }
  .foot-word { font-size: clamp(2.2rem, 13vw, 2.8rem); margin-bottom: 1.2rem; }
  .foot-nav { gap: 0.7rem 1.1rem; margin-bottom: 1.25rem; }
  .foot-nav a { padding: 0.65rem 0.35rem; }
  .foot-base a { padding: 0.45rem 0.15rem; }
  .foot-base { font-size: 0.7rem; letter-spacing: 0.06em; }
  .nav { padding: 0.65rem 1rem; }
  .hero-bottom { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  /* ---- mobile hero: cinematic whisper, not an empty stage ----
     Kicker, role and intro return at whisper scale, pinned to the
     edges so the particle word always owns the middle. Later in the
     file than the hiding rules, so this intentionally wins. */
  .hero-top {
    display: flex;
    padding: calc(4.6rem + env(safe-area-inset-top, 0px)) 1.25rem 0;
  }
  .kicker-dim { font-size: 9px; letter-spacing: 0.22em; }
  .hero-role { display: block; font-size: 0.68rem; letter-spacing: 0.28em; }
  .hero-intro {
    display: block; font-size: 0.78rem; line-height: 1.6;
    max-width: 22rem; color: var(--muted);
  }
  .hero-bottom { gap: 0.7rem; }

  /* ---- buttons: long emails wrap gracefully, never clip ---- */
  .btn { max-width: 100%; }
  .btn-lg { line-height: 1.5; }

  /* ---- parent reveal: softer, shorter, premium on phones ---- */
  .reveal {
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---- staggered text rhythm (compositor-only, no layout shift) ----
     Parents fade as units; inner text follows a beat behind:
     label → heading → copy → details. Subtle by design. */
  .sec-head.reveal .sec-index,
  .sec-head.reveal .eyebrow,
  .sec-head.reveal .h2,
  .sec-head.reveal .sub,
  #about .about-grid .reveal .lead,
  #about .about-strip.reveal,
  .service-list .reveal .service-num,
  .service-list .reveal h3,
  .service-list .reveal .service-row > div > p,
  .timeline .reveal .period,
  .timeline .reveal h3,
  .timeline .reveal .place,
  .timeline .reveal .detail,
  .toolkit .reveal .panel-title,
  .toolkit .reveal .pills,
  #contact .reveal .sec-index,
  #contact .reveal .eyebrow,
  #contact .reveal .h2,
  #contact .reveal .sub,
  #contact .reveal .btn,
  #contact .reveal .contact-strip,
  #contact .reveal .to-top {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .sec-head.reveal.is-visible .sec-index,
  .sec-head.reveal.is-visible .eyebrow,
  .sec-head.reveal.is-visible .h2,
  .sec-head.reveal.is-visible .sub,
  #about .about-grid .reveal.is-visible .lead,
  #about .about-strip.reveal.is-visible,
  .service-list .reveal.is-visible .service-num,
  .service-list .reveal.is-visible h3,
  .service-list .reveal.is-visible .service-row > div > p,
  .timeline .reveal.is-visible .period,
  .timeline .reveal.is-visible h3,
  .timeline .reveal.is-visible .place,
  .timeline .reveal.is-visible .detail,
  .toolkit .reveal.is-visible .panel-title,
  .toolkit .reveal.is-visible .pills,
  #contact .reveal.is-visible .sec-index,
  #contact .reveal.is-visible .eyebrow,
  #contact .reveal.is-visible .h2,
  #contact .reveal.is-visible .sub,
  #contact .reveal.is-visible .btn,
  #contact .reveal.is-visible .contact-strip,
  #contact .reveal.is-visible .to-top {
    opacity: 1;
    transform: none;
  }
  /* section → heading → content → details timing */
  .sec-head.reveal.is-visible .sec-index { transition-delay: 0.02s; }
  .sec-head.reveal.is-visible .eyebrow { transition-delay: 0.07s; }
  .sec-head.reveal.is-visible .h2 { transition-delay: 0.12s; }
  .sec-head.reveal.is-visible .sub { transition-delay: 0.18s; }
  #about .about-grid .reveal.is-visible .lead:nth-of-type(1) { transition-delay: 0.05s; }
  #about .about-grid .reveal.is-visible .lead:nth-of-type(2) { transition-delay: 0.11s; }
  #about .about-grid .reveal.is-visible .lead:nth-of-type(3) { transition-delay: 0.17s; }
  #about .about-strip.reveal.is-visible { transition-delay: 0.23s; }
  .service-list .reveal.is-visible .service-num { transition-delay: 0.02s; }
  .service-list .reveal.is-visible h3 { transition-delay: 0.07s; }
  .service-list .reveal.is-visible .service-row > div > p { transition-delay: 0.13s; }
  .timeline .reveal.is-visible .period { transition-delay: 0.02s; }
  .timeline .reveal.is-visible h3 { transition-delay: 0.07s; }
  .timeline .reveal.is-visible .place { transition-delay: 0.11s; }
  .timeline .reveal.is-visible .detail { transition-delay: 0.15s; }
  .toolkit .reveal.is-visible .panel-title { transition-delay: 0.05s; }
  .toolkit .reveal.is-visible .pills { transition-delay: 0.11s; }
  #contact .reveal.is-visible .sec-index { transition-delay: 0.02s; }
  #contact .reveal.is-visible .eyebrow { transition-delay: 0.06s; }
  #contact .reveal.is-visible .h2 { transition-delay: 0.11s; }
  #contact .reveal.is-visible .sub { transition-delay: 0.17s; }
  #contact .reveal.is-visible .btn { transition-delay: 0.23s; }
  #contact .reveal.is-visible .contact-strip { transition-delay: 0.29s; }
  #contact .reveal.is-visible .to-top { transition-delay: 0.34s; }

  /* ---- Easter eggs: restrained on phones ----
     Hide the 4 busiest (front companions + large underlays) so text
     breathes; keep 7 as faint between-section discoveries, pinned
     behind content and never competing. Concept preserved. */
  .egg-about-facts,
  .egg-services-list,
  .egg-skills-grid,
  .egg-contact-edge { display: none !important; }
  .egg { z-index: 0 !important; }
  .egg-about { width: 28px; top: 3.8rem; left: -10px; opacity: 0.12; transform: rotate(-6deg); }
  .egg-services { width: 22px; top: 4.9rem; right: 0.9rem; opacity: 0.14; transform: rotate(-7deg); }
  .egg-contact-hero { width: 68px; margin-left: -34px; top: 2.2rem; opacity: 0.07; transform: rotate(-4deg); }
  .egg-journey { width: 36px; left: -12px; opacity: 0.12; transform: rotate(-5deg); }
  .egg-journey-head { width: 20px; right: 0.9rem; top: 4.2rem; opacity: 0.13; transform: rotate(6deg); }
  .egg-skills-edge { width: 18px; left: 0.9rem; top: 4rem; opacity: 0.13; transform: rotate(-8deg); }
  .egg-footer { width: 22px; bottom: 0.9rem; right: 1rem; opacity: 0.14; transform: rotate(5deg); }
  #about:hover .egg-about, #services:hover .egg-services,
  #contact:hover .egg-contact-hero, #journey:hover .egg-journey,
  #journey:hover .egg-journey-head, #skills:hover .egg-skills-edge,
  .site-footer:hover .egg-footer { opacity: inherit; transform: none; }
}

/* ---- small phones (≤380px): tighter shell, same airy rhythm ---- */
@media (max-width: 380px) {
  .section { padding: 3.5rem 1rem; }
  .nav { padding-inline: 1rem; }
  .h2 { font-size: clamp(1.6rem, 8vw, 1.85rem); }
  .h2-xl { font-size: clamp(1.75rem, 9vw, 2.1rem); }
  .lead { font-size: 0.92rem; line-height: 1.72; }
  #about .about-grid .reveal .lead:first-of-type { font-size: 0.97rem; }
  .service-row { grid-template-columns: 28px 1fr; gap: 0.75rem; padding: 1.35rem 0.1rem; }
  .service-row h3 { font-size: 0.99rem; }
  .service-row p { font-size: 0.85rem; }
  .cap-ig, .cap-studio { font-size: 0.68rem; margin-left: 0.45rem; }
  .mark-card { padding: 1.9rem 1.1rem 1.7rem; }
  .mark-word { font-size: 1.7rem; }
  .mark-jack { margin-top: 1.2rem; }
  .mark-jack-mark { width: 112px; }
  .mark-orbit { width: min(160px, 56vw); height: min(160px, 56vw); }
  .btn-lg { padding: 0.85rem 1rem; font-size: 0.8rem; }
  .panel { padding: 1.2rem 1.05rem; }
}

/* ---- larger phones / small tablets (641–860px): gentle bridge ----
   Desktop composition stays, but headings never balloon. */
@media (min-width: 641px) and (max-width: 860px) {
  .h2 { font-size: clamp(1.9rem, 4.5vw, 2.4rem); line-height: 1.12; }
  .h2-xl { font-size: clamp(2.1rem, 5.5vw, 2.9rem); line-height: 1.1; }
  .lead { font-size: 1rem; line-height: 1.78; }
  .mark-jack-mark { width: min(160px, 34vw); }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT GLASS OVERLAY (About only — card content and copy untouched).
   Layered composition: About text rises above the Jack card with a
   barely-there optical veil (~2/10 glass). Only the text wrapper is
   repositioned; the card keeps its content, tilt, lighting, behavior.
   Stack: stardust < card < jack artwork < veil < text.
   ════════════════════════════════════════════════════════════════════ */
#about .about-grid > div:nth-child(1) { position: relative; z-index: 1; }
#about .about-grid > div:nth-child(2) {
  position: relative; z-index: 2; min-width: 0;
  background: linear-gradient(165deg, rgba(16, 16, 19, 0.28), rgba(10, 10, 12, 0.16));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
/* Readability halo: keeps glyphs crisp over the artwork underneath. */
#about .about-grid > div:nth-child(2) .lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.65);
}
/* Desktop: stronger overlap — text pulls left over the card's right edge. */
@media (min-width: 768px) {
  #about .about-grid > div:nth-child(2) { margin-left: -6rem; padding: 1.75rem 2rem; }
}
@media (min-width: 1100px) {
  #about .about-grid > div:nth-child(2) { margin-left: -9rem; }
}
/* Phones/tablets portrait: reduced overlap — sheet rises over card base. */
@media (max-width: 767px) {
  #about .about-grid { gap: 0; }
  #about .about-grid > div:nth-child(2) { margin-top: -4rem; padding: 1.4rem 1.2rem; }
}

/* ---- reduced motion: new mobile choreography goes still too ---- */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sec-head.reveal .sec-index, .sec-head.reveal .eyebrow, .sec-head.reveal .h2,
  .sec-head.reveal .sub, #about .about-grid .reveal .lead,
  #about .about-strip.reveal,
  .service-list .reveal .service-num,
  .service-list .reveal h3, .service-list .reveal .service-row > div > p,
  .timeline .reveal .period, .timeline .reveal h3, .timeline .reveal .place,
  .timeline .reveal .detail, .toolkit .reveal .panel-title, .toolkit .reveal .pills,
  #contact .reveal .sec-index, #contact .reveal .eyebrow, #contact .reveal .h2,
  #contact .reveal .sub, #contact .reveal .btn,
  #contact .reveal .contact-strip,
  #contact .reveal .to-top {
    opacity: 1; transform: none; transition: none; will-change: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER SINGLE-LINE ROWS — Row 1 (nav) and Row 3 (social) each stay
   on exactly one horizontal line from the smallest phone to desktop.
   No wrapping flex, no hidden or abbreviated items, no page overflow:
   narrow screens get tighter gaps, slimmer padding, smaller icons and
   slightly smaller type so the full row always fits. Rows 2, 4 and 5
   keep their existing wrappable behavior.
   ════════════════════════════════════════════════════════════════════ */
.site-footer .foot-nav {
  flex-wrap: nowrap;
  justify-content: center;
}
.site-footer .foot-nav a {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Row 3 is a plain <p> of icon links separated by "·" text runs: flex
   lays each link and each separator out as one exact-gap row item. */
.site-footer .foot-base:has(.soc-icon) {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}
.site-footer .foot-base:has(.soc-icon) a {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .site-footer { padding-inline: 1rem; }
  .site-footer .foot-nav { column-gap: 0.8rem; }
  .site-footer .foot-nav a { letter-spacing: 0.1em; padding: 0.65rem 0.2rem; }
  .site-footer .foot-base:has(.soc-icon) { gap: 0.28rem; font-size: 0.62rem; letter-spacing: 0.02em; }
  .site-footer .foot-base:has(.soc-icon) a { gap: 0.18rem; padding: 0.45rem 0; }
  .site-footer .foot-base:has(.soc-icon) .soc-icon { width: 9px; height: 9px; }
}

@media (max-width: 380px) {
  .site-footer { padding-inline: 0.6rem; }
  .site-footer .foot-nav { column-gap: 0.65rem; }
  .site-footer .foot-nav a { letter-spacing: 0.08em; padding: 0.65rem 0.1rem; }
  .site-footer .foot-base:has(.soc-icon) { gap: 0.2rem; font-size: 0.58rem; letter-spacing: 0; }
  .site-footer .foot-base:has(.soc-icon) a { gap: 0.12rem; padding: 0.45rem 0; }
  .site-footer .foot-base:has(.soc-icon) .soc-icon { width: 8px; height: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   STUDIO CONTACT TWO-LINE LOCKUP — always exactly two lines in one
   connected block: label line, then the site + Gmail links on one
   nowrap line. Type scales fluidly below 400px so line 2 never wraps
   into a third line, without going excessively small.
   ════════════════════════════════════════════════════════════════════ */
.contact .studio-contact { font-size: clamp(0.72rem, 3.6vw, 0.9rem); }
.contact .studio-contact-line { display: block; }
.contact .studio-contact-links {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
}