:root {
  --black: #070708;
  --black-soft: #111114;
  --paper: #f1f0eb;
  --white: #fbfbf8;
  --violet: #7c4dff;
  --violet-bright: #976fff;
  --blue: #4e8cff;
  --muted: #9a989f;
  --line: rgba(255, 255, 255, 0.16);
  --paper-line: rgba(7, 7, 8, 0.18);
  --pad: clamp(20px, 3.2vw, 52px);
  --header-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; }

.eyebrow {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-content: space-between;
  padding: var(--pad);
  background: var(--violet);
  color: var(--black);
  pointer-events: none;
  animation: intro-exit 0.9s cubic-bezier(.8, 0, .2, 1) 1.3s forwards;
}
.intro-word {
  display: flex;
  flex-direction: column;
  align-self: center;
  font-size: clamp(74px, 15vw, 240px);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.7;
  text-transform: uppercase;
}
.intro-word span:first-child { transform: translateX(-0.03em); }
.intro-word span:last-child { color: transparent; -webkit-text-stroke: 2px var(--black); }
.intro-line { width: 0; height: 5px; background: var(--black); animation: intro-line 1s ease 0.15s forwards; }
@keyframes intro-line { to { width: 100%; } }
@keyframes intro-exit { to { transform: translateY(-101%); visibility: hidden; } }

.scroll-progress { position: fixed; top: 0; left: 0; z-index: 110; width: 100%; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--violet-bright); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  padding: 0 var(--pad);
  mix-blend-mode: difference;
  transition: top .35s ease, width .35s ease, left .35s ease, right .35s ease, border-radius .35s ease, background .35s ease, padding .35s ease;
}
.site-header.is-compact {
  top: 14px;
  left: var(--pad);
  right: auto;
  width: min(650px, calc(100% - var(--pad) * 2));
  grid-template-columns: 1fr auto;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  background: rgba(7, 7, 8, .86);
  backdrop-filter: blur(18px);
  mix-blend-mode: normal;
}
.brand { font-size: 21px; font-weight: 760; letter-spacing: -0.045em; white-space: nowrap; }
.brand span { color: var(--violet-bright); }
.desktop-nav { display: flex; gap: clamp(22px, 2.8vw, 44px); justify-content: center; }
.desktop-nav a, .talk-link {
  position: relative;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.desktop-nav a::after, .talk-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.desktop-nav a:hover::after, .talk-link:hover::after { transform: scaleX(1); transform-origin: left; }
.talk-link { justify-self: end; }
.talk-link span { color: var(--violet-bright); }
.site-header.is-compact .talk-link { display: none; }
.site-header.is-compact .desktop-nav { justify-self: end; }

.menu-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 10px 0;
  cursor: pointer;
}
.menu-toggle span { margin-right: 3px; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }
.menu-toggle i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: transform .25s ease; }
.menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateX(6px); }
.menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateX(-6px); }
.menu-toggle:focus:not(:focus-visible) { outline: none; }
.menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
body.menu-open .site-header { color: var(--black); mix-blend-mode: normal; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 110px var(--pad) 32px;
  background: var(--violet);
  color: var(--black);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s cubic-bezier(.76, 0, .24, 1);
}
.mobile-menu.is-open { clip-path: inset(0); }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 18px; padding: 8px 0; border-bottom: 1px solid rgba(7,7,8,.28); font-size: clamp(46px, 13vw, 84px); font-weight: 750; letter-spacing: -.06em; line-height: 1; }
.mobile-menu nav small { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; }
.mobile-menu > p { margin: 34px 0 0; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; }

