/* =========================================================
   ALEXIS BUTRÓN — REDISEÑO V2
   Brutalist editorial. Pure B&W. Inspired by Barrigón / sintesis.studio
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400;1,600&display=swap');


/* Barrigón Studio production typography — open webfonts.
   Instrument Sans + Source Serif 4 are loaded from Google Fonts for consistent rendering. */

:root {
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --bg-card: #111111;
  --line: #1c1c1c;
  --line-soft: #161616;
  --text: #F2F2F2;
  --text-dim: #8c8c8c;
  --text-muted: #555555;
  --container: 1440px;
  --gutter: 32px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

@media (max-width: 900px) { body { cursor: auto; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; }
::selection { background: var(--text); color: var(--bg); }

/* ---------- Custom cursor (white) ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  transition: width 0.2s, height 0.2s;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.cursor-ring.hover { width: 64px; height: 64px; background: #fff; }
.cursor-dot.hover { width: 0; height: 0; }
@media (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Page transition ---------- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--text);
  z-index: 99999;
  transform: translateY(100%);
  pointer-events: none;
}
.page-transition.entering { animation: enterCurtain 0.9s var(--ease) forwards; }
.page-transition.exiting  { animation: exitCurtain  0.7s var(--ease) forwards; }
@keyframes enterCurtain {
  0%   { transform: translateY(100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes exitCurtain {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 640px) { :root { --gutter: 20px; } }

/* ---------- TOP NAV — 3 column header ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.3s, background 0.3s;
}
.nav.scrolled { padding: 16px 0; background: rgba(0, 0, 0, 0.85); }

.nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 24px;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.nav-col { display: flex; flex-direction: column; gap: 4px; }
.nav-col.center { align-items: center; }
.nav-col.right { align-items: flex-end; text-align: right; }

.nav .label {
  color: var(--text);
  font-weight: 500;
}
.nav .sub {
  color: var(--text-dim);
  font-size: 12px;
}
.nav .sub a {
  display: inline-block;
  margin-right: 6px;
  transition: color 0.3s;
}
.nav .sub a:hover, .nav .sub a.current { color: var(--text); }

.brand {
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text);
  display: inline-block;
}

@media (max-width: 720px) {
  .nav-inner { grid-template-columns: 1fr 1fr; }
  .nav-col.right { display: none; }
  .nav-col.center { align-items: flex-end; text-align: right; }
}

/* ---------- HERO ---------- */
.hero {
  padding: 140px 0 0;
  position: relative;
}

.hero-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 80px 0 60px;
}
@media (max-width: 820px) {
  .hero-top { grid-template-columns: 1fr; gap: 30px; }
}

.hero-manifesto {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 600px;
}
.hero-card {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 5/4;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  justify-self: end;
}
.hero-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.05);
  transition: transform 1.2s var(--ease), filter 0.6s;
}
.hero-card:hover img { transform: scale(1.05); filter: grayscale(0); }
.hero-card .micro {
  position: absolute;
  top: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-card .micro.r { left: auto; right: 12px; }
@media (max-width: 820px) {
  .hero-card { justify-self: stretch; max-width: 100%; aspect-ratio: 16/10; }
}

/* HUGE BRAND NAME */
.brand-giant {
  font-size: clamp(72px, 19vw, 360px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin: 0 0 0 -0.04em;
  white-space: nowrap;
  position: relative;
}
.brand-giant.tight { letter-spacing: -0.07em; }
.brand-giant .accent { font-style: italic; font-weight: 600; }

/* ---------- Section divider strip ---------- */
.divider {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.divider .center { text-align: center; }
.divider .right { text-align: right; }
.divider .jp {
  font-family: 'Noto Sans JP', 'JetBrains Mono', sans-serif;
  margin-left: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.divider .num {
  display: inline-block;
  letter-spacing: 0.04em;
}
.divider .num::before { content: "{"; opacity: 0.5; margin-right: 4px; }
.divider .num::after  { content: "}"; opacity: 0.5; margin-left: 4px; }
@media (max-width: 720px) {
  .divider { grid-template-columns: 1fr; gap: 6px; text-align: left !important; }
  .divider .center, .divider .right { text-align: left; }
}

/* ---------- Top bar small markers (above sections) ---------- */
.markers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.markers .item.center { text-align: center; }
@media (max-width: 720px) {
  .markers { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ---------- Sections ---------- */
.section {
  padding: 120px 0;
  position: relative;
}
@media (max-width: 720px) { .section { padding: 80px 0; } }

/* ---------- Statement (image + big copy) ---------- */
.statement {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: 40px; } }

.statement-img {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
}
.statement-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.05);
  transition: transform 1.2s var(--ease), filter 0.6s;
}
.statement-img:hover img { transform: scale(1.04); filter: grayscale(0); }

.statement-img .overlay-card {
  position: absolute;
  bottom: 32px;
  right: 32px;
  width: 45%;
  aspect-ratio: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.statement-copy {
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.statement-copy strong { font-weight: 600; }
.statement-copy .dim { color: var(--text-dim); }

/* Outline pill button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), padding 0.3s;
  font-family: inherit;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn-solid {
  background: var(--text);
  color: var(--bg);
}
.btn-solid:hover { background: transparent; color: var(--text); }

.btn .arrow { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translate(3px, -3px); }

/* ---------- Tools grid (small black squares) ---------- */
.tools {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .tools { grid-template-columns: repeat(2, 1fr); } }

.tool {
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease);
}
.tool:hover { border-color: var(--text); transform: translateY(-3px); background: #161616; }
.tool .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool .label::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(1) brightness(2);
}
.tool[data-icon="figma"] .label::before { background-image: url('../images/figma-logo.webp'); }
.tool[data-icon="webflow"] .label::before { background-image: url('../images/webflow-logo-1.webp'); }
.tool[data-icon="react"] .label::before { background-image: url('../images/react-logo.webp'); }
.tool[data-icon="node"] .label::before { background-image: url('../images/node.js-logo.webp'); }
.tool[data-icon="js"] .label::before { background-image: url('../images/javascript-logo-yellow-black.webp'); }
.tool[data-icon="adobe"] .label::before { background-image: url('../images/adobe-logo.webp'); }
.tool .label-text { color: var(--text); font-weight: 500; }

/* ---------- HUGE display banner (Trabajo Selecto, Servicios, ©2026) ---------- */
.huge {
  font-size: clamp(72px, 16vw, 280px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  white-space: nowrap;
  overflow: hidden;
}
.huge.center { text-align: center; }
.huge .super {
  font-size: 0.32em;
  vertical-align: super;
  font-weight: 400;
  letter-spacing: 0;
}
.huge-wrap { padding: 60px 0; }
.huge-wrap.bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Services list ---------- */
.services-table {
  display: grid;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.service-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 1.4fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  transition: padding-left 0.3s var(--ease), background 0.3s;
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row:hover { padding-left: 16px; background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 60%); }
.service-row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-dim);
  padding-top: 4px;
}
.service-row .name {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.service-row .desc {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  max-width: 360px;
}
@media (max-width: 720px) {
  .service-row { grid-template-columns: 50px 1fr; gap: 16px; }
  .service-row .desc { grid-column: 2; padding-top: 6px; }
}

/* ---------- Manifesto block ---------- */
.manifesto {
  position: relative;
  padding: 60px 0 100px;
}
.manifesto-text {
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-dim);
  max-width: 1200px;
}
.manifesto-text .accent {
  color: var(--text);
  font-style: italic;
  font-weight: 500;
}
.manifesto-overlay {
  position: relative;
  margin-top: -60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  pointer-events: none;
}
.manifesto-overlay > div {
  pointer-events: auto;
  aspect-ratio: 4/5;
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.manifesto-overlay > div:first-child { max-width: 380px; }
.manifesto-overlay > div:last-child { max-width: 380px; justify-self: end; align-self: end; }
.manifesto-overlay img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.manifesto-overlay .copy {
  position: absolute;
  inset: auto 24px 24px 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
.manifesto-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- Final closing block ---------- */
.closing {
  padding: 80px 0 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.closing-copy {
  max-width: 640px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
.closing-cta { margin-top: 28px; }

.footer-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 60px 0 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-meta .col h6 {
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
.footer-meta .col p,
.footer-meta .col a {
  color: var(--text-dim);
  display: block;
  line-height: 1.6;
  transition: color 0.3s;
}
.footer-meta .col a:hover { color: var(--text); }
.footer-meta .col.right { text-align: right; }

.copy-banner {
  font-size: clamp(80px, 22vw, 360px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 40px 0 30px;
  border-top: 1px solid var(--line);
}

.bottomline {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

/* ---------- Bio block (about) ---------- */
.bio-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .bio-block { grid-template-columns: 1fr; gap: 40px; } }
.bio-photo {
  position: sticky;
  top: 140px;
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-card);
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.05); transition: filter 0.6s; }
.bio-photo:hover img { filter: grayscale(0); }
.bio-text p {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.bio-text p:first-of-type { font-weight: 500; }
.bio-text p strong { font-weight: 600; }
.bio-text p .dim { color: var(--text-dim); }

/* ---------- Contact / form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-info h2 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.contact-info p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 380px;
}
.contact-channels { display: flex; flex-direction: column; }
.contact-channel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.contact-channel:last-child { border-bottom: 1px solid var(--line); }
.contact-channel:hover { padding-left: 12px; }
.contact-channel .meta { display: flex; flex-direction: column; gap: 2px; }
.contact-channel .meta .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.contact-channel .meta .value { font-size: 18px; font-weight: 500; }
.contact-channel .arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--text-dim);
  transition: transform 0.3s var(--ease), color 0.3s;
}
.contact-channel:hover .arrow { color: var(--text); transform: translate(4px, -4px); }

.form {
  border: 1px solid var(--line);
  padding: 36px;
  background: var(--bg-soft);
}
@media (max-width: 540px) { .form { padding: 24px 20px; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-row.single { grid-template-columns: 1fr; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--text); background: #050505; }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); }

.form-submit {
  width: 100%;
  padding: 16px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 12px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.form-submit:hover { background: transparent; color: var(--text); }
.form-success,
.form-error {
  padding: 14px 18px;
  margin-top: 14px;
  border-radius: 0;
  font-size: 13px;
  display: none;
  border: 1px solid var(--line);
}
.form-success { color: var(--text); border-color: var(--text); }
.form-error { color: #ff8a8a; border-color: rgba(255,138,138,0.5); }
.form-success.show, .form-error.show { display: block; }

/* ---------- Floating contact ---------- */
.float-cta {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 50;
  background: var(--text);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateY(140%);
  transition: transform 0.5s var(--ease);
}
.float-cta.show { transform: none; }
.float-cta .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  50% { transform: scale(0.5); opacity: 0.5; }
}

/* ---------- Tags / sub-line under sections ---------- */
.subline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
@media (max-width: 720px) { .subline { grid-template-columns: 1fr 1fr; } }

/* Hide things we don't need */
.menu-toggle { display: none; }

/* ============================================================
   TV STATIC (interactive canvas in hero)
   ============================================================ */
.hero { isolation: isolate; }
.tv-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.hero > .container { position: relative; z-index: 2; }
.hero > .hero-grid-bg,
.hero > .hero-glow { z-index: 1; }

/* ============================================================
   FULL-BLEED HERO with Basquiat sketch as background
   ============================================================ */
.hero.hero-fullsketch {
  padding: 100px 0 40px;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a0a;
}
.hero.hero-fullsketch > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;
}
.hero-bg-sketch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0a0a0a;
}
.hero-bg-sketch svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero.hero-fullsketch .hero-manifesto {
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 600px;
  position: relative;
  mix-blend-mode: difference;
}
.hero.hero-fullsketch .brand-giant {
  position: relative;
  mix-blend-mode: difference;
  margin-bottom: -0.05em;
}
@media (max-width: 720px) {
  .hero.hero-fullsketch { min-height: 85vh; padding: 90px 0 30px; }
}

/* ============================================================
   HERO SKETCH (Basquiat-style animated SVG)
   ============================================================ */
.hero-sketch {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 30%, #1a1a1a 0%, #0a0a0a 70%, #050505 100%);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-sketch svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-sketch path,
.hero-sketch line,
.hero-sketch polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.hero-sketch .filled { fill: currentColor; stroke: none; }

/* Each draw layer animates with stroke-dasharray (used in both contained and full-bleed sketches) */
.scribble {
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
  animation: sketchDraw 12s var(--ease) infinite;
}
.scribble.s1 { animation-delay: 0s; }
.scribble.s2 { animation-delay: 0.5s; }
.scribble.s3 { animation-delay: 1.0s; }
.scribble.s4 { animation-delay: 1.5s; }
.scribble.s5 { animation-delay: 2.0s; }
.scribble.s6 { animation-delay: 2.5s; }
.scribble.s7 { animation-delay: 3.0s; }
.scribble.s8 { animation-delay: 3.5s; }
.scribble.s9 { animation-delay: 4.0s; }
@keyframes sketchDraw {
  0%   { stroke-dashoffset: var(--len, 4000); opacity: 1; }
  35%  { stroke-dashoffset: 0; opacity: 1; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  97%  { opacity: 0; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: var(--len, 4000); }
}
.blob {
  opacity: 0;
  animation: blobShow 12s var(--ease) infinite;
  transform-origin: center;
}
.blob.b1 { animation-delay: 0.3s; }
.blob.b2 { animation-delay: 1.2s; }
.blob.b3 { animation-delay: 2.0s; }
@keyframes blobShow {
  0%, 5%   { opacity: 0; transform: scale(0.85); }
  18%, 90% { opacity: 1; transform: scale(1); }
  97%      { opacity: 0; }
  100%     { opacity: 0; }
}
.hero-sketch .stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  fill: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   MUSIC PLAYER (LOFI JAZZ)
   ============================================================ */
.player {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.06em;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.player:hover { border-color: var(--text-dim); }
.player.playing { border-color: var(--text); }

.player-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.3s;
}
.player-btn:hover { background: var(--text-dim); }
.player-btn svg { width: 12px; height: 12px; fill: var(--bg); }

.player-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 4px;
  text-transform: uppercase;
}
.player-info .label {
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
}
.player-info .title {
  font-weight: 500;
  font-size: 10px;
  color: var(--text);
}

.player-eq {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 14px;
  margin-right: 4px;
}
.player-eq span {
  display: block;
  width: 2px;
  background: var(--text-muted);
  border-radius: 1px;
  height: 30%;
  transition: background 0.3s;
}
.player.playing .player-eq span {
  background: var(--text);
  animation: eqBars 0.9s ease-in-out infinite;
}
.player.playing .player-eq span:nth-child(2) { animation-delay: 0.15s; }
.player.playing .player-eq span:nth-child(3) { animation-delay: 0.3s; }
.player.playing .player-eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes eqBars {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}

/* Hidden YT iframe container — out of view but with size */
#lofi-yt-container {
  position: fixed;
  left: -300px;
  top: -300px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  overflow: hidden;
}

/* Move the Hablemos float CTA to bottom-LEFT to coexist with player */
.float-cta {
  bottom: 22px;
  right: auto;
  left: 22px;
}

@media (max-width: 540px) {
  .player { padding: 6px 10px 6px 6px; gap: 8px; right: 10px; bottom: 10px; }
  .player-info .label { display: none; }
  .player-info .title { font-size: 9px; }
  .player-eq { display: none; }
  .float-cta { left: 10px; bottom: 10px; padding: 10px 14px; font-size: 10px; }
}

/* ============================================================
   DOT GLOBE — Interactive sphere of dots
   ============================================================ */
.globe-section {
  position: relative;
  padding: 200px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  min-height: 80vh;
}
.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.globe-section .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.globe-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.globe-intro {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto 80px;
  font-weight: 300;
}
.globe-headline {
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-transform: uppercase;
  max-width: 1100px;
  margin: 0 auto;
}
.globe-subline {
  margin-top: 80px;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--text);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}
.globe-cta { margin-top: 48px; }

@media (max-width: 720px) {
  .globe-section { padding: 100px 0; }
  .globe-intro, .globe-subline { margin-top: 50px; margin-bottom: 50px; }
}

/* ============================================================
   BARRIGÓN V4 — GLITCH FILM HERO + ORIGINAL SITE REFINEMENT
   ============================================================ */

.hero.hero-glitch {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  display: block;
  background: #020202;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.hero-video {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  filter: contrast(1.22) saturate(.72) brightness(.58) blur(1.15px) grayscale(.08);
  transform: scale(1.05);
}
.hero-video-blur {
  position: absolute;
  inset: -5%;
  background: inherit;
  backdrop-filter: blur(1.8px);
  -webkit-backdrop-filter: blur(1.8px);
  opacity: .22;
  pointer-events: none;
}
.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    rgba(0,0,0,.05) 1px,
    rgba(0,0,0,.05) 3px
  );
  opacity: .42;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-grain {
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  opacity: .12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: barrigonNoise .22s steps(2) infinite;
  mix-blend-mode: screen;
}

.hero-glitch-bars,
.hero-rgb-wash,
.hero-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-glitch-bars {
  opacity: .18;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, transparent 0 12%, rgba(255,255,255,.11) 12.4% 13.1%, transparent 13.4% 27%, rgba(255,255,255,.08) 27.2% 27.8%, transparent 28% 61%, rgba(255,255,255,.12) 61.2% 62.2%, transparent 62.6% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 4px);
  animation: heroBarsShift 6.8s steps(8) infinite;
}
.hero-rgb-wash {
  opacity: .22;
  background:
    radial-gradient(40% 50% at 18% 20%, rgba(255,0,80,.16), transparent 60%),
    radial-gradient(45% 55% at 80% 72%, rgba(0,180,255,.16), transparent 62%),
    linear-gradient(90deg, rgba(255,0,0,.06), transparent 25%, transparent 75%, rgba(0,170,255,.06));
  mix-blend-mode: lighten;
  animation: heroRGBDrift 8s ease-in-out infinite alternate;
}
.hero-flicker {
  background: rgba(255,255,255,.03);
  mix-blend-mode: overlay;
  animation: heroFlicker 1.9s infinite steps(2);
}
@keyframes heroBarsShift {
  0%, 100% { transform: translateY(0) translateX(0); }
  18% { transform: translateY(-1.2%) translateX(.4%); }
  19% { transform: translateY(1.6%) translateX(-.6%); }
  20% { transform: translateY(-.3%) translateX(.25%); }
  48% { transform: translateY(0) translateX(0); }
  49% { transform: translateY(2.1%) translateX(-.35%); }
  50% { transform: translateY(-1.8%) translateX(.45%); }
  51% { transform: translateY(.4%) translateX(-.1%); }
}
@keyframes heroRGBDrift {
  0% { transform: translate3d(-1.3%, 0, 0) scale(1.02); }
  100% { transform: translate3d(1.3%, -1%, 0) scale(1.05); }
}
@keyframes heroFlicker {
  0%, 100% { opacity: .04; }
  7% { opacity: .11; }
  8% { opacity: .03; }
  9% { opacity: .09; }
  10% { opacity: .02; }
  48% { opacity: .05; }
  49% { opacity: .12; }
  50% { opacity: .04; }
  84% { opacity: .07; }
  85% { opacity: .02; }
}
@keyframes barrigonNoise {
  0% { transform: translate3d(-3%, 2%, 0); }
  25% { transform: translate3d(2%, -4%, 0); }
  50% { transform: translate3d(4%, 3%, 0); }
  75% { transform: translate3d(-4%, -2%, 0); }
  100% { transform: translate3d(1%, 4%, 0); }
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.05) 28%, rgba(0,0,0,.12) 65%, rgba(0,0,0,.75) 100%),
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.52) 100%);
  pointer-events: none;
}
.hero-glitch-inner {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 120px;
  padding-bottom: 30px;
}
.hero-glitch-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.hero.hero-glitch .hero-manifesto {
  margin: 0;
  max-width: 520px;
  font-size: clamp(20px, 2.25vw, 34px);
  line-height: .98;
  text-shadow: 0 0 28px rgba(255,255,255,.08);
  mix-blend-mode: normal;
}
.hero-signal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  text-align: right;
}
.hero-signal span:first-child { color: #fff; }
.hero-signal i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.8);
  animation: signalBlink 1.2s steps(1) infinite;
}
@keyframes signalBlink { 50% { opacity: .2; } }
.hero-glitch-bottom { width: 100%; }
.hero.hero-glitch .brand-giant {
  color: #fff;
  font-size: clamp(92px, 20vw, 345px);
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.078em;
  margin: 0 0 .06em -.055em;
  mix-blend-mode: difference;
  text-shadow: 0 0 1px rgba(255,255,255,.2);
}
.hero-dot { font-style: italic; font-weight: 400; }
.hero-bottom-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.28);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hero-bottom-meta a { color: #fff; }

/* brand origin: logo is an identity artifact, not the whole web theme */
.origin-section { padding: 0 0 120px; }
.origin-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 60px;
  align-items: stretch;
}
.origin-mark {
  min-height: 420px;
  background: #f5f1e9;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.origin-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.origin-copy {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
}
.origin-meta,
.origin-copy > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.origin-copy p {
  max-width: 800px;
  font-size: clamp(30px, 4.3vw, 68px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 400;
}
.origin-copy > span { color: #fff; }

/* selected work: typography first, like an index rather than generic cards */
.selected-work { padding: 0 0 120px; }
.project-row {
  display: grid;
  grid-template-columns: 70px 1.35fr 1fr auto;
  align-items: center;
  gap: 26px;
  min-height: 138px;
  border-top: 1px solid var(--line);
  transition: background .45s var(--ease), padding .45s var(--ease), color .35s;
}
.project-row:last-child { border-bottom: 1px solid var(--line); }
.project-row:hover {
  background: #fff;
  color: #000;
  padding: 0 18px;
}
.project-no,
.project-type,
.project-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.project-no,.project-type { color: var(--text-dim); }
.project-row:hover .project-no,
.project-row:hover .project-type { color: #555; }
.project-name {
  font-family: 'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size: clamp(42px, 5.8vw, 92px);
  line-height: .9;
  letter-spacing: -.055em;
}
.project-year { text-align: right; }

.bottom-brand { display: inline-flex; align-items: center; gap: 10px; }
.bottom-brand img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .hero-glitch-inner { padding-top: 110px; }
  .hero-glitch-top { grid-template-columns: 1fr; }
  .hero-signal { align-items: flex-start; text-align: left; }
  .origin-grid { grid-template-columns: 1fr; gap: 28px; }
  .origin-mark { min-height: 0; aspect-ratio: 1/1; max-width: 560px; }
  .project-row { grid-template-columns: 44px 1fr auto; min-height: 110px; gap: 14px; }
  .project-type { display: none; }
}
@media (max-width: 640px) {
  .hero-glitch-inner { padding-top: 100px; padding-bottom: 18px; }
  .hero.hero-glitch .brand-giant { font-size: 22vw; line-height: .82; }
  .hero-bottom-meta { grid-template-columns: 1fr; gap: 6px; }
  .hero-video { inset: -8%; width: 116%; height: 116%; }
  .origin-section { padding-bottom: 80px; }
  .origin-copy p { font-size: 9.8vw; }
  .project-row { grid-template-columns: 34px 1fr auto; min-height: 92px; }
  .project-name { font-size: 10vw; }
  .project-year { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grain,.hero-signal i { animation: none !important; }
}

/* ============================================================
   BARRIGÓN V5 — DIGITAL MARK / 3D MOTION / KINETIC WORK INDEX
   ============================================================ */

:root {
  --signal-red: #F25151;
  --signal-blue: #DCCC55;
}

/* Nav identity mark: same Barrigón, translated for the screen */
.brand-screen-mark {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
}
.brand-screen-mark::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transform: scale(.86);
  transition: transform .45s var(--ease), opacity .45s;
  opacity: .5;
}
.brand:hover .brand-screen-mark::after { transform: scale(1.2); opacity: 0; }
.brand-screen-mark img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.14));
}

/* Hero depth scene */
.hero-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1100px;
  overflow: hidden;
}
.hero-perspective-grid {
  position: absolute;
  width: 130%;
  height: 74%;
  left: -15%;
  bottom: -42%;
  transform: perspective(700px) rotateX(69deg) translateZ(-30px);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .2;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 72%);
  animation: gridDrift 10s linear infinite;
}
@keyframes gridDrift { to { background-position: 0 68px, 68px 0; } }

.hero-mark-stack {
  position: absolute;
  right: clamp(-40px, 2vw, 40px);
  top: 17%;
  width: clamp(260px, 32vw, 570px);
  aspect-ratio: 1.02;
  transform-style: preserve-3d;
  opacity: .22;
  mix-blend-mode: screen;
  will-change: transform;
}
.hero-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255,255,255,.16));
}
.hero-mark.chroma-r {
  opacity: .38;
  filter: sepia(1) saturate(18) hue-rotate(324deg) brightness(1.45);
  transform: translate3d(7px,1px,-18px);
  mix-blend-mode: screen;
}
.hero-mark.chroma-b {
  opacity: .34;
  filter: sepia(1) saturate(13) hue-rotate(145deg) brightness(1.6);
  transform: translate3d(-7px,-1px,-10px);
  mix-blend-mode: screen;
}
.hero-mark.mark-main { transform: translateZ(18px); }

