/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:        #0A0A0A;
  --bg-2:      #111111;
  --surface:   #161616;
  --surface-2: #1C1C1C;
  --line:      rgba(242, 238, 232, 0.10);
  --line-md:   rgba(242, 238, 232, 0.20);
  --line-lg:   rgba(242, 238, 232, 0.36);
  --fg:        #F2EEE8;
  --muted:     rgba(242, 238, 232, 0.62);
  --faint:     rgba(242, 238, 232, 0.32);
  --red:       #E63946;
  --red-dim:   rgba(230, 57, 70, 0.14);
  --on-red:    #FFFFFF;
}
[data-theme="light"] {
  --bg:        #F4F1EB;
  --bg-2:      #ECE7DF;
  --surface:   #FFFFFF;
  --surface-2: #ECE7DF;
  --line:      rgba(17,17,17,0.10);
  --line-md:   rgba(17,17,17,0.20);
  --line-lg:   rgba(17,17,17,0.36);
  --fg:        #111111;
  --muted:     rgba(17,17,17,0.60);
  --faint:     rgba(17,17,17,0.32);
  --red:       #D0341C;
  --red-dim:   rgba(208,52,28,0.10);
  --on-red:    #FFFFFF;
}

:root {
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 140px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--red); color: #fff; }

/* Red accent letters - inline color only */
.rd {
  color: #E63946;
}
.rd::before,
.rd::after {
  display: none !important;
}
.rd-hero { display: none !important; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); }

/* Background animations */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes floatIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(208, 52, 28, 0.1); }
  50% { box-shadow: 0 0 40px rgba(208, 52, 28, 0.2); }
}

@keyframes labDepthDrift {
  0%, 100% {
    transform: translate3d(-1.4%, -0.6%, 0) rotate(-0.35deg) scale(1.02);
    background-position: 0 0, 52% 44%, 0 0;
  }
  50% {
    transform: translate3d(1.2%, 0.8%, 0) rotate(0.35deg) scale(1.04);
    background-position: 34px 22px, 48% 56%, 0 0;
  }
}

@keyframes labPlaneShift {
  0%, 100% {
    transform: perspective(900px) rotateX(58deg) translate3d(-2%, 1%, 0);
    background-position: 0 0;
  }
  50% {
    transform: perspective(900px) rotateX(58deg) translate3d(2%, -1%, 0);
    background-position: 30px 18px;
  }
}

