/* ============ Tokens ============ */
:root {
  --paper: #f5f2ea;
  --paper-dim: #eae5d6;
  --ink: #13120d;
  --ink-dim: #5c584d;
  --accent: #ff3d1a;
  --line: rgba(19, 18, 13, 0.18);
  --line-strong: rgba(19, 18, 13, 0.9);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.2, 1.4, 0.4, 1);

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

/* ============ Focus visibility (keyboard nav) ============ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.section--ink :focus-visible, .btn--fill:focus-visible {
  outline-color: var(--accent);
  outline-offset: 2px;
}

/* ============ Custom cursor (hover-capable desktop only) ============ */
.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), width 220ms var(--spring), height 220ms var(--spring);
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid var(--ink);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}
.cursor-ring.is-big { width: 64px; height: 64px; background: var(--accent); border-color: transparent; }
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--ink);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}
.cursor-ring.is-active, .cursor-dot.is-active { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

/* ============ Scroll progress ============ */
.progress-line {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 100;
}

/* ============ Nav ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  background: var(--paper);
  border-bottom: 2px solid var(--line-strong);
}

.nav__brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.nav__links a { position: relative; padding: 6px 2px; }
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--ink);
  transition: right 260ms var(--ease-out);
}
.nav__links a:not(.nav__cta):hover::after { right: 0; }

.nav__cta {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  transition: background 180ms var(--ease-out), transform 220ms var(--spring);
}
.nav__cta:hover { background: var(--accent); transform: translateY(-2px); }
.nav__cta:active { transform: translateY(0) scale(0.97); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav__burger span { width: 22px; }
.nav__burger span {
  height: 2px; width: 100%;
  background: var(--ink);
  transition: transform 280ms var(--ease-in-out), opacity 180ms var(--ease-out);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px clamp(20px, 5vw, 56px) 100px;
}

.hero__kicker {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.hero__name {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: clamp(3.2rem, 13vw, 9rem);
  line-height: 0.92;
  margin-bottom: 32px;
}
.split-word { display: block; white-space: nowrap; }
.split-word--accent { color: var(--accent); }

.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(4deg);
  filter: blur(6px);
  animation: char-in 640ms var(--ease-out) forwards;
}
@keyframes char-in {
  to { opacity: 1; transform: translateY(0) rotate(0deg); filter: blur(0); }
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  color: var(--ink-dim);
  margin-bottom: 22px;
}

.hero__lead {
  max-width: 540px;
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.hero [data-fade] {
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up 560ms var(--ease-out) forwards;
  animation-delay: calc(var(--fd, 0) * 130ms + 620ms);
}
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

.process__step[data-fade] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.process__step[data-fade].is-visible { opacity: 1; transform: translateY(0); }

.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92rem;
  border: 2px solid var(--ink);
  transition: transform 240ms var(--spring), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateY(-3px); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { transform: translateY(-3px); background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(-1px) scale(0.98); }

.hero__mark {
  position: absolute;
  right: clamp(20px, 5vw, 56px);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}
.hero__mark-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============ Marquee ============ */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  gap: 18px;
  white-space: nowrap;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  /* No animation declared here on purpose. JS sets the whole `animation`
     shorthand (name + real duration) in one shot once it has measured the
     exact shift distance. Declaring a placeholder animation here (e.g.
     "26s" / "-50%") and having JS correct it a moment later means the
     track plays with wrong values first and then gets corrected while
     running — which is its own restart/jump, once per page load, even
     though the final values are right. Starting it only once, correctly,
     avoids that entirely. */
}
.marquee__track span:nth-child(odd):not(:first-child) { color: var(--accent); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-shift))); }
}

/* ============ Sections ============ */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px clamp(20px, 5vw, 56px);
}
.section--ink { background: var(--ink); color: var(--paper); max-width: none; }
.section--ink > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.section__head { margin-bottom: 56px; }
.section__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* ============ About ============ */
.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}