.hero-orb {
  --orb-size: clamp(112px, 14vw, 220px);
  position: absolute;
  width: var(--orb-size);
  height: var(--orb-size);
  left: 58%;
  top: 47%;
  transform-style: preserve-3d;
  animation: orbFloat 7s ease-in-out infinite;
  opacity: .42;
}
.orb-core {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,.05) 18%, rgba(255,255,255,.02) 45%, rgba(0,0,0,.55) 76%),
    linear-gradient(135deg, rgba(255,45,45,.28), rgba(90,215,255,.28));
  box-shadow: inset -18px -14px 30px rgba(0,0,0,.65), 0 0 38px rgba(255,255,255,.08);
  filter: blur(.2px);
}
.orb-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 0 18px rgba(255,255,255,.06);
}
.ring-a { transform: rotateX(67deg) rotateZ(7deg); animation: ringSpinA 6s linear infinite; }
.ring-b { transform: rotateY(67deg) rotateZ(35deg); animation: ringSpinB 9s linear infinite reverse; }
.ring-c { inset: 0; border-color: rgba(255,255,255,.13); transform: rotateX(42deg) rotateY(62deg); animation: ringSpinA 14s linear infinite reverse; }
@keyframes ringSpinA { to { transform: rotateX(67deg) rotateZ(367deg); } }
@keyframes ringSpinB { to { transform: rotateY(67deg) rotateZ(395deg); } }
@keyframes orbFloat {
  0%,100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -18px; rotate: 5deg; }
}

.hero.hero-glitch .brand-giant { position: relative; z-index: 5; }
.glitch-word::before,
.glitch-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  color: #fff;
}
.glitch-word.is-glitching::before {
  opacity: .75;
  color: var(--signal-red);
  mix-blend-mode: screen;
  animation: wordGlitchA .25s steps(2) 1;
}
.glitch-word.is-glitching::after {
  opacity: .65;
  color: var(--signal-blue);
  mix-blend-mode: screen;
  animation: wordGlitchB .25s steps(2) 1;
}
@keyframes wordGlitchA {
  0% { clip-path: inset(8% 0 68% 0); transform: translate(8px,-2px); }
  33% { clip-path: inset(58% 0 14% 0); transform: translate(-12px,1px); }
  66% { clip-path: inset(27% 0 44% 0); transform: translate(5px,2px); }
  100% { clip-path: inset(0); transform: none; opacity: 0; }
}
@keyframes wordGlitchB {
  0% { clip-path: inset(75% 0 4% 0); transform: translate(-9px,2px); }
  40% { clip-path: inset(22% 0 55% 0); transform: translate(11px,-1px); }
  80% { clip-path: inset(47% 0 28% 0); transform: translate(-5px,1px); }
  100% { clip-path: inset(0); transform: none; opacity: 0; }
}

.brand-negative{position:relative;display:inline-block;isolation:isolate;cursor:default}
.brand-negative .brand-label{position:relative;z-index:2;display:inline-block}
.brand-negative .negative-spotlight{position:absolute;inset:-10% -2%;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:difference;filter:blur(8px);background:radial-gradient(circle clamp(72px,9vw,132px) at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.98) 0,rgba(255,255,255,.98) 18%,rgba(255,255,255,.7) 29%,rgba(255,255,255,0) 48%);transition:opacity .18s ease}
.brand-negative.is-hovered .negative-spotlight{opacity:.98}

/* Digital Barrigón identity object */
.origin-mark {
  position: relative;
  background: #050505;
  border: 1px solid var(--line);
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
  min-height: 540px;
}
.origin-holo-grid {
  position: absolute;
  inset: -35%;
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: rotate(8deg) scale(1.05);
  opacity: .38;
  animation: holoGrid 14s linear infinite;
}
@keyframes holoGrid { to { background-position: 36px 36px, -36px 36px; } }
.origin-holo {
  position: absolute;
  width: 76%;
  max-width: 470px;
  aspect-ratio: 1.03;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .15s linear;
  will-change: transform;
}
.origin-holo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.origin-holo .holo-main {
  transform: translateZ(34px);
  filter: drop-shadow(0 0 22px rgba(255,255,255,.18));
}
.origin-holo .holo-r {
  transform: translate3d(9px,2px,4px);
  opacity: .52;
  filter: sepia(1) saturate(18) hue-rotate(320deg) brightness(1.55);
  mix-blend-mode: screen;
}
.origin-holo .holo-b {
  transform: translate3d(-9px,-2px,12px);
  opacity: .48;
  filter: sepia(1) saturate(14) hue-rotate(145deg) brightness(1.7);
  mix-blend-mode: screen;
}
.origin-mark::after {
  content: '';
  position: absolute;
  left: -20%; right: -20%; height: 2px;
  top: var(--scan-y, 18%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  box-shadow: 0 0 20px rgba(255,255,255,.24);
  animation: originScan 4.2s linear infinite;
  opacity: .72;
}
@keyframes originScan { 0% { top: 4%; } 100% { top: 96%; } }
.origin-tech {
  position: absolute;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  z-index: 4;
}
.origin-tech.top { top: 14px; }
.origin-tech.bottom { top: auto; bottom: 14px; }

/* Work index gets a floating 3D preview instead of generic cards */
.selected-work { position: relative; }
.project-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.project-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: -1;
  transition: width .55s var(--ease);
}
.project-row:hover { background: transparent; padding: 0 18px; }
.project-row:hover::before { width: 100%; }
.project-row .project-name { transition: transform .55s var(--ease), letter-spacing .55s var(--ease); }
.project-row:hover .project-name { transform: translateX(12px); letter-spacing: -.07em; }
.project-preview {
  --preview-x: -999px;
  --preview-y: -999px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: min(410px, 34vw);
  aspect-ratio: 1.38;
  pointer-events: none;
  transform: translate3d(var(--preview-x), var(--preview-y), 0) translate(-50%,-50%) scale(var(--preview-scale,.82)) rotateX(var(--preview-rx,0deg)) rotateY(var(--preview-ry,0deg));
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity .22s, scale .4s var(--ease);
  perspective: 900px;
}
.project-preview.show { opacity: 1; --preview-scale: 1; }
.project-preview { will-change: transform, opacity; }
html.is-safari .project-preview {
  transform: translate3d(var(--preview-x), var(--preview-y), 0) translate(-50%,-50%) scale(var(--preview-scale,.82));
  transform-style: flat;
  perspective: none;
}
html.is-safari .project-preview-surface {
  transform: none;
  box-shadow: 0 22px 58px rgba(0,0,0,.42);
}
.project-preview-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e8e8e8;
  color: #080808;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 34px 90px rgba(0,0,0,.48);
  transform: translateZ(34px);
}
.preview-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(0,0,0,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.14) 1px, transparent 1px);
  background-size: 24px 24px;
}
.preview-shape {
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  right: -18%;
  top: -24%;
  border-radius: 50%;
  border: 38px solid rgba(0,0,0,.8);
  transform: rotate(28deg);
  transition: border-radius .4s var(--ease), transform .5s var(--ease), background .4s;
}
.preview-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 14px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
}
.project-preview strong {
  position: absolute;
  left: 16px;
  bottom: 10px;
  max-width: 90%;
  font-size: clamp(34px,4.4vw,70px);
  line-height: .8;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.project-preview[data-theme="pissa"] .project-preview-surface { background: #0d2950; color: #d7edff; }
.project-preview[data-theme="pissa"] .preview-grid { background-image: linear-gradient(rgba(215,237,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(215,237,255,.13) 1px, transparent 1px); }
.project-preview[data-theme="pissa"] .preview-shape { border-color: #74b9ff; }
.project-preview[data-theme="yaucalli"] .project-preview-surface { background: #b9d970; color: #102c17; }
.project-preview[data-theme="yaucalli"] .preview-shape { border-color: rgba(16,44,23,.9); border-radius: 38% 62% 53% 47%; }
.project-preview[data-theme="asetam"] .project-preview-surface { background: #111; color: #f2f2f2; }
.project-preview[data-theme="asetam"] .preview-grid { background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); }
.project-preview[data-theme="asetam"] .preview-shape { border-color: #fff; border-width: 1px; border-radius: 0; transform: rotate(45deg) scale(.72); }
.project-preview[data-theme="automotive"] .project-preview-surface { background: #d8d8d4; color: #151515; }
.project-preview[data-theme="automotive"] .preview-shape { border-color: #1a1a1a; border-width: 20px; transform: rotate(14deg) scale(.86); }

.motion-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0 12px;
  background: #fff;
  color: #000;
}
.motion-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 28px;
  font-size: clamp(18px, 2.15vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
  animation: motionMarquee 25s linear infinite;
}
.motion-marquee-track i { font-style: normal; font-size: .65em; }
@keyframes motionMarquee { to { transform: translateX(-50%); } }

/* Service rows feel like live interfaces */
.service-row { position: relative; isolation: isolate; overflow: hidden; }
.service-row::after {
  content: '';
  position: absolute;
  left: -12%;
  top: -60%;
  width: 124%;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.055), transparent);
  transform: rotate(-2deg);
  transition: top .8s var(--ease);
  pointer-events: none;
}
.service-row:hover::after { top: 115%; }
.service-row .name { transition: transform .5s var(--ease); }
.service-row:hover .name { transform: translate3d(12px,0,0); }

/* Kinetic headings: JS only changes a CSS variable */
[data-kinetic] {
  transform: translate3d(var(--kinetic-x,0px),0,0);
  will-change: transform;
}

/* Magnetic buttons / CTA */
.btn,.float-cta,.player {
  will-change: transform;
}

/* subtle depth on photo */
.statement-img { perspective: 1000px; }
.statement-img img { transition: transform .7s var(--ease), filter .7s; transform-origin: center; }
.statement-img:hover img { transform: rotateX(2deg) rotateY(-3deg) scale(1.025); }

.bottom-brand img {
  object-fit: contain;
  border-radius: 0;
  opacity: .86;
}

@media (max-width: 900px) {
  .hero-mark-stack { width: min(56vw,440px); right: -8vw; top: 26%; opacity: .17; }
  .hero-orb { left: auto; right: 8%; top: 52%; }
  .project-preview { display: none; }
  .origin-mark { min-height: 440px; }
}
@media (max-width: 640px) {
  .brand-screen-mark { width: 21px; height: 21px; }
  .brand-screen-mark img { width: 21px; height: 21px; }
  .hero-mark-stack { top: 32%; width: 66vw; opacity: .14; }
  .hero-orb { --orb-size: 92px; right: 4%; top: 49%; }
  .hero-perspective-grid { opacity: .12; }
  .origin-mark { min-height: 350px; }
  .origin-holo { width: 78%; }
  .motion-marquee-track { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-perspective-grid,.hero-orb,.orb-ring,.origin-holo-grid,.origin-mark::after,.motion-marquee-track { animation: none !important; }
  [data-kinetic],.hero-mark-stack,.origin-holo { transform: none !important; }
}


/* V7 hero cleanup: remove floating logo from hero */
.hero-mark-stack{display:none !important;}


/* V7 identity mark: normal sketch, less cyberpunk, more hand-drawn */
.origin-mark {
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)),
    #060606;
}
.origin-holo-grid {
  inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: none;
  opacity: .16;
  animation: holoGrid 22s linear infinite;
}
.origin-sketch-wrap {
  width: 72%;
  max-width: 460px;
}
.origin-holo img {
  filter: none;
}
.origin-holo .sketch-main {
  transform: translateZ(18px);
  opacity: .96;
  filter: drop-shadow(0 8px 22px rgba(255,255,255,.08));
  animation: sketchFloat 5.5s ease-in-out infinite;
}
.origin-holo .holo-echo {
  opacity: .14;
  mix-blend-mode: normal;
  filter: blur(.2px);
}
.origin-holo .echo-a {
  transform: translate3d(-8px, 4px, 2px) rotate(-2.2deg);
  animation: sketchEchoA 4.8s ease-in-out infinite;
}
.origin-holo .echo-b {
  transform: translate3d(7px, -3px, 1px) rotate(1.8deg);
  animation: sketchEchoB 5.6s ease-in-out infinite;
}
.origin-mark::after {
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  box-shadow: none;
  opacity: .28;
  animation: originScan 7.5s linear infinite;
}
.origin-tech {
  color: rgba(255,255,255,.36);
}
@keyframes sketchFloat {
  0%,100% { transform: translateZ(18px) translateY(0px) rotate(-1.2deg); }
  50% { transform: translateZ(18px) translateY(-10px) rotate(1.2deg); }
}
@keyframes sketchEchoA {
  0%,100% { transform: translate3d(-8px, 4px, 2px) rotate(-2.2deg); opacity: .10; }
  50% { transform: translate3d(-12px, 0px, 2px) rotate(-3deg); opacity: .16; }
}
@keyframes sketchEchoB {
  0%,100% { transform: translate3d(7px, -3px, 1px) rotate(1.8deg); opacity: .11; }
  50% { transform: translate3d(11px, -6px, 1px) rotate(2.8deg); opacity: .17; }
}

.hero-mark-stack,.hero-mark{display:none !important;}


/* V8 refinements: sketch identity, no cyberpunk */
.origin-mark {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.045), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
    #050505;
}
.origin-holo {
  width: 70%;
  max-width: 430px;
}
.origin-holo .sketch-main {
  opacity: .98;
  filter: grayscale(1) brightness(1.04) contrast(1.02) drop-shadow(0 8px 18px rgba(255,255,255,.06));
  animation: sketchFloatSoft 6.2s ease-in-out infinite, sketchJitter 7.5s steps(2) infinite;
}
.origin-holo .holo-echo {
  opacity: .08;
  filter: grayscale(1) brightness(.95);
}
.origin-holo .echo-a {
  transform: translate3d(-6px, 3px, 1px) rotate(-1.2deg);
  animation: sketchEchoSoftA 6.8s ease-in-out infinite;
}
.origin-holo .echo-b {
  transform: translate3d(5px, -2px, 1px) rotate(.9deg);
  animation: sketchEchoSoftB 7.2s ease-in-out infinite;
}
.origin-holo-grid {
  opacity: .09;
  background-size: 60px 60px;
}
.origin-mark::after {
  opacity: .18;
  animation: originScan 10s linear infinite;
}
.origin-tech {
  color: rgba(255,255,255,.28);
}
@keyframes sketchFloatSoft {
  0%,100% { transform: translateZ(14px) translateY(0px) rotate(-.8deg); }
  50% { transform: translateZ(14px) translateY(-8px) rotate(.8deg); }
}
@keyframes sketchJitter {
  0%,100% { filter: grayscale(1) brightness(1.04) contrast(1.02) drop-shadow(0 8px 18px rgba(255,255,255,.06)); }
  48% { filter: grayscale(1) brightness(1.02) contrast(1.01) drop-shadow(0 8px 18px rgba(255,255,255,.05)); }
  50% { filter: grayscale(1) brightness(1.08) contrast(1.04) drop-shadow(0 8px 18px rgba(255,255,255,.08)); }
  52% { filter: grayscale(1) brightness(1.03) contrast(1.01) drop-shadow(0 8px 18px rgba(255,255,255,.05)); }
}
@keyframes sketchEchoSoftA {
  0%,100% { transform: translate3d(-6px, 3px, 1px) rotate(-1.2deg); opacity:.07; }
  50% { transform: translate3d(-9px, 0px, 1px) rotate(-1.8deg); opacity:.11; }
}
@keyframes sketchEchoSoftB {
  0%,100% { transform: translate3d(5px, -2px, 1px) rotate(.9deg); opacity:.07; }
  50% { transform: translate3d(8px, -5px, 1px) rotate(1.5deg); opacity:.11; }
}


/* V9: remove hero atom/orb */
.hero-orb,.orb-core,.orb-ring{display:none !important;}


/* V9: identity mark uses transparent sketch PNG only */
.origin-holo {
  width: 68%;
  max-width: 420px;
}
.origin-holo .sketch-main {
  opacity: 1;
  filter: grayscale(1) brightness(1.02) contrast(1.04) drop-shadow(0 10px 18px rgba(255,255,255,.05));
  animation: sketchFloatSoft 6.2s ease-in-out infinite;
}
.origin-holo .holo-echo,
.origin-holo .echo-a,
.origin-holo .echo-b {
  display:none !important;
}
.origin-mark {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.035), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0)),
    #050505;
}
.origin-holo-grid {
  opacity: .07;
}


/* ============================================================
   V11 — INTRO SIGNAL + LOCAL AUDIO + PHOSPHOR BURN TRAIL
   ============================================================ */

body.intro-active { overflow: hidden !important; }
#barrigon-audio { display:none; }

.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: #030303;
  color: #f4f4f0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px,2.1vw,34px);
  cursor: none;
  isolation: isolate;
  transition: visibility 0s linear 1s;
}
.intro-loader::before {
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.025) 46%, transparent 58%);
  transform: scale(1.08);
  animation: loaderBreath 4.8s ease-in-out infinite alternate;
  pointer-events:none;
}
.intro-loader.is-leaving {
  pointer-events:none;
  animation: loaderExit 1s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes loaderExit {
  0% { clip-path: inset(0 0 0 0); filter: blur(0); }
  42% { clip-path: inset(0 0 0 0); filter: blur(1.5px); }
  100% { clip-path: inset(50% 0 50% 0); filter: blur(10px); visibility:hidden; }
}
@keyframes loaderBreath {
  to { transform: scale(1.12) translate3d(1.5%,-1%,0); opacity:.72; }
}
.intro-loader-top,
.intro-loader-bottom {
  position:relative;
  z-index:4;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.intro-loader-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.52);
}
.intro-loader-center {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  min-height:0;
}
.loader-logo-wrap {
  position:relative;
  width:min(64vw, 560px);
  display:grid;
  place-items:center;
}
.loader-logo {
  grid-area:1/1;
  display:block;
  width:100%;
  height:auto;
  max-height:240px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.96;
  animation: loaderLogoPulse 3.8s ease-in-out infinite;
}
.loader-logo.ghost {
  opacity:.12;
  pointer-events:none;
  animation: loaderGhost 3.1s steps(2,end) infinite;
}
.loader-logo.ghost-a { transform:translate3d(-5px,1px,0); clip-path:inset(10% 0 54% 0); }
.loader-logo.ghost-b { transform:translate3d(5px,-1px,0); clip-path:inset(56% 0 14% 0); animation-delay:-1.2s; }
@keyframes loaderLogoPulse {
  0%,100% { opacity:.94; transform:scale(1); }
  50% { opacity:1; transform:scale(1.01); }
}
@keyframes loaderGhost {
  0%,88%,100% { translate:0 0; opacity:.08; }
  89% { translate:12px -2px; opacity:.2; }
  91% { translate:-8px 1px; opacity:.16; }
  93% { translate:3px 0; opacity:.08; }
}
.loader-audio-label {
  margin:clamp(22px,3vw,42px) 0 0;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.38);
}
.intro-loader-bottom {
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(180px,36vw) 48px;
  gap:18px;
  align-items:center;
  color:rgba(255,255,255,.58);
}
.loader-progress-track {
  position:relative;
  height:1px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}
.loader-progress-track i {
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.5);
}
.loader-progress { text-align:right; font-variant-numeric:tabular-nums; }
.loader-enter {
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(62px,9vh,112px);
  transform:translateX(-50%) translateY(8px);
  border:1px solid rgba(255,255,255,.38);
  color:#fff;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:12px 17px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s, transform .35s, border-color .25s, background .25s;
}
.intro-loader.needs-interaction .loader-enter {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.loader-enter:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.intro-loader-noise {
  position:absolute;
  inset:-60%;
  width:220%;
  height:220%;
  z-index:1;
  opacity:.12;
  pointer-events:none;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.96' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: introNoise .18s steps(2) infinite;
}
@keyframes introNoise {
  0% { transform:translate3d(-3%,2%,0); }
  25% { transform:translate3d(2%,-4%,0); }
  50% { transform:translate3d(4%,3%,0); }
  75% { transform:translate3d(-4%,-2%,0); }
  100% { transform:translate3d(1%,4%,0); }
}
.intro-loader-scan {
  position:absolute;
  z-index:2;
  left:-10%;
  right:-10%;
  height:12vh;
  top:-15vh;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035),rgba(255,255,255,.08),rgba(255,255,255,.025),transparent);
  filter:blur(5px);
  opacity:.7;
  animation:introScan 4.8s linear infinite;
  pointer-events:none;
}
@keyframes introScan { to { transform:translateY(125vh); } }

.phosphor-burn-canvas {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:200001;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.82;
  filter:blur(.25px);
}

.player .player-info .title { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player.audio-blocked::after {
  content:'CLICK PLAY';
  font-family:'JetBrains Mono',monospace;
  font-size:7px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.45);
  margin-left:4px;
}

@media (max-width:720px) {
  .intro-loader { padding:18px 14px; }
  .intro-loader-top span:last-child { display:none; }
  .loader-title { font-size:clamp(58px,19vw,104px); letter-spacing:-.065em; }
  .intro-loader-bottom { grid-template-columns:1fr 38px; }
  .loader-progress-track { grid-column:1/-1; grid-row:1; }
  .loader-status { grid-column:1; grid-row:2; }
  .loader-progress { grid-column:2; grid-row:2; }
  .loader-enter { bottom:84px; }
}
@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .phosphor-burn-canvas { display:none; }
  .loader-title,.loader-title.ghost,.intro-loader-noise,.intro-loader-scan { animation:none !important; }
}

/* ============================================================
   V12 — REACTIVE PHOSPHOR / VIDEO DISTORTION / TEXT BURN
   ============================================================ */

/* The cloned hero video layers act like a local CRT distortion lens. */
.hero-distort-layer {
  --fx-x: 50%;
  --fx-y: 50%;
  --fx-radius: 0px;
  --fx-opacity: 0;
  --fx-dx: 0px;
  --fx-dy: 0px;
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  pointer-events: none;
  opacity: var(--fx-opacity);
  clip-path: circle(var(--fx-radius) at var(--fx-x) var(--fx-y));
  -webkit-clip-path: circle(var(--fx-radius) at var(--fx-x) var(--fx-y));
  will-change: opacity, clip-path, transform, filter;
  z-index: 1;
}
.hero-distort-layer.lens {
  filter: contrast(1.45) saturate(.62) brightness(.73) blur(.35px);
  mix-blend-mode: screen;
  transform: scale(1.085) translate3d(var(--fx-dx), var(--fx-dy), 0);
}
.hero-distort-layer.red {
  filter: grayscale(1) sepia(1) saturate(14) hue-rotate(312deg) contrast(1.55) brightness(.78) blur(.45px);
  mix-blend-mode: screen;
  transform: scale(1.075) translate3d(calc(var(--fx-dx) + 7px), calc(var(--fx-dy) + 1px), 0);
}
.hero-distort-layer.cyan {
  filter: grayscale(1) sepia(1) saturate(13) hue-rotate(135deg) contrast(1.55) brightness(.82) blur(.45px);
  mix-blend-mode: screen;
  transform: scale(1.075) translate3d(calc(var(--fx-dx) - 7px), calc(var(--fx-dy) - 1px), 0);
}
.hero-media.fx-impact .hero-video {
  filter: contrast(1.27) saturate(.68) brightness(.6) blur(1.3px) grayscale(.08);
}

/* A brief horizontal tearing line at higher pointer velocities. */
.hero-pointer-tear {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(1px, .18vw, 3px);
  top: var(--tear-y, 50%);
  opacity: var(--tear-opacity, 0);
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(90deg, transparent 0 4%, rgba(255,255,255,.6) 18%, rgba(255,45,92,.38) 48%, rgba(0,212,255,.4) 72%, transparent 96%);
  filter: blur(.25px);
  mix-blend-mode: screen;
  transform: translateX(var(--tear-x, 0px)) scaleX(1.08);
  will-change: opacity, top, transform;
}