/* Hero title stage animations */
@keyframes ioxPop {
  from {
    opacity: 0;
    transform: translateY(0.18em) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes restReveal {
  from {
    opacity: 0;
    transform: translateY(0.12em);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Subtle noise overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: var(--section-y) 0; }

.dash {
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--red);
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
}
.section-title em { font-style: normal; color: var(--red); }

/* ─────────────────────────────────────────
   RED DOT (full stop)
   Sized to ~16% of cap height, sits on baseline
   like a real period. Uses inline-flex on parent
   for clean alignment regardless of font-size.
───────────────────────────────────────── */
.rd {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  background: var(--red);
  border-radius: 50%;
  /* vertical alignment: sits where a period sits — at baseline */
  vertical-align: 0.06em;
  /* horizontal spacing: like a period after a word */
  margin-left: 0.06em;
  /* keeps it from breaking onto its own line */
  white-space: nowrap;
}

/* When inside a heading, scale slightly differently for visual weight */
.section-title .rd,
.hero-headline .rd,
.contact-title .rd,
.about-statement .rd,
.process-statement .rd {
  width: 0.14em;
  height: 0.14em;
  vertical-align: 0.08em;
  margin-left: 0.05em;
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; height: 76px;
  display: flex; align-items: center;
  transition: background 0.4s, height 0.3s, border-color 0.4s;
}
#navbar.scrolled {
  height: 60px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  width: 100%; max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.nav-logo svg {
  height: 28px; width: auto;
  color: var(--fg);
  transition: color 0.3s;
}
.nav-logo .lf { fill: currentColor; }
.nav-logo .ld { fill: var(--red); }

.nav-menu {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.nav-menu a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-menu a::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.nav-menu a:hover { color: var(--fg); }
.nav-menu a:hover::before { opacity: 1; transform: scale(1); }

.nav-tail {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Nav social icons */
.nav-socials {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}
.nav-socials a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color 0.25s, transform 0.3s var(--ease);
  border-radius: 0;
}
.nav-socials a svg { width: 16px; height: 16px; }
.nav-socials a:hover { color: var(--red); transform: translateY(-2px); }

/* Hide socials on small screens, show only on desktop */
@media (max-width: 1100px) { .nav-socials { display: none; } }

.theme-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  background: none;
  border: none;
  transition: color 0.3s, transform 0.4s var(--ease);
}
.theme-toggle:hover { color: var(--fg); transform: rotate(22deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: block; }

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  background: var(--fg);
  color: var(--bg);
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
  z-index: 0;
}
.nav-cta:hover { color: var(--on-red); }
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta > * { position: relative; z-index: 1; }
.nav-cta-arrow {
  width: 12px; height: 12px;
  transition: transform 0.4s var(--ease);
}
.nav-cta:hover .nav-cta-arrow { transform: translate(3px, -3px); }

.hamburger {
  display: none;
  width: 38px; height: 38px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* Mobile menu */
#mobile-menu {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--bg);
  display: none;
  padding: 100px var(--gutter) 32px;
  flex-direction: column;
}
#mobile-menu.open { display: flex; }
.mobile-menu-nav {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.mobile-menu-nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transition: color 0.3s, padding-left 0.3s;
}
.mobile-menu-nav a:hover { color: var(--red); padding-left: 12px; }
.mobile-menu-nav .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.mobile-foot {
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-foot a { color: var(--fg); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero {
  min-height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 100px var(--gutter) clamp(80px, 8vw, 120px);
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
/* Hero photo */
.hero-bg-img {
  position: absolute; inset: 0; z-index: 0;
  background: url('../images/hero.jpg') center / cover no-repeat;
  background-color: #111;
  filter: brightness(0.3) saturate(0.7);
}
/* Dark gradient over photo */
.hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(10,10,10,0.72) 0%,
    rgba(10,10,10,0.45) 50%,
    rgba(10,10,10,0.82) 100%
  );
}

.hero::before {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(rgba(242,238,232,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,238,232,0.07) 1px, transparent 1px),
    conic-gradient(from 230deg at 35% 24%, transparent 0deg, rgba(242,238,232,0.12) 38deg, transparent 74deg),
    linear-gradient(118deg, transparent 28%, rgba(230,57,70,0.16) 42%, transparent 57%);
  background-size: 86px 86px, 86px 86px, 100% 100%, 100% 100%;
  mask-image: linear-gradient(135deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
  animation: labDepthDrift 28s var(--ease) infinite;
}




/* Hero content sits above bg-img and bg-overlay divs */
.hero > * { position: relative; z-index: 2; }

/* Clean hero title — no decorative effects */
.hero-title {
  color: #ffffff;
  background: none !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 170px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.055em;
  margin: 0;
}

.hero-title::before,
.hero-title::after,
.hero-title span::before,
.hero-title span::after {
  content: none !important;
  display: none !important;
}

.hero-title br {
  display: none;
}

/* Hero title animation structure */
.hero-title-animated .hero-word {
  display: block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.hero-title-animated .iox-letter {
  display: inline-block;
  color: #e6392e;
  opacity: 0;
  transform: translateY(0.18em) scale(0.96);
  animation: ioxPop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-title-animated .rest {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.12em);
  filter: blur(8px);
  animation: restReveal 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* IOX letter delays */
.hero-title-animated .word-input .iox-letter { animation-delay: 0.05s; }
.hero-title-animated .word-output .iox-letter { animation-delay: 0.15s; }
.hero-title-animated .word-experiment .iox-letter { animation-delay: 0.25s; }

/* Rest letter delays */
.hero-title-animated .rest-input { animation-delay: 0.45s; }
.hero-title-animated .rest-output { animation-delay: 0.65s; }
.hero-title-animated .rest-before-x,
.hero-title-animated .rest-after-x { animation-delay: 0.85s; }

/* Floating side strips */
.hero-side {
  position: absolute;
  top: 100px;
  bottom: 32px;
  width: 1px;
  background: var(--line);
}
.hero-side.left { left: var(--gutter); }
.hero-side.right { right: var(--gutter); }

/* Tick marks on side strips */
.hero-side::before, .hero-side::after {
  content: '';
  position: absolute;
  width: 8px; height: 1px;
  background: var(--red);
}
.hero-side.left::before { top: 0; left: 0; }
.hero-side.left::after { bottom: 0; left: 0; }
.hero-side.right::before { top: 0; right: 0; }
.hero-side.right::after { bottom: 0; right: 0; }

@media (max-width: 768px) {
  .hero-side { display: none; }
}

/* Top metadata strip */
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: clamp(40px, 8vh, 80px);
}
.hero-meta-l, .hero-meta-r {
  display: flex; align-items: center; gap: 8px;
}
@media (max-width: 600px) { .hero-meta-r { display: none; } }

/* Bottom row */
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease) 0.7s forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

.hero-eyebrow {
  display: flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}

.hero-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 480px;
}

.hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero-bottom { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); }
  .hero-actions { width: 100%; flex-direction: column; gap: 12px; }
  .hero-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .hero-bottom { padding-top: clamp(24px, 4vw, 32px); }
  .hero-desc { font-size: 15px; line-height: 1.6; }
}

/* ─────────────────────────────────────────
   BUTTONS — magnetic style
───────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 28px;
  min-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.3s;
}
@media (max-width: 768px) {
  .btn { padding: 14px 24px; font-size: 11px; }
}
.btn svg {
  width: 14px; height: 14px;
  transition: transform 0.4s var(--ease);
  position: relative;
  z-index: 1;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--ease), height 0.6s var(--ease);
  z-index: 0;
}
.btn-solid {
  background: var(--fg);
  color: var(--bg);
}
.btn-solid::before { background: var(--red); }
.btn-solid:hover { color: var(--on-red); }
.btn-solid:hover::before { width: 360px; height: 360px; }
.btn-solid:hover svg { transform: translateX(4px); }

.btn-outline {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-md);
}
.btn-outline::before { background: var(--fg); }
.btn-outline:hover { color: var(--bg); border-color: var(--fg); }
.btn-outline:hover::before { width: 360px; height: 360px; }

/* ─────────────────────────────────────────
   RIBBON
───────────────────────────────────────── */
.ribbon {
  background: var(--surface);
  color: var(--fg);
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ribbon-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 0 32px;
  flex-shrink: 0;
}
.ribbon-track .bullet {
  font-size: 8px;
  color: var(--red);
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────
   INTRO STATEMENT — scroll word reveal
───────────────────────────────────────── */
.intro {
  padding: clamp(96px, 14vw, 180px) 0;
  background: var(--bg);
}
.intro-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--muted);
  max-width: 1200px;
  margin-top: 32px;
}
.intro-statement em {
  font-style: normal;
  color: var(--fg);
  font-weight: 800;
  transition: color 0.6s var(--ease);
}
.intro-statement em.lit { color: var(--red); }