[data-wipe] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out), filter 640ms var(--ease-out);
}
[data-wipe].is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.about__lead p {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: 24px;
  max-width: 640px;
}
.about__lead p:last-child { margin-bottom: 0; }

.about__stack-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-bottom: 16px;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 7px 12px;
  border: 1.5px solid var(--line-strong);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.tag-list li:hover { background: var(--ink); color: var(--paper); }
.tag-list--dark li { border-color: rgba(245,242,234,0.35); }
.tag-list--dark li:hover { background: var(--paper); color: var(--ink); }

/* ============ Projects ============ */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0;
  border-top: 2px solid rgba(245,242,234,0.35);
  border-left: 2px solid rgba(245,242,234,0.35);
}

.project-card {
  position: relative;
  padding: 40px;
  border-right: 2px solid rgba(245,242,234,0.35);
  border-bottom: 2px solid rgba(245,242,234,0.35);
}

[data-draw] { position: relative; overflow: hidden; }
[data-draw]::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transition: clip-path 620ms var(--ease-out);
  pointer-events: none;
}
[data-draw].is-visible::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.project-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.project-card__index {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.85rem;
}
.project-card__tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(245,242,234,0.78);
  text-transform: uppercase;
}

.project-card h3 {
  font-size: 1.7rem;
  margin-bottom: 18px;
}

.project-card p {
  font-size: 0.98rem;
  color: rgba(245,242,234,0.85);
  margin-bottom: 26px;
  max-width: 42ch;
}

.project-card .tag-list { margin-bottom: 28px; }

.project-card__callout {
  border: 2px solid var(--accent);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.project-card__callout-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.project-card__callout p {
  font-size: 0.9rem;
  color: rgba(245,242,234,0.85);
  max-width: none;
  margin-bottom: 14px;
}
.project-card__callout-note {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(245,242,234,0.55);
  border-bottom: none;
}

.project-card__link {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9rem;
  display: inline-block;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.project-card__link--muted {
  border-color: rgba(245,242,234,0.35);
  color: rgba(245,242,234,0.55);
}

/* ============ Process ============ */
.process {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}

.process__steps {
  padding-left: 56px;
}

.process__step {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 44px;
}
.process__step:last-child { padding-bottom: 0; }

/* Short connector between this step's index box and the next one only
   (not one long line down the whole list). It lives inside each step,
   so it fades in with that step's own reveal and never needs separate
   height math against the whole list. */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -33px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}

.process__index {
  position: absolute;
  left: -56px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  z-index: 1;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
}
.process__step h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  transition: color 260ms var(--ease-out);
}
.process__step p { color: var(--ink-dim); font-size: 0.95rem; max-width: 420px; }

.process__step.is-current .process__index {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.process__step.is-current h3 { color: var(--accent); }

/* The scene comes first in the HTML on purpose — sticky's containing
   block follows the document's actual flow, not the visually-painted
   `order`, and having those two disagree is what let the scene sit on
   top of step text on mobile (see the mobile media queries below).
   Only above the single-column breakpoint do we visually put the
   steps back on the left and the scene on the right with `order`,
   where sticky has no overlap risk anyway (two separate columns). */
@media (min-width: 861px) {
  .process__steps { order: 1; }
  .process__scene { order: 2; }
}

/* ============ Process scene (right column, changes per active step) ============ */
.process__scene {
  position: sticky;
  top: 110px;
  height: 260px;
  background: var(--paper);
  border: 2px solid var(--line-strong);
  overflow: hidden;
  z-index: 1;
}

.process__scene-caption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  filter: blur(3px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), filter 420ms var(--ease-out);
  pointer-events: none;
}
.scene.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* scene 1: relevamiento -- magnifying glass sweeps over lines */
.scene-lines { display: flex; flex-direction: column; gap: 14px; }
.scene-lines span {
  display: block;
  height: 8px;
  background: var(--line-strong);
  opacity: 0;
}
.scene-lines span:nth-child(1) { width: 120px; }
.scene-lines span:nth-child(2) { width: 90px; }
.scene-lines span:nth-child(3) { width: 130px; }
.scene[data-scene="1"].is-active .scene-lines span {
  animation: scene-line-in 480ms var(--ease-out) forwards;
}
.scene[data-scene="1"].is-active .scene-lines span:nth-child(1) { animation-delay: 120ms; }
.scene[data-scene="1"].is-active .scene-lines span:nth-child(2) { animation-delay: 260ms; }
.scene[data-scene="1"].is-active .scene-lines span:nth-child(3) { animation-delay: 400ms; }
@keyframes scene-line-in { to { opacity: 1; } }

