:root {
  --ink: #0b0b0d;
  --ink-2: #121216;
  --paper: #f0efe8;
  --paper-2: #d8d6cc;
  --acid: #d8ff3e;
  --violet: #9478ff;
  --coral: #ff6b4a;
  --cyan: #50d8ff;
  --line: rgba(240, 239, 232, .16);
  --line-dark: rgba(11, 11, 13, .16);
  --muted: #96959d;
  --display: "Unbounded", "Arial Black", sans-serif;
  --body: "Manrope", "Helvetica Neue", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", monospace;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --header-h: 5rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --radius: 1.1rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  background: var(--ink);
  color-scheme: dark;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; }
button { color: inherit; font: inherit; }
::selection { color: var(--ink); background: var(--acid); }

.external-link-icon {
  position: relative;
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .4em;
  border: 1px solid currentColor;
  border-radius: .08em;
  vertical-align: -.06em;
}
.external-link-icon::before {
  content: "";
  position: absolute;
  top: .15em;
  right: -.12em;
  width: .62em;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}
.external-link-icon::after {
  content: "";
  position: absolute;
  top: -.12em;
  right: -.12em;
  width: .38em;
  height: .38em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: .8rem 1rem;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .75rem;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* intro */

.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: clamp(1.5rem, 4vw, 4rem);
  color: var(--paper);
  background: var(--ink);
  transition: transform 1s var(--ease) .15s;
}
.intro.done { transform: translateY(-101%); }
.intro[hidden], .no-js .intro { display: none; }
.intro-mark {
  align-self: center;
  justify-self: center;
  font-family: var(--display);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: 1;
}
.intro-mark span { color: var(--acid); font-size: .12em; vertical-align: top; margin-left: .4em; }
.intro-track { height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
.intro-track span { display: block; height: 100%; width: 0; background: var(--acid); }
.intro-meta {
  display: flex;
  justify-content: space-between;
  padding-top: .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .15em;
}

.noise {
  position: fixed;
  inset: -50%;
  z-index: 90;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: .035;
  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='.8'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(2%,-3%); }
  50% { transform: translate(-3%,2%); }
  75% { transform: translate(3%,3%); }
  100% { transform: translate(-2%,-2%); }
}

.cursor {
  position: fixed;
  z-index: 950;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 1px solid rgba(216,255,62,.7);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px,-100px,0);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, opacity .2s;
  mix-blend-mode: difference;
}
.cursor.visible { opacity: 1; }
.cursor.hover {
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  background: var(--paper);
}
.cursor span { position: absolute; inset: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--acid); }

/* header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: calc(var(--header-h) + var(--safe-top));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: var(--safe-top) max(var(--pad), var(--safe-right)) 0 max(var(--pad), var(--safe-left));
  color: var(--paper);
  background: rgba(11,11,13,.72);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: height .35s var(--ease), background .35s;
}
.site-header.scrolled { height: calc(4.2rem + var(--safe-top)); background: rgba(11,11,13,.93); }
.brand { display: flex; align-items: center; gap: .9rem; width: max-content; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--ink);
  background: var(--acid);
  border-radius: 50%;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: -.06em;
  transition: transform .4s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(15deg) scale(1.08); }
.brand-copy { font-size: .71rem; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.brand-copy em { color: var(--muted); font-style: normal; font-weight: 500; }

.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.site-nav a { position: relative; color: #b6b5ba; font-family: var(--mono); font-size: .7rem; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
.site-nav a i { display: none; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 1px; background: var(--acid); transition: right .35s var(--ease); }
.site-nav a:hover, .site-nav a.active { color: var(--paper); }
.site-nav a.active::after { right: 0; }

.header-end { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.availability { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.availability span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .28rem rgba(216,255,62,.1); animation: available 2.2s ease-in-out infinite; }
@keyframes available { 50% { box-shadow: 0 0 0 .5rem rgba(216,255,62,0); } }
.nav-toggle { display: none; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: .9rem; height: 1px; margin: 4px auto; background: currentColor; transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }
.header-progress { position: absolute; inset: auto 0 -1px; height: 1px; overflow: hidden; }
.header-progress span { display: block; width: 100%; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left; }

/* hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding: calc(var(--header-h) + 2rem) var(--pad) clamp(2rem, 5vh, 4rem);
  color: var(--paper);
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    var(--ink);
  background-size: 8vw 8vw;
}
.signal-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .7; pointer-events: none; }
.hero-glow { position: absolute; z-index: 0; width: 40vw; height: 40vw; right: -10vw; top: 15%; border-radius: 50%; background: rgba(148,120,255,.16); filter: blur(90px); }
.hero-topline, .hero-title-wrap, .hero-bottom { position: relative; z-index: 2; min-width: 0; }
.hero-topline { display: flex; justify-content: space-between; padding-top: .5rem; font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; color: #9a999f; }

.hero-title-wrap { align-self: center; padding: 7vh 0 5vh; }
.hero-title { font-family: var(--display); font-size: clamp(3.2rem, 8.4vw, 9rem); font-weight: 700; line-height: .89; letter-spacing: -.065em; text-transform: uppercase; }
.title-row { display: block; overflow: hidden; padding: .06em 0; }
.title-row > span { display: block; transform: translateY(110%); transition: transform 1.25s var(--ease); }
.loaded .title-row > span { transform: translateY(0); }
.loaded .title-row-two > span { transition-delay: .1s; }
.title-row-two { padding-left: clamp(0rem, 8vw, 9rem); }
.title-row em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px var(--paper); transition: color .4s, -webkit-text-stroke .4s; }
.title-row em:hover { color: var(--acid); -webkit-text-stroke-color: var(--acid); }
.title-row b { color: var(--acid); }
.hero-arabic { position: absolute; right: 1vw; bottom: 2vh; color: var(--acid); font-size: clamp(1.1rem, 2.1vw, 2rem); font-weight: 700; }

.hero-bottom { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: clamp(2rem, 5vw, 6rem); }
.hero-note { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; max-width: 39rem; }
.note-index { color: var(--acid); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
.hero-note p { max-width: 31rem; color: #aaa9af; font-size: clamp(.9rem, 1.2vw, 1.05rem); line-height: 1.65; }
.hero-proof { display: flex; align-items: center; gap: 1rem; }
.hero-proof strong { font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5rem); line-height: .8; letter-spacing: -.08em; color: var(--acid); }
.hero-proof p { font-family: var(--mono); font-size: .62rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #9b9aa0; }
.round-link { display: grid; place-items: center; width: clamp(7rem, 9vw, 9rem); aspect-ratio: 1; border-radius: 50%; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: .65rem; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; transition: background .25s, color .25s; }
.round-link svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.round-link:hover { color: var(--paper); background: var(--violet); }

/* shared */