.intro-statement .word {
  display: inline-block;
  opacity: 0.25;
  transition: opacity 0.6s var(--ease);
}
.intro-statement .word.lit {
  opacity: 1;
  color: var(--fg);
}

/* ─────────────────────────────────────────
   WORK
───────────────────────────────────────── */
.work-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-counter strong {
  color: var(--fg);
  font-weight: 500;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.work-item { grid-column: span 3; position: relative; }
.work-item.large { grid-column: span 6; }
.work-item.third { grid-column: span 2; }

@media (max-width: 1024px) {
  .work-item.third { grid-column: span 3; }
}
@media (max-width: 768px) {
  .work-grid { gap: 16px; }
  .work-item, .work-item.large, .work-item.third { grid-column: span 6; }
}

.work-link { display: block; position: relative; }

.work-thumb {
  position: relative;
  aspect-ratio: 16/9;
  /* background-image comes from inline style — DO NOT override here */
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--surface-2);
  overflow: hidden;
  filter: brightness(0.9) saturate(0.9);
  transition: filter 0.5s;
}
.work-large .work-thumb { aspect-ratio: 16/8; }
.work-third .work-thumb { aspect-ratio: 4/3; }
@media (max-width: 768px) {
  .work-large .work-thumb { aspect-ratio: 16/9; }
  .work-third .work-thumb { aspect-ratio: 16/9; }
}
/* NO ::before dot pattern — we have real photos */
.work-thumb::before { display: none !important; content: none !important; }
/* Dark scrim on hover */
.work-thumb::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: rgba(8,8,8,0.54);
  opacity: 0;
  transition: opacity 0.4s;
}
.work-link:hover .work-thumb::after { opacity: 1; }
.work-link:hover .work-thumb { filter: brightness(0.75) saturate(1.1); }

.work-thumb-tag {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 3;
}

/* Animated arrow */
.work-thumb-arrow {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transform: scale(0.7) rotate(-45deg);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s, background 0.3s;
}
.work-link:hover .work-thumb-arrow {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  background: var(--red);
}
.work-thumb-arrow svg { width: 14px; height: 14px; color: var(--fg); }
.work-link:hover .work-thumb-arrow svg { color: var(--on-red); }

.work-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding: 18px 4px 0;
}
.work-foot-l { display: flex; flex-direction: column; gap: 6px; }
.work-no {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
  transition: color 0.3s;
}


.work-link:hover .work-name { color: var(--red); }
.work-year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
.services {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.services::before,
.studio-photos::before,
.about::before,
.contact::before {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -18%;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(242,238,232,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,238,232,0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  transform-origin: center bottom;
  animation: labPlaneShift 32s var(--ease) infinite;
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.68) 46%, transparent 100%);
}
.services > .container,
.studio-photos > .container,
.studio-photos > .sp-carousel-wrap,
.about > .container,
.contact > .container,
.contact > .contact-marquee {
  position: relative;
  z-index: 1;
}
.services-head {
  margin-bottom: clamp(48px, 7vw, 96px);
  max-width: 1300px;
}
.services-title {
  margin-top: 24px;
  margin-bottom: 28px;
}
.services-intro-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 540px;
}

.services-proof-strip {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1fr;
  gap: 4px;
  margin-top: clamp(32px, 5vw, 64px);
  max-width: min(980px, 100%);
}
.service-proof {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
}
.service-proof-tall {
  aspect-ratio: 3 / 4;
  grid-row: span 2;
}
.service-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.86) saturate(0.92);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.service-proof::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8,8,8,0.38) 100%);
}
.service-proof:hover img {
  transform: scale(1.035);
  filter: brightness(0.96) saturate(1);
}

.services-list {
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1.4fr 1fr;
  align-items: baseline;
  gap: clamp(20px, 3.5vw, 48px);
  padding: clamp(28px, 3.8vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding 0.5s var(--ease);
}
.service-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 0;
}
.service-row > * { position: relative; z-index: 1; }
.service-row:hover::before { transform: scaleX(1); }
.service-row:hover { padding-left: 28px; padding-right: 28px; }

.service-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--muted);
  transition: color 0.4s;
}
.service-row:hover .service-num { color: var(--red); }

.service-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 0.4s, transform 0.5s var(--ease);
}
.service-row:hover .service-name {
  color: var(--red);
  transform: translateX(4px);
}

.service-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 460px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: end;
  align-self: center;
}
.service-tags span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line-md);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color 0.3s, color 0.3s;
}
.service-row:hover .service-tags span {
  border-color: var(--red);
  color: var(--fg);
}

@media (max-width: 1100px) {
  .service-row { grid-template-columns: 50px 1.2fr 1.6fr; }
  .service-tags { display: none; }
}
@media (max-width: 700px) {
  .service-row {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 12px 16px;
    padding: clamp(24px, 5vw, 40px) 0;
  }
  .service-name { grid-column: 2; font-size: clamp(20px, 5vw, 40px); }
  .service-desc { grid-column: 1 / -1; font-size: 15px; }
  .service-row:hover { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 480px) {
  .service-row { padding: 20px 0; gap: 12px 14px; }
  .service-num { font-size: 12px; }
}

/* ─────────────────────────────────────────
   PROCESS / CAPABILITIES
───────────────────────────────────────── */
.process {
  background: var(--surface);
}
.process-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 80px);
}
@media (max-width: 900px) { .process-head { grid-template-columns: 1fr; gap: 24px; } }