.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #121214; }
.hero-media, .hero-video, .hero-overlay, .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { overflow: hidden; background: #121214; }
.hero-video { object-fit: cover; object-position: 50% 50%; filter: saturate(.72) contrast(1.08); transform: scale(1.025); }
.hero-overlay { z-index: 1; background: linear-gradient(90deg, rgba(7,7,8,.9) 0%, rgba(7,7,8,.46) 43%, rgba(7,7,8,.14) 72%), linear-gradient(0deg, rgba(7,7,8,.92) 0%, transparent 42%); }
.hero-grid { z-index: 2; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 8.333vw 8.333vw; mask-image: linear-gradient(90deg, #000, transparent 60%); }
.concept-label {
  position: absolute;
  z-index: 4;
  top: calc(var(--header-h) + 26px);
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(7,7,8,.35);
  backdrop-filter: blur(10px);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 0 4px rgba(151,111,255,.18); }
.hero-copy { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: clamp(82px, 10vh, 116px); }
.hero-copy > .eyebrow { margin-bottom: clamp(18px, 3vh, 34px); }
.hero h1 { margin: 0; font-size: clamp(62px, 10.2vw, 164px); font-weight: 710; letter-spacing: -.075em; line-height: .78; text-transform: uppercase; }
.hero h1 span { display: block; opacity: 0; transform: translateY(70px); animation: title-in 1s cubic-bezier(.2,.7,.2,1) 1.75s forwards; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: clamp(1px, .11vw, 2px) var(--white); animation-delay: 1.88s; }
@keyframes title-in { to { opacity: 1; transform: none; } }
.hero-meta { display: grid; grid-template-columns: minmax(250px, 36ch) auto; gap: 50px; align-items: end; width: min(760px, 100%); margin-top: clamp(24px, 4vh, 48px); }
.hero-meta p { margin: 0; color: rgba(255,255,255,.72); font-size: clamp(14px, 1.25vw, 18px); }
.hero-meta a { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.65); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta a span { color: var(--violet-bright); }
.hero-index { position: absolute; z-index: 3; right: var(--pad); bottom: 32px; display: grid; grid-template-columns: auto 110px auto; align-items: center; gap: 10px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.hero-index b { grid-column: 1 / -1; justify-self: end; font-weight: 400; color: rgba(255,255,255,.64); }
.hero-timer { height: 1px; background: rgba(255,255,255,.32); overflow: hidden; }
.hero-timer i { display: block; width: 0; height: 100%; background: var(--violet-bright); animation: timer 10.2s linear infinite; }
@keyframes timer { to { width: 100%; } }

.client-rail { contain: inline-size paint; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 38px; padding: 24px var(--pad); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: clip; }
.client-rail > p { z-index: 1; margin: 0; padding-right: 36px; border-right: 1px solid var(--line); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.client-track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.client-set { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.client-set span { color: #ceccd2; font-size: 15px; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; }
.client-set i { width: 4px; height: 4px; border-radius: 50%; background: var(--violet); }
@keyframes ticker { to { transform: translateX(-50%); } }

.work-section { padding: 0 var(--pad); }
.capabilities { padding: clamp(92px, 12vw, 190px) var(--pad); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; margin-bottom: clamp(70px, 9vw, 135px); }
.work-section > .section-head { min-height: 100svh; align-items: center; margin-bottom: 0; }
.section-head h2 { margin: 0; font-size: clamp(54px, 7.5vw, 118px); font-weight: 650; letter-spacing: -.065em; line-height: .86; }
.work-scroll { display: grid; grid-template-columns: minmax(0, .84fr) minmax(420px, 1.16fr); gap: clamp(52px, 8vw, 132px); align-items: start; }
.work-copy-column { position: sticky; top: 0; display: flex; align-items: center; height: 100svh; }
.work-copy-stage { position: relative; width: 100%; min-height: 420px; }
.work-copy { position: absolute; top: 50%; left: 0; right: 0; opacity: 0; transform: translateY(-43%); pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.work-copy.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.project-kicker, .project-client, .project-index {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
}
.project-kicker { color: var(--violet-bright); }
.work-copy h3 { max-width: 9ch; margin: 18px 0 10px; font-size: clamp(54px, 6.2vw, 98px); font-weight: 620; letter-spacing: -.07em; line-height: .86; }
.project-client { color: #d1cfd5; }
.project-description { max-width: 36ch; margin: 28px 0 0; color: var(--muted); font-size: clamp(14px, 1.2vw, 18px); }
.project-index { display: block; margin-top: 42px; color: var(--muted); }
.work-media-column { display: flex; flex-direction: column; gap: 0; padding: 0; }
.work-figure { display: flex; min-height: 100svh; flex-direction: column; justify-content: center; margin: 0; }
.work-figure img { display: block; width: 100%; height: min(74svh, 760px); object-fit: cover; background: var(--black-soft); }
.work-figure.portrait img { object-position: 50% 28%; }
.work-figure figcaption { display: flex; justify-content: space-between; gap: 22px; padding-top: 13px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.work-figure figcaption span:first-child { color: var(--white); }
.mobile-project-copy { display: none; }

.manifesto { display: grid; grid-template-columns: minmax(360px, .92fr) minmax(0, 1.58fr); gap: clamp(46px, 7vw, 116px); align-items: center; min-height: 100svh; padding: clamp(68px, 8vh, 105px) var(--pad); background: var(--paper); color: var(--black); }
.manifesto-side { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: clamp(24px, 3.4vh, 42px); }
.manifesto-meta { margin: 0; font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.6; text-transform: uppercase; }
.manifesto-video-shell { position: relative; width: 100%; height: clamp(320px, 54svh, 600px); margin: 0; overflow: hidden; background: #17171a; transform: rotate(-.7deg); }
.manifesto-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.68) contrast(1.08); transform: scale(1.02); }
.manifesto-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,8,.16), transparent 46%, rgba(7,7,8,.6)); }
.manifesto-video-mark { position: absolute; top: 50%; left: 50%; display: grid; width: clamp(56px, 5vw, 76px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(7,7,8,.18); color: var(--white); transform: translate(-50%, -50%); backdrop-filter: blur(8px); }
.manifesto-video-mark span { margin-left: 4px; font-size: 13px; }
.manifesto-video-shell figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.82); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.manifesto-video-shell figcaption i { display: inline-block; width: 5px; aspect-ratio: 1; margin-right: 5px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 0 4px rgba(151,111,255,.18); }
.manifesto-copy { max-width: 13ch; margin: 0; font-size: clamp(52px, 6.9vw, 106px); font-weight: 600; letter-spacing: -.07em; line-height: .92; }
.manifesto-copy em { color: var(--violet); font-style: normal; }

.capabilities { background: var(--black); }
.capability-list { border-top: 1px solid var(--line); }
.capability { display: grid; grid-template-columns: 60px minmax(260px, 1fr) minmax(240px, .8fr) 30px; gap: 20px; align-items: center; min-height: 130px; border-bottom: 1px solid var(--line); transition: background .3s ease, padding .3s ease; }
.capability:hover { padding: 0 18px; background: var(--violet); color: var(--black); }
.capability > span { font-family: "DM Mono", monospace; font-size: 10px; }
.capability h3 { margin: 0; font-size: clamp(31px, 4.1vw, 64px); font-weight: 560; letter-spacing: -.055em; }
.capability p { max-width: 38ch; margin: 0; color: var(--muted); font-size: 14px; }
.capability:hover p { color: rgba(7,7,8,.7); }
.capability i { justify-self: end; font-size: 22px; font-style: normal; }

.evidence { position: relative; height: 320svh; background: #111114; }
.process-sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(38px, 6vw, 96px); align-items: center; width: 100%; height: 100svh; padding: clamp(82px, 9vh, 118px) var(--pad) clamp(38px, 5vh, 72px); overflow: hidden; }
.process-intro { position: relative; z-index: 8; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.evidence-heading .eyebrow { margin-bottom: clamp(24px, 4vh, 46px); }
.evidence-heading h2 { margin: 0; color: var(--white); font-size: clamp(54px, 6.8vw, 108px); font-weight: 590; letter-spacing: -.068em; line-height: .85; }
.evidence-heading h2 span { color: #66656b; }
.process-readout { margin-top: clamp(52px, 9vh, 100px); }
.process-readout p { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: baseline; margin: 0 0 15px; font-family: "DM Mono", monospace; text-transform: uppercase; }
.process-readout strong { color: var(--violet-bright); font-size: 24px; font-weight: 400; }
.process-readout small { color: #66656b; font-size: 10px; }
.process-readout p span { justify-self: end; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.process-meter { height: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.process-meter i { display: block; width: calc(var(--process-progress, 0) * 100%); height: 100%; background: var(--violet-bright); transition: width .12s linear; }
.process-readout em { display: block; margin-top: 11px; color: #77757d; font-family: "DM Mono", monospace; font-size: 9px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.process-stage { position: relative; height: min(72vh, 680px); isolation: isolate; }
.process-stage::before { content: ""; position: absolute; top: 6%; right: 2%; bottom: 6%; left: 2%; border: 1px solid rgba(255,255,255,.06); transform: skewY(-5deg); }
.process-step { --step-offset: calc(var(--step) * 10%); position: absolute; top: calc(5% + var(--step) * 19%); left: var(--step-offset); z-index: calc(6 - var(--step)); display: grid; grid-template-columns: minmax(0, 1fr) clamp(145px, 17vw, 230px); gap: 24px; width: calc(88% - var(--step-offset)); min-width: 0; min-height: clamp(190px, 25vh, 245px); padding: clamp(22px, 2.2vw, 34px); border: 1px solid rgba(255,255,255,.12); background: #18181c; color: var(--white); box-shadow: 0 24px 50px rgba(0,0,0,.24); opacity: .38; transform: translate3d(28px, 18px, 0) scale(.975); transform-origin: 50% 50%; transition: opacity .55s ease, transform .65s cubic-bezier(.2,.75,.2,1), background .45s ease, color .45s ease, border-color .45s ease; }
.process-step.is-past { opacity: .16; transform: translate3d(-34px, -28px, 0) scale(.96); }
.process-step.is-active { z-index: 10; border-color: var(--violet); background: var(--violet); color: var(--black); opacity: 1; transform: translate3d(-18px, -8px, 0) scale(1.015); box-shadow: 0 34px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(151,111,255,.18); }
.step-copy { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; }
.step-meta { display: flex; justify-content: space-between; gap: 14px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
.step-meta span { color: var(--violet-bright); }
.step-meta small { max-width: 26ch; color: var(--muted); font-size: inherit; text-align: right; }
.process-step.is-active .step-meta span, .process-step.is-active .step-meta small { color: rgba(7,7,8,.68); }
.process-step h3 { margin: 20px 0 7px; font-size: clamp(42px, 4vw, 66px); font-weight: 610; letter-spacing: -.06em; line-height: .85; }
.process-step p { max-width: 48ch; margin: 0; color: var(--muted); font-size: 13px; }
.process-step.is-active p { color: rgba(7,7,8,.7); }
.step-art { position: relative; align-self: stretch; min-height: 130px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.025); }
.process-step.is-active .step-art { border-color: rgba(7,7,8,.28); background: rgba(7,7,8,.055); }
.art-discover { display: grid; place-items: center; }
.art-discover i { position: absolute; width: calc(34px + var(--ring, 0) * 38px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: calc(.82 - var(--ring, 0) * .2); }
.art-discover i:nth-child(1) { --ring: 0; }
.art-discover i:nth-child(2) { --ring: 1; }
.art-discover i:nth-child(3) { --ring: 2; }
.art-discover span { width: 8px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 8px rgba(7,7,8,.1); }
.process-step.is-active .art-discover i { animation: radar 2.4s ease-out infinite; animation-delay: calc(var(--ring) * -.5s); }
.art-design { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 25% 25%; }
.art-design i, .art-design span { position: absolute; display: block; background: currentColor; }
.art-design i { top: 24%; left: 15%; width: 34%; height: 26%; }
.art-design span { right: 14%; bottom: 18%; width: 24%; aspect-ratio: 1; border-radius: 50%; }
.process-step.is-active .art-design i { animation: compose-block 2.5s cubic-bezier(.2,.75,.2,1) infinite alternate; }
.process-step.is-active .art-design span { animation: compose-dot 2.5s cubic-bezier(.2,.75,.2,1) infinite alternate; }
.art-produce { display: flex; align-items: flex-end; justify-content: center; gap: 8%; padding: 18% 14%; }
.art-produce i { width: 18%; height: var(--bar); background: currentColor; transform-origin: bottom; }
.art-produce i:nth-child(1) { --bar: 44%; }
.art-produce i:nth-child(2) { --bar: 76%; }
.art-produce i:nth-child(3) { --bar: 58%; }
.art-produce span { position: absolute; right: 10%; bottom: 10%; width: 11px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.process-step.is-active .art-produce i { animation: build-up 1.55s cubic-bezier(.2,.75,.2,1) infinite alternate; animation-delay: calc(var(--bar) * -.4); }
@keyframes radar { 0% { transform: scale(.65); opacity: .1; } 45% { opacity: .8; } 100% { transform: scale(1.18); opacity: .08; } }
@keyframes compose-block { to { transform: translate(72%, 92%) rotate(8deg); } }
@keyframes compose-dot { to { transform: translate(-150%, -92%) scale(.72); } }
@keyframes build-up { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.contact-section { min-height: 92svh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad); background: var(--violet); color: var(--black); }
.contact-top { display: flex; justify-content: space-between; align-items: flex-start; }
.contact-top > p:last-child { margin: 0; font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.55; text-align: right; text-transform: uppercase; }
.contact-title { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); padding: 14px 0 25px; font-size: clamp(78px, 15vw, 235px); font-weight: 760; letter-spacing: -.085em; line-height: .85; }
.contact-title i { font-size: .42em; font-style: normal; transition: transform .35s ease; }
.contact-title:hover i { transform: translate(10px, -10px); }
.contact-data { display: grid; grid-template-columns: 1fr auto auto; gap: 36px; align-items: end; padding-top: 28px; border-top: 1px solid rgba(7,7,8,.35); }
.contact-data p { max-width: 35ch; margin: 0; }
.contact-data a { font-family: "DM Mono", monospace; font-size: 10px; text-transform: uppercase; border-bottom: 1px solid var(--black); }

footer { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 34px; align-items: center; padding: 30px var(--pad); border-top: 1px solid var(--line); background: var(--black); }
footer p { margin: 0; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; text-transform: uppercase; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; font-family: "DM Mono", monospace; font-size: 9px; text-transform: uppercase; }
footer nav a:hover { color: var(--violet-bright); }

.reveal { opacity: 0; transform: translateY(44px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --header-h: 62px; }
  .site-header, .site-header.is-compact { top: 0; left: 0; right: 0; width: 100%; grid-template-columns: 1fr auto; min-height: var(--header-h); padding: 0 var(--pad); border: 0; border-radius: 0; background: transparent; backdrop-filter: none; mix-blend-mode: difference; }
  .desktop-nav, .talk-link { display: none; }
  .menu-toggle { display: flex; }
  .concept-label { top: 82px; left: var(--pad); right: auto; }
  .hero h1 { font-size: clamp(56px, 15vw, 110px); line-height: .82; }
  .hero-meta { grid-template-columns: 1fr; gap: 22px; width: min(440px, 100%); }
  .hero-meta a { width: min(260px, 100%); }
  .hero-overlay { background: linear-gradient(90deg, rgba(7,7,8,.8), rgba(7,7,8,.2)), linear-gradient(0deg, rgba(7,7,8,.96) 0%, rgba(7,7,8,.2) 72%); }
  .hero-index { display: none; }
  .client-rail { grid-template-columns: 1fr; gap: 18px; }
  .client-rail > p { border: 0; padding: 0; }
  .section-head { grid-template-columns: 1fr; gap: 26px; }
  .work-scroll { grid-template-columns: 1fr; gap: 0; }
  .work-copy-column { display: none; }
  .work-media-column { gap: 0; padding: 0; }
  .work-figure { min-height: 100svh; }
  .work-figure img { height: auto; aspect-ratio: 16 / 11; }
  .work-figure figcaption { display: none; }
  .mobile-project-copy { display: block; padding-top: 18px; }
  .mobile-project-copy > p { margin: 0 0 10px; color: var(--violet-bright); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-project-copy h3 { margin: 0 0 12px; font-size: clamp(36px, 10vw, 58px); font-weight: 590; letter-spacing: -.055em; line-height: .92; }
  .mobile-project-copy > span { display: block; max-width: 42ch; color: var(--muted); font-size: 14px; }
  .manifesto { grid-template-columns: 1fr; gap: 60px; }
  .manifesto-side { gap: 30px; }
  .manifesto-video-shell { width: min(620px, 100%); height: 54svh; min-height: 360px; transform: none; }
  .manifesto-video { transform: none; }
  .capability { grid-template-columns: 42px 1fr 24px; padding: 28px 0; }
  .capability:hover { padding: 28px 10px; }
  .capability p { grid-column: 2; }
  .capability i { grid-column: 3; grid-row: 1; }
  .evidence { height: auto; padding: clamp(90px, 14vw, 128px) var(--pad); }
  .process-sticky { position: static; display: block; height: auto; padding: 0; overflow: visible; }
  .process-intro { display: block; }
  .evidence-heading h2 { max-width: 10ch; font-size: clamp(52px, 13vw, 90px); }
  .process-readout { display: none; }
  .process-stage { height: auto; margin-top: 64px; }
  .process-stage::before { display: none; }
  .process-step, .process-step.is-past, .process-step.is-active { position: relative; top: auto; left: auto; width: 100%; min-width: 0; min-height: 300px; margin-top: -1px; opacity: 1; transform: none; }
  .process-step { grid-template-columns: minmax(0, 1fr) minmax(130px, 34%); box-shadow: none; }
  .process-step.is-active { background: var(--violet); }
  .contact-data { grid-template-columns: 1fr; align-items: start; }
  .contact-data a { width: max-content; }
  footer { grid-template-columns: 1fr auto; }
  footer > p:first-of-type { grid-column: 1 / -1; grid-row: 2; }
  footer nav { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 560px) {
  /**/
  .intro-word { font-size: 23vw; }
  .hero-copy { bottom: 54px; }
  .hero-copy > .eyebrow { max-width: 24ch; }
  .hero h1 { font-size: 16vw; }
  .hero-video { object-position: 52% 50%; }
  .section-head h2 { font-size: 15vw; }
  .manifesto-copy { font-size: 14vw; }
  .manifesto-video-shell { height: 48svh; min-height: 320px; }
  .manifesto-video-shell figcaption { flex-direction: column; gap: 4px; }
  .capability h3 { font-size: 9vw; }
  .process-step, .process-step.is-active { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
  .step-copy { min-height: 230px; }
  .step-art { min-height: 170px; }
  .contact-section { min-height: 80svh; }
  .contact-title { font-size: 19vw; }
  footer { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .intro { display: none; }
  .reveal { opacity: 1; transform: none; }
  .client-track { animation: none; }
  .hero-video, .manifesto-video { transform: none; }
  .evidence { height: auto; padding: clamp(90px, 10vw, 130px) var(--pad); }
  .process-sticky { position: static; display: block; height: auto; padding: 0; overflow: visible; }
  .process-readout { display: none; }
  .process-stage { height: auto; margin-top: 64px; }
  .process-stage::before { display: none; }
  .process-step, .process-step.is-past, .process-step.is-active { position: relative; top: auto; left: auto; width: 100%; min-width: 0; min-height: 260px; margin-top: -1px; opacity: 1; transform: none; }
}

/* Fix QA 24-ago: el reset.css de Hello Elementor estiliza button/[type="button"]
   (base: color y borde #C36; hover/focus: fondo #C36 + texto blanco).
   Neutralizado para el toggle del menu (paridad con preview aprobado). */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
  background: none;
  border: 0;
  color: inherit;
}
/* Logo TDF 24-ago: isotipo en header e intro (pedido de Santiago) */
.site-header .brand-mark {
  height: 30px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-2px);
}
.site-header.is-compact .brand-mark { height: 24px; }
.intro-mark {
  width: clamp(56px, 7vw, 92px);
  height: auto;
  justify-self: start;
}
@media (max-width: 560px) {
  /**/
  .site-header .brand-mark { height: 26px; margin-right: 8px; }
}
/* Footer legal 24-ago: direccion, tel, NIT y disclaimer APIs (traidos de prod) */
.footer-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 10px;
}
footer .footer-legal p {
  text-transform: none;
  font-size: 10px;
  line-height: 1.7;
  max-width: 980px;
  color: var(--muted);
}
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--violet-bright); }
/* Ronda 2 feedback 24-ago */
/* 1. Apoyo informativo bajo "El trabajo habla por nosotros" + pista de scroll */
.section-head-support {
  grid-column: 2;
  display: grid;
  gap: 20px;
  justify-items: start;
}
.section-head-support p {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}
.section-head-support span {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-bright);
  animation: support-nudge 2.2s ease-in-out infinite;
}
@keyframes support-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 900px) {
  .section-head-support { grid-column: auto; }
}

/* 2. Proceso: recorrido de scroll mas corto (antes 320svh) */
@media (min-width: 901px) {
  .evidence.process-section { height: 200svh; }
}

/* 3. Ticker de clientes premium en movil */
@media (max-width: 900px) {
  .client-rail { padding-top: 22px; padding-bottom: 22px; }
  .client-set { gap: 22px; padding-right: 22px; }
  .client-set span {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
  }
  .client-track { animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) {
  .section-head-support span { animation: none; }
}
/* Compactar la estacion Trabajo: titulo y apoyo juntos, centrados */
.work-section > .section-head { grid-template-rows: auto auto; align-content: center; }
/* Ronda 3 (24-ago): casos en movil como lamina editorial. Solo <=900px, desktop intacto. */
@media (max-width: 900px) {
  .work-media-column { counter-reset: tdf-caso; }
  .work-figure {
    counter-increment: tdf-caso;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 92px 22px 60px;
    overflow: clip;
  }
  /* numero de caso gigante en outline, medio recortado por el borde */
  .work-figure::before {
    content: "0" counter(tdf-caso);
    position: absolute;
    top: 30px;
    right: -10px;
    z-index: 0;
    font-size: clamp(120px, 42vw, 170px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(151, 111, 255, .34);
  }
  /* imagen como pieza impresa: hairline + sombra dura violeta */
  .work-figure img {
    position: relative;
    z-index: 1;
    border: 1px solid var(--line);
    box-shadow: 14px 14px 0 rgba(124, 77, 255, .18);
  }
  .mobile-project-copy { position: relative; z-index: 1; padding-top: 6px; }
  /* kicker con regla violeta + contador de caso */
  .mobile-project-copy > p { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
  .mobile-project-copy > p::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--violet-bright); }
  .mobile-project-copy > p::after {
    content: "0" counter(tdf-caso) " / 04";
    margin-left: auto;
    color: var(--muted);
    letter-spacing: .08em;
  }
  .mobile-project-copy h3 { font-size: clamp(40px, 11.5vw, 62px); margin: 0 0 14px; }
  /* descripcion como pull-quote con filete violeta */
  .mobile-project-copy > span { border-left: 2px solid var(--violet); padding-left: 14px; font-size: 14px; line-height: 1.6; }
}
@media (max-width: 560px) {
  .work-figure { padding: 84px 18px 56px; }
  .work-figure img { box-shadow: 10px 10px 0 rgba(124, 77, 255, .18); }
}
/* Ronda 4 (24-ago): transicion del manifiesto en movil */
@media (max-width: 900px) {
  /* video mas compacto para que el titular asome bajo el fold al aterrizar el snap */
  .manifesto-video-shell { height: 46svh; min-height: 300px; }
  /* pista de continuacion al final del manifiesto */
  .manifesto::after {
    content: "Sigue bajando \00b7 Capacidades \2193\FE0E";
    display: block;
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid var(--paper-line);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(7, 7, 8, .55);
  }
}
@media (max-width: 560px) {
  .manifesto-video-shell { height: 42svh; min-height: 280px; }
}
/* Ronda 4b: el titular del manifiesto debe asomar al aterrizar el snap en movil */
@media (max-width: 900px) {
  .manifesto { align-content: start; }
  .manifesto-side { justify-content: flex-start; gap: 24px; }
  /* cue: espacio correcto alrededor del punto */
  .manifesto::after { content: "Sigue bajando · Capacidades ↓\FE0E"; }
}

/* Fix 26-ago: el footer global de Fase 2 trae 6 enlaces; nada debe empujar scroll horizontal en el home */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  footer { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  footer nav { grid-column: auto; grid-row: auto; }
  footer > p { grid-column: auto; grid-row: auto; }
}