.scene-glass {
  position: absolute;
  width: 34px; height: 34px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  left: 30%;
  opacity: 0;
}
.scene-glass::after {
  content: '';
  position: absolute;
  width: 3px; height: 14px;
  background: var(--accent);
  bottom: -13px; right: -2px;
  transform: rotate(-45deg);
}
.scene[data-scene="1"].is-active .scene-glass {
  animation: scene-glass-sweep 1.1s var(--ease-in-out) forwards;
}
@keyframes scene-glass-sweep {
  0% { opacity: 0; transform: translateX(-60px); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translateX(60px); }
}
.scene-check {
  position: absolute;
  left: calc(50% + 66px);
  top: calc(50% - 4px);
  width: 20px; height: 12px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  opacity: 0;
  transform: rotate(-45deg) scale(0.5);
}
.scene[data-scene="1"].is-active .scene-check {
  animation: scene-check-in 320ms var(--spring) 1.15s forwards;
}
@keyframes scene-check-in { to { opacity: 1; transform: rotate(-45deg) scale(1); } }

/* scene 2: diseno -- swatches drop into place */
.scene-swatch {
  width: 44px; height: 44px;
  opacity: 0;
  transform: translateY(-16px) scale(0.85);
}
.scene-swatch--a { background: var(--ink); }
.scene-swatch--b { background: var(--accent); }
.scene-swatch--c { background: transparent; border: 3px solid var(--ink); }
.scene[data-scene="2"].is-active .scene-swatch {
  animation: scene-drop 520ms var(--spring) forwards;
}
.scene[data-scene="2"].is-active .scene-swatch--a { animation-delay: 60ms; }
.scene[data-scene="2"].is-active .scene-swatch--b { animation-delay: 180ms; }
.scene[data-scene="2"].is-active .scene-swatch--c { animation-delay: 300ms; }
@keyframes scene-drop { to { opacity: 1; transform: translateY(0) scale(1); } }

/* scene 3: desarrollo -- brackets slide in, cursor blinks a few times */
.scene-bracket {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  opacity: 0;
}
.scene-bracket--l { transform: translateX(-24px); }
.scene-bracket--r { transform: translateX(24px); }
.scene[data-scene="3"].is-active .scene-bracket {
  animation: scene-bracket-in 420ms var(--ease-out) forwards;
}
.scene[data-scene="3"].is-active .scene-bracket--r { animation-delay: 100ms; }
@keyframes scene-bracket-in { to { opacity: 1; transform: translateX(0); } }
.scene-cursor {
  width: 3px; height: 34px;
  background: var(--accent);
  opacity: 0;
}
.scene[data-scene="3"].is-active .scene-cursor {
  animation: scene-cursor-in 1ms 420ms forwards, scene-blink 560ms step-end 420ms 4;
}
@keyframes scene-cursor-in { to { opacity: 1; } }
@keyframes scene-blink { 50% { opacity: 0; } }

/* scene 4: deploy -- package rises off a runway and disappears into the cloud */
.process__scene .scene[data-scene="4"] { flex-direction: column; gap: 14px; }
.scene-cloud {
  width: 76px; height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom: none;
  opacity: 0;
}
.scene-pkg {
  width: 30px; height: 30px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(24px);
}
.scene-runway { width: 100px; height: 3px; background: var(--line-strong); }
.scene[data-scene="4"].is-active .scene-cloud {
  animation: scene-fade-in 300ms var(--ease-out) 120ms forwards;
}
.scene[data-scene="4"].is-active .scene-pkg {
  animation: scene-rise 950ms var(--ease-in-out) 250ms forwards;
}
@keyframes scene-fade-in { to { opacity: 1; } }
@keyframes scene-rise {
  0% { opacity: 0; transform: translateY(24px) scale(1); }
  25% { opacity: 1; }
  85% { opacity: 1; transform: translateY(-40px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-52px) scale(0.4); }
}

