@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;1,400&display=swap');

site-header { display: block; }
work-card    { display: contents; }

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg-base:    #090a0d;
  --bg-weak:    #161922;
  --bg-mild:    #0d0f14;
  --text-strong: #ffffff;
  --text-weak:  #9ca6c5;
  --text-sub:   #646e8a;
  --text-link:  #835eed;
  --text-accent:#0084ff;
  --radius-pill: 1000px;
  --radius-lg:   40px;
  --radius-sm:   24px;
  --font-head:  'Archivo Black', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;
}

/* ─── Shared Animations ─────────────────────────────────────── */
@keyframes btn-press {
  0%   { transform: scale(1);    }
  35%  { transform: scale(0.93); }
  68%  { transform: scale(0.97); }
  100% { transform: scale(0.95); }
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg-base);
  color: var(--text-strong);
  font-family: var(--font-mono);
  overflow-x: hidden;
  padding-top: 96px;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 96px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(10, 11, 15, 0.9);
}

.header-logo img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: auto;
  margin-right: 40px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 24px;
  color: var(--text-strong);
  transition: background 0.15s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--bg-weak);
  animation: btn-press 0.35s ease forwards;
}
.nav-item.active          { background: var(--bg-weak); color: var(--text-accent); }
.nav-item.active:hover    { background: var(--bg-mild); }
.nav-item:hover .nav-icon { opacity: 0.5; }
.nav-icon { position: relative; width: 32px; height: 32px; overflow: hidden; flex-shrink: 0; }

.header-social {
  display: flex;
  gap: 20px;
  align-items: center;
}
.social-icon { display: flex; align-items: center; opacity: 0.7; transition: opacity 0.15s; }
.social-icon:hover { opacity: 1; }
.social-icon img { width: 20px; height: 20px; }

/* ─── Pill Button ────────────────────────────────────────────── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 30px;
  border-radius: var(--radius-pill);
  background: var(--bg-weak);
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 24px;
  color: var(--text-accent);
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-pill:hover { background: #1e2430; }

/* ─── Ghost Text (decorative bg text) ───────────────────────── */
.ghost-text {
  font-family: var(--font-head);
  font-size: 200px;
  line-height: 1;
  letter-spacing: -0.08em;
  background: linear-gradient(180deg, #1d212e 0%, #090a0d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  position: absolute;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────────────── */
.section-hero {
  position: relative;
  padding: 122px 152px 48px;
  overflow: hidden;
}

.hero-blobs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height:100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-blob {
  position: absolute;
  will-change: transform, border-radius;
  mix-blend-mode: screen;
}

.hero-blob--purple-glow {
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse at 42% 46%,
    #ffffff 0%,
    #d4aaff 25%,
    #a855f7 50%,
    #6d22e0 100%
  );
  opacity: 0.55;
  filter: blur(800px);
  top: -120px;
  left: -60px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  animation: blob-drift-a 75s ease-in-out infinite, blob-morph-a 14s ease-in-out infinite;
}

.hero-blob--purple {
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse at 38% 42%,
    #f0e0ff 0%,
    #a074ff 30%,
    #835eed 55%,
    #2a0a7e 100%
  );
  opacity: 0.7;
  filter: blur(400px);
  top: -180px;
  left: -150px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  animation: blob-drift-a 75s ease-in-out infinite, blob-morph-a 14s ease-in-out infinite;
}

.hero-blob--blue {
  width: 620px;
  height: 420px;
  background: radial-gradient(ellipse at 62% 38%,
    #d0ecff 0%,
    #50aaff 30%,
    #0084ff 55%,
    #001f60 100%
  );
  opacity: 0.6;
  filter: blur(400px);
  top: -160px;
  right: -140px;
  border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
  animation: blob-drift-b 95s ease-in-out infinite, blob-morph-b 18s ease-in-out infinite;
}

@keyframes blob-drift-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(52vw, 18vh); }
  50%  { transform: translate(72vw, 30vh); }
  75%  { transform: translate(12vw, 25vh); }
  100% { transform: translate(0, 0); }
}