.process-l > .eyebrow { display: block; margin-bottom: 24px; }
.process-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
}
.process-statement em { font-style: normal; color: var(--red); }

.process-r {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  padding-bottom: 8px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--line);
}
@media (max-width: 800px) { .process-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .process-letter { font-size: clamp(56px, 18vw, 100px); }
}

.process-card {
  background: var(--bg);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
}
.process-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.process-card:hover { background: var(--surface-2); }
.process-card:hover::after { transform: scaleX(1); }

.process-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.process-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 9vw, 144px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--red);
  transition: transform 0.5s var(--ease);
}
.process-card:hover .process-letter {
  transform: translateY(-4px);
}
.process-no {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.process-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.process-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* ─────────────────────────────────────────
   ABOUT
───────────────────────────────────────── */
.about {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.about-grid {
  display: grid;
  grid-template-columns: 4fr 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } }

.about-l > .eyebrow { display: block; margin-bottom: 24px; }
.about-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--fg);
}
.about-statement em { font-style: normal; color: var(--red); }

.about-r { padding-top: 8px; }
.about-body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 24px;
  max-width: 560px;
}
.about-body strong { color: var(--fg); font-weight: 600; }

.about-img-col { }
.about-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.about-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.92) saturate(0.95);
  transition: transform 0.6s var(--ease), filter 0.5s;
}
.about-img-wrap:hover .about-photo {
  transform: scale(1.03);
  filter: brightness(1) saturate(1);
}

@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-img-col { display: none; }
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

.about-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.about-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.about-meta-item:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
.about-meta-item:nth-child(even) { padding-left: 24px; }
@media (max-width: 600px) {
  .about-meta { grid-template-columns: 1fr; }
  .about-meta-item:nth-child(odd) { border-right: none; padding-right: 0; }
  .about-meta-item:nth-child(even) { padding-left: 0; }
}
.about-statement .rd {
  display: none !important;
}

.about-meta-item {
  align-items: start;
}

.about-meta-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 90px;
}
.about-meta-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--fg);
  text-align: right;
  line-height: 1.35;
}

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
.contact {
  background: var(--bg);
  padding-top: 0;
}

.contact-marquee {
  background: var(--red);
  color: var(--on-red);
  overflow: hidden;
  padding: 28px 0;
  margin-bottom: var(--section-y);
}
.contact-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.contact-marquee-track span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  padding: 0 32px;
  flex-shrink: 0;
}
.contact-marquee-track i {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
  padding: 0 8px;
  opacity: 0.7;
}

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }

.contact-l > .eyebrow { display: block; margin-bottom: 24px; }
.contact-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 7.5vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 24px 0;
}
.contact-title em { font-style: normal; color: var(--red); }
.contact-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 380px;
  margin-bottom: 48px;
}

.contact-list {
  border-top: 1px solid var(--line);
  margin-bottom: 48px;
}
.contact-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.contact-row:hover { padding-left: 16px; }
.contact-row-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-row-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.3s;
}
.contact-row-arrow {
  font-size: 16px;
  color: var(--muted);
  transition: color 0.3s, transform 0.4s var(--ease);
}
.contact-row:hover .contact-row-val { color: var(--red); }
.contact-row:hover .contact-row-arrow { color: var(--red); transform: translate(4px, -4px); }

@media (max-width: 600px) {
  .contact-row { grid-template-columns: 1fr auto; padding: 16px 0; }
  .contact-row-key { grid-column: span 2; margin-bottom: -4px; font-size: 10px; }
  .contact-row-val { font-size: 14px; }
}
@media (max-width: 480px) {
  .contact-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .contact-row-key { margin-bottom: 4px; }
  .contact-row-arrow { justify-self: start; }
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
}
.contact-socials-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-socials a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
  position: relative;
  transition: color 0.3s;
}
.contact-socials a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--red);
  transition: width 0.4s var(--ease);
}
.contact-socials a:hover { color: var(--red); }
.contact-socials a:hover::after { width: 100%; }

/* Contact form */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-eyebrow {
  display: flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.form-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .form-row.two { grid-template-columns: 1fr; } }

.form-field {
  display: flex; flex-direction: column; gap: 8px;
}
.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field input, .form-field select, .form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-md);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.3s;
  min-height: 40px;
}
@media (max-width: 600px) {
  .form-field input, .form-field select, .form-field textarea { padding: 16px 0; font-size: 16px; }
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-bottom-color: var(--red);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--faint); }
.form-field select { color: var(--muted); }
.form-field select.has-value { color: var(--fg); }
.form-field select option { background: var(--bg); color: var(--fg); }
.form-field textarea { resize: none; min-height: 100px; }

.form-submit { align-self: flex-start; margin-top: 8px; }
.form-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}
.form-note.error { color: var(--red); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.footer-massive {
  text-align: center;
  padding: clamp(48px, 7vw, 80px) 0 0;
  pointer-events: none;
  user-select: none;
}
.footer-massive span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(72px, 22vw, 320px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-lg);
  white-space: nowrap;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0 24px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.footer-loc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom-links {
  display: flex;
  gap: 16px;
}
.footer-bottom-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  transition: color 0.25s;
}
.footer-bottom-links a:hover { color: var(--red); }

/* ─────────────────────────────────────────
   REVEAL
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

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

  .hero-title-animated .iox-letter,
  .hero-title-animated .rest {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}
/* ─────────────────────────────────────────
   STATS BAR
───────────────────────────────────────── */
.stats-bar {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
}
.stats-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 24px;
  position: relative;
  transition: background 0.3s;
}
.stat-item:hover { background: var(--surface-2); }
.stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-div {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 16px 0;
}
@media (max-width: 600px) {
  .stats-inner { flex-wrap: wrap; }
  .stat-item { flex: 1 1 50%; padding: 28px 16px; }
  .stat-div { display: none; }
  .stat-num { font-size: clamp(28px, 6vw, 40px); }
  .stat-label { font-size: 10px; }
}