/* scene 5: mantenimiento -- gear tightens */
.scene-gear {
  width: 56px; height: 56px;
  border: 6px solid var(--ink);
  border-radius: 50%;
  position: relative;
  opacity: 0;
}
.scene-gear::before, .scene-gear::after {
  content: '';
  position: absolute;
  background: var(--ink);
}
.scene-gear::before { width: 6px; height: 16px; top: -11px; left: 50%; margin-left: -3px; }
.scene-gear::after { width: 16px; height: 6px; left: -11px; top: 50%; margin-top: -3px; }
.scene[data-scene="5"].is-active .scene-gear {
  animation: scene-gear-in 700ms var(--ease-out) forwards;
}
@keyframes scene-gear-in {
  0% { opacity: 0; transform: rotate(-20deg); }
  60% { opacity: 1; transform: rotate(40deg); }
  100% { opacity: 1; transform: rotate(25deg); }
}

/* ============ Contact ============ */
.section--contact { padding-top: 90px; padding-bottom: 150px; }
.contact { border-top: 2px solid var(--line-strong); padding-top: 56px; }

.contact__title {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 0.98;
  margin-bottom: 40px;
}

.contact__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.contact__links { display: flex; flex-direction: column; }
.contact-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px 0;
  border-bottom: 2px solid var(--line);
  transition: padding-left 240ms var(--ease-out);
}
.contact-link:hover { padding-left: 16px; }
.contact-link__label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.contact-link__value {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
}

/* ============ Footer ============ */
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px clamp(20px, 5vw, 56px) 34px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  border-top: 2px solid var(--line-strong);
}

/* ============ Responsive ============ */
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 40px; }
  .projects { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  /* No `order` override here on purpose: the scene is already first in
     the HTML, so sticky's containing block matches the visual layout.
     Mixing position:sticky with a CSS `order` that visually moves an
     element ahead of where it sits in the document is what caused it
     to stay pinned over the step text scrolling underneath — sticky's
     containment follows the flow position, not the painted order. */
  .process__scene { top: 90px; height: 200px; margin-bottom: 32px; }
}

@media (max-width: 720px) {
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(80vw, 320px);
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    gap: 28px;
    font-size: 1.1rem;
    transform: translateX(100%);
    transition: transform 380ms var(--ease-in-out);
    border-left: 2px solid var(--line-strong);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { padding: 12px 2px; min-height: 44px; display: flex; align-items: center; }
  .nav__burger { display: flex; }
  .hero { padding-top: 100px; min-height: 92svh; }
  .hero__name { font-size: clamp(2.6rem, 15vw, 4.5rem); }
  .hero__mark { display: none; }
  .section { padding: 80px 20px; }
  .process { grid-template-columns: 1fr; }
  .process__scene { top: 76px; height: 180px; margin-bottom: 32px; }
  .process__steps { padding-left: 48px; }
  .process__index { left: -48px; width: 40px; height: 40px; font-size: 0.75rem; }
  .process__step:not(:last-child)::after { left: -29px; top: 40px; }
  .contact-link { flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero__name { font-size: clamp(2rem, 12.5vw, 3.4rem); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .split-char, [data-fade] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-wipe] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-draw]::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; }
  .marquee__track { animation: none !important; }
  .cursor-ring, .cursor-dot { display: none !important; }
  .scene-lines span, .scene-glass, .scene-swatch, .scene-bracket, .scene-cursor, .scene-pkg, .scene-gear, .scene-check, .scene-cloud {
    opacity: 1 !important;
    transform: none !important;
  }
}