@keyframes blob-drift-b {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-58vw, 14vh); }
  58%  { transform: translate(-18vw, 28vh); }
  80%  { transform: translate(-68vw, 20vh); }
  100% { transform: translate(0, 0); }
}

@keyframes blob-morph-a {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  20%  { border-radius: 25% 75% 40% 60% / 78% 22% 68% 32%; }
  40%  { border-radius: 75% 25% 55% 45% / 22% 78% 32% 68%; }
  60%  { border-radius: 38% 62% 28% 72% / 65% 35% 82% 18%; }
  80%  { border-radius: 82% 18% 48% 52% / 32% 68% 42% 58%; }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
}

@keyframes blob-morph-b {
  0%   { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
  25%  { border-radius: 68% 32% 58% 42% / 32% 68% 22% 78%; }
  50%  { border-radius: 22% 78% 78% 22% / 58% 42% 68% 32%; }
  75%  { border-radius: 78% 22% 32% 68% / 20% 80% 48% 52%; }
  100% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
}

/* Grain noise — scoped to each blob so the dark bg is unaffected */
.hero-blob--purple::after,
.hero-blob--blue::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
  mix-blend-mode: overlay;
}

.hero-title { position: relative; z-index: 1; }

.hero-line-wrap {
  overflow: hidden;
}

.hero-anim {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.hero-anim.is-visible {
  transform: translateY(0);
}

.hero-title h1 {
  font-family: var(--font-head);
  font-size: 256px;
  line-height: 1;
  letter-spacing: -0.0625em;
  color: var(--text-strong);
  overflow: visible;
  padding-bottom: 0.05em;
}

.hero-title p {
  font-weight: 300;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.8);
  mix-blend-mode: plus-lighter;
  max-width: 820px;
  margin-top: 16px;
}

[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(0.76, 0, 0.24, 1),
              transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Work Section ───────────────────────────────────────────── */
.section-work {
  position: relative;
  overflow: hidden;
  padding: 190px 152px 130px;
}
.ghost-text--work {
  top: 70px;
  left: -24px;
  font-size: clamp(100px, 13.9vw, 200px);
}

.section-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  overflow: hidden;
  margin-bottom: 32px;
}
.section-header h2 {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
}

.work-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Big Card */
.big-card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 458px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.big-card:hover {
  transform: scale(0.95);
}
.big-card .card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.card-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.big-card:hover .card-bar {
  opacity: 1;
  transform: translateY(0);
}
.card-info {
  position: absolute;
  bottom: 24px;
  left: 16px;
  transform: translateX(0);
  transition: transform 0.25s ease 0.1s;
}
.card-info h3 {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.64px;
  color: white;
}
.card-info p {
  font-size: 18px;
  line-height: 30px;
  color: white;
}

/* Card hover overlay (purple gradient) */
.big-card::before,
.small-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(131,94,237,0.7) 0%, rgba(22,10,57,0.7) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
.big-card::before  { border-radius: var(--radius-lg); }
.small-card::before { border-radius: var(--radius-sm); }
.big-card:hover::before  { opacity: 1; }
.small-card:hover::before { opacity: 1; }

/* Featured card already has its own static overlay */
.small-card--featured::before { display: none; }

/* z-index stacking */
.card-bar  { z-index: 2; }
.card-info { z-index: 3; }

/* Hover / Arrow button — slides in from left after bar rises */
.hover-btn {
  position: absolute;
  bottom: 20px;
  left: 16px;
  width: 80px;
  height: 80px;
  padding: 0;
  background: none;
  opacity: 0;
  transform: translateX(-64px);
  transition: opacity 0.25s ease 0.18s, transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1) 0.18s;
  z-index: 3;
}
.hover-btn img,
.hover-btn svg { width: 100%; height: 100%; display: block; }
.big-card:hover .hover-btn,
.small-card:hover .hover-btn {
  opacity: 1;
  transform: translateX(0);
}
/* Card info shifts right as button slides in */
.big-card:hover .card-info {
  transform: translateX(120px);
}