/* ─────────────────────────────────────────
   WORK THUMB — proper photo display
───────────────────────────────────────── */
.work-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--surface-2) !important;
  transition: filter 0.5s;
  filter: brightness(0.9) saturate(0.95);
}
.work-link:hover .work-thumb {
  filter: brightness(0.65) saturate(1);
}

.work-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 56px; height: 56px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.4s var(--ease);
  z-index: 4;
  pointer-events: none;
}
.work-play-btn svg { width: 100%; height: 100%; }
.work-link:hover .work-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ═══════════════════════════
   INQUIRY COUNTER
═══════════════════════════ */
.inquiry-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.inquiry-count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--red);
}
.inquiry-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}



/* ═══════════════════════════════════════
   WORK SECTION — clean vertical layout
═══════════════════════════════════════ */
.work {
  background: var(--surface);
  padding: var(--section-y) 0;
}

/* Header */
.work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 48px);
  flex-wrap: wrap;
}
.work-header-l .eyebrow { display: block; margin-bottom: 12px; }
.work-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
}
.work-yt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color 0.3s;
  flex-shrink: 0;
}
.work-yt-link svg { width: 16px; height: 12px; }
.work-yt-link .arrow-icon { width: 13px; height: 13px; transition: transform 0.4s var(--ease); }
.work-yt-link:hover { color: var(--red); }
.work-yt-link:hover .arrow-icon { transform: translateX(4px); }

/* Grid */
.work-grid-v {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
@media (max-width: 640px) {
  .wv-row { grid-template-columns: 1fr; }
}

/* Items */
.wv-item { position: relative; }
.wv-link {
  display: block;
  text-decoration: none;
  position: relative;
}
.wv-photo { cursor: default; }

/* Images */
.wv-img {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  overflow: hidden;
  filter: brightness(0.85);
  transition: filter 0.5s;
}
.wv-full .wv-img { aspect-ratio: 16/7; }
.wv-half .wv-img { aspect-ratio: 4/3; }
.wv-row .wv-half:first-child .wv-img { background-position: center 42%; }
.wv-row .wv-half:last-child .wv-img { background-position: center 45%; }
@media (max-width: 640px) {
  .wv-full .wv-img { aspect-ratio: 16/10; }
  .wv-half .wv-img { aspect-ratio: 4/3; }
}

/* Hover states */
a.wv-link:hover .wv-img { filter: brightness(0.6); }

/* Play overlay — YouTube cards only */
.wv-overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}
a.wv-link:hover .wv-overlay { opacity: 1; }
.wv-play {
  width: 64px; height: 64px;
  transform: scale(0.75);
  transition: transform 0.4s var(--ease);
}
.wv-play svg { width: 100%; height: 100%; }
a.wv-link:hover .wv-play { transform: scale(1); }