/* Text remembers the cursor for a moment like a phosphor display. */
.text-burn-hit {
  --burn-offset: 5px;
  --burn-alpha: .5;
  animation: barrigonTextBurn 1.72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes barrigonTextBurn {
  0% {
    text-shadow:
      calc(var(--burn-offset) * -1) 0 rgba(255,40,82,var(--burn-alpha)),
      var(--burn-offset) 0 rgba(0,210,255,var(--burn-alpha)),
      0 0 10px rgba(255,255,255,.4);
    filter: brightness(1.55) contrast(1.16);
  }
  9% {
    text-shadow:
      calc(var(--burn-offset) * -.72) 1px rgba(255,40,82,calc(var(--burn-alpha) * .92)),
      calc(var(--burn-offset) * .78) -1px rgba(0,210,255,calc(var(--burn-alpha) * .9)),
      0 0 13px rgba(255,255,255,.28);
    filter: brightness(1.38) contrast(1.11);
  }
  34% {
    text-shadow:
      calc(var(--burn-offset) * -.34) 0 rgba(255,40,82,calc(var(--burn-alpha) * .5)),
      calc(var(--burn-offset) * .36) 0 rgba(0,210,255,calc(var(--burn-alpha) * .48)),
      0 0 8px rgba(255,255,255,.13);
    filter: brightness(1.16) contrast(1.05);
  }
  100% {
    text-shadow: 0 0 0 rgba(0,0,0,0);
    filter: none;
  }
}

/* More apparent color persistence only while the mouse is moving quickly. */
.phosphor-burn-canvas {
  transition: filter .16s ease, opacity .16s ease;
}
body.pointer-fast .phosphor-burn-canvas {
  filter: blur(.32px) saturate(1.32);
  opacity: .94;
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .hero-distort-layer,
  .hero-pointer-tear { display:none !important; }
  .text-burn-hit { animation:none !important; }
}


/* ============================================================
   V13 — REAL WORK / LIVE PROJECT SHOWCASES
   ============================================================ */
.preview-live-image {
  position:absolute;
  inset:-5%;
  width:110%;
  height:110%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.08) brightness(.72);
  transform:scale(1.04);
  transition:filter .35s ease, transform .7s var(--ease), opacity .25s;
}
.preview-image-scrim {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.16) 45%,rgba(0,0,0,.78) 100%);
  z-index:1;
}
.project-preview .preview-grid { z-index:2; opacity:.13; mix-blend-mode:screen; }
.project-preview .preview-meta,.project-preview strong { z-index:3; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.project-preview .preview-shape { display:none!important; }
.project-preview[data-theme="pissa"] .project-preview-surface,
.project-preview[data-theme="yaucalli"] .project-preview-surface,
.project-preview[data-theme="asetam"] .project-preview-surface { background:#080808; color:#fff; }
.project-preview.show .preview-live-image { transform:scale(1.0); }

.work-cases {
  border-top:1px solid var(--line);
  background:#060606;
}
.work-case {
  position:relative;
  padding:clamp(90px,10vw,160px) 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.work-case::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.work-case-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.35fr);
  gap:clamp(38px,6vw,94px);
  align-items:center;
}
.work-case-grid-reverse .work-case-copy { order:2; }
.work-case-grid-reverse .work-case-media { order:1; }
.work-case-copy { max-width:560px; }
.work-case-meta {
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:34px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.work-case-copy h3 {
  margin:0 0 30px;
  font-size:clamp(56px,6vw,104px);
  line-height:.84;
  letter-spacing:-.07em;
  font-weight:500;
  color:#fff;
}
.work-case-copy h3 em { font-style:italic; font-weight:300; color:rgba(255,255,255,.58); }
.work-case-copy p {
  margin:0;
  max-width:46em;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.5;
  color:rgba(255,255,255,.7);
}
.work-case-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:30px 0 34px;
}
.work-case-tags span {
  padding:8px 11px 7px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.work-live-link {
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.55);
  padding-bottom:5px;
  transition:opacity .25s, transform .35s var(--ease);
}
.work-live-link:hover { transform:translateX(7px); opacity:.7; }
.work-case-media {
  --case-rx:0deg;
  --case-ry:0deg;
  --case-tx:0px;
  --case-ty:0px;
  position:relative;
  min-height:clamp(430px,55vw,740px);
  border:1px solid rgba(255,255,255,.2);
  overflow:hidden;
  background:#0b0b0b;
  transform:perspective(1400px) rotateX(var(--case-rx)) rotateY(var(--case-ry)) translate3d(var(--case-tx),var(--case-ty),0);
  transform-style:preserve-3d;
  transition:transform .18s linear;
}
.case-browser-bar {
  position:absolute;
  left:0; right:0; top:0;
  z-index:6;
  height:36px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(5,5,5,.68);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.case-image-wrap {
  position:absolute;
  inset:36px 0 0;
  overflow:hidden;
  background:#111;
}
.case-main-image {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.86) contrast(1.07);
  transform:scale(1.025) translate3d(var(--image-x,0px),var(--image-y,0px),0);
  transition:filter .6s var(--ease), transform .22s linear;
}
.work-case-media:hover .case-main-image { filter:saturate(1) contrast(1.02); }
.case-secondary-image {
  inset:auto 4% 4% auto;
  width:38%;
  height:44%;
  z-index:4;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 25px 70px rgba(0,0,0,.45);
  transform:translateZ(48px) rotate(2.5deg);
}
.work-case-yaucalli .case-secondary-image { width:42%; height:48%; transform:translateZ(48px) rotate(-2deg); }
.case-fallback-icon {
  position:absolute;
  right:5%;
  bottom:5%;
  z-index:3;
  width:min(210px,25%);
  opacity:.82;
  filter:drop-shadow(0 16px 35px rgba(0,0,0,.35));
}
.case-signal {
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:4;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.1em;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.case-pissa-image::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(8,21,40,.1),rgba(5,10,16,.18) 55%,rgba(0,0,0,.62));
  pointer-events:none;
}
.work-case-asetam { background:linear-gradient(180deg,#060606,#081008 48%,#060606); }
.work-case-yaucalli { background:linear-gradient(180deg,#060606,#061014 50%,#060606); }

@media (max-width: 980px) {
  .work-case-grid,.work-case-grid-reverse { grid-template-columns:1fr; }
  .work-case-grid-reverse .work-case-copy,.work-case-grid-reverse .work-case-media { order:initial; }
  .work-case-copy { max-width:680px; }
  .work-case-media { min-height:62vw; }
}
@media (max-width: 640px) {
  .work-case { padding:80px 0; }
  .work-case-meta { flex-direction:column; gap:4px; }
  .work-case-copy h3 { font-size:15vw; }
  .work-case-media { min-height:85vw; }
  .case-secondary-image { width:48%; height:42%; }
  .case-fallback-icon { width:28%; }
}

/* ============================================================
   BARRIGÓN V14 — DEDICATED WORK / CASE STUDY SYSTEM
   ============================================================ */
.selected-work-cta{display:flex;justify-content:flex-end;padding-top:28px;padding-bottom:110px}
.work-all-link{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.35);padding:8px 0;color:#fff}
.work-all-link span{display:inline-block;margin-left:18px;transition:transform .35s var(--ease)}
.work-all-link:hover span{transform:translate(6px,-4px)}

.work-page-v14,.case-page-v14{background:#050505;color:#fff}
.work-page-v14 .nav,.case-page-v14 .nav{background:rgba(5,5,5,.72)}
.work-hero-v14{position:relative;min-height:96svh;display:flex;align-items:flex-end;overflow:hidden;background:#050505;padding-top:120px}
.work-hero-noise{position:absolute;inset:-30%;opacity:.11;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:barrigonNoise .3s steps(2) infinite}
.work-hero-inner{position:relative;width:100%;padding-bottom:32px}
.work-hero-kicker{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:10px}
.work-hero-title{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(110px,24vw,390px);line-height:.7;letter-spacing:-.09em;margin:9vh 0 8vh;white-space:nowrap;color:#fff;font-weight:600}
.work-hero-title span{font-size:.18em;vertical-align:top;margin-left:.02em;font-family:'JetBrains Mono',monospace;font-weight:400}
.work-hero-bottom{display:grid;grid-template-columns:1.4fr .6fr;gap:30px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.work-hero-bottom p{max-width:58ch;margin:0;color:rgba(255,255,255,.62)}
.work-hero-bottom a{text-align:right;color:#fff}

.work-project{padding:150px 0 170px;border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden}
.work-project-head{display:grid;grid-template-columns:60px 1.5fr 1fr;gap:22px;align-items:end;margin-bottom:26px}
.work-project-index,.work-project-client,.work-project-meta{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.work-project-head h2{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(70px,10vw,170px);line-height:.76;letter-spacing:-.075em;margin:8px 0 0;color:#fff}
.work-project-meta{justify-self:end;text-align:right;display:flex;flex-direction:column;gap:5px}
.work-project-stage{position:relative;min-height:min(72vw,840px);display:block;overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.16);isolation:isolate;transform-style:preserve-3d;perspective:1400px}
.work-project-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 35%,rgba(0,0,0,.24));pointer-events:none;z-index:8}
.stage-browser{position:absolute;z-index:9;left:0;right:0;top:0;height:38px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.stage-cursor-label{position:absolute;z-index:10;right:18px;bottom:18px;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}
.work-project-foot{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;margin-top:20px;align-items:start}
.work-project-foot p{margin:0;max-width:58ch;color:rgba(255,255,255,.65);font-size:14px;line-height:1.5}
.work-project-actions{justify-self:end;display:flex;gap:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.work-project-actions a{border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:4px}

.pissa-stage{background:radial-gradient(circle at 70% 42%,rgba(48,89,146,.25),transparent 32%),linear-gradient(145deg,#07131e,#020406 72%);color:#dfefff}
.pissa-stage-bg{position:absolute;inset:-18%;background:repeating-radial-gradient(ellipse at 69% 48%,transparent 0 44px,rgba(128,190,255,.13) 45px 46px),linear-gradient(90deg,transparent 49.8%,rgba(120,190,255,.11) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(120,190,255,.11) 50%,transparent 50.2%);transform:rotate(-8deg);transition:transform 1.4s var(--ease)}
.pissa-stage:hover .pissa-stage-bg{transform:rotate(-4deg) scale(1.06)}
.pissa-icon-floating{position:absolute;z-index:4;width:clamp(170px,27vw,440px);left:8%;top:19%;filter:brightness(0) invert(1);opacity:.78;transition:transform .9s var(--ease),opacity .9s}
.pissa-stage:hover .pissa-icon-floating{transform:translate3d(30px,-16px,70px) rotate(-4deg);opacity:.96}
.stage-copy{position:absolute;z-index:5;left:7%;bottom:9%;display:flex;flex-direction:column;gap:18px}
.stage-copy span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgba(210,235,255,.55)}
.stage-copy strong{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(46px,7vw,116px);line-height:.82;letter-spacing:-.065em;font-weight:500}

.asetam-stage{background:#b6b4aa;min-height:min(75vw,900px)}
.asetam-screen{position:absolute;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.28);transition:transform .9s var(--ease)}
.asetam-screen img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.03)}
.asetam-screen.screen-main{left:8%;top:9%;width:43%;height:80%;transform:rotate(-3deg)}
.asetam-screen.screen-main img{object-position:top}
.asetam-screen.screen-field{right:7%;top:19%;width:45%;height:59%;transform:rotate(4deg)}
.asetam-stage:hover .screen-main{transform:rotate(-5deg) translate(-14px,-16px)}
.asetam-stage:hover .screen-field{transform:rotate(1deg) translate(18px,12px)}
.asetam-type{position:absolute;z-index:4;right:5%;bottom:6%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;color:#111}

.yau-stage{background:#171d14;min-height:min(72vw,850px);color:#eff5d7}
.yau-landscape{position:absolute;inset:0;overflow:hidden}
.yau-landscape img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.64);transition:transform 1.4s var(--ease)}
.yau-stage:hover .yau-landscape img{transform:scale(1.045)}
.yau-field{position:absolute;z-index:5;width:28%;height:44%;right:7%;top:11%;border:1px solid rgba(255,255,255,.4);overflow:hidden;transform:rotate(3deg);transition:transform .9s var(--ease)}
.yau-field img{width:100%;height:100%;object-fit:cover}
.yau-stage:hover .yau-field{transform:rotate(-1deg) translateY(18px)}
.yau-word{position:absolute;z-index:4;left:5%;bottom:4%;font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(80px,14vw,220px);line-height:.56;letter-spacing:-.09em;color:rgba(244,255,220,.94)}
.yau-coordinates{position:absolute;z-index:5;left:6%;top:7%;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;color:rgba(255,255,255,.64)}

.work-next-v14{padding:120px 0 160px;background:#050505}
.work-next-inner{padding-top:100px;text-align:center}
.work-next-inner>span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.48)}
.work-next-inner h2{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(90px,16vw,230px);line-height:.68;letter-spacing:-.085em;margin:42px 0 72px;color:#fff}
.work-closing{padding-top:40px}

/* Case-study shell */
.case-hero-v14{min-height:90svh;display:flex;align-items:flex-end;padding:130px 0 54px;background:#050505}
.case-hero-meta{display:grid;grid-template-columns:1fr 1fr auto;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.case-hero-v14 h1{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(120px,24vw,390px);line-height:.67;letter-spacing:-.095em;margin:13vh 0 8vh;color:#fff}
.case-hero-statement{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(42px,6vw,92px);line-height:.87;letter-spacing:-.06em;margin:0;max-width:11ch;color:#fff}
.case-overview-v14{padding:110px 0;border-top:1px solid rgba(255,255,255,.12)}
.case-overview-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.case-overview-list{border-top:1px solid rgba(255,255,255,.22)}
.case-overview-list>div{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:12px}
.case-overview-list span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;color:rgba(255,255,255,.42)}
.case-overview-list strong,.case-overview-list a{font-weight:400;color:#fff}
.case-overview-copy{font-size:clamp(24px,3vw,48px);line-height:1.02;letter-spacing:-.035em;margin:0;color:rgba(255,255,255,.9)}
.case-visual-v14{position:relative;min-height:90svh;margin:0;overflow:hidden;background:radial-gradient(circle at 70% 42%,rgba(46,104,170,.35),transparent 28%),#06101a;display:grid;place-items:center}
.case-visual-grid{position:absolute;inset:-12%;background:repeating-radial-gradient(ellipse at 60% 50%,transparent 0 48px,rgba(140,200,255,.14) 49px 50px);transform:rotate(-7deg)}
.case-visual-v14 img{position:relative;z-index:2;width:min(36vw,520px);filter:brightness(0) invert(1);opacity:.9}
.case-visual-v14>span{position:absolute;left:4%;bottom:4%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.case-notes-v14{padding:130px 0}
.case-note{display:grid;grid-template-columns:150px 1.1fr .8fr;gap:28px;padding:38px 0 64px;border-top:1px solid rgba(255,255,255,.18);align-items:start}
.case-note>span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.42)}
.case-note h2{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(52px,7vw,110px);line-height:.8;letter-spacing:-.065em;margin:0;color:#fff}
.case-note h2 em{font-style:normal;color:rgba(255,255,255,.42)}
.case-note p{margin:4px 0 0;color:rgba(255,255,255,.62);line-height:1.5}
.case-next-v14{padding:40px 0 130px}
.case-next-link{display:flex;justify-content:space-between;align-items:flex-end;padding-top:70px}
.case-next-link span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.42)}
.case-next-link strong{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(76px,12vw,190px);line-height:.75;letter-spacing:-.075em;color:#fff;font-weight:500}

@media(max-width:900px){
  .work-hero-title{font-size:25vw;margin:12vh 0 9vh}.work-hero-bottom,.work-project-foot,.case-overview-grid{grid-template-columns:1fr}.work-hero-bottom a{text-align:left}.work-project{padding:100px 0}.work-project-head{grid-template-columns:38px 1fr}.work-project-meta{grid-column:2;justify-self:start;text-align:left}.work-project-stage{min-height:78svh}.work-project-actions{justify-self:start}.asetam-screen.screen-main{width:55%;height:74%;left:4%;top:11%}.asetam-screen.screen-field{width:48%;height:45%;right:3%;top:32%}.yau-field{width:42%;height:38%;right:5%;top:9%}.case-note{grid-template-columns:1fr}.case-note h2{margin:18px 0}.case-hero-v14 h1{font-size:28vw}.case-overview-grid{gap:42px}
}
@media(max-width:600px){
  .work-hero-kicker span:last-child{display:none}.work-project-head h2{font-size:20vw}.work-project-stage{min-height:68svh}.stage-copy strong{font-size:14vw}.pissa-icon-floating{width:48vw}.yau-word{font-size:22vw}.work-next-inner h2{font-size:24vw}.case-hero-meta{grid-template-columns:1fr auto}.case-hero-meta span:nth-child(2){display:none}.case-hero-statement{font-size:12vw}.case-overview-list>div{grid-template-columns:82px 1fr}.case-visual-v14 img{width:58vw}.case-next-link{flex-direction:column;align-items:flex-start;gap:36px}.case-next-link strong{font-size:20vw}
}

/* V14 live material refinements */
.pissa-live-image{position:absolute;inset:38px 0 0;width:100%;height:calc(100% - 38px);object-fit:cover;filter:saturate(.55) contrast(1.14) brightness(.42) hue-rotate(4deg);opacity:.7;transform:scale(1.09);transition:filter .8s var(--ease);will-change:transform}
.pissa-stage:hover .pissa-live-image{filter:saturate(.7) contrast(1.12) brightness(.48)}
.pissa-stage-bg{z-index:2;mix-blend-mode:screen;opacity:.72}
.pissa-icon-floating,.stage-copy{z-index:5}
.case-site-shot-v14{position:relative;margin:0;min-height:75svh;background:#090909;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.case-site-shot-v14 img{width:100%;height:75svh;object-fit:cover;display:block;filter:saturate(.72) contrast(1.05) brightness(.82)}
.case-site-shot-v14 .case-browser-bar{position:absolute;z-index:3;left:0;right:0;top:0;background:rgba(0,0,0,.5);backdrop-filter:blur(12px)}

.pissa-case-visual{background:linear-gradient(180deg,#07131f,#05090d);display:block;overflow:hidden}
.pissa-case-visual .case-visual-grid{display:none}
.pissa-case-landscape{position:absolute;inset:0;z-index:1}
.pissa-case-landscape img{width:100%;height:100%;object-fit:cover;object-position:center center;opacity:.42;filter:saturate(.72) contrast(1.08) brightness(.62)}
.pissa-case-visual::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(4,10,16,.82),rgba(4,10,16,.22) 52%,rgba(4,10,16,.66)),linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.22))}
.pissa-case-card{position:absolute;z-index:3;right:7%;top:50%;transform:translateY(-50%) rotate(2.5deg);width:min(32vw,420px);min-width:260px;transition:transform .9s var(--ease)}
.pissa-case-visual:hover .pissa-case-card{transform:translateY(-50%) rotate(-1deg) translateY(10px)}
.pissa-case-card-top{height:36px;display:flex;align-items:center;padding:0 14px;border:1px solid rgba(255,255,255,.26);border-bottom:none;background:rgba(8,14,21,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pissa-case-card-frame{position:relative;overflow:hidden;aspect-ratio:.95;border:1px solid rgba(255,255,255,.26);box-shadow:0 32px 70px rgba(0,0,0,.32)}
.pissa-case-card-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,16,.06),rgba(4,9,16,.55))}
.pissa-case-card-image{width:100%;height:100%;display:block;object-fit:cover;object-position:64% center;filter:saturate(.74) contrast(1.06) brightness(.74)}
.pissa-case-card-copy{position:absolute;left:14px;bottom:14px;z-index:2;display:grid;gap:8px}
.pissa-case-card-copy span{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.pissa-case-card-copy strong{font-size:clamp(22px,2vw,32px);line-height:.96;letter-spacing:-.04em;color:#f7fbff}
.pissa-case-card-mark{position:absolute;right:14px;top:14px;z-index:2;width:78px;filter:brightness(0) invert(1);opacity:.92}

/* ============================================================
   V15 — ES / EN LANGUAGE SWITCH
   ============================================================ */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  width: max-content;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(255,255,255,.34);
  text-transform: uppercase;
}
.language-switch button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.34);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color .25s ease, opacity .25s ease;
}
.language-switch button:hover { color: rgba(255,255,255,.72); }
.language-switch button.active { color: #fff; }
.language-switch span { opacity: .45; }
@media (max-width: 720px) {
  .language-switch { margin-top: 4px; font-size: 8px; }
}


/* ---------- V16: Basquiat-style hover doodles on portrait ---------- */
.statement-img {
  isolation: isolate;
}
.statement-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.08), transparent 26%), linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
  opacity: .45;
  z-index: 1;
  pointer-events: none;
}
.statement-img img {
  position: relative;
  z-index: 1;
}
.statement-scratch-overlay,
.statement-doodle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.statement-scratch-overlay {
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(122deg, rgba(255,255,255,.08) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(58deg, rgba(255,230,92,.055) 0 1px, transparent 1px 29px),
    linear-gradient(180deg, transparent, rgba(255,255,255,.04));
  transition: opacity .35s ease;
}
.statement-img:hover .statement-scratch-overlay {
  opacity: .72;
}
.statement-doodle-layer {
  z-index: 3;
  overflow: hidden;
}
.statement-img .overlay-card {
  z-index: 4;
}
.doodle-stamp {
  position: absolute;
  width: var(--stamp-size, 92px);
  height: var(--stamp-size, 92px);
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(var(--stamp-rot, 0deg)) scale(.85);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.06));
  animation: doodleStampIn .18s ease-out forwards, doodleStampFade 2.2s ease-out forwards;
}
.doodle-stamp svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.doodle-stamp path,
.doodle-stamp line,
.doodle-stamp polyline,
.doodle-stamp circle,
.doodle-stamp ellipse,
.doodle-stamp rect {
  fill: none;
  stroke: var(--stamp-color, #fff16a);
  stroke-width: 6.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: doodleDraw .42s ease-out forwards;
}
.doodle-stamp.is-fat path,
.doodle-stamp.is-fat line,
.doodle-stamp.is-fat polyline,
.doodle-stamp.is-fat circle,
.doodle-stamp.is-fat ellipse,
.doodle-stamp.is-fat rect {
  stroke-width: 7;
}
@keyframes doodleDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes doodleStampIn {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--stamp-rot, 0deg)) scale(.68); }
  to { opacity: .98; transform: translate(-50%, -50%) rotate(var(--stamp-rot, 0deg)) scale(1); }
}
@keyframes doodleStampFade {
  0% { opacity: 0; }
  15% { opacity: .95; }
  55% { opacity: .74; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--stamp-rot, 0deg) + 5deg)) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .statement-scratch-overlay,
  .statement-doodle-layer { display: none; }
}


/* ---------- V17 doodle enrichments ---------- */
.doodle-stamp text {
  fill: var(--stamp-color, #fff16a);
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: rgba(0,0,0,.06);
  stroke-width: .3px;
}
.doodle-stamp.is-face-focus {
  filter: drop-shadow(0 0 10px rgba(255,241,106,.08));
}


/* ============================================================
   V19 — WORK CASE STUDIES + MAGAZINE VANDAL DOODLES
   ============================================================ */
.pissa-stage .pissa-live-image{z-index:1;opacity:.76;filter:saturate(.64) contrast(1.18) brightness(.48)}
.pissa-stage::after{content:"";position:absolute;inset:38px 0 0;z-index:2;background:linear-gradient(90deg,rgba(3,9,16,.78),rgba(3,9,16,.18) 55%,rgba(3,9,16,.28)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.56));pointer-events:none}
.pissa-stage-bg{position:absolute;inset:0;z-index:3}.pissa-icon-floating,.stage-copy,.stage-cursor-label,.stage-browser{z-index:5}

.case-browser-bar{display:flex;justify-content:space-between;align-items:center;height:38px;padding:0 18px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.13)}

.case-hero-asetam{background:linear-gradient(180deg,#0a0b08,#050505)}
.case-hero-yaucalli{background:linear-gradient(180deg,#10150d,#050505)}
.case-asetam-montage{position:relative;min-height:92svh;background:#aaa99f;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.case-asetam-shot{position:absolute;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.case-asetam-shot img{width:100%;height:100%;object-fit:cover;display:block}
.case-asetam-shot.main{left:6%;top:8%;width:50%;height:78%;transform:rotate(-3deg)}
.case-asetam-shot.main img{object-position:top}
.case-asetam-shot.field{right:5%;top:20%;width:44%;height:60%;transform:rotate(4deg)}
.case-asetam-montage>span{position:absolute;right:4%;bottom:4%;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;color:#111}

.case-yau-montage{position:relative;min-height:92svh;background:#151b12;overflow:hidden;color:#eff6dc;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.case-yau-bg{position:absolute;inset:0}.case-yau-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.58) contrast(1.08)}
.case-yau-card{position:absolute;z-index:3;right:7%;top:12%;width:30%;height:46%;overflow:hidden;border:1px solid rgba(255,255,255,.45);transform:rotate(3deg)}
.case-yau-card img{width:100%;height:100%;object-fit:cover}
.case-yau-title{position:absolute;z-index:2;left:5%;bottom:5%;font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(100px,17vw,260px);line-height:.56;letter-spacing:-.09em;color:rgba(245,255,224,.94)}
.case-yau-montage>span{position:absolute;z-index:4;left:6%;top:6%;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.64)}

/* Magazine-vandal face layer */
.face-vandal-composite{position:absolute;z-index:4;left:53%;top:49%;width:42%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--face-rot,0deg));pointer-events:none;mix-blend-mode:screen;opacity:0;animation:faceVandalIn .18s ease-out forwards,faceVandalOut 2.55s ease-in forwards}
.face-vandal-composite svg{width:100%;height:100%;overflow:visible}.face-vandal-composite path,.face-vandal-composite line,.face-vandal-composite circle,.face-vandal-composite ellipse,.face-vandal-composite polyline{fill:none;stroke:var(--face-color,#fff16a);stroke-width:5.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:520;stroke-dashoffset:520;animation:vandalDraw .34s ease-out forwards}.face-vandal-composite .fat{stroke-width:8.4}.face-vandal-composite text{fill:var(--face-color,#fff16a);font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;letter-spacing:.03em}
@keyframes vandalDraw{to{stroke-dashoffset:0}}@keyframes faceVandalIn{from{opacity:0;transform:translate(-50%,-50%) rotate(var(--face-rot,0deg)) scale(.88)}to{opacity:.96;transform:translate(-50%,-50%) rotate(var(--face-rot,0deg)) scale(1)}}@keyframes faceVandalOut{0%,58%{opacity:.94}100%{opacity:0;filter:blur(.5px)}}
.magazine-scribble{position:absolute;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:0;animation:scribbleIn .12s ease-out forwards,scribbleOut 1.8s ease-in forwards}.magazine-scribble svg{width:100%;height:100%}.magazine-scribble path,.magazine-scribble line,.magazine-scribble polyline,.magazine-scribble circle{fill:none;stroke:var(--scribble-color,#fff);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.magazine-scribble text{fill:var(--scribble-color,#fff);font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:700}.magazine-scribble.black-marker{mix-blend-mode:normal}.magazine-scribble.black-marker path,.magazine-scribble.black-marker line,.magazine-scribble.black-marker polyline,.magazine-scribble.black-marker circle{stroke:#070707;stroke-width:8}.magazine-scribble.black-marker text{fill:#070707}@keyframes scribbleIn{to{opacity:.94}}@keyframes scribbleOut{0%,62%{opacity:.94}100%{opacity:0}}

@media(max-width:700px){.case-asetam-shot.main{width:68%;height:68%;left:2%;top:10%}.case-asetam-shot.field{width:58%;height:42%;right:1%;top:37%}.case-yau-card{width:46%;height:36%;right:4%;top:8%}.face-vandal-composite{width:52%}}


/* ---------- V20: Better project visuals in work ---------- */
.pissa-stage {
  background: #0a1117;
  min-height: min(72vw, 850px);
  color: #e8f1ff;
}
.pissa-landscape {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.pissa-stage .pissa-live-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  opacity: .76;
  filter: saturate(.72) contrast(1.08) brightness(.62);
  transition: transform 1.4s var(--ease), filter 1.1s var(--ease);
}
.pissa-stage:hover .pissa-live-image {
  transform: scale(1.045);
  filter: saturate(.84) contrast(1.1) brightness(.68);
}
.pissa-stage::after {
  content: "";
  position: absolute;
  inset: 38px 0 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5,10,18,.72), rgba(5,10,18,.18) 56%, rgba(5,10,18,.34)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5));
  pointer-events: none;
}
.pissa-stage-bg {
  position: absolute;
  inset: -6%;
  z-index: 3;
  opacity: .62;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 76% 36%, rgba(121,176,238,.22), transparent 0 18%),
    radial-gradient(circle at 22% 84%, rgba(45,108,180,.14), transparent 0 24%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,0) 38%);
  filter: blur(18px);
  transform: scale(1.03);
  transition: transform 1.2s var(--ease), opacity 1s var(--ease), filter 1s var(--ease);
}
.pissa-stage:hover .pissa-stage-bg {
  transform: scale(1.06);
  opacity: .76;
  filter: blur(14px);
}
.pissa-shot-card {
  position: absolute;
  z-index: 5;
  width: 34%;
  min-width: 240px;
  max-width: 390px;
  right: 6%;
  top: 12%;
  transform: rotate(2.4deg);
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.pissa-stage:hover .pissa-shot-card {
  transform: rotate(-1deg) translateY(14px);
}
.pissa-shot-browser {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.26);
  border-bottom: none;
  background: rgba(8,14,21,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.pissa-shot-frame {
  position: relative;
  aspect-ratio: .92;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(6,12,20,.32);
  box-shadow: 0 32px 70px rgba(0,0,0,.28);
}
.pissa-shot-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,8,15,.12), rgba(3,8,15,.52));
}
.pissa-shot-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 64% center;
  filter: saturate(.74) contrast(1.06) brightness(.74);
  transform: scale(1.02);
  transition: transform 1s var(--ease), filter 1s var(--ease);
}
.pissa-stage:hover .pissa-shot-image {
  transform: scale(1.07);
  filter: saturate(.86) contrast(1.08) brightness(.82);
}
.pissa-shot-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.pissa-shot-label span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.pissa-shot-label strong {
  font-size: clamp(20px, 2vw, 30px);
  line-height: .96;
  letter-spacing: -.04em;
  color: #f7fbff;
}
.pissa-shot-mark {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 72px;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.stage-copy, .stage-cursor-label, .stage-browser { z-index: 6; }
.stage-copy {
  left: 6%;
  bottom: 5.5%;
}
.stage-copy strong {
  text-wrap: balance;
}

.asetam-stage {
  background: #141714;
  min-height: min(72vw, 860px);
  color: #eef0e3;
}
.asetam-landscape {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.asetam-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.68) contrast(1.02) brightness(.6);
  transition: transform 1.3s var(--ease), filter 1.1s var(--ease);
}
.asetam-stage:hover .asetam-landscape img {
  transform: scale(1.045);
  filter: saturate(.74) contrast(1.04) brightness(.66);
}
.asetam-stage::after {
  content: "";
  position: absolute;
  inset: 38px 0 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,8,6,.08), rgba(6,8,6,.38)),
    linear-gradient(90deg, rgba(7,9,7,.42), rgba(7,9,7,0) 42%, rgba(7,9,7,.25));
  pointer-events: none;
}
.asetam-screen {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.28);
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
}
.asetam-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.88) contrast(1.03);
}
.asetam-screen.screen-main {
  width: 30%;
  min-width: 230px;
  max-width: 390px;
  height: 74%;
  right: 7%;
  top: 11%;
  left: auto;
  transform: rotate(3deg);
  background: #0a0a0a;
}
.asetam-screen.screen-main img { object-position: top center; }
.asetam-stage:hover .screen-main {
  transform: rotate(-1deg) translateY(16px);
  box-shadow: 0 34px 90px rgba(0,0,0,.38);
}
.asetam-type {
  position: absolute;
  z-index: 5;
  left: 6%;
  top: 7%;
  right: auto;
  bottom: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.68);
}
.work-project-asetam .stage-cursor-label,
.work-project-yaucalli .stage-cursor-label,
.work-project-pissa .stage-cursor-label { background: rgba(0,0,0,.28); }