/* Small Cards */
.small-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 268px);
  gap: 24px 20px;
  flex-shrink: 0;
}

.small-card {
  position: relative;
  width: 268px;
  height: 216px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.small-card:hover {
  transform: scale(0.95);
}
.small-card img.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.small-card--featured {
  box-shadow: 0 20px 44px -8px rgba(131, 94, 237, 0.4);
}
.small-card--featured .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(131, 94, 237, 0.8);
  z-index: 1;
}
.card-content-featured {
  position: absolute;
  top: 24px;
  left: 16px;
  right: 16px;
  z-index: 2;
  color: white;
}
.card-content-featured h3 {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.64px;
}
.card-content-featured p {
  font-size: 18px;
  line-height: 30px;
}
.hover-btn--sm {
  bottom: 14px;
  right: 14px;
  left: auto;
  width: 56px;
  height: 56px;
  z-index: 2;
  transform: translateX(0);
  transition: opacity 0.2s ease 0.1s;
}

/* Small Card info — content visible by default at top */
.small-card-info {
  position: absolute;
  top: 24px;
  left: 16px;
  right: 16px;
  z-index: 3;
  color: white;
}
.small-card-info h3 {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.64px;
}
.small-card-info p {
  font-size: 18px;
  line-height: 30px;
}

/* ─── New Projects Section ───────────────────────────────────── */
.section-new-projects {
  position: relative;
  overflow: hidden;
  padding: 322px 152px 86px;
}
.ghost-text--np {
  top: 190px;
  left: -24px;
  font-size: clamp(100px, 13.9vw, 200px);
  width: max-content;
}
.new-projects-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.np-text-group { display: flex; flex-direction: column; gap: 10px; }
.new-projects-content h2 {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
}
.new-projects-content > .np-text-group > p {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-sub);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer { position: relative; }

.footer-space {
  position: relative;
  height: 585px;
  overflow: hidden;
  background-image: url('../assets/_footer-space.png');
  background-size: cover;
  background-position: center top;
}

/* Space invaders */
.space-invader {
  position: absolute;
  width: 119px;
  height: 119px;
  mix-blend-mode: color-dodge;
  z-index: 2;
  pointer-events: none;
}
.si-1 { left: calc(50% - 695px); top: 193px; }
.si-2 { left: calc(50% - 455px); top:  98px; }
.si-3 { left: calc(50% - 431px); top: 289px; }
.si-4 { left: calc(50% -  23px); top: 193px; }
.si-5 { left: calc(50% + 313px); top: 337px; }
.si-6 { left: calc(50% + 577px); top: 193px; }
.si-7 { left: calc(50% + 817px); top: 297px; }

/* Bar Footer */
.bar-footer {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  backdrop-filter: blur(20px);
  background: rgba(10, 11, 15, 0.9);
}
.bar-footer span {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-weak);
  white-space: pre;
}
.bar-footer a {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--text-link);
  transition: opacity 0.15s;
}
.bar-footer a:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════
   WALL SPACE PAGE
═══════════════════════════════════════════════════════════════ */

/* Hero / Coming Soon */
.ws-hero {
  position: relative;
  min-height: 860px;
  overflow: hidden;
}