/* Meta bar — sits at bottom of image */
.wv-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 100%);
  z-index: 3;
}
.wv-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  padding-bottom: 2px;
}
.wv-cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.wv-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.wv-cta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  padding-bottom: 2px;
  transition: color 0.3s;
}
a.wv-link:hover .wv-cta { color: #fff; }

/* YouTube badge */
.wv-badge {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(8,8,8,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  z-index: 4;
}
.wv-badge svg { width: 14px; height: 10px; flex-shrink: 0; }

.sp-item:hover .sp-img {
  filter: brightness(1) saturate(1);
  transform: scale(1.02);
}

/* Label inside photo */
.sp-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 16px 14px;
  background: linear-gradient(to top, rgba(8,8,8,0.75) 0%, transparent 100%);
  z-index: 2;
}
.sp-room {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* ═══════════════════════════
   SMOOTH EVERYTHING
═══════════════════════════ */
html {
  scroll-behavior: smooth;
}
/* Smooth theme transition — only on color properties */
body, body * {
  transition-property: background-color, color, border-color;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}
/* But don't override animation/transform transitions */
a, button, .btn, .nav-cta, .service-row, .sp-img,
.wv-img, .wv-overlay, .wv-play, .work-card-img,
.theme-toggle, .nav-menu a, .contact-row,
.contact-socials a, .process-card, .process-letter {
  transition-property: background-color, color, border-color,
    transform, opacity, filter, box-shadow;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════
   FADE IN ON SCROLL
═══════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
.fade-up:nth-child(5) { transition-delay: 0.32s; }

/* ═══════════════════════════
   HERO CONTRAST FIX
   White text regardless of theme
═══════════════════════════ */
.hero-desc { color: rgba(242,238,232,0.72) !important; }
.hero-meta { color: rgba(242,238,232,0.5) !important; }
.hero-eyebrow { color: var(--red) !important; }
.hero-side { background: rgba(242,238,232,0.12) !important; }
/* Stronger hero overlay in light mode */
[data-theme="light"] .hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(10,10,10,0.72) 0%,
    rgba(10,10,10,0.45) 50%,
    rgba(10,10,10,0.82) 100%
  );
}
[data-theme="light"] .hero-bg-img {
  position: absolute; inset: 0; z-index: 0;
  background: url('../images/hero.jpg') center / cover no-repeat;
  background-color: #111;
  filter: brightness(0.3) saturate(0.7);
}

/* ═══════════════════════════
   STUDIO PHOTOS — full width grid fix
═══════════════════════════ */

.sp-wide { grid-column: span 2 !important; }
.sp-item:last-child { grid-column: span 3 !important; }
.sp-item:last-child .sp-img { aspect-ratio: 21/7 !important; }

@media (max-width: 900px) {
  
  .sp-wide { grid-column: span 2 !important; }
  .sp-item:last-child { grid-column: span 2 !important; }
  .sp-item:last-child .sp-img { aspect-ratio: 16/9 !important; }
}
@media (max-width: 580px) {
  
  .sp-wide, .sp-item:last-child { grid-column: span 1 !important; }
  .sp-item:last-child .sp-img { aspect-ratio: 4/3 !important; }
}

/* ═══════════════════════════════════════
   TEXT POP ANIMATIONS
   Clean, intentional, not overdone
═══════════════════════════════════════ */

/* Clip reveal — text slides up from below */
.clip-reveal {
  overflow: hidden;
  display: block;
}
.clip-reveal > span {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease;
}
.clip-reveal.visible > span {
  transform: translateY(0);
  opacity: 1;
}
.clip-reveal:nth-child(2) > span { transition-delay: 0.1s; }
.clip-reveal:nth-child(3) > span { transition-delay: 0.2s; }

/* Number counter pop */
.stat-num {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease,
              color 0.35s ease !important;
}
.stat-item.fade-up .stat-num {
  transform: translateY(20px);
  opacity: 0;
}
.stat-item.fade-up.visible .stat-num {
  transform: none;
  opacity: 1;
}
.stat-item.fade-up.visible:nth-child(1) .stat-num { transition-delay: 0s; }
.stat-item.fade-up.visible:nth-child(3) .stat-num { transition-delay: 0.1s; }
.stat-item.fade-up.visible:nth-child(5) .stat-num { transition-delay: 0.2s; }
.stat-item.fade-up.visible:nth-child(7) .stat-num { transition-delay: 0.3s; }

/* Service row — name slides right on reveal */
.service-row.fade-up {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.65s ease,
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.service-row.fade-up.visible {
  opacity: 1;
  transform: none;
}
.service-row.fade-up:nth-child(1) { transition-delay: 0s; }
.service-row.fade-up:nth-child(2) { transition-delay: 0.06s; }
.service-row.fade-up:nth-child(3) { transition-delay: 0.12s; }
.service-row.fade-up:nth-child(4) { transition-delay: 0.18s; }
.service-row.fade-up:nth-child(5) { transition-delay: 0.24s; }
.service-row.fade-up:nth-child(6) { transition-delay: 0.30s; }
.service-row.fade-up:nth-child(7) { transition-delay: 0.36s; }

/* Process cards — scale up */
.process-card.fade-up {
  opacity: 0;
  transform: scale(0.96) translateY(20px);
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.process-card.fade-up.visible {
  opacity: 1;
  transform: none;
}
.process-card.fade-up:nth-child(1) { transition-delay: 0s; }
.process-card.fade-up:nth-child(2) { transition-delay: 0.1s; }
.process-card.fade-up:nth-child(3) { transition-delay: 0.2s; }

/* Studio photos — staggered fade */
.sp-item.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sp-item.fade-up.visible {
  opacity: 1;
  transform: none;
}
.sp-item.fade-up:nth-child(1) { transition-delay: 0s; }
.sp-item.fade-up:nth-child(2) { transition-delay: 0.08s; }
.sp-item.fade-up:nth-child(3) { transition-delay: 0.16s; }
.sp-item.fade-up:nth-child(4) { transition-delay: 0.24s; }
.sp-item.fade-up:nth-child(5) { transition-delay: 0.32s; }

/* Section eyebrow — subtle slide in */
.eyebrow {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s ease 0.1s,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              color 0.35s ease !important;
}
.reveal.visible .eyebrow,
.work-header.reveal.visible .eyebrow,
.sp-head.reveal.visible .eyebrow,
.services-head.reveal.visible .eyebrow,
.process-head.reveal.visible .eyebrow,
.about-l.reveal.visible .eyebrow,
.contact-l.reveal.visible .eyebrow {
  opacity: 1;
  transform: none;
}
.intro .eyebrow { opacity: 1; transform: none; }

/* Section titles — bold pop */
.section-title, .work-title, .sp-title,
.about-statement, .contact-title, .process-statement {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
              color 0.35s ease !important;
}
.reveal.visible .section-title,
.reveal.visible .work-title,
.sp-head.reveal.visible .sp-title,
.services-head.reveal.visible .section-title,
.process-head.reveal.visible .process-statement,
.about-l.reveal.visible .about-statement,
.contact-l.reveal.visible .contact-title {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════
   NAV — always readable over hero
═══════════════════════════════════════ */
#navbar {
  /* Force readable on hero */
}
/* When not scrolled, nav sits over hero image — force light text */
#navbar:not(.scrolled) .nav-logo .lf { fill: #F2EEE8; }
#navbar:not(.scrolled) .nav-menu a { color: rgba(242,238,232,0.7); }
#navbar:not(.scrolled) .nav-menu a:hover { color: #F2EEE8; }
#navbar:not(.scrolled) .nav-cta {
  background: rgba(242,238,232,0.95);
  color: #0A0A0A;
}
#navbar:not(.scrolled) .theme-toggle { color: rgba(242,238,232,0.7); }
#navbar:not(.scrolled) .nav-socials a { color: rgba(242,238,232,0.6); }
#navbar:not(.scrolled) .hamburger span { background: #F2EEE8; }

/* When scrolled — use theme colors normally */
#navbar.scrolled .nav-logo .lf { fill: var(--fg); }
#navbar.scrolled .nav-menu a { color: var(--muted); }
#navbar.scrolled .nav-cta { background: var(--fg); color: var(--bg); }
#navbar.scrolled .theme-toggle { color: var(--muted); }
#navbar.scrolled .nav-socials a { color: var(--muted); }
#navbar.scrolled .hamburger span { background: var(--fg); }

/* Hero gradient — fix the light mode bleed */
[data-theme="light"] .hero-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.65) 0%,
    rgba(10,10,10,0.55) 55%,
    rgba(244,241,235,0.9) 100%
  ) !important;
}
[data-theme="dark"] .hero-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.55) 0%,
    rgba(10,10,10,0.4) 55%,
    rgba(10,10,10,0.92) 100%
  ) !important;
}