@media (max-width: 991px) {
  .pissa-shot-card,
  .asetam-screen.screen-main,
  .yau-field { width: 42%; }
}
@media (max-width: 640px) {
  .pissa-shot-card,
  .asetam-screen.screen-main,
  .yau-field {
    width: 48%;
    min-width: 160px;
  }
  .pissa-shot-card { top: 14%; right: 5%; }
  .asetam-screen.screen-main { right: 5%; top: 13%; height: 58%; }
}

@media (max-width: 767px) {
  .pissa-case-card{right:5%;left:5%;top:auto;bottom:10%;transform:none;width:auto;min-width:0}
  .pissa-case-visual:hover .pissa-case-card{transform:translateY(0)}
  .pissa-shot-card{width:50%;min-width:170px}
  .pissa-shot-mark,.pissa-case-card-mark{width:56px}
}

/* ========================================================================== */
/* V21 — ABOUT REDESIGN                                                       */
/* ========================================================================== */
.about-page-v21 { background:#050505; }
.about-hero-v21 {
  position:relative;
  min-height:calc(100svh - 82px);
  padding:54px 0 28px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:#050505;
}
.about-hero-noise {
  position:absolute; inset:-30%; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  animation:barrigonNoise .3s steps(2) infinite;
}
.about-hero-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,4vw,72px); align-items:end;
  min-height:calc(100svh - 190px);
}
.about-hero-copy { align-self:center; padding:40px 0 24px; }
.about-hero-kicker,
.about-hero-role,
.about-section-index,
.about-process-head>span,
.about-origin-copy>span {
  font-family:'JetBrains Mono',monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5);
}
.about-hero-name {
  margin:20px 0 26px;
  font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size:clamp(92px,13vw,210px); line-height:.68; letter-spacing:-.085em; font-weight:500; color:#fff;
  transform:translateX(var(--kinetic-x,0));
}
.about-hero-name span { font-style:italic; font-weight:500; }
.about-hero-role { color:rgba(255,255,255,.68); }
.about-hero-manifesto {
  margin:clamp(38px,7vh,80px) 0 0;
  font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size:clamp(34px,4vw,64px); line-height:.94; letter-spacing:-.05em; color:rgba(255,255,255,.72);
  max-width:11ch;
}
.about-hero-manifesto strong { color:#fff; font-weight:500; }
.about-portrait {
  position:relative; align-self:stretch; min-height:72vh; max-height:820px; overflow:hidden;
  border:1px solid rgba(255,255,255,.17); background:#111; isolation:isolate; perspective:1100px;
}
.about-portrait>img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center;
  filter:saturate(.82) contrast(1.08) brightness(.84);
  transition:transform 1s var(--ease),filter .8s var(--ease);
}
.about-portrait:hover>img { transform:scale(1.025); filter:saturate(.93) contrast(1.06) brightness(.88); }
.about-portrait::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 55%,rgba(0,0,0,.34)),linear-gradient(90deg,rgba(0,0,0,.14),transparent 32%);
}
.about-portrait .statement-scratch-overlay { z-index:3; }
.about-portrait .statement-doodle-layer { z-index:4; }
.about-portrait-index,.about-portrait-hint {
  position:absolute; z-index:6; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.68); text-transform:uppercase;
}
.about-portrait-index { left:16px; bottom:14px; }
.about-portrait-hint { right:16px; top:14px; }
.about-hero-meta {
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding-top:18px; margin-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.09em; color:rgba(255,255,255,.44); text-transform:uppercase;
}
.about-hero-meta span:last-child { text-align:right; }

.about-profile-v21 { padding:130px 0 150px; border-bottom:1px solid rgba(255,255,255,.12); }
.about-profile-grid {
  display:grid; grid-template-columns:150px minmax(0,1.35fr) minmax(280px,.8fr); gap:clamp(28px,4vw,70px); align-items:start;
}
.about-section-index { padding-top:10px; }
.about-profile-lede {
  font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(54px,6.7vw,108px); line-height:.83; letter-spacing:-.065em; color:#fff;
  transform:translateX(var(--kinetic-x,0));
}
.about-profile-lede span { color:rgba(255,255,255,.35); }
.about-profile-copy { font-size:16px; line-height:1.55; color:rgba(255,255,255,.7); }
.about-profile-copy p { margin:0 0 22px; }
.about-profile-meta { grid-column:2/4; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.about-profile-meta div { display:flex; flex-direction:column; gap:8px; }
.about-profile-meta span { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.38); }
.about-profile-meta strong { font-size:13px; font-weight:400; color:rgba(255,255,255,.78); }

.about-process-v21 { padding:105px 0 150px; }
.about-process-head { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:50px; }
.about-process-head p { margin:0; max-width:37ch; justify-self:end; color:rgba(255,255,255,.58); font-size:14px; }
.about-process-list { border-top:1px solid rgba(255,255,255,.16); }
.about-process-row {
  position:relative; display:grid; grid-template-columns:70px 1.2fr .8fr; gap:28px; align-items:center;
  padding:36px 0; border-bottom:1px solid rgba(255,255,255,.14); overflow:hidden; isolation:isolate;
  transition:padding .5s var(--ease),color .4s ease;
}
.about-process-row::before { content:""; position:absolute; inset:0; z-index:-1; background:#fff; transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease); }
.about-process-row:hover::before { transform:scaleY(1); }
.about-process-row:hover { color:#000; padding-left:18px; padding-right:18px; }
.process-num { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; opacity:.48; }
.about-process-row h2 {
  margin:0; font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(54px,7vw,112px); line-height:.7; letter-spacing:-.075em; color:inherit; font-weight:500;
}
.about-process-row p { margin:0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.55); transition:color .35s ease; }
.about-process-row:hover p { color:rgba(0,0,0,.66); }

.about-taste-v21 { padding:0 0 145px; }
.about-taste-title {
  margin:110px 0 28px; font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(72px,11vw,180px); line-height:.72; letter-spacing:-.08em; color:#fff; font-weight:500;
  transform:translateX(var(--kinetic-x,0));
}
.about-taste-title span { color:rgba(255,255,255,.22); }
.about-taste-copy { margin:0 0 60px; max-width:34ch; color:rgba(255,255,255,.54); font-size:14px; }
.about-tools-marquee { border-color:rgba(255,255,255,.15); }

.about-origin-v21 { padding:0 0 150px; }
.about-origin-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,100px); align-items:center; padding-top:95px; }
.about-origin-mark {
  position:relative; min-height:580px; border:1px solid rgba(255,255,255,.14); background:#080808; overflow:hidden; perspective:1000px;
}
.about-origin-mark::before {
  content:""; position:absolute; inset:0; opacity:.11;
  background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:56px 56px;
}
.about-origin-mark>span { position:absolute; left:16px; bottom:14px; z-index:3; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.4); }
.about-origin-holo { width:72%; max-width:440px; }
.about-origin-copy>span { display:block; margin-bottom:28px; }
.about-origin-copy h2 { margin:0 0 28px; font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(64px,8vw,128px); line-height:.72; letter-spacing:-.075em; color:#fff; font-weight:500; }
.about-origin-copy p { margin:0; max-width:42ch; font-size:15px; line-height:1.6; color:rgba(255,255,255,.62); }
.about-closing-v21 { border-top:1px solid rgba(255,255,255,.12); }

/* Per-surface face positioning for the vandal doodle system */
.face-vandal-composite { left:var(--doodle-face-x,53%); top:var(--doodle-face-y,49%); }

@media (max-width: 991px) {
  .about-hero-grid { grid-template-columns:1fr; min-height:auto; }
  .about-hero-copy { padding-bottom:0; }
  .about-hero-manifesto { margin-top:40px; }
  .about-portrait { min-height:70svh; }
  .about-profile-grid { grid-template-columns:1fr; }
  .about-section-index { margin-bottom:8px; }
  .about-profile-meta { grid-column:auto; grid-template-columns:repeat(2,1fr); }
  .about-process-row { grid-template-columns:46px 1fr; }
  .about-process-row p { grid-column:2; max-width:55ch; }
  .about-origin-grid { grid-template-columns:1fr; }
  .about-origin-mark { min-height:520px; }
}
@media (max-width: 640px) {
  .about-hero-v21 { padding-top:30px; }
  .about-hero-name { font-size:26vw; }
  .about-hero-manifesto { font-size:11vw; }
  .about-portrait { min-height:64svh; }
  .about-hero-meta { grid-template-columns:1fr 1fr; row-gap:10px; }
  .about-hero-meta span:nth-child(even) { text-align:right; }
  .about-profile-v21 { padding:90px 0 100px; }
  .about-profile-lede { font-size:15vw; }
  .about-profile-meta { grid-template-columns:1fr 1fr; }
  .about-process-v21 { padding:80px 0 100px; }
  .about-process-head { grid-template-columns:1fr; }
  .about-process-head p { justify-self:start; }
  .about-process-row { grid-template-columns:36px 1fr; gap:16px; padding:28px 0; }
  .about-process-row h2 { font-size:16vw; }
  .about-taste-v21 { padding-bottom:100px; }
  .about-taste-title { margin-top:80px; font-size:18vw; }
  .about-origin-v21 { padding-bottom:100px; }
  .about-origin-grid { padding-top:70px; }
  .about-origin-mark { min-height:440px; }
}

/* ============================================================
   V22 CONTACT — EDITORIAL NEW BUSINESS PAGE
   ============================================================ */
.contact-page-v22 { background:#050505; }
.contact-page-v22 .nav { background:rgba(5,5,5,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.contact-hero-v22 { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end; padding:150px 0 54px; border-bottom:1px solid rgba(255,255,255,.12); isolation:isolate; }
.contact-hero-noise { position:absolute; inset:-25%; z-index:0; opacity:.11; pointer-events:none; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); animation:barrigonNoise .24s steps(2) infinite; }
.contact-hero-signal { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.46; background:radial-gradient(circle at 74% 34%,rgba(255,255,255,.06),transparent 0 17%,transparent 17%),repeating-radial-gradient(ellipse at 74% 34%,transparent 0 60px,rgba(255,255,255,.035) 61px 62px); transform:rotate(-8deg) scale(1.2); }
.contact-hero-inner { position:relative; z-index:2; width:100%; }
.contact-hero-meta { display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; color:rgba(255,255,255,.5); text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:10px; }
.contact-hero-title { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(82px,14.5vw,232px); line-height:.69; letter-spacing:-.085em; font-weight:500; color:#fff; margin:9vh 0 8vh; }
.contact-hero-title em { font-style:normal; color:rgba(255,255,255,.38); }
.contact-hero-bottom { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; }
.contact-hero-bottom p { max-width:48ch; margin:0; color:rgba(255,255,255,.58); font-size:14px; line-height:1.5; }
.contact-hero-bottom a { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.32); padding-bottom:4px; }

.contact-status-v22 { padding:120px 0 140px; }
.contact-status-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:9vw; align-items:end; }
.contact-status-intro>span,.contact-form-head>span,.contact-direct-copy>span,.contact-close-copy>span { font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.45); }
.contact-status-intro h2 { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(58px,8vw,126px); line-height:.78; letter-spacing:-.07em; margin:26px 0 30px; color:#fff; }
.contact-status-intro h2 em,.contact-direct-copy h2 em,.contact-close-copy h2 em { font-style:normal; color:rgba(255,255,255,.38); }
.contact-status-intro p { max-width:46ch; margin:0; color:rgba(255,255,255,.58); line-height:1.55; }
.contact-status-list { border-top:1px solid rgba(255,255,255,.18); }
.contact-status-list>div { display:grid; grid-template-columns:130px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.contact-status-list span { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.38); }
.contact-status-list strong { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.07em; font-weight:400; color:rgba(255,255,255,.82); }
.contact-status-list strong i { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.5); animation:pulse 1.8s ease-in-out infinite; }

.contact-form-section-v22 { position:relative; padding:80px 0 150px; border-top:1px solid rgba(255,255,255,.12); overflow:hidden; isolation:isolate; }
.contact-reactive-word { position:absolute; z-index:0; left:50%; top:33%; transform:translate(-50%,-50%); width:100%; text-align:center; font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(130px,25vw,410px); line-height:.65; letter-spacing:-.09em; text-transform:uppercase; color:rgba(255,255,255,.022); white-space:nowrap; pointer-events:none; transition:color .5s var(--ease),transform .7s var(--ease),filter .5s var(--ease); }
.contact-reactive-word.is-active { color:rgba(255,255,255,.045); transform:translate(-50%,-50%) scale(1.02); filter:blur(.25px); }
.contact-form-section-v22 .container { position:relative; z-index:2; }
.contact-form-head { display:flex; justify-content:space-between; gap:30px; margin-bottom:82px; }
.contact-form-head p { max-width:42ch; margin:0; color:rgba(255,255,255,.48); font-size:13px; line-height:1.5; }
.contact-form-v22 { max-width:1160px; margin:0 auto; }
.contact-line-field { border-top:1px solid rgba(255,255,255,.2); padding:24px 0 34px; display:grid; grid-template-columns:180px 1fr; gap:34px; align-items:start; }
.contact-line-field label,.contact-choice-field legend { font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.42); padding-top:14px; }
.contact-line-field input,.contact-line-field textarea { width:100%; border:0; border-bottom:1px solid transparent; outline:0; background:transparent; color:#fff; padding:0 0 8px; border-radius:0; font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(36px,5vw,76px); letter-spacing:-.045em; line-height:1; transition:border-color .3s,color .3s; }
.contact-line-field input::placeholder,.contact-line-field textarea::placeholder { color:rgba(255,255,255,.15); }
.contact-line-field input:focus,.contact-line-field textarea:focus { border-bottom-color:rgba(255,255,255,.35); background:transparent; }
.contact-message-field textarea { min-height:220px; resize:vertical; font-size:clamp(30px,4vw,58px); line-height:1.04; }
.contact-choice-field { border:0; border-top:1px solid rgba(255,255,255,.2); margin:0; padding:24px 0 42px; display:grid; grid-template-columns:180px 1fr; gap:34px; }
.contact-choice-field legend { float:left; width:180px; margin:0; }
.contact-choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.contact-choice-field:first-of-type .contact-choice-grid { grid-template-columns:repeat(3,1fr); }
.contact-choice-grid label { cursor:pointer; position:relative; }
.contact-choice-grid input { position:absolute; opacity:0; pointer-events:none; }
.contact-choice-grid span { display:flex; min-height:88px; align-items:flex-end; justify-content:space-between; padding:14px; border:1px solid rgba(255,255,255,.18); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.5); transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease); }
.contact-choice-grid span::after { content:'○'; font-size:14px; }
.contact-choice-grid label:hover span { color:#fff; border-color:rgba(255,255,255,.42); transform:translateY(-3px); }
.contact-choice-grid input:checked+span { background:#fff; color:#050505; border-color:#fff; }
.contact-choice-grid input:checked+span::after { content:'●'; }
.contact-send-v22 { width:100%; border:0; border-top:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; padding:34px 0; display:flex; align-items:center; justify-content:space-between; cursor:pointer; margin-top:14px; transition:padding .35s var(--ease),background .35s,color .35s; }
.contact-send-v22 span { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(60px,10vw,160px); line-height:.72; letter-spacing:-.075em; }
.contact-send-v22 i { font-style:normal; font-size:clamp(44px,7vw,100px); transition:transform .35s var(--ease); }
.contact-send-v22:hover { padding-left:22px; padding-right:22px; background:#fff; color:#050505; }
.contact-send-v22:hover i { transform:translateX(10px); }
.contact-form-v22 .form-success,.contact-form-v22 .form-error { margin-top:18px; }

.contact-direct-v22 { padding:90px 0 140px; border-top:1px solid rgba(255,255,255,.12); }
.contact-direct-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; padding-top:100px; }
.contact-direct-copy h2 { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(64px,9vw,142px); line-height:.72; letter-spacing:-.08em; margin:30px 0 0; }
.contact-direct-links { border-top:1px solid rgba(255,255,255,.16); }
.contact-big-link { display:grid; grid-template-columns:110px 1fr auto; gap:22px; align-items:center; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.16); transition:padding .35s var(--ease); }
.contact-big-link:hover { padding-left:14px; }
.contact-big-link>span { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.38); }
.contact-big-link strong { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(20px,2.6vw,38px); letter-spacing:-.035em; font-weight:500; }
.contact-big-link i { font-style:normal; font-size:22px; transition:transform .3s var(--ease); }
.contact-big-link:hover i { transform:translate(4px,-4px); }

.contact-close-v22 { padding:120px 0 150px; border-top:1px solid rgba(255,255,255,.12); overflow:hidden; }
.contact-close-inner { display:grid; grid-template-columns:1.35fr .65fr; gap:7vw; align-items:center; }
.contact-close-copy h2 { font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif; font-size:clamp(62px,9vw,146px); line-height:.76; letter-spacing:-.075em; margin:28px 0 0; }
.contact-close-mark { position:relative; min-height:420px; }
.contact-close-mark .origin-holo { width:min(90%,390px); }
.contact-footer-v22 { padding-top:54px; border-top:1px solid rgba(255,255,255,.12); }

@media (max-width:900px) {
  .contact-hero-title { font-size:18vw; }
  .contact-status-grid,.contact-direct-grid,.contact-close-inner { grid-template-columns:1fr; }
  .contact-form-head { flex-direction:column; }
  .contact-line-field,.contact-choice-field { grid-template-columns:1fr; gap:18px; }
  .contact-line-field label,.contact-choice-field legend { padding-top:0; width:auto; }
  .contact-choice-grid, .contact-choice-field:first-of-type .contact-choice-grid { grid-template-columns:repeat(2,1fr); }
  .contact-close-mark { min-height:340px; }
}
@media (max-width:600px) {
  .contact-hero-v22 { padding-top:120px; }
  .contact-hero-meta span:last-child { display:none; }
  .contact-hero-bottom { grid-template-columns:1fr; }
  .contact-status-list>div { grid-template-columns:90px 1fr; }
  .contact-choice-grid, .contact-choice-field:first-of-type .contact-choice-grid { grid-template-columns:1fr 1fr; }
  .contact-choice-grid span { min-height:72px; padding:11px; font-size:9px; }
  .contact-big-link { grid-template-columns:1fr auto; }
  .contact-big-link>span { grid-column:1/-1; }
  .contact-reactive-word { display:none; }
}

/* ---------- V23: Home statement redesign ---------- */
.home-statement-v23 {
  min-height: 96svh;
  display: flex;
  align-items: center;
  padding: clamp(78px, 9vw, 132px) 0;
  overflow: hidden;
}
.statement-v23 {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.12fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: center;
}
.statement-photo-v23 {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: min(76svh, 820px);
  border: 0;
  background: #080808;
  opacity: 0;
  transform: translate3d(0, 64px, 0) scale(.985);
  filter: blur(11px);
  transition:
    opacity .9s var(--ease),
    transform 1.15s var(--ease),
    filter 1.05s var(--ease);
  will-change: transform, filter, opacity;
}
.statement-photo-v23 img {
  filter: grayscale(.12) contrast(1.05) brightness(.9);
  transform: scale(1.025);
  transition: transform 1.15s var(--ease), filter .7s ease;
}
.statement-photo-v23:hover img {
  transform: scale(1.055);
  filter: grayscale(0) contrast(1.04) brightness(.96);
}
.statement-photo-v23::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 54%, rgba(0,0,0,.42)),
    radial-gradient(circle at 52% 44%, transparent 0 34%, rgba(0,0,0,.13) 76%, rgba(0,0,0,.25) 100%);
}
.statement-photo-meta {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.statement-copy-v23 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 3vh 0 1vh;
}
.statement-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
  margin-bottom: clamp(26px, 4vh, 48px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .65s ease .2s, transform .75s var(--ease) .2s;
}
.statement-headline {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size: clamp(54px, 6.5vw, 112px);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.statement-headline .statement-line {
  display: block;
  width: fit-content;
  opacity: 0;
  transform: translate3d(0, 46px, 0) skewY(2deg);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .75s ease,
    transform 1s var(--ease),
    clip-path 1s var(--ease);
}
.statement-headline .statement-line:nth-child(1) { transition-delay: .24s; }
.statement-headline .statement-line:nth-child(2) { transition-delay: .34s; }
.statement-headline .statement-line:nth-child(3) { transition-delay: .44s; }
.statement-headline .statement-line:nth-child(4) { transition-delay: .54s; }
.statement-headline .statement-line:nth-child(5) { transition-delay: .64s; }
.statement-headline strong { font-weight: 600; }
.statement-line-soft {
  font-family: 'Source Serif 4',Georgia,'Times New Roman',serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: rgba(255,255,255,.56);
  letter-spacing: -.045em;
  padding-left: clamp(18px, 4vw, 62px);
}
.statement-bottom-v23 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-top: clamp(42px, 7vh, 76px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s ease .78s, transform .9s var(--ease) .78s;
}
.statement-identity-meta {
  display: grid;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}
.statement-identity-meta b {
  color: rgba(255,255,255,.78);
  font-weight: 500;
  margin-right: 10px;
}
.statement-link-v23 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}
.statement-link-v23::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.65);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.statement-link-v23:hover::after { transform: scaleX(.35); }
.statement-link-v23 span { transition: transform .3s var(--ease); }
.statement-link-v23:hover span { transform: translate3d(4px,-4px,0); }