.ws-coming-soon {
  position: absolute;
  top: 231px;
  left: -4px;
  font-family: var(--font-head);
  font-size: clamp(80px, 17.8vw, 256px);
  line-height: 159px;
  letter-spacing: -0.0625em;
  background: linear-gradient(180deg, #1d212e 0%, #090a0d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ws-gradient {
  position: absolute;
  top: -196px;
  left: -140px;
  width: 1964px;
  height: 352px;
  pointer-events: none;
  z-index: 0;
}
.ws-gradient img { width: 100%; height: 100%; object-fit: contain; }

/* Sparkle decorations */
.ws-sparkle-lg {
  position: absolute;
  right: 184px;
  top: 480px;
  width: 153px;
  height: 151px;
  z-index: 2;
  pointer-events: none;
}
.ws-sparkle-sm {
  position: absolute;
  right: 150px;
  top: 440px;
  width: 46px;
  height: 43px;
  z-index: 2;
  pointer-events: none;
}
.ws-sparkle-lg img, .ws-sparkle-sm img { width: 100%; height: 100%; }

/* Wall Space Logo */
.ws-logo-wrap {
  position: absolute;
  top: 520px;
  left: 90px;
  width: 573px;
  height: 300px;
  display: flex;
  align-items: center;
  z-index: 1;
}
.ws-logo-isotype {
  width: 265px;
  height: 300px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: left center;
}
.ws-logo-wordmark {
  width: 250px;
  height: 130px;
  object-fit: contain;
  object-position: left center;
  margin-left: 8px;
}

/* Description */
.ws-description {
  position: absolute;
  top: 832px;
  left: 354px;
  width: 848px;
  font-weight: 300;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.04em;
  color: var(--text-strong);
  z-index: 1;
}

/* ─── Tattoo Text Section ────────────────────────────────────── */
.ws-tattoo-section {
  position: relative;
  width: 100%;
  height: 490px;
  overflow: hidden;
  margin-top: 148px; /* places it at ~y 1042 in the page */
}

.ws-tattoo-word {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(180px, 25vw, 360px);
  line-height: 1;
  letter-spacing: -0.016em;
  color: transparent;
  background-image: url('https://www.figma.com/api/mcp/asset/66da02b2-b58e-4386-b577-f7286d0defff');
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  margin-left: -30px;
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

.ws-tattoo-monstera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 2;
}

.ws-tattoo-purple-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(131, 94, 237, 0.6));
  mix-blend-mode: hue;
  pointer-events: none;
  z-index: 3;
}

/* "studio" blurred text */
.ws-studio-text {
  position: absolute;
  right: -16px;
  bottom: 0;
  font-family: var(--font-head);
  font-size: 144px;
  line-height: 1;
  letter-spacing: -5.76px;
  color: white;
  filter: blur(6px);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}

.ws-location {
  position: absolute;
  right: 151px;
  bottom: 50px;
  font-size: 18px;
  line-height: 30px;
  color: var(--text-strong);
  z-index: 5;
}

/* "art" floating pill */
.ws-art-btn {
  position: absolute;
  left: 293px;
  top: 180px;
  width: 213px;
  height: 112px;
  border-radius: 100px;
  background: rgba(13, 15, 20, 0.15);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 20px 52px rgba(9,10,13,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 64px;
  line-height: 56px;
  letter-spacing: -1.28px;
  color: white;
  z-index: 5;
  pointer-events: none;
}

/* ─── Cards Section ─────────────────────────────────────────── */
.ws-cards-section {
  position: relative;
  padding: 0 152px;
  margin-top: 32px;
  height: 720px;
}

.ws-card {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ws-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.ws-card-1 { left: 0; top: 0;   width: 464px; height: 458px; }
.ws-card-2 { left: 573px; top: 136px; width: 563px; height: 458px; }

/* Floating italic label pills */
.ws-label {
  position: absolute;
  border-radius: 100px;
  background: rgba(13, 15, 20, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 20px 52px rgba(9,10,13,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 64px;
  line-height: 56px;
  letter-spacing: -1.28px;
  color: white;
  pointer-events: none;
  z-index: 10;
}
.ws-label-design { left: 196px; top: 376px; width: 317px; height: 112px; }
.ws-label-ink    { left: 709px; top:  88px; width: 228px; height: 112px; }
.ws-label-music  { left: 808px; top: 544px; width: 289px; height: 112px; }

/* ─── Wall Space Footer (no space) ───────────────────────────── */
.ws-footer-spacer {
  height: 96px; /* just the bar */
}

/* ═══════════════════════════════════════════════════════════════
   WORK PAGE (stub)
═══════════════════════════════════════════════════════════════ */
.page-work .work-page-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 152px 60px;
}
.work-page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(96px, 17.8vw, 256px);
  line-height: 0.95;
  letter-spacing: -0.0625em;
}
.ghost-text--page {
  top: 0;
  left: -24px;
  font-size: clamp(100px, 13.9vw, 200px);
}
.work-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 152px;
  margin-bottom: 40px;
}

.work-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
  padding: 0 152px 80px;
}