/* ═══════════════════════════════════════
   GOOGLE MAP — contact section
═══════════════════════════════════════ */
.contact-map {
  margin: 32px 0 40px;
  position: relative;
}
.map-wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line);
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: grayscale(1) contrast(1.1) brightness(0.85);
  transition: filter 0.5s ease;
}
[data-theme="light"] .map-wrap iframe {
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}
.map-wrap:hover iframe {
  filter: grayscale(0.3) contrast(1) brightness(0.9);
}

/* Overlay with info + CTA */
.map-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  z-index: 2;
  transition: background 0.35s ease;
}
.map-wrap:hover .map-overlay {
  background: color-mix(in srgb, var(--bg) 95%, transparent);
}

.map-pin svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.map-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.map-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.map-addr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  flex-shrink: 0;
  transition: letter-spacing 0.3s ease;
}
.map-wrap:hover .map-cta { letter-spacing: 0.22em; }

@media (max-width: 600px) {
  .map-wrap { height: 200px; }
}
@media (max-width: 480px) {
  .map-wrap { height: 180px; }
}

/* Work section subtitle */
.work-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin-top: 12px;
}






/* Room 1 — full width */
.sp-full-wrap {
  width: 100%;
  margin-top: 4px;
}
.sp-img-full {
  width: 100%;
  aspect-ratio: 16/7;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  position: relative;
  overflow: hidden;
  filter: brightness(0.82);
  transition: filter 0.5s ease;
}
.sp-img-full:hover { filter: brightness(1); }

/* Rooms 2+3 — side by side */
.sp-half-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}
.sp-img-half {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  position: relative;
  overflow: hidden;
  filter: brightness(0.82);
  transition: filter 0.5s ease;
}
.sp-img-half:hover { filter: brightness(1); }

/* Room tag — bottom left */
.sp-room-tag {
  position: absolute;
  bottom: 16px; left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.sp-room-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
}
.sp-room-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* Bottom gradient on room photos */
.sp-img-full::after,
.sp-img-half::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.65) 0%, transparent 50%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .sp-img-full { aspect-ratio: 16/9; }
  .sp-half-wrap { grid-template-columns: 1fr; }
  .sp-img-half { aspect-ratio: 4/3; }
}

/* ═══════════════════════════════════════
   WORK PHOTOS — clean unlabelled grid
═══════════════════════════════════════ */
.work-photos {
  background: var(--bg);
  padding: var(--section-y) 0 0;
}
.wp-head {
  padding-bottom: clamp(20px, 3vw, 32px);
}
.wp-head .eyebrow { display: block; }

/* 4-photo masonry-feel grid */
.wp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.wp-item {
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  aspect-ratio: 4/3;
  filter: brightness(0.82) saturate(0.9);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
/* First item spans full width — visual anchor */
.wp-item:first-child {
  grid-column: 1 / span 2;
  aspect-ratio: 16/7;
}
.wp-item:nth-child(2) { background-position: center 44%; }
.wp-item:nth-child(3) { background-position: center 52%; }
.wp-item:nth-child(4) { background-position: center 38%; }
.wp-item:hover {
  filter: brightness(1) saturate(1);
  transform: scale(1.01);
}

@media (max-width: 600px) {
  .wp-grid { grid-template-columns: 1fr; }
  .wp-item:first-child {
    grid-column: 1;
    aspect-ratio: 4/3;
  }
}

/* ═══════════════════════════════════════
   STUDIO CAROUSEL — Instagram swipe style
═══════════════════════════════════════ */
.studio-photos {
  background: var(--bg);
  padding: var(--section-y) 0 0;
}
.sp-head {
  padding-bottom: clamp(28px, 4vw, 44px);
}
.sp-head .eyebrow { display: block; margin-bottom: 14px; }
.sp-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--fg);
}
.sp-subtitle {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 520px;
  margin-top: 10px;
}

/* Carousel container */
.sp-carousel-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}

.sp-carousel {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
  will-change: transform;
}
.sp-carousel.dragging {
  cursor: grabbing;
  transition: none;
}

/* Each slide */
.sp-slide {
  flex: 0 0 100%;
  position: relative;
}
.sp-slide-img {
  width: 100%;
  aspect-ratio: 16/8;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  position: relative;
  overflow: hidden;
  filter: brightness(0.78);
  transition: filter 0.5s ease;
}
.sp-slide:nth-child(2) .sp-slide-img {
  background-position: center 64%;
}
.sp-carousel:not(.dragging) .sp-slide-img:hover { filter: brightness(0.92); }

@media (max-width: 768px) {
  .sp-slide-img { aspect-ratio: 4/3; }
}