.home-statement-v23.is-statement-active .statement-photo-v23 {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}
.home-statement-v23.is-statement-active .statement-kicker,
.home-statement-v23.is-statement-active .statement-bottom-v23 {
  opacity: 1;
  transform: none;
}
.home-statement-v23.is-statement-active .statement-headline .statement-line {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

@media (max-width: 991px) {
  .home-statement-v23 { min-height: auto; }
  .statement-v23 { grid-template-columns: 1fr; }
  .statement-photo-v23 { width: min(78vw, 600px); }
  .statement-copy-v23 { padding-top: 0; }
  .statement-headline { font-size: clamp(60px, 11vw, 108px); }
}
@media (max-width: 640px) {
  .home-statement-v23 { padding: 70px 0 90px; }
  .statement-v23 { gap: 48px; }
  .statement-photo-v23 { width: 100%; max-height: none; }
  .statement-headline { font-size: 15vw; line-height: .84; }
  .statement-line-soft { padding-left: 10vw; }
  .statement-bottom-v23 { grid-template-columns: 1fr; align-items: start; }
  .statement-photo-meta { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-photo-v23,
  .statement-kicker,
  .statement-headline .statement-line,
  .statement-bottom-v23 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* ---------- V25: deliberate enter gate ---------- */
.intro-loader.is-ready .loader-logo-wrap {
  cursor: none;
}
.intro-loader.is-ready .loader-logo {
  animation: loaderLogoReady 2.8s ease-in-out infinite;
}
.intro-loader.is-ready .loader-logo.ghost-a {
  animation: loaderReadyGhostA 3.4s steps(2,end) infinite;
}
.intro-loader.is-ready .loader-logo.ghost-b {
  animation: loaderReadyGhostB 3.9s steps(2,end) infinite;
}
.intro-loader.is-ready .loader-audio-label {
  color: rgba(255,255,255,.58);
}
.intro-loader.is-ready .loader-progress-track i {
  box-shadow: 0 0 20px rgba(255,255,255,.72);
}
.intro-loader.is-ready .loader-enter {
  border-color: rgba(255,255,255,.58);
  background: rgba(0,0,0,.22);
  padding: 14px 20px;
}
.intro-loader.is-ready .loader-enter::before {
  content:"";
  position:absolute;
  inset:-8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  opacity:.8;
  animation: enterGateBreath 2.4s ease-in-out infinite;
}
@keyframes loaderLogoReady {
  0%,100% { opacity:.95; transform:scale(1); filter:brightness(0) invert(1); }
  50% { opacity:1; transform:scale(1.018); filter:brightness(0) invert(1) drop-shadow(0 0 16px rgba(255,255,255,.08)); }
}
@keyframes loaderReadyGhostA {
  0%,82%,100% { translate:0 0; opacity:.07; }
  84% { translate:15px -1px; opacity:.22; }
  86% { translate:-7px 2px; opacity:.12; }
  88% { translate:2px 0; opacity:.07; }
}
@keyframes loaderReadyGhostB {
  0%,73%,100% { translate:0 0; opacity:.06; }
  75% { translate:-13px 1px; opacity:.2; }
  77% { translate:8px -2px; opacity:.12; }
  79% { translate:0 0; opacity:.06; }
}
@keyframes enterGateBreath {
  0%,100% { opacity:.22; transform:scale(.985); }
  50% { opacity:.72; transform:scale(1.035); }
}
@media (pointer:fine) {
  .intro-loader ~ .cursor-dot,
  .intro-loader ~ .cursor-ring { z-index: 300001; }
  body.intro-ready .cursor-ring {
    width:72px;
    height:72px;
    border-color:rgba(255,255,255,.72);
    background:rgba(0,0,0,.2);
    mix-blend-mode:normal;
  }
  body.intro-ready .cursor-dot { width:0; height:0; }
  body.intro-ready .cursor-ring::after {
    content:'ENTER';
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:8px;
    letter-spacing:.12em;
  }
}


/* V34 — Production form helpers */
.netlify-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.form-privacy{margin:18px 0 28px;max-width:700px;font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1.6;letter-spacing:.04em;color:rgba(255,255,255,.42)}
.form-privacy a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.contact-send-v22:disabled{cursor:wait;opacity:.58;transform:none!important}
.contact-send-v22.is-sending i{animation:sendArrowPulse .7s ease-in-out infinite alternate}
@keyframes sendArrowPulse{from{transform:translateX(0)}to{transform:translateX(8px)}}


/* ========================================================================== */
/* PRODUCTION FINAL V2 — MOBILE NAV / HERO SAFE OFFSET                       */
/* ========================================================================== */
@media (max-width: 720px) {
  .nav {
    padding: 15px 0 13px;
  }
  .nav.scrolled {
    padding: 12px 0 11px;
  }
  .nav-inner {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .95fr);
    gap: 12px;
    align-items: start;
  }
  .nav-col.center {
    width: min(100%, 190px);
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
  .brand {
    gap: 7px;
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .nav .label {
    font-size: 11px;
    line-height: 1.15;
  }
  .nav .sub {
    font-size: 11px;
    line-height: 1.45;
  }
  .nav .sub a {
    margin-right: 4px;
  }
  .language-switch {
    margin-top: 5px;
    font-size: 8px;
  }

  /* The fixed mobile nav is taller than desktop; reserve real breathing room
     instead of allowing the first hero copy to sit under it. */
  .hero.hero-glitch .hero-glitch-inner {
    padding-top: 136px;
  }
  .hero-glitch-top {
    gap: 18px;
  }
  .hero.hero-glitch .hero-manifesto {
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .nav-inner {
    grid-template-columns: minmax(0, 1fr) minmax(142px, .92fr);
    gap: 9px;
  }
  .brand { font-size: 12.5px; }
  .nav-col.center { width: min(100%, 174px); }
  .nav .sub { font-size: 10.5px; }
  .hero.hero-glitch .hero-glitch-inner { padding-top: 132px; }
}

/* V35 — Barrigón as a two-founder studio */
.about-hero-name.duo{font-size:clamp(72px,10vw,162px);line-height:.7;max-width:8ch}
.founders-portrait{background:radial-gradient(circle at 72% 24%,rgba(255,255,255,.07),transparent 28%),#080808}
.founders-portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;opacity:.6}
.founders-portrait::after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.36))}
.founders-visual{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,70px);overflow:hidden}
.founders-visual-kicker{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.48);margin-bottom:auto}
.founders-visual strong{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(82px,12vw,190px);line-height:.62;letter-spacing:-.085em;font-weight:500;color:#fff}
.founders-visual i{font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(44px,6vw,90px);line-height:1;color:rgba(255,255,255,.28);font-style:normal;margin:14px 0 8px}
.founders-visual img{position:absolute;right:5%;bottom:6%;width:min(24%,150px);height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.2}
@media(max-width:640px){.about-hero-name.duo{font-size:20vw;max-width:none}.founders-visual strong{font-size:22vw}.founders-visual img{width:22%}}


/* ---------- V32: dual-founder portraits ---------- */
.statement-founders-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: 12px;
  padding: 12px;
  align-items: stretch;
  background: #050505;
}
.statement-founders-duo .founder-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.09);
}
.statement-founders-duo .founder-card--alexis { transform: translateY(14px); }
.statement-founders-duo .founder-card--erick { transform: translateY(-14px); }
.statement-founders-duo .founder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.08) contrast(1.04) brightness(.92);
}
.statement-founders-duo .founder-card--alexis img { object-position: center center; }
.statement-founders-duo .founder-card--erick img { object-position: center 30%; }
.statement-founders-duo .founder-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 46%, rgba(0,0,0,.48));
  pointer-events: none;
}
.founder-card-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  gap: 4px;
}
.founder-card-name,
.founder-card-role {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
.founder-card-name {
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.94);
}
.founder-card-role {
  font-size: 8px;
  letter-spacing: .09em;
  color: rgba(255,255,255,.64);
}
.founder-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,5,5,.84);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.statement-founders-duo .statement-photo-meta {
  left: 16px;
  right: 16px;
  bottom: 14px;
}

.founders-photo-showcase {
  background: radial-gradient(circle at 74% 24%, rgba(255,255,255,.07), transparent 26%), #080808;
}
.founders-photo-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .55;
}
.founders-photo-showcase::after {
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 34%, rgba(0,0,0,.42));
}
.founders-photo-grid {
  position: absolute;
  inset: 20px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: 16px;
  align-items: stretch;
}
.founder-portrait-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,.09);
  background: #0b0b0b;
}
.founder-portrait-card--alexis { align-self: end; transform: translateY(18px); }
.founder-portrait-card--erick { align-self: start; transform: translateY(-18px); }
.founder-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.9);
}
.founder-portrait-card--alexis img { object-position: center center; }
.founder-portrait-card--erick img { object-position: center 30%; }
.founder-portrait-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.03), transparent 44%, rgba(0,0,0,.52));
}
.founder-portrait-card figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  gap: 4px;
}
.founder-portrait-card figcaption span,
.founder-portrait-card figcaption strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
.founder-portrait-card figcaption span {
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.94);
}
.founder-portrait-card figcaption strong {
  font-size: 8px;
  letter-spacing: .09em;
  color: rgba(255,255,255,.64);
  font-weight: 500;
}
.founders-watermark {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  width: min(18%, 112px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .14;
  pointer-events: none;
}

@media (max-width: 991px) {
  .statement-founders-duo {
    max-height: none;
  }
  .founders-photo-grid {
    inset: 18px;
  }
}
@media (max-width: 640px) {
  .statement-founders-duo {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }
  .statement-founders-duo .founder-card--alexis,
  .statement-founders-duo .founder-card--erick {
    transform: none;
  }
  .founder-cross {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .founder-card-meta,
  .founder-portrait-card figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .founders-photo-grid {
    inset: 12px;
    gap: 10px;
  }
  .founder-portrait-card--alexis,
  .founder-portrait-card--erick {
    transform: none;
  }
  .founders-watermark {
    width: 20%;
    right: 16px;
    bottom: 16px;
  }
}


/* ---------- V33: founder visuals refinement ---------- */
.statement-founders-duo .founder-card .statement-doodle-layer {
  z-index: 3;
}
.statement-founders-duo .founder-card {
  cursor: crosshair;
}
.statement-founders-duo .founder-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 36%);
  pointer-events: none;
}
.founders-photo-showcase .founders-photo-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
}
.founders-photo-showcase .founder-portrait-card--alexis,
.founders-photo-showcase .founder-portrait-card--erick {
  transform: none;
}
.founders-photo-showcase .founder-portrait-card--alexis {
  align-self: stretch;
}
.founders-photo-showcase .founder-portrait-card--erick {
  align-self: stretch;
}
.founders-photo-showcase .founders-photo-grid {
  align-items: stretch;
}


/* ---------- V34: founder photo typographic hover ---------- */
.statement-founders-duo .statement-scratch-overlay { display:none; }
.statement-founders-duo .founder-card--type-hover { cursor:crosshair; }
.statement-founders-duo .founder-card--type-hover::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(0,0,0,.08);
  opacity:0;
  transition:opacity .42s var(--ease);
  pointer-events:none;
}
.statement-founders-duo .founder-card--type-hover:hover::before { opacity:1; }
.founder-type-overlay {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  filter:blur(5px);
  transform:translate3d(0,10px,0);
  transition:opacity .35s ease, filter .45s var(--ease), transform .55s var(--ease);
  color:#DCCB55;
  --founder-type-size:clamp(22px,2.05vw,34px);
}
.founder-card--type-hover:hover .founder-type-overlay,
.founder-card--type-hover:focus-within .founder-type-overlay {
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0);
}
.founder-type-stack {
  position:absolute;
  left:12%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.founder-type-line {
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  font-size:var(--founder-type-size);
  line-height:.9;
  letter-spacing:-.055em;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}
.founder-type-line b {
  font-family:'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  font-weight:800;
  font-style:normal;
}
.founder-type-line em {
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.045em;
  margin-left:.06em;
}
/* Alexis: two lines high, three lower — mirrors Erick's test layout */
.founder-type-overlay--alexis .founder-type-stack--top {
  top:15%;
  left:18%;
}
.founder-type-overlay--alexis .founder-type-stack--bottom {
  top:48%;
  left:14%;
}
/* Erick: single line high, four-line block lower */
.founder-type-overlay--erick .founder-type-stack--top {
  top:17%;
  left:18%;
}
.founder-type-overlay--erick .founder-type-stack--bottom {
  top:43%;
  left:15%;
}
.founder-card--type-hover:hover img {
  transform:scale(1.035);
  filter:grayscale(.08) contrast(1.04) brightness(.78);
}
@media (max-width:991px) {
  .founder-type-overlay { --founder-type-size:clamp(20px,4vw,32px); }
}
@media (max-width:640px) {
  .founder-type-overlay { --founder-type-size:clamp(15px,4.2vw,23px); }
  .founder-type-overlay--alexis .founder-type-stack--top { top:14%; left:10%; }
  .founder-type-overlay--alexis .founder-type-stack--bottom { top:47%; left:8%; }
  .founder-type-overlay--erick .founder-type-stack--top { top:16%; left:10%; }
  .founder-type-overlay--erick .founder-type-stack--bottom { top:42%; left:8%; }
}
@media (hover:none) and (pointer:coarse) {
  .founder-type-overlay { opacity:.95; filter:none; transform:none; }
  .statement-founders-duo .founder-card--type-hover::before { opacity:.05; }
}


/* ---------- V36: Barrigón production type system ---------- */
:root {
  --font-brand-sans: 'Instrument Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-brand-serif: 'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-utility: 'JetBrains Mono',monospace;
}
body { font-family: var(--font-brand-sans); font-weight: 500; }
.brand,
.nav,
.btn,
.hero-manifesto,
.hero-bottom-meta,
.statement-headline,
.huge,
.work-hero-title,
.work-project-head h2,
.case-hero-v14 h1,
.case-hero-statement,
.case-note h2,
.case-next-link strong,
.about-hero-name,
.about-hero-manifesto,
.about-profile-lede,
.about-process-row h2,
.about-taste-title,
.about-origin-copy h2,
.contact-hero-title,
.contact-status-intro h2,
.contact-reactive-word,
.contact-line-field input,
.contact-line-field textarea,
.contact-send-v22 span,
.contact-direct-copy h2,
.contact-big-link strong,
.contact-close-copy h2,
.founder-type-line b {
  font-family: var(--font-brand-sans);
}
.statement-line-soft,
.founder-type-line em {
  font-family: var(--font-brand-serif);
  font-style: italic;
  font-weight: 400;
}
.founder-type-line b { font-weight: 700; }


/* ---------- V37: Barrigón official color system ---------- */
:root {
  --brand-black: #000000;
  --brand-white: #F2F2F2;
  --brand-mustard: #DCCC55;
  --brand-coral: #F25151;
  --bg: var(--brand-black);
  --text: var(--brand-white);
  --accent-primary: var(--brand-mustard);
  --accent-secondary: var(--brand-coral);
  --signal-red: var(--brand-coral);
  --signal-blue: var(--brand-mustard);
}

/* Main palette stays dominant: black surfaces + off-white type. */
body, .nav, .hero, .section, .closing {
  background-color: var(--brand-black);
  color: var(--brand-white);
}
::selection { background: var(--brand-mustard); color: var(--brand-black); }

/* Secondary palette acts as signal, not as a competing base palette. */
.nav .sub a:hover { color: var(--brand-mustard); }
.nav .sub a.current { color: var(--brand-white); }
.hero-signal i,
.float-cta .pulse,
.contact-status-list strong i {
  background: var(--brand-coral);
  box-shadow: 0 0 12px rgba(242,81,81,.55);
}
.statement-line-soft,
.origin-meta,
.huge .super { color: var(--brand-mustard); }
.huge .super { opacity: .95; }

.btn-solid,
.form-submit {
  background: var(--brand-white);
  color: var(--brand-black);
  border-color: var(--brand-white);
}
.btn-solid:hover,
.form-submit:hover {
  background: var(--brand-mustard);
  border-color: var(--brand-mustard);
  color: var(--brand-black);
}
.float-cta:hover {
  border-color: var(--brand-mustard);
}
.statement-link-v23:hover,
.contact-big-link:hover strong,
.footer-meta .col a:hover { color: var(--brand-mustard); }

/* Founder image treatment follows the approved secondary mustard application. */
.founder-type-overlay { color: var(--brand-mustard); }

/* Glitch remains digital but now stays inside the identity palette. */
.glitch-word.is-glitching::before { color: var(--brand-coral); }
.glitch-word.is-glitching::after { color: var(--brand-mustard); }

/* Utility/error color aligned to coral. */
.form-error { color: var(--brand-coral); border-color: rgba(242,81,81,.5); }


/* ---------- V13 custom swap: poster home, dog on about, mustard statement ---------- */
:root {
  --brand-black: #000001;
  --brand-white: #F2F2F2;
  --brand-mustard: #DCCC55;
  --brand-coral: #F25151;
}

.globe-headline { color: var(--brand-mustard) !important; }

.statement-founders-duo--custom {
  background: #050505;
}
.statement-founders-duo--custom .founder-card {
  isolation: isolate;
}
.statement-founders-duo--custom .founder-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 4px),
    linear-gradient(125deg, rgba(220,204,85,.08), rgba(242,81,81,.14) 45%, rgba(255,255,255,.02));
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}
.statement-founders-duo--custom .founder-card::after {
  z-index: 3;
}
.statement-founders-duo--custom .founder-card img {
  filter: saturate(.98) contrast(1.02) brightness(.96);
  transition: transform .65s var(--ease), filter .55s var(--ease);
}
.statement-founders-duo--custom .founder-card:hover::before {
  opacity: 1;
  animation: founderNoiseFlash .22s steps(2,end) infinite;
}
.statement-founders-duo--custom .founder-card:hover img {
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.08) brightness(.9);
  animation: founderGlitchJitter .28s steps(2,end) 4;
}
.statement-founders-duo--custom .founder-card:hover {
  box-shadow: 0 0 0 1px rgba(220,204,85,.18), 0 18px 40px rgba(0,0,0,.26);
}
.statement-founders-duo--custom .founder-card:hover .founder-card-meta {
  text-shadow: 0 0 12px rgba(0,0,0,.45);
}
.statement-founders-duo--custom .founder-card { cursor: crosshair; }
.statement-founders-duo--custom .founder-card .noise-layer,
.statement-founders-duo--custom .statement-scratch-overlay,
.statement-founders-duo--custom .founder-cross,
.statement-founders-duo--custom .founder-type-overlay { display: none !important; }

.about-portrait--dog {
  background:#070707;
}
.about-portrait--dog img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.92) contrast(1.04) brightness(.9);
}
.about-portrait--dog::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(circle at 58% 46%, rgba(255,255,255,.06), transparent 28%);
}
.about-portrait--dog:hover img {
  transform:scale(1.025);
  filter:saturate(.97) contrast(1.08) brightness(.94);
}
.about-portrait--dog .about-portrait-index,
.about-portrait--dog .about-portrait-hint { z-index: 4; }

@keyframes founderGlitchJitter {
  0% { transform: translate(0,0) scale(1.02); }
  20% { transform: translate(2px,-1px) scale(1.03); }
  40% { transform: translate(-2px,1px) scale(1.03); }
  60% { transform: translate(1px,1px) scale(1.03); }
  80% { transform: translate(-1px,-1px) scale(1.03); }
  100% { transform: translate(0,0) scale(1.03); }
}
@keyframes founderNoiseFlash {
  0% { filter: opacity(.84); transform: translate(0,0); }
  25% { filter: opacity(.96); transform: translate(-1px,1px); }
  50% { filter: opacity(.88); transform: translate(1px,-1px); }
  75% { filter: opacity(.98); transform: translate(-1px,0); }
  100% { filter: opacity(.84); transform: translate(0,0); }
}

@media (max-width: 640px) {
  .statement-founders-duo--custom .founder-card img { filter: saturate(1) contrast(1.01) brightness(.95); }
}


/* ---------- V14 brandbook asset integration ---------- */
.brand { min-height: 28px; }
.brand-wordmark {
  display:block;
  width:clamp(118px,10vw,154px);
  height:auto;
  max-height:32px;
  object-fit:contain;
  object-position:left center;
  transition:opacity .28s ease, transform .4s var(--ease), filter .35s ease;
}
.brand:hover .brand-wordmark {
  transform:translateY(-1px);
  filter:drop-shadow(0 0 11px rgba(220,204,85,.16));
}
.brand-a11y {
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
/* Hide the old screen-mark ring whenever an old template fragment remains. */
.brand .brand-screen-mark { display:none!important; }

/* Loader now uses an application developed in the brandbook system rather than the legacy sketch. */
.loader-logo-wrap { width:min(67vw, 640px); }
.loader-logo {
  max-height:300px;
  filter:none!important;
  opacity:.98;
}
.loader-logo.ghost-a { opacity:.10; }
.loader-logo.ghost-b { opacity:.075; }
.intro-loader.is-ready .loader-logo { filter:none!important; }
.loader-audio-label { color:rgba(242,242,242,.42); }
.loader-progress-track i { background:var(--brand-mustard); box-shadow:0 0 12px rgba(220,204,85,.45); }
.loader-enter:hover { border-color:var(--brand-mustard); color:var(--brand-mustard); background:rgba(220,204,85,.055); }

/* Official emblem replaces the previous hand-exported/raster identity mark. */
.origin-holo .sketch-main,
.about-origin-holo .sketch-main,
.contact-close-mark .sketch-main {
  filter:none!important;
  opacity:.98;
  object-fit:contain;
}
.origin-holo:hover .sketch-main,
.about-origin-mark:hover .sketch-main,
.contact-close-mark:hover .sketch-main {
  filter:drop-shadow(0 0 18px rgba(220,204,85,.16))!important;
}

/* Footer signature: one deliberate brand moment, not repeated everywhere. */
.closing-brand-signature {
  margin:clamp(70px,9vw,130px) 0 40px;
  padding-top:28px;
  border-top:1px solid rgba(242,242,242,.14);
  display:flex;
  justify-content:flex-start;
}
.closing-brand-signature img {
  width:clamp(120px,15vw,220px);
  height:auto;
  display:block;
  opacity:.94;
}
.closing-brand-signature:hover img { filter:drop-shadow(0 0 15px rgba(220,204,85,.12)); }

/* Bottom-line emblem stays tiny and functional. */
.bottom-brand img {
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:0;
  filter:none;
}

@media (max-width:720px) {
  .brand-wordmark { width:112px; max-height:29px; }
  .loader-logo-wrap { width:min(84vw, 520px); }
  .closing-brand-signature img { width:130px; }
}
@media (max-width:390px) {
  .brand-wordmark { width:104px; }
}

/* ---------- V14.1: founder poster framing refinement ---------- */
/* Keep the official 3:4 applications fully visible instead of cropping the wordmark. */
.statement-photo-v23.statement-founders-duo--custom {
  aspect-ratio: 3 / 2;
  max-height: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 12px;
}
.statement-founders-duo--custom .founder-card,
.statement-founders-duo--custom .founder-card--alexis,
.statement-founders-duo--custom .founder-card--erick {
  transform: none;
  min-height: 0;
  aspect-ratio: 3 / 4;
}
.statement-founders-duo--custom .founder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.statement-founders-duo--custom .statement-photo-meta {
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 6;
}
@media (max-width: 991px) {
  .statement-photo-v23.statement-founders-duo--custom {
    width: min(92vw, 760px);
    aspect-ratio: 3 / 2;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .statement-photo-v23.statement-founders-duo--custom {
    width: 100%;
    aspect-ratio: 3 / 2;
    gap: 8px;
    padding: 8px;
  }
  .statement-founders-duo--custom .founder-card-meta {
    display: none;
  }
  .statement-founders-duo--custom .statement-photo-meta {
    display: none;
  }
}


/* ---------- V15: raw founder portraits / restored scale ---------- */
.statement-founders-duo--raw {
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: 12px;
  padding: 12px;
  align-items: stretch;
  overflow: visible;
}
.statement-founders-duo--raw .founder-card {
  min-height: 640px;
  overflow: hidden;
  background: #050505;
}
.statement-founders-duo--raw .founder-card--alexis { transform: translateY(14px); }
.statement-founders-duo--raw .founder-card--erick { transform: translateY(-14px); }
.statement-founders-duo--raw .founder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04) brightness(.88);
  transition: transform .62s var(--ease), filter .48s var(--ease);
}
.statement-founders-duo--raw .founder-card--alexis img { object-position: 52% 46%; }
.statement-founders-duo--raw .founder-card--erick img { object-position: 50% 43%; }
.statement-founders-duo--raw .founder-card:hover img {
  transform: scale(1.04);
  filter: saturate(.98) contrast(1.08) brightness(.77);
  animation: founderGlitchJitter .28s steps(2,end) 4;
}