/* Grid cards — block so opacity/transform work for filter animation */
.work-cards-grid work-card {
  display: block;
}

@keyframes card-cascade-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes card-cascade-out {
  from { opacity: 1; transform: scale(1);    }
  to   { opacity: 0; transform: scale(0.94); }
}

.work-cards-grid work-card.card-in {
  animation: card-cascade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--card-delay, 0ms);
}
.work-cards-grid work-card.card-out {
  animation: card-cascade-out 0.2s ease forwards;
}
.work-small-card {
  position: relative;
  height: 216px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-weak);
  cursor: pointer;
}
.work-small-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.work-small-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(131,94,237,0.7) 0%, rgba(22,10,57,0.7) 100%);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
.work-small-card:hover::before { opacity: 1; }
.work-small-card:hover img     { transform: scale(1.04); }
.work-card-info {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  color: white;
  pointer-events: none;
}
.work-card-info h3 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.44px;
}
.work-card-info p {
  font-size: 13px;
  line-height: 20px;
  color: rgba(255,255,255,0.55);
}
.work-small-card .hover-btn {
  width: 56px;
  height: 56px;
  bottom: 14px;
  left: 14px;
  transform: translateX(-40px);
  transition: opacity 0.2s ease 0.15s, transform 0.25s cubic-bezier(0.34, 1.1, 0.64, 1) 0.15s;
}
.work-small-card:hover .hover-btn {
  opacity: 1;
  transform: translateX(0);
}
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-weak);
  transition: background 0.15s;
}
.back-btn:hover { background: #1e2430; }
.back-btn svg { width: 24px; height: 24px; }

/* ═══════════════════════════════════════════════════════════════
   TAG PILL COMPONENT
═══════════════════════════════════════════════════════════════ */

.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--bg-mild);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--text-weak);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tag-pill:hover {
  border-color: #282e3f;
  box-shadow: 0 20px 44px -8px rgba(131, 94, 237, 0.4);
  color: var(--text-accent);
  font-weight: 600;
  line-height: 26px;
  animation: btn-press 0.35s ease forwards;
}

.tag-pill--selected {
  background: var(--text-accent);
  color: var(--bg-base);
  font-weight: 600;
  line-height: 26px;
  border-color: transparent;
}

.tag-pill--selected:hover {
  background: var(--text-accent);
  color: var(--bg-base);
  box-shadow: 0 20px 44px -8px rgba(0, 132, 255, 0.4);
  border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════════ */
.page-about .about-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 152px 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  min-height: 860px;
}

.about-ghost-text {
  top: 90px;
  left: -4px;
  font-size: clamp(120px, 17.8vw, 256px);
}

.about-hero-content {
  flex: 1;
  min-width: 0;
  padding-top: 240px;
}

.about-hero-content h1 {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.about-role {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-sub);
  margin-bottom: 24px;
}
.about-role .text-strong { color: var(--text-strong); }

.about-bio {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-weak);
  max-width: 560px;
  margin-bottom: 40px;
}

.about-photo {
  width: 370px;
  height: 464px;
  border-radius: 60px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 160px;
  border: 1px solid rgba(84, 116, 184, 0.1);
  box-shadow: 0 52px 68px -24px rgba(0, 0, 0, 0.2);
  background: var(--bg-base);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Wall Space badge */
.about-wallspace-badge {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: -16px;
}
.about-parche {
  width: 208px;
  height: 208px;
  object-fit: contain;
}

.about-team-text {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-weak);
  max-width: 561px;
  margin-bottom: 40px;
}
.about-team-text a { color: var(--text-link); font-weight: 600; }