/* Bottom label — animated in */
.sp-slide-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 80px clamp(20px, 4vw, 56px) clamp(24px, 3vw, 40px);
  background: linear-gradient(to top,
    rgba(8,8,8,0.88) 0%,
    rgba(8,8,8,0.4) 55%,
    transparent 100%
  );
  z-index: 2;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),
              opacity 0.5s ease;
}
/* Active slide shows label */
.sp-slide.active .sp-slide-label {
  transform: translateY(0);
  opacity: 1;
}

.sp-slide-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.sp-slide-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 72px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #F2EEE8;
  line-height: 0.95;
  margin-bottom: 12px;
  /* Text pop shadow */
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.sp-slide-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 420px;
}

/* Dots */
.sp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 clamp(32px, 4vw, 56px);
}
.sp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-md);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, width 0.3s;
  padding: 0;
}
.sp-dot.active {
  background: var(--red);
  width: 24px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════
   MOBILE NAV — clean single-row header
   Applies at ≤ 767px only. Desktop untouched.
═══════════════════════════════════════ */
@media (max-width: 767px) {
  #navbar {
    height: 68px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Reset the desktop grid inside the header */
  .nav-row {
    display: contents;
  }

  /* Logo: controlled width, auto height */
  .nav-logo svg {
    width: 96px;
    max-width: 96px;
    height: auto;
    display: block;
  }

  /* Hide desktop-only nav items */
  .nav-menu,
  .nav-cta,
  .nav-socials { display: none !important; }

  /* Right-side group: theme toggle + hamburger */
  .nav-tail {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .hamburger {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }
}


/* ═══════════════════════════════════════
   REVEAL / FADE-UP FAILSAFE
   If IntersectionObserver never fires (slow
   JS, blocked script, bot crawlers), sections
   must not stay invisible.
═══════════════════════════════════════ */
.no-js .reveal,
.no-js .fade-up,
.no-js .eyebrow,
.no-js .section-title,
.no-js .work-title,
.no-js .sp-title,
.no-js .about-statement,
.no-js .contact-title {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Safety: never leave .iox-letter or .rest invisible if animation
   somehow doesn't complete (old browser, reduced motion OS override) */
@media (prefers-reduced-motion: reduce) {
  .hero-title-animated .iox-letter,
  .hero-title-animated .rest {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
  .hero::before,
  .services::before,
  .studio-photos::before,
  .about::before,
  .contact::before {
    animation: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════
   MOBILE HERO — compact, IOX animation preserved
═══════════════════════════════════════ */
@media (max-width: 600px) {
  .hero {
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 104px;
    padding-bottom: 72px;
    overflow: hidden;
  }

  .hero-meta {
    padding-bottom: 68px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .hero-title {
    font-size: clamp(45px, 13.4vw, 58px);
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin: 0;
    max-width: 100%;
    overflow: visible;
  }

  .hero-title br {
    display: none;
  }

  .hero-title-animated .hero-word {
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    transform-origin: left center;
  }

  .hero-title-animated .iox-letter,
  .hero-title-animated .rest {
    display: inline-block;
  }

  .hero-title-animated .word-experiment {
    font-size: 0.9em;
    letter-spacing: -0.064em;
    transform: scaleX(0.94);
    transform-origin: left center;
    width: 106%;
  }

  .hero-bottom {
    margin-top: 30px;
    padding-top: 28px;
  }
}

@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(43px, 13vw, 55px);
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(40px, 12.5vw, 52px);
  }

  .hero-title-animated .word-experiment {
    transform: scaleX(0.92);
    width: 108%;
  }
}

/* ═══════════════════════════════════════
   MOBILE BASE — consistent gutter + section rhythm
═══════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --gutter: 32px; }

  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .eyebrow { margin-bottom: 22px; }

  .section-title,
  .work-title,
  .sp-title,
  .contact-title,
  .about-statement {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════
   WORK PHOTOS — mobile grid
═══════════════════════════════════════ */
@media (max-width: 600px) {
  .work-photos {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .wp-grid {
    gap: 12px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .wp-item {
    width: 100%;
    min-height: 240px;
  }
}

/* ═══════════════════════════════════════
   SELECTED WORK HEADER — mobile
═══════════════════════════════════════ */
@media (max-width: 600px) {
  .work-header {
    padding-top: 72px;
    padding-bottom: 36px;
  }

  .work-title {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .work-subtitle {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.55;
  }
}

/* ═══════════════════════════════════════
   SERVICES — mobile
═══════════════════════════════════════ */
@media (max-width: 600px) {
  .services-head { margin-bottom: 48px; }

  .services-title {
    font-size: clamp(44px, 12vw, 64px);
    line-height: 0.92;
    letter-spacing: -0.045em;
  }

  .services-intro-text {
    font-size: 16px;
    line-height: 1.6;
    max-width: 100%;
  }

  .services-proof-strip {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 36px;
  }

  .service-proof,
  .service-proof-tall {
    aspect-ratio: 4 / 3;
    grid-row: auto;
  }

  .service-proof:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .service-row {
    grid-template-columns: 36px 1fr;
    gap: 12px 16px;
    padding: 24px 0;
  }

  .service-name {
    font-size: clamp(22px, 6vw, 36px);
    line-height: 1;
  }

  .service-desc {
    grid-column: 1 / -1;
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ═══════════════════════════════════════
   ABOUT — mobile
═══════════════════════════════════════ */
@media (max-width: 600px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-img-col { display: none; }

  .about-statement {
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.04em;
  }

  .about-r { padding-top: 0; }

  .about-body {
    font-size: 16px;
    line-height: 1.65;
    max-width: 100%;
  }

  .about-meta {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .about-meta-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-meta-key { text-align: left; min-width: 0; }
  .about-meta-val { text-align: right; line-height: 1.35; }
}