.founder-hover-identity {
  position: absolute;
  z-index: 5;
  left: clamp(18px, 8%, 42px);
  right: clamp(18px, 8%, 42px);
  top: 50%;
  transform: translateY(-50%) translateY(8px);
  display: grid;
  gap: 2px;
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transition: opacity .25s ease, filter .36s var(--ease), transform .45s var(--ease);
}
.founder-card:hover .founder-hover-identity {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-50%) translateY(0);
}
.founder-hover-identity span {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  width: 100%;
  font-size: clamp(20px, 2.15vw, 34px);
  line-height: .93;
  letter-spacing: -.055em;
}
.founder-hover-identity b {
  font-family: var(--font-brand-sans, 'Instrument Sans','Inter',system-ui,sans-serif);
  font-weight: 800;
  font-style: normal;
}
.founder-hover-identity em {
  font-family: var(--font-brand-serif, 'Source Serif 4',Georgia,serif);
  font-style: italic;
  font-weight: 400;
  margin-left: .06em;
}
.founder-hover-identity--mustard { color: var(--brand-mustard, #DCCC55); }
.founder-hover-identity--coral { color: var(--brand-coral, #F25151); }

/* keep identity fully inside the cards */
.statement-founders-duo--raw .founder-card::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    linear-gradient(125deg, rgba(220,204,85,.07), rgba(242,81,81,.08) 48%, transparent 72%);
}

@media (max-width: 991px) {
  .statement-founders-duo--raw .founder-card { min-height: 560px; }
  .founder-hover-identity span { font-size: clamp(18px, 3.5vw, 28px); }
}
@media (max-width: 640px) {
  .statement-founders-duo--raw {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
  }
  .statement-founders-duo--raw .founder-card { min-height: 430px; }
  .statement-founders-duo--raw .founder-card--alexis,
  .statement-founders-duo--raw .founder-card--erick { transform: none; }
  .founder-hover-identity {
    left: 10px;
    right: 10px;
  }
  .founder-hover-identity span { font-size: clamp(13px, 4vw, 19px); }
}
@media (hover:none) and (pointer:coarse) {
  .founder-hover-identity { display: none; }
}


/* ---------- V16: About identity system panel ---------- */
.about-brand-system {
  position:relative;
  align-self:stretch;
  min-height:72vh;
  max-height:820px;
  overflow:hidden;
  border:1px solid rgba(242,242,242,.16);
  background:#070707;
  display:grid;
  grid-template-rows:auto minmax(0,1.35fr) minmax(0,.8fr) auto;
  gap:10px;
  padding:12px;
  isolation:isolate;
}
.about-brand-system::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 12%, rgba(220,204,85,.08), transparent 23%),
    linear-gradient(rgba(242,242,242,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,242,242,.025) 1px, transparent 1px);
  background-size:auto,48px 48px,48px 48px;
  opacity:.9;
  z-index:0;
}
.about-brand-system-head,
.about-brand-system-foot {
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:26px;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(242,242,242,.54);
}
.about-brand-system-head span:last-child { color:var(--brand-mustard); }
.brand-system-card {
  position:relative;
  z-index:2;
  overflow:hidden;
  border:1px solid rgba(242,242,242,.1);
  min-height:0;
  display:grid;
  place-items:center;
  transition:transform .55s var(--ease), border-color .4s ease, filter .45s ease;
}
.brand-system-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .65s var(--ease), filter .45s ease;
}
.about-brand-feature {
  background:var(--brand-white);
}
.about-brand-feature img { padding:clamp(18px,3vw,38px); }
.about-brand-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.3fr .85fr .85fr;
  gap:10px;
  min-height:0;
}
.brand-system-card--lockup { background:var(--brand-white); }
.brand-system-card--mustard { background:var(--brand-mustard); }
.brand-system-card--coral { background:var(--brand-coral); }
.brand-system-card--lockup img { padding:14px; }
.brand-system-card--mustard img,
.brand-system-card--coral img { padding:18px; }
.brand-system-card:hover {
  transform:translateY(-3px);
  border-color:rgba(242,242,242,.3);
}
.brand-system-card:hover img { transform:scale(1.025); }
.about-brand-feature:hover img { filter:contrast(1.02); }
.about-brand-system-foot { border-top:1px solid rgba(242,242,242,.08); padding-top:10px; }
.about-brand-system-foot span:first-child { color:rgba(242,242,242,.82); }
.about-brand-system-foot span:last-child { color:var(--brand-coral); }

@media (max-width:991px) {
  .about-brand-system { min-height:70svh; max-height:none; }
}
@media (max-width:640px) {
  .about-brand-system {
    min-height:64svh;
    grid-template-rows:auto minmax(260px,1fr) auto auto;
  }
  .about-brand-grid { grid-template-columns:1fr 1fr; }
  .brand-system-card--lockup { grid-column:1 / -1; min-height:150px; }
  .brand-system-card--mustard,
  .brand-system-card--coral { min-height:150px; }
  .about-brand-system-head span:last-child { display:none; }
}


/* ---------- V16F: footer alignment ---------- */
/* About: keep the CTA-led close, then go straight into the utility footer and giant founders word. */
.about-closing-clean {
  padding-top: 78px;
}
.about-closing-clean .closing-cta {
  margin-bottom: 8px;
}
.about-closing-clean .footer-meta {
  padding-top: clamp(70px, 8vw, 118px);
}
.about-closing-clean .copy-banner {
  padding-top: clamp(34px, 4vw, 58px);
}

/* Contact: same rhythm as Work — utility links first, then the giant page label. */
.contact-footer-worklike {
  padding-top: 40px !important;
}
.contact-footer-worklike .footer-meta {
  padding-top: 0;
}
.contact-footer-worklike .copy-banner {
  padding-top: 40px;
}

@media (max-width: 720px) {
  .about-closing-clean { padding-top: 64px; }
  .about-closing-clean .footer-meta { padding-top: 58px; }
  .contact-footer-worklike { padding-top: 30px !important; }
}


/* ---------- V16G — mustard emblem intro ---------- */
.intro-loader {
  background:
    radial-gradient(circle at 50% 45%, rgba(220,204,85,.055), transparent 28%),
    #020202;
}
.intro-loader::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(220,204,85,.065), transparent 26%),
    linear-gradient(112deg, transparent 32%, rgba(220,204,85,.018) 45%, transparent 58%);
}
.loader-emblem-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(210px, 25vw, 360px);
  aspect-ratio: 1;
  margin-bottom: clamp(24px, 4vh, 46px);
}
.loader-emblem {
  grid-area: 1 / 1;
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(220,204,85,.09));
  opacity: .98;
  animation: loaderEmblemFloat 3.6s ease-in-out infinite;
  z-index: 3;
}
.loader-emblem.ghost { opacity: .08; pointer-events: none; mix-blend-mode: screen; }
.loader-emblem.ghost-a {
  transform: translate3d(-5px,2px,0);
  clip-path: inset(8% 0 57% 0);
  animation: loaderEmblemGhostA 3.1s steps(2,end) infinite;
}
.loader-emblem.ghost-b {
  transform: translate3d(5px,-2px,0);
  clip-path: inset(54% 0 10% 0);
  animation: loaderEmblemGhostB 3.7s steps(2,end) infinite;
}
.loader-orbit {
  grid-area: 1 / 1;
  display: block;
  position: relative;
  border: 1px solid rgba(220,204,85,.12);
  border-radius: 50%;
  pointer-events: none;
}
.loader-orbit-a { width: 100%; height: 100%; animation: loaderOrbit 11s linear infinite; }
.loader-orbit-b { width: 84%; height: 84%; border-style: dashed; opacity: .55; animation: loaderOrbit 8s linear infinite reverse; }
.loader-orbit-a::before,
.loader-orbit-b::before {
  content: "";
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-mustard, #DCCC55);
  box-shadow: 0 0 14px rgba(220,204,85,.85);
}
.loader-orbit-a::before { top: 7%; left: 49%; }
.loader-orbit-b::before { bottom: 10%; right: 16%; }
.loader-brand-lockup { text-align:center; position:relative; z-index:4; }
.loader-wordmark {
  display:flex; align-items:baseline; justify-content:center; gap:.04em;
  color:var(--brand-white,#F2F2F2);
  font-size:clamp(34px,4vw,58px); line-height:.9; letter-spacing:-.055em; white-space:nowrap;
}
.loader-wordmark strong { font-family:var(--font-brand-sans,'Instrument Sans',sans-serif); font-weight:700; }
.loader-wordmark em { font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif); font-style:italic; font-weight:400; }
.loader-audio-label { margin:14px 0 0; color:rgba(242,242,242,.36); letter-spacing:.16em; }
.intro-loader-bottom { color:rgba(242,242,242,.48); }
.loader-progress-track { background:rgba(242,242,242,.12); }
.loader-progress-track i { background:var(--brand-mustard,#DCCC55)!important; box-shadow:0 0 18px rgba(220,204,85,.52)!important; }
.loader-enter { border-color:rgba(220,204,85,.38); color:var(--brand-white,#F2F2F2); }
.loader-enter:hover { border-color:var(--brand-mustard,#DCCC55)!important; color:var(--brand-mustard,#DCCC55)!important; background:rgba(220,204,85,.055)!important; }
.intro-loader.is-ready .loader-emblem { animation:loaderEmblemReady 2.2s ease-in-out infinite; }
.intro-loader.is-ready .loader-orbit-a { border-color:rgba(220,204,85,.28); }
.intro-loader.is-ready .loader-orbit-b { border-color:rgba(242,81,81,.18); }
.intro-loader.is-ready .loader-wordmark { text-shadow:0 0 22px rgba(220,204,85,.08); }
.intro-loader.is-leaving .loader-emblem-stage { animation:loaderStageExit .7s cubic-bezier(.76,0,.24,1) both; }
.intro-loader.is-leaving .loader-wordmark { animation:loaderWordmarkExit .58s steps(2,end) both; }
@keyframes loaderEmblemFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.012)} }
@keyframes loaderEmblemReady { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(220,204,85,.10))} 50%{transform:scale(1.025);filter:drop-shadow(0 0 25px rgba(220,204,85,.20))} }
@keyframes loaderEmblemGhostA { 0%,83%,100%{translate:0 0;opacity:.055} 85%{translate:14px -2px;opacity:.18} 87%{translate:-8px 1px;opacity:.11} 89%{translate:2px 0;opacity:.055} }
@keyframes loaderEmblemGhostB { 0%,74%,100%{translate:0 0;opacity:.045} 76%{translate:-12px 1px;opacity:.16} 78%{translate:7px -1px;opacity:.09} 80%{translate:0 0;opacity:.045} }
@keyframes loaderOrbit { to{transform:rotate(360deg)} }
@keyframes loaderStageExit { 0%{transform:scale(1);opacity:1;filter:blur(0)} 45%{transform:scale(1.06);opacity:1;filter:blur(0)} 100%{transform:scale(1.34);opacity:0;filter:blur(8px)} }
@keyframes loaderWordmarkExit { 0%{transform:translate(0,0);opacity:1} 35%{transform:translate(5px,-1px);opacity:.9} 55%{transform:translate(-8px,1px);opacity:.5} 100%{transform:translate(0,8px);opacity:0} }
@media (max-width:720px) {
  .loader-emblem-stage { width:clamp(190px,58vw,290px); margin-bottom:24px; }
  .loader-wordmark { font-size:clamp(32px,10vw,46px); }
  .loader-audio-label { max-width:290px; margin-inline:auto; line-height:1.5; font-size:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-emblem,.loader-emblem.ghost,.loader-orbit { animation:none!important; }
}


/* ---------- V18 / Work page — brandbook alignment ---------- */
.work-page-v14 {
  --work-ink: #F2F2F2;
  --work-mustard: #DCCC55;
  --work-coral: #F25151;
}
.work-page-v14 .nav { border-bottom-color: rgba(242,242,242,.11); }
.work-page-v14 .nav .sub a.current { color: var(--work-mustard); }

.work-hero-v14 {
  background:
    radial-gradient(circle at 72% 28%, rgba(220,204,85,.045), transparent 24%),
    #050505;
}
.work-hero-inner { isolation:isolate; }
.work-hero-ghost {
  position:absolute;
  top:clamp(72px,11vh,130px);
  right:0;
  z-index:-1;
  display:flex;
  align-items:baseline;
  gap:.02em;
  font-size:clamp(48px,8.5vw,132px);
  line-height:.8;
  letter-spacing:-.055em;
  color:rgba(242,242,242,.035);
  white-space:nowrap;
  pointer-events:none;
  transform:rotate(-2deg);
}
.work-hero-ghost strong { font-family:var(--font-brand-sans,'Instrument Sans',sans-serif); font-weight:700; }
.work-hero-ghost em { font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif); font-style:italic; font-weight:400; }
.work-hero-kicker span:first-child { color:var(--work-mustard); }
.work-hero-title { color:var(--work-ink); }
.work-hero-title span { color:var(--work-mustard); }
.work-hero-bottom a { color:var(--work-mustard); transition:opacity .25s ease; }
.work-hero-bottom a:hover { opacity:.62; }

.work-brand-rail {
  border-top:1px solid rgba(242,242,242,.1);
  border-bottom:1px solid rgba(242,242,242,.1);
  background:#070707;
}
.work-brand-rail-inner {
  min-height:160px;
  display:grid;
  grid-template-columns:minmax(170px,.7fr) 2.3fr 70px;
  gap:36px;
  align-items:center;
}
.work-brand-lockup img { width:min(230px,100%); display:block; }
.work-brand-services {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.13em;
  color:rgba(242,242,242,.48);
}
.work-brand-services span:nth-child(2),
.work-brand-services span:nth-child(5) { color:var(--work-mustard); }
.work-brand-services span:nth-child(3) { color:rgba(242,81,81,.85); }
.work-brand-emblem { display:flex; justify-content:flex-end; }
.work-brand-emblem img { width:58px; height:58px; object-fit:contain; }

.work-project { position:relative; }
.work-project-pissa { --project-accent: var(--work-mustard); }
.work-project-asetam { --project-accent: var(--work-coral); }
.work-project-yaucalli { --project-accent: var(--work-mustard); }
.work-project-index {
  color:var(--project-accent);
  border:1px solid color-mix(in srgb, var(--project-accent) 36%, transparent);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
}
.work-project-client { color:var(--project-accent); }
.work-project-head h2 { color:var(--work-ink); }
.work-project-meta { color:rgba(242,242,242,.44); }

.work-project-stage {
  border-color:rgba(242,242,242,.13);
  transition:border-color .35s ease, box-shadow .4s ease, transform .45s var(--ease);
}
.work-project-stage::before {
  content:"";
  position:absolute;
  inset:14px;
  z-index:12;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(var(--project-accent),var(--project-accent)) left top/30px 1px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) left top/1px 30px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) right top/30px 1px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) right top/1px 30px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) left bottom/30px 1px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) left bottom/1px 30px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) right bottom/30px 1px no-repeat,
    linear-gradient(var(--project-accent),var(--project-accent)) right bottom/1px 30px no-repeat;
  transition:opacity .25s ease;
}
.work-project-stage::after {
  background:
    repeating-linear-gradient(0deg,rgba(242,242,242,.016) 0 1px,transparent 1px 4px),
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 35%,rgba(0,0,0,.24));
  opacity:.62;
  transition:opacity .35s ease;
}
.work-project-stage:hover {
  border-color:color-mix(in srgb, var(--project-accent) 50%, rgba(242,242,242,.12));
  box-shadow:0 28px 80px rgba(0,0,0,.38), 0 0 0 1px color-mix(in srgb,var(--project-accent) 12%,transparent);
}
.work-project-stage:hover::before { opacity:.72; }
.work-project-stage:hover::after { opacity:1; }
.work-project-stage:hover .stage-cursor-label {
  background:var(--project-accent);
  border-color:var(--project-accent);
  color:#050505;
}
.stage-cursor-label { transition:background .25s ease,color .25s ease,border-color .25s ease; }
.work-project-actions a { transition:color .2s ease,border-color .2s ease; }
.work-project-actions a:hover { color:var(--project-accent); border-color:var(--project-accent); }
.work-project-foot p { color:rgba(242,242,242,.62); }

.work-next-inner>span { color:var(--work-coral); }
.work-next-inner h2 { color:var(--work-ink); }
.work-next-inner h2 em {
  font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif);
  font-style:italic;
  font-weight:400;
  color:var(--work-mustard);
  letter-spacing:-.055em;
}
.work-next-inner .btn:hover { background:var(--work-mustard); border-color:var(--work-mustard); color:#050505; }
.work-closing .copy-banner { color:var(--work-ink); }
.work-closing .bottom-brand img { opacity:.82; }

@media (max-width:900px) {
  .work-brand-rail-inner { grid-template-columns:1fr auto; padding-block:28px; }
  .work-brand-services { grid-column:1/-1; grid-row:2; justify-content:flex-start; }
  .work-brand-emblem { grid-column:2; grid-row:1; }
}
@media (max-width:640px) {
  .work-hero-ghost { top:100px; font-size:17vw; right:-12vw; }
  .work-brand-rail-inner { min-height:0; grid-template-columns:1fr auto; gap:18px; }
  .work-brand-lockup img { width:170px; }
  .work-brand-emblem img { width:44px; height:44px; }
  .work-brand-services { gap:7px 14px; font-size:8px; line-height:1.5; }
  .work-project-index { width:30px; height:30px; }
  .work-project-stage::before { inset:9px; }
}


/* ---------- V19 / Contact page — brandbook alignment ---------- */
.contact-page-v24 {
  --contact-ink:#F2F2F2;
  --contact-mustard:#DCCC55;
  --contact-coral:#F25151;
}
.contact-page-v24 .nav { border-bottom-color:rgba(242,242,242,.11); }
.contact-page-v24 .nav .sub a.current { color:var(--contact-mustard); }

.contact-page-v24 .contact-hero-v22 {
  background:
    radial-gradient(circle at 74% 30%,rgba(220,204,85,.055),transparent 23%),
    radial-gradient(circle at 18% 80%,rgba(242,81,81,.025),transparent 24%),
    #050505;
}
.contact-page-v24 .contact-hero-inner { isolation:isolate; }
.contact-hero-ghost {
  position:absolute;
  top:clamp(82px,12vh,145px);
  right:-1vw;
  z-index:-1;
  display:flex;
  align-items:baseline;
  gap:.02em;
  font-size:clamp(48px,8.4vw,130px);
  line-height:.8;
  letter-spacing:-.055em;
  color:rgba(242,242,242,.035);
  white-space:nowrap;
  pointer-events:none;
  transform:rotate(-2deg);
}
.contact-hero-ghost strong { font-family:var(--font-brand-sans,'Instrument Sans',sans-serif);font-weight:700; }
.contact-hero-ghost em { font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif);font-style:italic;font-weight:400; }
.contact-page-v24 .contact-hero-meta span:first-child { color:var(--contact-mustard); }
.contact-page-v24 .contact-hero-title { color:var(--contact-ink); }
.contact-page-v24 .contact-hero-title em {
  font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif);
  font-style:italic;
  font-weight:400;
  color:var(--contact-mustard);
  letter-spacing:-.055em;
}
.contact-page-v24 .contact-hero-bottom a { color:var(--contact-mustard);border-color:rgba(220,204,85,.42); }
.contact-page-v24 .contact-hero-bottom a:hover { opacity:.62; }
.contact-page-v24 .contact-hero-signal {
  background:
    radial-gradient(circle at 74% 34%,rgba(220,204,85,.07),transparent 0 17%,transparent 17%),
    repeating-radial-gradient(ellipse at 74% 34%,transparent 0 60px,rgba(220,204,85,.025) 61px 62px);
}

.contact-brand-rail {
  border-top:1px solid rgba(242,242,242,.1);
  border-bottom:1px solid rgba(242,242,242,.1);
  background:#070707;
}
.contact-brand-rail-inner {
  min-height:154px;
  display:grid;
  grid-template-columns:minmax(170px,.7fr) 2.3fr 70px;
  gap:36px;
  align-items:center;
}
.contact-brand-lockup img { width:min(230px,100%);display:block; }
.contact-brand-services {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.13em;
  color:rgba(242,242,242,.48);
}
.contact-brand-services span:nth-child(2),
.contact-brand-services span:nth-child(4) { color:var(--contact-mustard); }
.contact-brand-services span:nth-child(3) { color:rgba(242,81,81,.86); }
.contact-brand-emblem { display:flex;justify-content:flex-end; }
.contact-brand-emblem img { width:58px;height:58px;object-fit:contain; }

.contact-page-v24 .contact-status-intro>span,
.contact-page-v24 .contact-form-head>span,
.contact-page-v24 .contact-direct-copy>span { color:var(--contact-mustard); }
.contact-page-v24 .contact-status-intro h2 em,
.contact-page-v24 .contact-direct-copy h2 em {
  font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif);
  font-style:italic;
  font-weight:400;
  color:var(--contact-mustard);
}
.contact-page-v24 .contact-status-list strong i {
  background:var(--contact-coral);
  box-shadow:0 0 12px rgba(242,81,81,.52);
}

.contact-page-v24 .contact-form-section-v22 {
  background:
    linear-gradient(var(--contact-mustard),var(--contact-mustard)) 18px 18px/34px 1px no-repeat,
    linear-gradient(var(--contact-mustard),var(--contact-mustard)) 18px 18px/1px 34px no-repeat,
    linear-gradient(var(--contact-coral),var(--contact-coral)) calc(100% - 18px) calc(100% - 18px)/34px 1px no-repeat,
    linear-gradient(var(--contact-coral),var(--contact-coral)) calc(100% - 18px) calc(100% - 18px)/1px 34px no-repeat;
}
.contact-page-v24 .contact-reactive-word { color:rgba(220,204,85,.025); }
.contact-page-v24 .contact-reactive-word.is-active { color:rgba(242,81,81,.04); }
.contact-page-v24 .contact-line-field label,
.contact-page-v24 .contact-choice-field legend { color:rgba(220,204,85,.72); }
.contact-page-v24 .contact-line-field input:focus,
.contact-page-v24 .contact-line-field textarea:focus { border-bottom-color:var(--contact-mustard); }
.contact-page-v24 .contact-choice-grid label:hover span {
  color:var(--contact-ink);
  border-color:var(--contact-coral);
  box-shadow:inset 0 -2px 0 rgba(242,81,81,.35);
}
.contact-page-v24 .contact-choice-grid input:checked+span {
  background:var(--contact-mustard);
  color:#050505;
  border-color:var(--contact-mustard);
}
.contact-page-v24 .budget-grid input:checked+span {
  background:var(--contact-ink);
  border-color:var(--contact-ink);
}
.contact-page-v24 .form-privacy a { color:var(--contact-mustard); }
.contact-page-v24 .contact-send-v22 {
  border-top-color:rgba(220,204,85,.42);
  border-bottom-color:rgba(220,204,85,.42);
}
.contact-page-v24 .contact-send-v22:hover {
  background:var(--contact-mustard);
  color:#050505;
}

.contact-page-v24 .contact-direct-v22 { background:#050505; }
.contact-page-v24 .contact-big-link:nth-child(1):hover strong,
.contact-page-v24 .contact-big-link:nth-child(3):hover strong { color:var(--contact-mustard); }
.contact-page-v24 .contact-big-link:nth-child(2):hover strong { color:var(--contact-coral); }
.contact-page-v24 .contact-big-link:hover { border-bottom-color:rgba(220,204,85,.34); }

.contact-close-v24 { padding:60px 0 140px;border-top:1px solid rgba(242,242,242,.11);overflow:hidden; }
.contact-close-v24-inner {
  position:relative;
  padding:clamp(72px,10vw,140px) 0 20px;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.contact-close-v24-inner>span {
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.13em;
  color:var(--contact-coral);
}
.contact-close-v24-inner h2 {
  position:relative;
  z-index:2;
  margin:24px 0 0;
  font-family:var(--font-brand-sans,'Instrument Sans',sans-serif);
  font-size:clamp(62px,10.2vw,168px);
  line-height:.72;
  letter-spacing:-.08em;
  font-weight:600;
  color:var(--contact-ink);
}
.contact-close-v24-inner h2 em {
  display:inline-block;
  font-family:var(--font-brand-serif,'Source Serif 4',Georgia,serif);
  font-style:italic;
  font-weight:400;
  color:var(--contact-mustard);
  letter-spacing:-.055em;
}
.contact-close-v24-inner>img {
  position:absolute;
  right:2%;
  top:15%;
  width:clamp(72px,10vw,150px);
  opacity:.7;
  transform:rotate(8deg);
}
.contact-page-v24 .contact-footer-worklike .copy-banner { color:var(--contact-ink); }
.contact-page-v24 .contact-footer-worklike .bottom-brand img { opacity:.82; }

@media (max-width:900px) {
  .contact-brand-rail-inner { grid-template-columns:1fr auto;padding-block:28px; }
  .contact-brand-services { grid-column:1/-1;grid-row:2;justify-content:flex-start; }
  .contact-brand-emblem { grid-column:2;grid-row:1; }
  .contact-close-v24-inner { min-height:420px; }
}
@media (max-width:640px) {
  .contact-hero-ghost { top:110px;font-size:17vw;right:-12vw; }
  .contact-brand-rail-inner { min-height:0;grid-template-columns:1fr auto;gap:18px; }
  .contact-brand-lockup img { width:170px; }
  .contact-brand-emblem img { width:44px;height:44px; }
  .contact-brand-services { gap:7px 14px;font-size:8px;line-height:1.5; }
  .contact-page-v24 .contact-form-section-v22 {
    background:
      linear-gradient(var(--contact-mustard),var(--contact-mustard)) 10px 10px/22px 1px no-repeat,
      linear-gradient(var(--contact-mustard),var(--contact-mustard)) 10px 10px/1px 22px no-repeat,
      linear-gradient(var(--contact-coral),var(--contact-coral)) calc(100% - 10px) calc(100% - 10px)/22px 1px no-repeat,
      linear-gradient(var(--contact-coral),var(--contact-coral)) calc(100% - 10px) calc(100% - 10px)/1px 22px no-repeat;
  }
  .contact-close-v24-inner { min-height:360px; }
  .contact-close-v24-inner>img { width:72px;top:16%;right:4%; }
}


/* =========================================================
   V24 — BARRIGÓN VOLUMETRIC IDENTITY MARK
   Layered chrome sculpture / slow spatial motion
   ========================================================= */

.origin-mark {
  perspective: 1050px;
  background:
    radial-gradient(circle at 50% 46%, rgba(220,204,85,.045), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 48%),
    #050505;
}

/* The volumetric object becomes the motion itself; remove old scanline. */
.origin-mark::after {
  display: none !important;
}

.origin-holo-grid {
  inset: -28%;
  opacity: .115;
  background-size: 52px 52px;
  transform: rotate(5deg) scale(1.08);
  animation: holoGrid 22s linear infinite;
}

.origin-sculpture {
  width: 76%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  transform:
    translate(-50%,-50%)
    rotateX(var(--tilt-x,0deg))
    rotateY(var(--tilt-y,0deg));
  transform-style: preserve-3d;
  transition: transform .18s linear;
  will-change: transform;
}

.origin-sculpture-spin,
.origin-sculpture-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.origin-sculpture-spin {
  animation:
    originSculptureTurn
    11s
    cubic-bezier(.45,.05,.55,.95)
    infinite
    alternate;
  will-change: transform;
}

.origin-sculpture-stack {
  transform: rotateZ(-1deg) scale(.94);
}

.origin-sculpture-stack::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(220,204,85,.075),
      rgba(220,204,85,0) 68%
    );
  filter: blur(14px);
  transform: translateZ(-90px);
}