.about-divider {
  border: none;
  border-top: 1px solid #282e3f;
  margin: 0 0 40px 0;
  max-width: 560px;
}

.about-clients-label {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-weak);
  margin-bottom: 24px;
}

/* Logo pills */
.about-logos {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 12px;
}

.logo-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 8px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-mild);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--text-strong);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, padding-right 0.28s ease;
}

.logo-pill:hover {
  transform: translateY(-4px);
  background: var(--bg-weak);
  border-color: #282e3f;
  box-shadow: 0 12px 24px rgba(131, 94, 237, 0.35);
  padding-right: 44px;
}

.logo-pill-img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.logo-pill-ext {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.28s ease, opacity 0.12s ease 0.1s;
}

.logo-pill:hover .logo-pill-ext {
  clip-path: inset(0 0% 0 0);
  opacity: 1;
}

/* Divider at bottom of content */
.about-bottom-divider {
  border: none;
  border-top: 1px solid #282e3f;
  margin: 64px 152px 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV
═══════════════════════════════════════════════════════════════ */
.header-mobile-btn {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 4px 4px 4px 16px;
  background: var(--bg-weak);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 24px;
  color: var(--text-accent);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.mobile-btn-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-mild);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.header-mobile-btn.is-open .mobile-btn-icon {
  background: var(--bg-weak);
  transform: rotate(180deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 96px;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 8px 24px 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-menu.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: mobile-menu-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mobile-menu-bounce {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.mobile-menu-card {
  background: var(--bg-mild);
  border: 1px solid #282e3f;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 20px 52px rgba(9,10,13,0.7);
  max-width: 350px;
}
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 80px;
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.64px;
  color: var(--text-strong);
  transition: background 0.15s;
  white-space: nowrap;
}
.mobile-menu-item.active { color: var(--text-accent); }
.mobile-menu-item:not(.active):hover { background: rgba(255,255,255,0.04); }
.mobile-nav-icon {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
}
.mobile-menu-chevron {
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: var(--bg-weak);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .site-header { padding: 0 24px; }
  .header-nav  { display: none; }
  .header-mobile-btn { display: flex; }
  .mobile-menu { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE / PROJECT PAGE
═══════════════════════════════════════════════════════════════ */

/* Primary filled button (purple) */
.btn-pill--primary {
  background: var(--text-link);
  color: var(--text-strong);
  box-shadow: 0 2px 10px rgba(131, 94, 237, 0.4);
}
.btn-pill--primary:hover { background: #6f4fd1; }

/* Hero */
.single-hero {
  padding: 144px 152px 64px;
}
.single-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
.single-back {
  flex-shrink: 0;
  margin-top: 4px;
}
.single-meta { flex: 1; }
.single-title {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.single-category {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-sub);
}
.single-description {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-weak);
  max-width: 1136px;
}
.single-description a { color: var(--text-link); }

/* Large images */
.single-images {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 152px;
  margin-bottom: 0;
}
.single-img-wrap {
  width: 100%;
  height: 632px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.single-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Related section */
.single-related {
  position: relative;
  overflow: hidden;
  padding: 220px 152px 80px;
}
.single-related-ghost {
  font-family: var(--font-head);
  font-size: clamp(120px, 18vw, 256px);
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, #1d212e 0%, #090a0d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  position: absolute;
  top: 80px;
  left: -4px;
}
.single-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 16px;
}
.single-related-card {
  position: relative;
  height: 216px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.single-related-card:hover { transform: scale(0.97); }
.single-related-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.single-related-card:hover img { transform: scale(1.04); }
.single-related-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(131,94,237,0.7) 0%, rgba(22,10,57,0.7) 100%);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}
.single-related-card:hover::before { opacity: 1; }

/* small-card inside related grid stretches to fill column */
.single-related-grid .small-card {
  width: 100%;
  height: 216px;
}