.section-shell { padding: clamp(6rem, 12vw, 11rem) var(--pad); }
.section-head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(18rem,.65fr); align-items: end; gap: clamp(3rem, 8vw, 10rem); margin-bottom: clamp(4rem, 8vw, 7rem); }
.section-kicker { display: flex; gap: 1rem; margin-bottom: 1.7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.section-kicker span { color: #8b8982; }
.section-kicker.light { color: var(--paper); }
.section-kicker.light span { color: var(--acid); }
.section-title { font-family: var(--display); font-size: clamp(2.7rem, 6vw, 6rem); font-weight: 700; line-height: .98; letter-spacing: -.065em; text-transform: uppercase; }
.section-intro { max-width: 28rem; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.7; color: #66645e; }
.split-reveal { overflow: hidden; }
.js .reveal, .js .reveal-card { opacity: 0; transform: translateY(2.5rem); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--delay,0s); }
.js .reveal.in, .js .reveal-card.in { opacity: 1; transform: translateY(0); }
.js.loaded .hero .reveal { opacity: 1; transform: translateY(0); }
.js .split-reveal { opacity: 0; clip-path: inset(0 0 12% 0); transform: translateY(2rem); transition: opacity .7s, clip-path 1s var(--ease), transform 1s var(--ease); }
.js .split-reveal.in { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

.proof-marquee { overflow: hidden; color: var(--ink); background: var(--acid); border-block: 1px solid var(--ink); }
.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee-group { display: flex; align-items: center; padding: .9rem 0; }
.marquee-group span { padding: 0 1.2rem; font-family: var(--display); font-size: clamp(.85rem, 1.4vw, 1.2rem); font-weight: 600; }
.marquee-group i { font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* projects */

.work { background: var(--paper); }
.project-stack { display: grid; gap: 1.25rem; }
.project { position: relative; overflow: hidden; border-radius: var(--radius); transform-style: preserve-3d; transition: transform .2s ease, box-shadow .3s; }
.project:hover { box-shadow: 0 2rem 5rem rgba(11,11,13,.14); }
.project-hit { position: absolute; inset: 0; z-index: 8; }
.project-jarvis { min-height: clamp(33rem, 56vw, 48rem); display: grid; grid-template-columns: .9fr 1.1fr; color: var(--paper); background: #17161c; }
.project-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 3.5vw, 3.8rem); border-right: 1px solid rgba(255,255,255,.12); }
.project-number, .small-project-head { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; }
.project-type { display: flex; align-items: center; gap: .7rem; color: #aaa8b1; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; }
.project-type span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 .3rem rgba(148,120,255,.12); }
.project-copy h3 { margin: 1rem 0 1.5rem; font-family: var(--display); font-size: clamp(3.5rem, 6.8vw, 7.2rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.project-desc { max-width: 33rem; color: #adabb3; font-size: clamp(.9rem, 1.15vw, 1.05rem); }
.project-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; list-style: none; }
.project-tags li { padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 2rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.project-open { width: max-content; color: #aaa8b1; font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; }
.project-art { position: relative; overflow: hidden; min-height: 100%; background: radial-gradient(circle at 50% 46%, #3c3267, #17161c 58%); }
.project-art::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: 3.4rem 3.4rem; mask-image: radial-gradient(circle, black, transparent 72%); }
.orbital { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(216,255,62,.3); border-radius: 50%; transform: translate(-50%,-50%); animation: orbit-spin 14s linear infinite; }
.orbital::after { content: ""; position: absolute; left: 50%; top: -.3rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 1rem var(--acid); }
.orbital-a { width: 42%; aspect-ratio: 1; }
.orbital-b { width: 64%; aspect-ratio: 1; animation-duration: 20s; animation-direction: reverse; transform: translate(-50%,-50%) rotate(45deg); }
.orbital-c { width: 88%; aspect-ratio: 1; animation-duration: 30s; transform: translate(-50%,-50%) rotate(80deg); }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.jarvis-core { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--acid); transform: translate(-50%,-50%); box-shadow: 0 0 4rem rgba(216,255,62,.25); }
.jarvis-core span { font-family: var(--display); font-size: clamp(3rem, 7vw, 7rem); font-weight: 800; }
.terminal-card { position: absolute; padding: .9rem 1rem; color: var(--paper); background: rgba(11,11,13,.82); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; box-shadow: 0 1rem 2rem rgba(0,0,0,.25); animation: float-card 4s ease-in-out infinite; }
.terminal-one { left: 5%; top: 15%; }
.terminal-one i { display: inline-block; width: .35rem; height: .35rem; margin-right: .25rem; border-radius: 50%; background: var(--coral); }
.terminal-one i:nth-child(2) { background: #ffd84a; }.terminal-one i:nth-child(3) { background: var(--acid); }
.terminal-one p { margin-top: .8rem; }.terminal-one b { color: var(--acid); }
.terminal-two { right: 5%; bottom: 12%; animation-delay: -2s; }
.terminal-two p, .terminal-two span { display: block; color: #85838c; font-size: .5rem; }
.terminal-two strong { display: block; margin: .35rem 0; color: var(--acid); font-size: .9rem; }
@keyframes float-card { 50% { transform: translateY(-.8rem); } }
.art-coords { position: absolute; left: 1.5rem; bottom: 1.5rem; color: rgba(255,255,255,.35); font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; }

.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.project-jo3an, .project-basira { min-height: clamp(36rem, 50vw, 45rem); display: grid; grid-template-rows: auto minmax(18rem,1.1fr) auto; padding: clamp(1.4rem, 2.5vw, 2.5rem); }
.project-jo3an { color: var(--ink); background: #ff704e; }
.project-basira { color: var(--paper); background: #15130f; }
.small-project-head { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.project-jo3an .project-open, .project-basira .project-open { color: inherit; }
.small-project-art { position: relative; margin: 2rem 0; overflow: hidden; border: 1px solid currentColor; border-radius: calc(var(--radius) * .65); }
.route-art { background: #f7aa58; }
.route-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-grid { fill: none; stroke: rgba(11,11,13,.12); stroke-width: 1; }
.route-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 7; animation: route-dash 15s linear infinite; }
@keyframes route-dash { to { stroke-dashoffset: -180; } }
.route-pin { position: absolute; width: .75rem; height: .75rem; border: 3px solid var(--ink); border-radius: 50%; background: var(--acid); }
.pin-a { left: 7%; bottom: 19%; }.pin-b { left: 65%; top: 44%; }.pin-c { right: 5%; top: 20%; }
.route-status { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; min-width: 9rem; padding: .75rem; color: var(--paper); background: var(--ink); transform: translate(-50%,-50%) rotate(-3deg); font-family: var(--mono); font-size: .5rem; box-shadow: .7rem .7rem 0 rgba(11,11,13,.13); }
.route-status i { grid-row: span 2; align-self: center; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acid); }
.route-status span { color: #999; }.route-status strong { color: var(--acid); }
.small-project-copy h3 { margin: .5rem 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 5.2rem); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.small-project-copy > p:last-child { max-width: 32rem; color: rgba(11,11,13,.7); }
.project-basira .small-project-copy > p:last-child { color: rgba(240,239,232,.72); }
.project-jo3an .project-type { color: rgba(11,11,13,.68); }.project-jo3an .project-type span { background: var(--ink); box-shadow: none; }
.project-basira .project-type { color: rgba(240,239,232,.68); }.project-basira .project-type span { background: #ffad32; box-shadow: 0 0 0 .3rem rgba(255,173,50,.12); }

.sonar-art { background: radial-gradient(circle at 52% 48%, rgba(255,173,50,.18), transparent 35%), #0d0c0a; }
.sonar-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 2.5rem 2.5rem; }
.sonar-rings { position: absolute; left: 52%; top: 48%; width: 68%; aspect-ratio: 1; transform: translate(-50%,-50%); }
.sonar-rings i { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(255,173,50,.62); border-radius: 50%; transform: translate(-50%,-50%); animation: sonar-pulse 3.2s ease-out infinite; }
.sonar-rings i:nth-child(1) { width: 30%; }.sonar-rings i:nth-child(2) { width: 62%; animation-delay: -.8s; }.sonar-rings i:nth-child(3) { width: 94%; animation-delay: -1.6s; }
@keyframes sonar-pulse { 0%,100% { opacity: .25; } 45% { opacity: 1; box-shadow: 0 0 1.8rem rgba(255,173,50,.14); } }
.sonar-target { position: absolute; left: 52%; top: 48%; width: 1.15rem; aspect-ratio: 1; border: 2px solid #ffad32; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 1.2rem rgba(255,173,50,.7); }
.sonar-target span { position: absolute; left: 50%; top: -4.5rem; width: 1px; height: 4.5rem; background: linear-gradient(transparent, #ffad32); }
.sonar-readout { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .15rem 1rem; padding: .8rem; color: #f3e9da; background: rgba(13,12,10,.78); border: 1px solid rgba(255,173,50,.32); font-family: var(--mono); }
.sonar-readout span, .sonar-readout i { color: #a79d90; font-size: .5rem; font-style: normal; letter-spacing: .1em; }.sonar-readout strong { grid-row: span 2; color: #ffad32; font-size: 1.2rem; }

.project-row-three { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.mini-project { position: relative; min-height: 25rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; overflow: hidden; color: var(--paper); background: var(--ink-2); border-radius: var(--radius); text-decoration: none; transition: transform .35s var(--ease), background .35s; }
.mini-project:hover { transform: translateY(-.5rem); background: #1b1b21; }
.mini-index { position: absolute; left: 1.6rem; top: 1.4rem; font-family: var(--mono); font-size: .62rem; color: #7f7e84; }
.mini-project > p { color: var(--acid); font-family: var(--mono); font-size: .59rem; letter-spacing: .12em; }
.mini-project h3 { margin: .35rem 0; font-family: var(--display); font-size: clamp(1.5rem, 2.8vw, 2.7rem); line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.mini-project > span:not(.mini-index) { color: #98979d; font-size: .85rem; }
.mini-project > b { position: absolute; right: 1.6rem; bottom: 1.6rem; font-weight: 400; }
.wave { position: absolute; left: 10%; right: 10%; top: 18%; height: 35%; display: flex; align-items: center; justify-content: center; gap: 3%; }
.wave i { width: 3px; height: 25%; background: var(--coral); animation: wave 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { height: 70%; animation-delay: -.3s; }.wave i:nth-child(3n) { height: 40%; animation-delay: -.7s; }.wave i:nth-child(5n) { height: 95%; animation-delay: -.5s; }
@keyframes wave { to { height: 85%; } }
.nodes { position: absolute; inset: 10% 10% 45%; }
.nodes::before, .nodes::after { content: ""; position: absolute; inset: 0; background: linear-gradient(35deg, transparent 48%, rgba(216,255,62,.35) 49%, rgba(216,255,62,.35) 50%, transparent 51%); }
.nodes::after { transform: rotate(80deg); }
.nodes i { position: absolute; z-index: 2; width: .8rem; height: .8rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 1rem rgba(216,255,62,.45); }
.nodes i:nth-child(1){left:5%;top:70%}.nodes i:nth-child(2){left:32%;top:10%}.nodes i:nth-child(3){left:50%;top:60%}.nodes i:nth-child(4){right:10%;top:18%}.nodes i:nth-child(5){right:5%;bottom:5%}
.project-chronoatlas { background: #18130f; }
.atlas-art { position: absolute; inset: 8% 8% 43%; }
.atlas-globe { position: absolute; left: 50%; top: 45%; width: min(62%, 11rem); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(226,176,93,.7); border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 36% 30%, #6b5133 0 7%, transparent 8%), radial-gradient(circle at 64% 54%, #9a7547 0 15%, transparent 16%), radial-gradient(circle at 36% 68%, #674329 0 12%, transparent 13%), #211b15; box-shadow: 0 0 2.4rem rgba(226,176,93,.13); }
.atlas-globe::before, .atlas-globe::after { content: ""; position: absolute; inset: 11% 33%; border: 1px solid rgba(226,176,93,.35); border-radius: 50%; }.atlas-globe::after { inset: 33% 11%; }
.atlas-globe i { position: absolute; left: 0; right: 0; height: 1px; background: rgba(226,176,93,.2); }.atlas-globe i:nth-child(1){top:25%}.atlas-globe i:nth-child(2){top:50%}.atlas-globe i:nth-child(3){top:75%}
.atlas-globe span { position: absolute; left: 50%; top: 50%; padding: .28rem .45rem; color: #18130f; background: #e2b05d; transform: translate(-50%,-50%); font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; white-space: nowrap; }
.atlas-timeline { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; color: #8e806f; font-family: var(--mono); font-size: .42rem; letter-spacing: .07em; }
.atlas-timeline > i { height: 1px; background: #4c4034; }.atlas-timeline > b { position: absolute; left: 62%; width: .35rem; aspect-ratio: 1; border-radius: 50%; background: #e2b05d; box-shadow: 0 0 .8rem rgba(226,176,93,.6); }
.all-work-link { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; margin-top: 3rem; padding: 1.3rem 0; border-block: 1px solid var(--line-dark); text-decoration: none; transition: padding .35s var(--ease); }
.all-work-link:hover { padding-inline: 1rem; }
.all-work-link span { font-family: var(--display); font-size: clamp(1rem,2vw,1.5rem); text-transform: uppercase; }.all-work-link i { font-family: var(--mono); font-size: .62rem; color: #77756e; font-style: normal; }

/* upstream */

.upstream { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; min-height: 100vh; padding: clamp(6rem, 12vw, 11rem) var(--pad); gap: clamp(3rem, 7vw, 8rem); color: var(--paper); background: var(--ink); }
.upstream-sticky { position: sticky; top: calc(var(--header-h) + 3rem); }
.upstream-title { font-family: var(--display); font-size: clamp(3rem, 6.6vw, 6.8rem); line-height: .94; letter-spacing: -.07em; text-transform: uppercase; }
.upstream-title em { color: var(--acid); font-style: normal; }
.upstream-lede { max-width: 31rem; margin: 2rem 0; color: #98979e; font-size: 1rem; }
.text-link { display: inline-flex; gap: 1.5rem; align-items: center; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.text-link span { color: var(--acid); }
.upstream-feed { display: grid; gap: 1.25rem; }
.agents-card { min-height: 25rem; display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; color: var(--ink); background: #f0efe8; border-radius: var(--radius); }
.agents-copy { position: relative; z-index: 2; padding: clamp(1.5rem,3vw,3rem); }
.agents-copy > p:first-child { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; }
.agents-copy h3 { margin: 2rem 0 1rem; font-family: var(--display); font-size: clamp(2.3rem,4.4vw,4.6rem); line-height: .91; letter-spacing: -.065em; text-transform: uppercase; }.agents-copy h3 span { color: #6250e8; }
.agents-copy > p:nth-child(3) { max-width: 29rem; color: rgba(11,11,13,.65); }
.agents-copy a { display: inline-block; margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .62rem; text-decoration: none; }
.audio-convert { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.2rem; align-items: center; margin: 1rem; padding: 1.5rem; overflow: hidden; color: var(--paper); background: #111114; border-radius: calc(var(--radius) * .7); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; }
.audio-convert::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: 2rem 2rem; }
.audio-convert > * { position: relative; z-index: 1; }.audio-convert > span { color: #85838c; }.audio-convert > b { color: var(--acid); font-size: 1rem; }.audio-convert > em { color: #85838c; font-size: .48rem; font-style: normal; }
.audio-bars { height: 58%; display: flex; align-items: center; justify-content: center; gap: 4%; }
.audio-bars i { width: 3px; height: 24%; background: #8e7cff; animation: pcm-wave 1s ease-in-out infinite alternate; }.audio-bars i:nth-child(2n){height:72%;animation-delay:-.2s}.audio-bars i:nth-child(3n){height:100%;animation-delay:-.5s}.audio-bars i:nth-child(5n){height:48%;animation-delay:-.7s}
@keyframes pcm-wave { to { height: 86%; background: var(--acid); } }
.merge-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem,3vw,2.4rem); padding: clamp(1.3rem, 3vw, 2.5rem); color: var(--ink); background: var(--acid); border-radius: var(--radius); }
.merge-ring { position: relative; width: clamp(5rem, 8vw, 7.5rem); aspect-ratio: 1; }
.merge-ring svg { width: 100%; transform: rotate(-90deg); }.merge-ring circle { fill: none; stroke: rgba(11,11,13,.18); stroke-width: 5; }.merge-ring .ring-progress { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 95; }
.merge-ring strong { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 1rem; }
.merge-summary > div:nth-child(2) p { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; }.merge-summary h3 { font-family: var(--display); font-size: clamp(2.2rem,4vw,4rem); line-height: 1; letter-spacing: -.07em; }.merge-summary > div:nth-child(2) span { color: rgba(11,11,13,.62); font-size: .8rem; }
.merge-summary > a { font-family: var(--mono); font-size: .6rem; text-decoration: none; white-space: nowrap; }
.merge-list { border-top: 1px solid var(--line); }
.merge-row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 1rem; padding: 1.35rem .3rem; color: var(--paper); border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .3s var(--ease), color .2s; }
.merge-row:hover { padding-inline: .9rem; color: var(--acid); }
.merge-status { padding: .18rem .38rem; color: var(--acid); border: 1px solid rgba(216,255,62,.4); border-radius: 2px; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; }
.merge-row i, .merge-row time { color: #79787e; font-family: var(--mono); font-size: .58rem; font-style: normal; letter-spacing: .06em; }.merge-row strong { font-size: .83rem; font-weight: 500; }.merge-row b { font-weight: 400; }
.ppsspp-card { position: relative; min-height: 27rem; overflow: hidden; padding: clamp(1.5rem,3vw,3rem); color: var(--ink); background: var(--violet); border-radius: var(--radius); }
.ppsspp-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 40%, rgba(216,255,62,.7), transparent 22%); }
.ppsspp-copy { position: relative; z-index: 2; max-width: 28rem; }.ppsspp-copy > p:first-child { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; }.ppsspp-copy h3 { margin: 2rem 0 1rem; font-family: var(--display); font-size: clamp(2.5rem,4.6vw,4.8rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }.ppsspp-copy h3 span { color: var(--acid); }.ppsspp-copy > p:nth-child(3) { max-width: 23rem; color: rgba(11,11,13,.65); }.ppsspp-copy a { display: inline-block; margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .62rem; text-decoration: none; }
.ppsspp-glyph { position: absolute; z-index: 1; right: -1%; bottom: -22%; color: rgba(11,11,13,.16); font-family: Arial,sans-serif; font-size: clamp(17rem,35vw,35rem); font-weight: 700; line-height: 1; }

/* about */

.about { background: #e3e1d8; }
.about-head { margin-bottom: clamp(3rem,6vw,5rem); }
.about-arabic { color: var(--coral); font-size: clamp(2rem,4vw,4rem); font-weight: 700; line-height: 1.15; }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,6vw,7rem); align-items: center; }
.portrait-card { position: relative; aspect-ratio: 4 / 5; max-width: 36rem; overflow: hidden; background: var(--ink); border-radius: var(--radius); }
.portrait-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11,11,13,.8)); }
.portrait-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .5s, transform .8s var(--ease); }
.portrait-card:hover img { filter: grayscale(.1) contrast(1.05); transform: scale(1.03); }
.portrait-overlay { position: absolute; z-index: 2; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; display: flex; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; }
.portrait-stamp { position: absolute; z-index: 3; right: 1rem; top: 1rem; width: 6.5rem; aspect-ratio: 1; border: 1px solid var(--acid); border-radius: 50%; }
.portrait-stamp::after { content: "FB"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--acid); font-family: var(--display); font-weight: 700; }
.portrait-stamp span { position: absolute; inset: .35rem; color: var(--acid); font-family: var(--mono); font-size: .43rem; text-align: center; animation: stamp-spin 14s linear infinite; }
@keyframes stamp-spin { to { transform: rotate(360deg); } }
.about-big { max-width: 50rem; font-family: var(--display); font-size: clamp(1.8rem,3.5vw,3.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -.055em; text-transform: uppercase; }
.about-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2.5rem 0; color: #66645e; font-size: .95rem; }
.about-facts { border-top: 1px solid var(--line-dark); }
.about-facts > div { display: flex; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--line-dark); }
.about-facts dt { color: #76736d; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; }.about-facts dd { font-size: .8rem; font-weight: 700; }.about-facts dd span { display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: #5da738; }
.manifesto { margin-top: clamp(6rem,11vw,11rem); padding: clamp(2rem,5vw,5rem) 0; border-block: 1px solid var(--line-dark); }
.manifesto p { max-width: 76rem; font-family: var(--display); font-size: clamp(2.1rem,5.2vw,5.4rem); line-height: 1.07; letter-spacing: -.06em; text-transform: uppercase; }
.manifesto footer { margin-top: 2rem; color: #74716a; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; }

/* contact */

.contact { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; padding: calc(var(--header-h) + 4rem) var(--pad) 2rem; color: var(--paper); background: #6b4ff2; }
.contact::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.contact-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none; }
.contact-inner, .contact-links { position: relative; z-index: 2; }
.contact-inner { align-self: center; }
.contact-title { font-family: var(--display); font-size: clamp(2.8rem,7.6vw,8rem); line-height: .9; letter-spacing: -.075em; text-transform: uppercase; }
.contact-title span { display: block; }.contact-title em { color: var(--acid); font-style: normal; }
.contact-copy { max-width: 34rem; margin-top: 2rem; color: rgba(240,239,232,.72); font-size: 1rem; }
.contact-mail { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; margin-top: 3rem; padding: 1.4rem 1.5rem; color: var(--ink); background: var(--acid); border-radius: 100px; text-decoration: none; touch-action: manipulation; transition: color .3s, background .3s; }
.contact-mail:hover { color: var(--paper); background: var(--ink); }.contact-mail span { font-family: var(--display); font-size: clamp(1rem,2vw,1.5rem); font-weight: 700; }.contact-mail i { font-family: var(--mono); font-size: .7rem; font-style: normal; }.contact-mail b { font-size: 1.4rem; font-weight: 400; }
.contact-links { display: flex; align-items: center; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.25); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; }.contact-links a { text-decoration: none; }.contact-links span { margin-left: auto; }.contact-links i { color: var(--acid); font-style: normal; }

.footer { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 4rem; padding: 3rem var(--pad); color: var(--paper); background: var(--ink); }
.footer-brand { font-family: var(--display); font-size: 3rem; font-weight: 800; letter-spacing: -.09em; text-decoration: none; }.footer-brand span { color: var(--acid); font-size: .2em; vertical-align: top; }
.footer p { color: #7f7e84; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; }.back-top { justify-self: end; color: var(--paper); font-family: var(--mono); font-size: .62rem; text-decoration: none; }.copyright { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--line); }

/* responsive */

@media (max-width: 980px) {
  :root { --header-h: 4.5rem; }
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--safe-top)) 0 auto;
    height: calc(100svh - var(--header-h) - var(--safe-top));
    height: calc(100dvh - var(--header-h) - var(--safe-top));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: var(--pad);
    background: rgba(11,11,13,.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity .35s, visibility .35s, transform .5s var(--ease);
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { display: flex; align-items: baseline; gap: 1.5rem; padding: .65rem 0; color: var(--paper); border-bottom: 1px solid var(--line); font-family: var(--display); font-size: clamp(2.3rem,8vw,5rem); font-weight: 600; letter-spacing: -.06em; }
  .site-nav a i { display: inline; color: var(--acid); font-family: var(--mono); font-size: .6rem; font-style: normal; letter-spacing: .1em; }
  .site-nav a::after { display: none; }
  .nav-toggle { display: block; }
  .hero-title { font-size: clamp(3.2rem,9.4vw,6rem); }
  .title-row-two { padding-left: 0; }
  .hero-bottom { grid-template-columns: 1fr auto; }
  .hero-note { grid-column: 1 / -1; }
  .section-head { grid-template-columns: 1fr; gap: 2rem; }
  .section-intro { max-width: 38rem; }
  .project-jarvis { grid-template-columns: 1fr; grid-template-rows: auto minmax(27rem,45vw); }
  .project-copy { min-height: 34rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .project-pair { grid-template-columns: 1fr; }
  .project-row-three { grid-template-columns: 1fr 1fr; }
  .mini-project:last-child { grid-column: 1 / -1; }
  .upstream { grid-template-columns: 1fr; }
  .upstream-sticky { position: static; }
  .about-grid { grid-template-columns: .8fr 1.2fr; gap: 2rem; }
}

@media (max-width: 680px) {
  :root { --pad: 1.15rem; }
  .noise { display: none; }
  .cursor { display: none; }
  .site-header { padding: var(--safe-top) max(1rem, var(--safe-right)) 0 max(1rem, var(--safe-left)); }
  .brand-copy, .availability { display: none; }
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: calc(var(--header-h) + var(--safe-top) + clamp(1rem, 3dvh, 1.5rem));
    padding-right: max(var(--pad), var(--safe-right));
    padding-bottom: max(1.25rem, var(--safe-bottom));
    padding-left: max(var(--pad), var(--safe-left));
    background-size: 5rem 5rem;
  }
  .hero-topline p:last-child { display: none; }
  .hero-title-wrap { align-self: start; padding-top: 13vh; }
  .hero-title { width: 100%; min-width: 0; font-size: clamp(2.8rem,13vw,5rem); line-height: .94; }
  .title-row-one span { max-width: 8ch; }
  .title-row-two span { max-width: 8ch; }
  .hero-arabic { right: 0; bottom: -3rem; }
  .hero-bottom { grid-template-columns: 1fr auto; gap: 1.5rem; }
  .hero-note { display: block; min-width: 0; }.note-index { display: block; margin-bottom: .7rem; }
  .hero-proof { align-items: flex-end; }.hero-proof strong { font-size: 3rem; }.hero-proof p { font-size: .5rem; }
  .round-link { width: 6.5rem; }
  .section-shell { padding-block: 5.5rem; }
  .section-head { margin-bottom: 3rem; }
  .section-title { font-size: clamp(2.5rem,12vw,4.5rem); }
  .project-jarvis { min-height: 0; grid-template-rows: auto 27rem; }
  .project-copy { min-height: 32rem; padding: 1.4rem; }
  .project-copy h3 { font-size: 4rem; }
  .project-jo3an, .project-basira { min-height: 39rem; padding: 1.2rem; }
  .small-project-art { min-height: 16rem; margin-block: 1.4rem; }
  .project-row-three { grid-template-columns: 1fr; }
  .mini-project:last-child { grid-column: auto; }
  .mini-project { min-height: 21rem; }
  .all-work-link { grid-template-columns: 1fr auto; }.all-work-link i { display: none; }
  .upstream { padding-block: 5.5rem; }
  .upstream-title { font-size: clamp(2.8rem,13vw,4.8rem); }
  .agents-card { grid-template-columns: 1fr; }.audio-convert { min-height: 15rem; margin-top: 0; }
  .merge-summary { grid-template-columns: auto 1fr; }.merge-summary > a { grid-column: 1 / -1; }
  .merge-row { grid-template-columns: auto auto 1fr auto; gap: .6rem; }.merge-row time { display: none; }.merge-row strong { grid-column: 1 / -1; }
  .ppsspp-card { min-height: 31rem; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait-card { max-width: none; }
  .about-body { grid-template-columns: 1fr; gap: 1rem; }
  .about-arabic { text-align: left; }
  .manifesto { margin-top: 5rem; }
  .contact {
    min-height: calc(100svh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    padding-right: max(var(--pad), var(--safe-right));
    padding-bottom: max(1.25rem, var(--safe-bottom));
    padding-left: max(var(--pad), var(--safe-left));
  }
  .contact-title { font-size: clamp(2.7rem,12vw,4.7rem); }
  .contact-mail { grid-template-columns: 1fr auto; border-radius: .8rem; }.contact-mail i { display: none; }
  .contact-links { flex-wrap: wrap; gap: 1rem 2rem; }.contact-links span { width: 100%; margin-left: 0; }
  .footer { grid-template-columns: auto 1fr; gap: 2rem; }.footer p:not(.copyright) { display: none; }.back-top { justify-self: end; }
}

@media (max-width: 680px) and (max-height: 700px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--safe-top) + .65rem);
    padding-bottom: max(.65rem, var(--safe-bottom));
  }
  .hero-title-wrap { padding: 7vh 0 2vh; }
  .hero-bottom { gap: .8rem 1rem; }
  .hero-note p { font-size: .82rem; line-height: 1.48; }
  .round-link { width: 5.8rem; font-size: .56rem; }
  .contact { padding-top: calc(var(--header-h) + var(--safe-top) + 1rem); padding-bottom: max(.8rem, var(--safe-bottom)); }
  .contact-copy { margin-top: 1rem; font-size: .9rem; }
  .contact-mail { margin-top: 1.4rem; }
  .contact-links { padding-top: 1rem; }
}

/* Safari overlays its bottom controls on the dynamic viewport. Using the large
   viewport keeps the hero surface behind that chrome instead of revealing the
   following marquee beneath it. */
@supports (-webkit-touch-callout: none) and (height: 100lvh) {
  @media (max-width: 680px) {
    .hero {
      min-height: 100lvh;
      padding-bottom: calc(max(1.25rem, var(--safe-bottom)) + 100lvh - 100dvh);
    }
    .contact {
      min-height: calc(100lvh - var(--header-h) - var(--safe-top));
      padding-bottom: calc(max(1.25rem, var(--safe-bottom)) + 100lvh - 100dvh);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  .noise, .cursor { display: none; }
  .marquee-track, .orbital, .terminal-card, .sonar-rings i, .audio-bars i, .wave i, .portrait-stamp span, .availability span { animation: none !important; }
  .title-row > span, .js .reveal, .js .reveal-card, .js .split-reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
}