.origin-sculpture-slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;

  transform: translateZ(var(--slice-z));
  opacity: var(--slice-opacity,.72);

  filter:
    grayscale(1)
    brightness(var(--slice-brightness,.72))
    contrast(1.18)
    drop-shadow(0 0 1px rgba(255,255,255,.08));

  backface-visibility: visible;
  user-select: none;
  pointer-events: none;
  will-change: transform, filter;
}

/* Bright layers breaking through the stack = metallic reflections. */
.origin-sculpture-slice.is-reflection {
  opacity: .62;
  filter:
    grayscale(1)
    brightness(1.65)
    contrast(1.22)
    drop-shadow(0 0 4px rgba(255,255,255,.16));
  mix-blend-mode: screen;
}

.origin-sculpture-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;

  transform: translateZ(8px);

  filter:
    grayscale(1)
    brightness(1.08)
    contrast(1.08)
    drop-shadow(0 16px 20px rgba(0,0,0,.36))
    drop-shadow(0 0 10px rgba(255,255,255,.06));

  backface-visibility: visible;
  user-select: none;
  pointer-events: none;

  transition: filter .45s ease;
}

.origin-sculpture-shadow {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4%;
  height: 10%;

  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(0,0,0,.62),
      transparent 70%
    );

  filter: blur(10px);
  transform: translateZ(-110px) rotateX(76deg);
  opacity: .62;
}

.origin-tech.top {
  color: rgba(220,204,85,.64);
}

.origin-tech.bottom {
  color: rgba(255,255,255,.24);
}

/* Mouse interaction speeds the sculpture up very slightly. */
.origin-mark:hover .origin-sculpture-face {
  filter:
    grayscale(1)
    brightness(1.13)
    contrast(1.08)
    drop-shadow(0 16px 22px rgba(0,0,0,.40))
    drop-shadow(0 0 14px rgba(220,204,85,.10));
}

.origin-mark:hover .origin-sculpture-spin {
  animation-duration: 7.5s;
}

@keyframes originSculptureTurn {
  0% {
    transform:
      rotateX(7deg)
      rotateY(-28deg)
      rotateZ(-2deg)
      translateY(3px);
  }

  28% {
    transform:
      rotateX(-3deg)
      rotateY(-8deg)
      rotateZ(1deg)
      translateY(-5px);
  }

  58% {
    transform:
      rotateX(5deg)
      rotateY(15deg)
      rotateZ(-1deg)
      translateY(-8px);
  }

  100% {
    transform:
      rotateX(-5deg)
      rotateY(30deg)
      rotateZ(2deg)
      translateY(2px);
  }
}

@media (max-width: 900px) {
  .origin-sculpture {
    width: 70%;
    max-width: 360px;
  }

  .origin-sculpture-spin {
    animation-duration: 13s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-sculpture-spin {
    animation: none !important;
    transform: rotateX(4deg) rotateY(-10deg);
  }
}


/* =========================================================
   V25 — CONTINUOUS ROTATING BARRIGÓN
   Constant Y-axis rotation. Hover = glitch only.
   ========================================================= */

/* No mouse tilt on this object. */
.origin-sculpture {
  transform: translate(-50%,-50%) !important;
  transition: none !important;
}

/* Continuous rotation like a suspended 3D object. */
.origin-sculpture-spin {
  animation: barrigonContinuousSpin 10.5s linear infinite !important;
}

/* Hover does NOT speed up / stop / tilt the sculpture. */
.origin-mark:hover .origin-sculpture-spin {
  animation-duration: 10.5s !important;
}

/* Keep normal face treatment outside hover. */
.origin-sculpture-face {
  transition: none !important;
}

/* Hover = digital glitch only. Rotation continues underneath. */
.origin-mark:hover .origin-sculpture-face {
  animation: barrigonFaceGlitch .72s steps(1,end) infinite !important;
}

.origin-mark:hover .origin-sculpture-slice:nth-child(4n + 1) {
  animation: barrigonSliceGlitchA .62s steps(1,end) infinite !important;
}

.origin-mark:hover .origin-sculpture-slice:nth-child(4n + 3) {
  animation: barrigonSliceGlitchB .83s steps(1,end) infinite !important;
}

/* A tiny color split only during the glitch. */
.origin-mark:hover .origin-sculpture-slice.is-reflection {
  animation: barrigonReflectionGlitch .54s steps(1,end) infinite !important;
}

@keyframes barrigonContinuousSpin {
  0% {
    transform:
      rotateX(5deg)
      rotateY(0deg)
      rotateZ(-1deg)
      translateY(0);
  }
  25% {
    transform:
      rotateX(3deg)
      rotateY(90deg)
      rotateZ(.5deg)
      translateY(-3px);
  }
  50% {
    transform:
      rotateX(5deg)
      rotateY(180deg)
      rotateZ(1deg)
      translateY(0);
  }
  75% {
    transform:
      rotateX(4deg)
      rotateY(270deg)
      rotateZ(-.5deg)
      translateY(3px);
  }
  100% {
    transform:
      rotateX(5deg)
      rotateY(360deg)
      rotateZ(-1deg)
      translateY(0);
  }
}

@keyframes barrigonFaceGlitch {
  0%, 68%, 100% {
    transform: translateZ(8px) translate(0,0);
    opacity: 1;
    filter:
      grayscale(1)
      brightness(1.08)
      contrast(1.08)
      drop-shadow(0 16px 20px rgba(0,0,0,.36))
      drop-shadow(0 0 10px rgba(255,255,255,.06));
  }
  70% {
    transform: translateZ(8px) translate(7px,-1px);
    opacity: .82;
    filter:
      grayscale(1)
      brightness(1.28)
      contrast(1.25)
      drop-shadow(-4px 0 0 rgba(242,81,81,.32))
      drop-shadow(4px 0 0 rgba(220,204,85,.28));
  }
  74% {
    transform: translateZ(8px) translate(-5px,2px);
    opacity: .92;
    filter:
      grayscale(1)
      brightness(.92)
      contrast(1.35)
      drop-shadow(3px 0 0 rgba(242,81,81,.22))
      drop-shadow(-3px 0 0 rgba(220,204,85,.30));
  }
  79% {
    transform: translateZ(8px) translate(2px,-1px);
    opacity: .72;
  }
  83% {
    transform: translateZ(8px) translate(0,0);
    opacity: 1;
  }
}

@keyframes barrigonSliceGlitchA {
  0%, 72%, 100% {
    margin-left: 0;
    opacity: var(--slice-opacity,.72);
    filter:
      grayscale(1)
      brightness(var(--slice-brightness,.72))
      contrast(1.18);
  }
  74% {
    margin-left: 9px;
    opacity: .30;
    filter:
      grayscale(1)
      brightness(1.55)
      contrast(1.5);
  }
  78% {
    margin-left: -5px;
    opacity: .62;
  }
  82% {
    margin-left: 0;
    opacity: var(--slice-opacity,.72);
  }
}

@keyframes barrigonSliceGlitchB {
  0%, 60%, 100% {
    margin-top: 0;
    opacity: var(--slice-opacity,.72);
  }
  62% {
    margin-top: -6px;
    opacity: .22;
  }
  66% {
    margin-top: 4px;
    opacity: .58;
  }
  70% {
    margin-top: 0;
    opacity: var(--slice-opacity,.72);
  }
}

@keyframes barrigonReflectionGlitch {
  0%, 76%, 100% {
    transform: translateZ(var(--slice-z));
    opacity: .62;
    filter:
      grayscale(1)
      brightness(1.65)
      contrast(1.22)
      drop-shadow(0 0 4px rgba(255,255,255,.16));
  }
  78% {
    transform: translateZ(var(--slice-z)) translateX(10px);
    opacity: .9;
    filter:
      brightness(1.9)
      drop-shadow(-5px 0 0 rgba(242,81,81,.34))
      drop-shadow(5px 0 0 rgba(220,204,85,.32));
  }
  82% {
    transform: translateZ(var(--slice-z)) translateX(-6px);
    opacity: .34;
  }
  86% {
    transform: translateZ(var(--slice-z));
    opacity: .62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-sculpture-spin {
    animation: none !important;
    transform: rotateX(5deg) rotateY(-12deg) !important;
  }

  .origin-mark:hover .origin-sculpture-face,
  .origin-mark:hover .origin-sculpture-slice,
  .origin-mark:hover .origin-sculpture-slice.is-reflection {
    animation: none !important;
  }
}


/* =========================================================
   V26 — HOW WE MAKE THINGS
   Editorial process system replacing the old square tools grid
   ========================================================= */

.making-section {
  padding: 18px 0 96px;
  position: relative;
}

.making-header {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.making-kicker {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .13em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.making-kicker > span:first-child {
  color: var(--brand-mustard, #DCCC55);
}

.making-headline-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr);
  align-items: end;
  gap: clamp(32px, 8vw, 120px);
  padding: clamp(52px, 7vw, 92px) 0 clamp(46px, 6vw, 76px);
}

.making-headline {
  margin: 0;
  max-width: 1050px;
  font-size: clamp(48px, 6.8vw, 112px);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 700;
}

.making-headline em {
  color: var(--brand-mustard, #DCCC55);
  font-family: var(--font-brand-serif, 'Source Serif 4', Georgia, serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.045em;
}

.making-intro {
  max-width: 350px;
  margin: 0 0 6px auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

.making-system {
  border-top: 1px solid var(--line);
}

.making-row {
  --making-accent: var(--brand-mustard, #DCCC55);
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(165px, .72fr) minmax(0, 1.75fr) minmax(170px, .7fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  min-height: 150px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transition:
    padding-left .42s var(--ease),
    padding-right .42s var(--ease);
}

.making-row[data-tone="coral"] {
  --making-accent: var(--brand-coral, #F25151);
}

.making-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--making-accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--making-accent) 5%, transparent) 38%,
      transparent 72%
    );
  transform: translateX(-12px);
  transition: opacity .38s ease, transform .48s var(--ease);
}

.making-row::after {
  content: attr(data-label);
  position: absolute;
  right: 16%;
  top: 50%;
  z-index: -3;
  transform: translateY(-50%);
  font-size: clamp(90px, 11vw, 190px);
  line-height: .75;
  font-weight: 700;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: var(--making-accent);
  opacity: 0;
  filter: blur(.1px);
  transition: opacity .38s ease, transform .5s var(--ease);
  pointer-events: none;
}

.making-row:hover {
  padding-left: 14px;
  padding-right: 14px;
}

.making-row:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.making-row:hover::after {
  opacity: .035;
  transform: translateY(-50%) translateX(12px);
}

.making-row-index {
  align-self: start;
  padding-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--making-accent);
}

.making-row-title {
  display: grid;
  gap: 10px;
}

.making-row-overline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--text-muted);
}

.making-row-title strong {
  font-size: clamp(26px, 3vw, 46px);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.045em;
}

.making-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
}

.making-tool {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
  transition:
    color .22s ease,
    transform .3s var(--ease);
}

.making-tool::before {
  content: attr(data-tool-code);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--making-accent);
  transform: translateY(-7px);
  opacity: .7;
}

.making-tool::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--making-accent);
  transition: transform .32s var(--ease);
}

.making-tool:hover {
  color: var(--making-accent);
  transform: translateY(-2px);
}

.making-tool:hover::after {
  transform: scaleX(1);
}

.making-row-note {
  justify-self: end;
  max-width: 220px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1.65;
  letter-spacing: .1em;
  color: var(--text-muted);
}

.making-footer {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .11em;
  color: var(--text-muted);
}

.making-footer-em {
  color: var(--text);
}

.making-footer-mark {
  justify-self: end;
  color: var(--brand-coral, #F25151);
}

@media (max-width: 980px) {
  .making-headline-wrap {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .making-intro {
    margin-left: 0;
  }

  .making-row {
    grid-template-columns: 42px 150px 1fr;
  }

  .making-row-note {
    grid-column: 3;
    justify-self: start;
    text-align: left;
    margin-top: -6px;
  }
}

@media (max-width: 700px) {
  .making-section {
    padding-bottom: 72px;
  }

  .making-kicker-right {
    display: none;
  }

  .making-headline {
    font-size: clamp(42px, 13vw, 72px);
  }

  .making-row {
    grid-template-columns: 34px 1fr;
    gap: 16px;
    padding: 27px 0 29px;
  }

  .making-row:hover {
    padding-left: 0;
    padding-right: 0;
  }

  .making-row-title,
  .making-tools,
  .making-row-note {
    grid-column: 2;
  }

  .making-tools {
    margin-top: 8px;
    gap: 14px 22px;
  }

  .making-tool {
    font-size: clamp(19px, 6vw, 27px);
  }

  .making-row-note {
    justify-self: start;
    text-align: left;
    margin-top: 9px;
  }

  .making-footer {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .making-footer-mark {
    justify-self: start;
    margin-top: 5px;
  }
}


/* V27 — category word in hover background */
.making-row::after {
  right: 8%;
  font-family: var(--font-brand-sans, 'Instrument Sans','Inter',system-ui,sans-serif);
  font-size: clamp(82px, 10.2vw, 178px);
  letter-spacing: -.075em;
  white-space: nowrap;
}


/* =========================================================
   V28 — SELECTED WORK / EDITORIAL MEDIA GRID
   Varied image + video tiles. Project identity appears on hover.
   ========================================================= */

.work-gallery-v28 {
  padding: clamp(44px, 6vw, 90px) 0 clamp(82px, 10vw, 150px);
}

.work-gallery-kicker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 0 0 20px;
  margin-bottom: clamp(38px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.work-gallery-kicker span:first-child {
  color: var(--brand-mustard, #DCCC55);
}

.work-gallery-kicker span:nth-child(2) {
  text-align: center;
}

.work-gallery-kicker span:last-child {
  text-align: right;
}

.work-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 26px);
  align-items: start;
}

/* Sin Tesis-like varied rhythm rather than three full-width stages. */
.work-tile {
  --tile-accent: var(--brand-mustard, #DCCC55);

  position: relative;
  display: block;
  overflow: hidden;
  background: #0d0d0d;
  text-decoration: none;
  color: #fff;
  isolation: isolate;

  transform: translateZ(0);
}

.work-tile--pissa {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 5;
}

.work-tile--asetam {
  grid-column: 6 / span 7;
  aspect-ratio: 1.42 / 1;
  margin-top: clamp(50px, 7vw, 112px);
  --tile-accent: var(--brand-coral, #F25151);
}

.work-tile--yaucalli {
  grid-column: 3 / span 8;
  aspect-ratio: 16 / 9;
  margin-top: clamp(60px, 8vw, 128px);
}

.work-tile-media,
.work-tile-media img,
.work-tile-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-tile-media {
  overflow: hidden;
  background: #101010;
}

.work-tile-media img,
.work-tile-media video {
  object-fit: cover;
  transform: scale(1.001);
  filter: saturate(.94) contrast(1.02);
  transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    filter .55s ease;
  will-change: transform, filter;
}

.work-tile--pissa .work-tile-media img {
  object-position: center center;
}

.work-tile--asetam .work-tile-media img {
  object-position: center center;
}

.work-tile--yaucalli .work-tile-media video {
  object-position: center center;
}

.work-tile-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.12) 64%,
      rgba(0,0,0,.70) 100%
    );
  opacity: 0;
  transition: opacity .36s ease;
  pointer-events: none;
}

.work-tile-title {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;

  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;

  padding: clamp(18px, 2.2vw, 32px);

  opacity: 0;
  transform: translateY(15px);

  transition:
    opacity .32s ease,
    transform .45s cubic-bezier(.22,1,.36,1);

  pointer-events: none;
}

.work-tile-title > div {
  min-width: 0;
}

.work-tile-title h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-brand-sans, 'Instrument Sans','Inter',sans-serif);
  font-size: clamp(28px, 3.3vw, 58px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 650;
}

.work-tile-title p {
  margin: 9px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .11em;
  color: rgba(255,255,255,.72);
}

.work-tile-title > span {
  flex: 0 0 auto;
  padding-bottom: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .11em;
  color: var(--tile-accent);
}

/* Tiny Barrigón signal line appears only on interaction. */
.work-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: var(--tile-accent);
  transition: right .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
  .work-tile:hover .work-tile-media img,
  .work-tile:hover .work-tile-media video,
  .work-tile:focus-visible .work-tile-media img,
  .work-tile:focus-visible .work-tile-media video {
    transform: scale(1.035);
    filter: saturate(.82) contrast(1.08) brightness(.88);
  }

  .work-tile:hover .work-tile-shade,
  .work-tile:focus-visible .work-tile-shade {
    opacity: 1;
  }

  .work-tile:hover .work-tile-title,
  .work-tile:focus-visible .work-tile-title {
    opacity: 1;
    transform: translateY(0);
  }

  .work-tile:hover::after,
  .work-tile:focus-visible::after {
    right: 0;
  }
}

.work-gallery-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  margin-top: clamp(60px, 8vw, 112px);
  padding-top: 18px;
  border-top: 1px solid var(--line);

  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: .11em;
  color: var(--text-muted);
}

.work-gallery-bottom span:nth-child(2) {
  text-align: center;
  color: rgba(242,242,242,.56);
}

.work-gallery-bottom span:last-child {
  text-align: right;
  color: var(--brand-coral, #F25151);
}

@media (max-width: 900px) {
  .work-gallery-kicker {
    grid-template-columns: 1fr auto;
  }

  .work-gallery-kicker span:nth-child(2) {
    display: none;
  }

  .work-tile--pissa {
    grid-column: 1 / span 5;
  }

  .work-tile--asetam {
    grid-column: 6 / span 7;
    margin-top: 38px;
  }

  .work-tile--yaucalli {
    grid-column: 2 / span 10;
    margin-top: 54px;
  }
}

@media (max-width: 700px) {
  .work-gallery-v28 {
    padding-top: 38px;
  }

  .work-gallery-kicker {
    margin-bottom: 28px;
  }

  .work-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .work-tile,
  .work-tile--pissa,
  .work-tile--asetam,
  .work-tile--yaucalli {
    width: 100%;
    margin-top: 0;
  }

  .work-tile--pissa {
    aspect-ratio: 4 / 5;
  }

  .work-tile--asetam {
    aspect-ratio: 4 / 3;
  }

  .work-tile--yaucalli {
    aspect-ratio: 16 / 10;
  }

  /* No hover on touch: keep project name visible. */
  .work-tile-shade {
    opacity: .72;
    background:
      linear-gradient(
        180deg,
        transparent 46%,
        rgba(0,0,0,.68) 100%
      );
  }

  .work-tile-title {
    opacity: 1;
    transform: none;
    padding: 20px;
  }

  .work-tile-title h2 {
    font-size: clamp(30px, 10vw, 48px);
  }

  .work-tile::after {
    right: 72%;
  }

  .work-gallery-bottom {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 44px;
  }

  .work-gallery-bottom span:nth-child(2),
  .work-gallery-bottom span:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-tile-media img,
  .work-tile-media video,
  .work-tile-title,
  .work-tile::after {
    transition: none !important;
  }
}


/* =========================================================
   V29 — MOBILE QA + MOTION POLISH
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { position: relative; }

main,
header,
footer,
section,
.container {
  min-width: 0;
  max-width: 100%;
}

/* softer global scroll entrance */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Tools section: staged reveal instead of one sudden block */
.making-header.reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.making-header .making-kicker {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity .75s ease,
    transform .9s cubic-bezier(.16,1,.3,1);
}

.making-header .making-headline {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  clip-path: inset(0 0 92% 0);
  transition:
    opacity .9s ease .08s,
    transform 1.2s cubic-bezier(.16,1,.3,1) .08s,
    clip-path 1.25s cubic-bezier(.16,1,.3,1) .08s;
}

.making-header .making-headline em {
  display: inline-block;
  opacity: 0;
  transform: translate3d(14px, 8px, 0);
  transition:
    opacity .8s ease .36s,
    transform 1s cubic-bezier(.16,1,.3,1) .36s;
}

.making-header .making-intro {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .8s ease .42s,
    transform 1s cubic-bezier(.16,1,.3,1) .42s;
}

.making-header.reveal.in .making-kicker,
.making-header.reveal.in .making-headline,
.making-header.reveal.in .making-intro {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.making-header.reveal.in .making-headline {
  clip-path: inset(0 0 0 0);
}

.making-header.reveal.in .making-headline em {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.making-row.reveal {
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.16,1,.3,1);
}

.making-row.reveal.in {
  transform: translate3d(0,0,0);
}

.making-row .making-row-index,
.making-row .making-row-title,
.making-row .making-tools,
.making-row .making-row-note {
  opacity: 0;
  transition:
    opacity .75s ease,
    transform .95s cubic-bezier(.16,1,.3,1);
}

.making-row .making-row-index {
  transform: translate3d(0, 10px, 0);
  transition-delay: .10s;
}

.making-row .making-row-title {
  transform: translate3d(-16px, 0, 0);
  transition-delay: .15s;
}

.making-row .making-tools {
  transform: translate3d(0, 15px, 0);
  transition-delay: .22s;
}

.making-row .making-row-note {
  transform: translate3d(14px, 0, 0);
  transition-delay: .28s;
}

.making-row.reveal.in .making-row-index,
.making-row.reveal.in .making-row-title,
.making-row.reveal.in .making-tools,
.making-row.reveal.in .making-row-note {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.making-tool {
  transition:
    color .34s ease,
    transform .5s cubic-bezier(.16,1,.3,1);
}

.making-tool::after {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.making-footer.reveal {
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 1s ease,
    transform 1.1s cubic-bezier(.16,1,.3,1);
}

/* mobile containment and type fitting */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  body {
    touch-action: pan-y;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  /* 15vw made EXPERIENCIAS wider than some iPhones */
  .statement-headline {
    width: 100%;
    max-width: 100%;
    font-size: clamp(46px, 12.9vw, 56px);
    line-height: .86;
    letter-spacing: -.07em;
  }

  .statement-headline .statement-line {
    max-width: 100%;
  }

  .statement-line-soft {
    padding-left: clamp(14px, 5.5vw, 24px);
  }

  .statement-photo-v23.statement-founders-duo--raw,
  .statement-founders-duo--raw {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .reveal {
    transform: translate3d(0, 15px, 0);
    transition-duration: .95s, 1.05s;
  }

  .making-headline-wrap {
    padding-top: 48px;
    padding-bottom: 42px;
  }

  .making-header .making-headline {
    transform: translate3d(0, 26px, 0);
    clip-path: inset(0 0 88% 0);
    transition-duration: .85s, 1.05s, 1.1s;
  }

  .making-header .making-intro {
    transform: translate3d(0, 13px, 0);
  }

  .making-row.reveal {
    transform: translate3d(0, 17px, 0);
  }

  .making-row .making-row-title {
    transform: translate3d(-10px, 0, 0);
  }

  .making-row .making-tools {
    transform: translate3d(0, 10px, 0);
  }

  .making-row .making-row-note {
    transform: translate3d(8px, 0, 0);
  }

  .making-row::after {
    max-width: 100%;
    right: 0;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .making-header .making-kicker,
  .making-header .making-headline,
  .making-header .making-headline em,
  .making-header .making-intro,
  .making-row .making-row-index,
  .making-row .making-row-title,
  .making-row .making-tools,
  .making-row .making-row-note {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* =========================================================
   V31 — DIACRITIC-SAFE STATEMENT REVEAL
   The old clip-path was visually trimming accents such as Ó.
   Keep the motion, remove glyph clipping.
   ========================================================= */

.statement-headline .statement-line {
  /* Never crop accents / ascenders outside the compressed line box. */
  clip-path: none !important;
  -webkit-clip-path: none !important;

  /* Preserve the editorial reveal with motion + opacity only. */
  opacity: 0;
  transform: translate3d(0, 34px, 0) skewY(1.2deg);
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform 1.08s cubic-bezier(.16,1,.3,1);
  overflow: visible;
}

.home-statement-v23.is-statement-active .statement-headline .statement-line {
  opacity: 1;
  transform: translate3d(0,0,0) skewY(0);
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* A little optical breathing room above uppercase lines so accented
   capitals render safely even with the intentionally tight line-height. */
.statement-headline .statement-line:not(.statement-line-soft) {
  padding-top: .10em;
  margin-top: -.10em;
}

/* Keep the serif lines aligned after the added accent-safe breathing room. */
.statement-headline .statement-line-soft {
  overflow: visible;
}

/* Stagger remains, but eased more naturally. */
.statement-headline .statement-line:nth-child(1) { transition-delay: .18s; }
.statement-headline .statement-line:nth-child(2) { transition-delay: .28s; }
.statement-headline .statement-line:nth-child(3) { transition-delay: .38s; }
.statement-headline .statement-line:nth-child(4) { transition-delay: .48s; }
.statement-headline .statement-line:nth-child(5) { transition-delay: .58s; }

@media (max-width: 700px) {
  .statement-headline .statement-line {
    transform: translate3d(0, 23px, 0) skewY(.8deg);
  }

  .home-statement-v23.is-statement-active .statement-headline .statement-line {
    transform: translate3d(0,0,0) skewY(0);
  }
}


/* =========================================================
   V32 — ENTRY PREFERENCES / BARRIGON RADIO
   Default: ES + SONIDO ON
   ========================================================= */

.loader-entry-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(76px, 10vh, 112px);
  z-index: 8;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.loader-entry-controls {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .13em;
  white-space: nowrap;
}

.loader-language-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(242,242,242,.22);
}

.loader-pref {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  color: rgba(242,242,242,.36);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition:
    color .3s ease,
    opacity .3s ease,
    transform .42s cubic-bezier(.16,1,.3,1);
}

.loader-pref:hover,
.loader-pref:focus-visible {
  color: rgba(242,242,242,.9);
  transform: translateY(-1px);
  outline: none;
}

.loader-lang.is-active {
  color: var(--brand-mustard, #DCCC55);
}

.loader-sound {
  color: rgba(242,242,242,.42);
}

.loader-sound::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand-coral, #F25151);
  vertical-align: 1px;
  transition:
    background .3s ease,
    box-shadow .3s ease;
}

.loader-sound.is-on {
  color: var(--brand-mustard, #DCCC55);
}

.loader-sound.is-on::before {
  background: var(--brand-mustard, #DCCC55);
  box-shadow: 0 0 12px rgba(220,204,85,.26);
}

.loader-entry-panel .loader-enter {
  position: static;
  inset: auto;
  transform: none;
  min-width: 118px;
  padding-inline: 22px;
}

.intro-loader.is-ready .loader-entry-panel {
  animation: loaderEntryPanelIn .85s cubic-bezier(.16,1,.3,1) both;
}

@keyframes loaderEntryPanelIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 700px) {
  .loader-entry-panel {
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px));
    gap: 13px;
  }

  .loader-entry-controls {
    gap: 17px;
    font-size: 7px;
  }
}


/* =========================================================
   V33 — LOADER ALIGNMENT / LOCALIZED ENTER CURSOR / FOUNDER META
   ========================================================= */

/* Treat the entry controls and CTA as one centered unit. */
.loader-entry-panel {
  left: 50vw !important;
  right: auto !important;
  width: min(92vw, 430px);
  transform: translateX(-50%) !important;
  justify-items: center !important;
  text-align: center;
}

.loader-entry-controls {
  width: 100%;
  justify-content: center;
}

.loader-entry-panel .loader-enter {
  display: block;
  margin-inline: auto;
  min-width: 128px;
  text-align: center;
}

/* Preserve exact centering during the ready-state entrance animation. */
.intro-loader.is-ready .loader-entry-panel {
  animation: loaderEntryPanelCenteredIn .85s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes loaderEntryPanelCenteredIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* The loader cursor follows the selected site language. */
@media (pointer:fine) {
  body[data-language="es"].intro-ready .cursor-ring::after {
    content: 'ENTRAR' !important;
  }

  body[data-language="en"].intro-ready .cursor-ring::after {
    content: 'ENTER' !important;
  }
}

/* The global photo metadata was colliding with Alexis's own name/role.
   Move it to the top edge where it acts like editorial framing instead. */
.statement-founders-duo--raw .statement-photo-meta {
  top: 16px !important;
  bottom: auto !important;
  left: 18px !important;
  right: 18px !important;
  align-items: flex-start;
  pointer-events: none;
  color: rgba(255,255,255,.58);
}

/* Give both founder name/role blocks a little more breathing room. */
.statement-founders-duo--raw .founder-card-meta {
  bottom: 18px;
}

.statement-founders-duo--raw .founder-card--alexis .founder-card-meta {
  padding-right: 12px;
}

@media (max-width: 640px) {
  .statement-founders-duo--raw .statement-photo-meta {
    display: none;
  }

  .statement-founders-duo--raw .founder-card-meta {
    bottom: 12px;
  }
}


/* =========================================================
   V34 — FULL-SCREEN ENTRY GATE
   No rectangular CTA. The screen itself is the action.
   ========================================================= */

.loader-entry-panel {
  left: 50% !important;
  width: auto !important;
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  bottom: clamp(78px, 10.5vh, 118px) !important;
  gap: 0 !important;
}

.loader-entry-controls {
  width: auto !important;
  justify-content: center;
}

/* CTA removed: the whole loader is clickable. */
.loader-entry-panel .loader-enter {
  display: none !important;
}

.loader-tap-hint {
  display: none;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .14em;
  color: rgba(242,242,242,.48);
  text-transform: uppercase;
}

/* Don't show the ENTER/ENTRAR cursor label over preference controls.
   Those clicks modify settings only. */
@media (pointer:fine) {
  body.intro-ready.loader-controls-hover .cursor-ring::after {
    content: '' !important;
    opacity: 0 !important;
  }

  body.intro-ready.loader-controls-hover .cursor-ring {
    transform: translate(-50%,-50%) scale(.84) !important;
  }
}

@media (max-width: 700px), (pointer:coarse) {
  .loader-entry-panel {
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px)) !important;
  }

  .loader-tap-hint {
    display: block;
    opacity: .74;
    animation: loaderTapHintPulse 2.8s ease-in-out infinite;
  }

  .loader-entry-controls {
    gap: 18px;
  }
}

@keyframes loaderTapHintPulse {
  0%, 100% { opacity: .42; transform: translateY(0); }
  50% { opacity: .82; transform: translateY(-1px); }
}


/* ============================================================
   B44 — SAFARI PERFORMANCE MODE
   Keep the visual language, remove WebKit's heaviest cursor work.
   ============================================================ */
html.is-safari .cursor-dot,
html.is-safari .cursor-ring {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
html.is-safari .hero-distort-layer.lens {
  filter: contrast(1.32) saturate(.72) brightness(.76);
}

/* =========================================================
   B51 — ERICK PROJECTS / AFCO + LEVEL UP
   Editorial brand case studies + expanded Selected Work grid
   ========================================================= */

.work-tile--levelup {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 5;
  margin-top: clamp(62px, 8vw, 126px);
  --tile-accent: #ff342e;
}

.work-tile--levelup .work-tile-media img {
  object-position: center 46%;
}

.work-tile--yaucalli {
  grid-column: 6 / span 7;
  aspect-ratio: 16 / 10;
  margin-top: clamp(120px, 15vw, 230px);
}

.work-tile--afco {
  grid-column: 3 / span 8;
  aspect-ratio: 4 / 3;
  margin-top: clamp(72px, 9vw, 142px);
  --tile-accent: #ff5b37;
}

.work-tile--afco .work-tile-media img {
  object-position: center center;
}

.case-page-brand {
  background: #050505;
}

.case-brand-title h1 {
  text-transform: uppercase;
}

.case-brand-title--level-up h1 {
  font-size: clamp(104px, 18vw, 290px);
  letter-spacing: -.09em;
}

.case-brand-title--afco .case-hero-statement {
  max-width: 12ch;
}

.brand-case-full {
  position: relative;
  width: 100%;
  min-height: 90svh;
  overflow: hidden;
  background: #0a0a0a;
}

.brand-case-full > img {
  display: block;
  width: 100%;
  height: 90svh;
  object-fit: cover;
}

.brand-case-full--afco > img {
  object-position: center center;
}

.brand-case-full--level {
  background: #070707;
  display: grid;
  place-items: center;
}

.brand-case-full--level > img {
  width: min(54vw, 840px);
  height: 90svh;
  object-fit: cover;
  object-position: center center;
}

.brand-case-caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 4vw;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.66);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}

.brand-case-pair,
.brand-case-grid,
.level-photo-band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(14px, 1.7vw, 26px);
  padding-top: clamp(88px, 10vw, 150px);
  padding-bottom: clamp(88px, 10vw, 150px);
}

.brand-case-pair .brand-case-panel:first-child {
  grid-column: 1 / span 5;
}

.brand-case-pair .brand-case-panel:last-child {
  grid-column: 6 / span 7;
  margin-top: clamp(52px, 7vw, 112px);
}

.brand-case-panel {
  margin: 0;
}

.brand-case-panel img {
  width: 100%;
  height: auto;
  display: block;
  background: #0b0b0b;
}

.brand-case-panel figcaption,
.level-story-shot figcaption {
  padding-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.42);
}

.brand-logo-stage {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.brand-logo-stage--afco {
  background:
    radial-gradient(circle at 80% 25%, rgba(51,43,212,.32), transparent 24%),
    radial-gradient(circle at 12% 78%, rgba(255,83,36,.30), transparent 28%),
    #090909;
}

.brand-logo-stage-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}

.brand-case-eyebrow {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .13em;
  color: rgba(255,255,255,.48);
}

.brand-logo-afco {
  width: min(64vw, 860px);
  max-height: 44vh;
  object-fit: contain;
  object-position: left center;
}

.brand-logo-stage-inner p {
  max-width: 32ch;
  justify-self: end;
  margin: 0 0 4vh;
  font-size: clamp(22px,2.5vw,40px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: rgba(255,255,255,.76);
}

.brand-case-grid .brand-case-panel--wide {
  grid-column: 1 / span 7;
}

.brand-case-grid .brand-case-panel:not(.brand-case-panel--wide) {
  grid-column: 8 / span 5;
  margin-top: clamp(80px, 10vw, 170px);
}

.level-story {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: clamp(14px,1.7vw,26px);
  padding-top: clamp(100px, 12vw, 190px);
  padding-bottom: clamp(100px, 12vw, 190px);
  align-items: start;
}

.level-story-shot {
  margin: 0;
}

.level-story-shot img {
  width: 100%;
  display: block;
}

.level-story-shot--a {
  grid-column: 1 / span 4;
}

.level-story-copy {
  grid-column: 5 / span 4;
  align-self: center;
  padding: 10vh 2vw 0;
}

.level-story-copy > span,
.level-social-head > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: #ff342e;
}

.level-story-copy h2 {
  margin: 22px 0 28px;
  font-family: var(--font-brand-sans,'Instrument Sans','Inter',sans-serif);
  font-size: clamp(58px,7.8vw,128px);
  line-height: .76;
  letter-spacing: -.075em;
  color: #fff;
}

.level-story-copy h2 em {
  font-style: normal;
  color: #ff342e;
}

.level-story-copy p {
  max-width: 31ch;
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}

.level-story-shot--b {
  grid-column: 9 / span 4;
  margin-top: 14vh;
}

.brand-logo-stage--level {
  background: #efefeb;
  color: #080808;
}

.level-logo-lockup {
  min-height: 86svh;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  grid-template-rows: auto 1fr;
  gap: clamp(28px,5vw,80px);
  align-items: center;
}

.brand-logo-stage--level .brand-case-eyebrow {
  color: rgba(0,0,0,.48);
}

.level-symbol {
  width: min(32vw, 430px);
  justify-self: center;
}

.level-wordmark {
  width: min(46vw, 660px);
  justify-self: start;
}

.level-photo-band .brand-case-panel:first-child {
  grid-column: 1 / span 5;
}

.level-photo-band .brand-case-panel:last-child {
  grid-column: 7 / span 5;
  margin-top: clamp(90px,11vw,180px);
}

.level-social-section {
  padding: clamp(90px,11vw,170px) 0;
  background: #f1f0ec;
  color: #0b0b0b;
}

.level-social-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

.level-social-head p {
  justify-self: end;
  max-width: 34ch;
  margin: 0;
  font-size: clamp(22px,2.3vw,36px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.level-social-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(8px,1vw,16px);
  padding-top: clamp(32px,4vw,58px);
}

.level-social-grid img {
  width: 100%;
  display: block;
}

.case-page-level-up .case-note h2 em {
  color: #ff342e;
}

@media (max-width: 900px) {
  .work-tile--levelup {
    grid-column: 1 / span 5;
    margin-top: 54px;
  }
  .work-tile--yaucalli {
    grid-column: 6 / span 7;
    margin-top: 92px;
  }
  .work-tile--afco {
    grid-column: 2 / span 10;
    margin-top: 64px;
  }

  .case-brand-title--level-up h1 {
    font-size: 21vw;
  }

  .brand-case-full--level > img {
    width: min(72vw,720px);
  }

  .brand-logo-stage-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .brand-logo-stage-inner p {
    justify-self: start;
    margin-bottom: 7vh;
  }

  .level-story-shot--a { grid-column: 1 / span 5; }
  .level-story-copy { grid-column: 6 / span 7; padding-top: 4vh; }
  .level-story-shot--b { grid-column: 7 / span 5; margin-top: 5vh; }

  .level-logo-lockup {
    grid-template-columns: 1fr 1.2fr;
  }
}

@media (max-width: 700px) {
  .work-tile--levelup,
  .work-tile--afco {
    width: 100%;
    margin-top: 0;
  }
  .work-tile--levelup { aspect-ratio: 4 / 5; }
  .work-tile--afco { aspect-ratio: 4 / 3; }

  .brand-case-full,
  .brand-case-full > img {
    min-height: 72svh;
    height: 72svh;
  }
  .brand-case-full--level > img {
    width: 100%;
  }
  .brand-case-caption {
    padding: 13px 20px;
    font-size: 7px;
  }
  .brand-case-caption span:last-child { display:none; }

  .brand-case-pair,
  .brand-case-grid,
  .level-photo-band,
  .level-story {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .brand-case-pair .brand-case-panel:last-child,
  .brand-case-grid .brand-case-panel:not(.brand-case-panel--wide),
  .level-photo-band .brand-case-panel:last-child,
  .level-story-shot--b {
    margin-top: 0;
  }

  .brand-logo-stage {
    min-height: 70svh;
  }
  .brand-logo-afco {
    width: 100%;
  }
  .brand-logo-stage-inner p {
    font-size: 24px;
    margin-bottom: 0;
  }

  .level-story-copy {
    padding: 0;
  }
  .level-story-copy h2 {
    font-size: 18vw;
  }

  .level-logo-lockup {
    min-height: 70svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .level-symbol {
    width: 48vw;
    align-self: center;
  }
  .level-wordmark {
    width: 78vw;
    align-self: center;
  }

  .level-social-head {
    grid-template-columns: 1fr;
  }
  .level-social-head p {
    justify-self: start;
  }
  .level-social-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-case-full,
  .brand-case-panel,
  .level-story-shot,
  .level-social-grid img {
    scroll-behavior: auto;
  }
}


/* B51.1 — richer web case studies */
.case-system-v511{padding:120px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:#080808;color:#f2f2ed}
.case-system-v511--yau{background:#e8e3cc;color:#111}
.case-system-v511--asetam{background:#101410;color:#f2f4eb}
.case-system-v511--pissa{background:#111;color:#f3f3ee}
.case-system-head{display:grid;grid-template-columns:minmax(160px,.7fr) 1.5fr 1fr;gap:28px;align-items:start;margin-bottom:70px}
.case-system-head>span,.case-project-list-v511 span,.case-metrics-v511 span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
.case-system-head h2{font-size:clamp(42px,6.2vw,96px);line-height:.88;letter-spacing:-.055em;font-weight:400;margin:0;text-transform:uppercase}
.case-system-head h2 em{font-family:'Bodoni Moda',serif;text-transform:none;font-weight:400}
.case-system-head p{font-size:15px;line-height:1.55;max-width:38ch;margin:0;opacity:.72}
.case-system-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid currentColor;border-left:1px solid currentColor;margin-bottom:38px}
.case-system-grid>div{min-height:250px;padding:20px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;display:flex;flex-direction:column;gap:14px}
.case-system-grid>div>span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;opacity:.5}
.case-system-grid strong{font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:-.035em;font-weight:500;margin-top:auto}
.case-system-grid p{font-size:12px;line-height:1.5;opacity:.65;max-width:28ch;margin:0}
.case-process-v511{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:16px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:20px 0;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.11em;text-transform:uppercase}
.case-process-v511 i{font-style:normal;opacity:.35}
.case-metrics-v511{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.25);margin-bottom:56px}
.case-metrics-v511--pissa{grid-template-columns:repeat(4,1fr)}
.case-metrics-v511>div{min-height:200px;padding:22px;border-right:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;justify-content:space-between}
.case-metrics-v511 strong{font-size:clamp(48px,7vw,110px);line-height:.8;letter-spacing:-.07em;font-weight:400}
.case-project-list-v511{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid currentColor;border-left:1px solid currentColor}
.case-project-list-v511>div{min-height:260px;padding:22px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;display:flex;flex-direction:column;gap:16px}
.case-project-list-v511 strong{font-size:clamp(23px,2.4vw,38px);letter-spacing:-.045em;line-height:.95;font-weight:400;margin-top:auto}
.case-project-list-v511 p{font-size:12px;line-height:1.55;opacity:.65;max-width:36ch;margin:0}
.case-system-v511--yau .case-metrics-v511,.case-system-v511--yau .case-project-list-v511{border-color:rgba(0,0,0,.5)}
@media(max-width:900px){.case-system-v511{padding:80px 0}.case-system-head{grid-template-columns:1fr;margin-bottom:45px}.case-system-head p{max-width:52ch}.case-system-grid{grid-template-columns:1fr 1fr}.case-process-v511{grid-template-columns:1fr;gap:10px}.case-process-v511 i{display:none}.case-metrics-v511,.case-metrics-v511--pissa{grid-template-columns:1fr 1fr}.case-project-list-v511{grid-template-columns:1fr}}
@media(max-width:560px){.case-system-grid,.case-metrics-v511,.case-metrics-v511--pissa{grid-template-columns:1fr}.case-system-grid>div,.case-project-list-v511>div{min-height:190px}.case-metrics-v511>div{min-height:150px}}


/* =========================================================
   B51.2 — WORK / VERTICAL EDITORIAL PROJECT INDEX
   ========================================================= */
.work-index-v512{position:relative;padding:clamp(72px,9vw,138px) 0 clamp(105px,13vw,190px);background:#050505;overflow:hidden}
.work-index-intro,.work-index-bottom{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;align-items:start;border-top:1px solid rgba(255,255,255,.17);padding-top:16px;font-family:'JetBrains Mono',monospace;font-size:8px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.work-index-intro span:first-child{color:var(--brand-mustard,#DCCC55)}
.work-index-intro p{margin:0;font-family:var(--font-brand-sans,'Instrument Sans','Inter',sans-serif);font-size:clamp(18px,2vw,29px);line-height:1.02;letter-spacing:-.035em;text-transform:none;color:rgba(255,255,255,.76);max-width:34ch}
.work-index-intro span:last-child,.work-index-bottom span:last-child{text-align:right}
.work-index-list{padding-top:clamp(90px,12vw,180px)}
.work-index-project{--project-glow:rgba(220,204,85,.12);position:relative;padding:0 0 clamp(120px,16vw,240px);isolation:isolate}
.work-index-project:last-child{padding-bottom:clamp(80px,10vw,150px)}
.work-index-project::before{content:'';position:absolute;z-index:-1;inset:-7vw -12vw 3vw;opacity:0;pointer-events:none;transition:opacity .65s ease;background:radial-gradient(circle at 62% 52%,var(--project-glow),transparent 42%)}
.work-index-project--left::before{background:radial-gradient(circle at 38% 52%,var(--project-glow),transparent 42%)}
.work-index-project--yaucalli{--project-glow:rgba(151,184,115,.18)}.work-index-project--levelup{--project-glow:rgba(255,52,46,.14)}.work-index-project--asetam{--project-glow:rgba(72,119,92,.16)}.work-index-project--afco{--project-glow:rgba(255,83,36,.15)}.work-index-project--pissa{--project-glow:rgba(176,35,49,.17)}
.work-index-link{display:block;color:#fff;text-decoration:none}
.work-index-head{width:min(66%,1060px);display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:clamp(15px,2vw,30px);align-items:end;margin-bottom:clamp(22px,3vw,38px)}
.work-index-project--left .work-index-head{margin-left:auto}
.work-index-number,.work-index-year,.work-index-title p,.work-index-open{font-family:'JetBrains Mono',monospace;font-size:8px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase}
.work-index-number,.work-index-year{padding-bottom:1.2vw;color:rgba(255,255,255,.42)}.work-index-year{text-align:right}
.work-index-title h2{margin:0;font-family:var(--font-brand-sans,'Instrument Sans','Inter',sans-serif);font-size:clamp(68px,9.2vw,150px);font-weight:560;line-height:.72;letter-spacing:-.075em;color:#f4f4f0;transition:letter-spacing .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.work-index-title p{margin:14px 0 0;color:rgba(255,255,255,.48)}
.work-index-media{position:relative;width:min(66%,1060px);aspect-ratio:16/10;overflow:hidden;background:#0b0b0b;transform:translateZ(0)}
.work-index-project--right .work-index-media{margin-left:auto}.work-index-project--left .work-index-media{margin-right:auto}
.work-index-media img,.work-index-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.004);filter:saturate(.72) brightness(.86) contrast(1.04);transition:transform .95s cubic-bezier(.22,1,.36,1),filter .65s ease;will-change:transform,filter}
.work-index-project--levelup .work-index-media img{object-position:center 42%}.work-index-project--afco .work-index-media img,.work-index-project--pissa .work-index-media img{object-position:center center}
.work-index-open{position:absolute;right:18px;bottom:16px;padding:8px 10px;background:rgba(5,5,5,.82);color:#fff;opacity:0;transform:translateY(7px);transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1);z-index:2}
.work-index-media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.18));opacity:.55}
.work-index-bottom{padding-top:18px;border-top:1px solid rgba(255,255,255,.17)}.work-index-bottom span:nth-child(2){text-align:center}.work-index-bottom span:last-child{color:var(--brand-coral,#F25151)}
@media(hover:hover) and (pointer:fine){.work-index-project:hover::before,.work-index-project:focus-within::before{opacity:1}.work-index-link:hover .work-index-media img,.work-index-link:hover .work-index-media video,.work-index-link:focus-visible .work-index-media img,.work-index-link:focus-visible .work-index-media video{transform:scale(1.018);filter:saturate(1) brightness(1) contrast(1.01)}.work-index-link:hover .work-index-title h2,.work-index-link:focus-visible .work-index-title h2{letter-spacing:-.087em;transform:translateX(8px)}.work-index-link:hover .work-index-open,.work-index-link:focus-visible .work-index-open{opacity:1;transform:translateY(0)}}
html.is-safari .work-index-project::before{display:none}html.is-safari .work-index-media img,html.is-safari .work-index-media video{filter:saturate(.9) brightness(.93) contrast(1.02)}
@media(max-width:900px){.work-index-intro,.work-index-bottom{grid-template-columns:1fr auto}.work-index-intro p{grid-column:1/-1;grid-row:2}.work-index-intro span:last-child{grid-column:2;grid-row:1}.work-index-head,.work-index-media{width:80%}.work-index-title h2{font-size:clamp(62px,12vw,108px)}}
@media(max-width:700px){.work-index-v512{padding-top:54px}.work-index-intro{grid-template-columns:1fr}.work-index-intro span:last-child{grid-column:auto;grid-row:auto;text-align:left}.work-index-intro p{grid-column:auto;grid-row:auto;font-size:22px}.work-index-list{padding-top:78px}.work-index-project{padding-bottom:112px}.work-index-head,.work-index-project--left .work-index-head,.work-index-project--right .work-index-head{width:100%;margin-left:0;margin-right:0;grid-template-columns:34px 1fr auto;gap:10px}.work-index-number,.work-index-year{padding-bottom:2.5vw}.work-index-title h2{font-size:18vw}.work-index-title p{font-size:7px;margin-top:10px}.work-index-media,.work-index-project--left .work-index-media,.work-index-project--right .work-index-media{width:100%;margin:0;aspect-ratio:4/3}.work-index-project--levelup .work-index-media{aspect-ratio:4/5}.work-index-open{opacity:1;transform:none;font-size:7px;right:10px;bottom:10px}.work-index-bottom{grid-template-columns:1fr;gap:7px}.work-index-bottom span:nth-child(2),.work-index-bottom span:last-child{text-align:left}}
@media(prefers-reduced-motion:reduce){.work-index-project::before,.work-index-title h2,.work-index-media img,.work-index-media video,.work-index-open{transition:none!important}}