/* ==========================================================================
   SportsMatrix — single page site
   Pure CSS. No JS. No external requests.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --bg: #05070a;
  --bg-soft: #080c10;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);

  --text: #eaf2ea;
  --muted: #8d9d95;
  --dim: #6a7a72;

  /*
   * Brand greens are sampled from logo.svg so the UI and the logo agree.
   * A pixel scan of the rendered logo shows #0afd59 accounts for 98.1% of its
   * green pixels (average #0afc59), with #00ff48 as a minor highlight.
   * --neon is therefore the logo green exactly; --neon-2 is a deeper emerald
   * derived from it, used only as the second stop of gradients so they keep
   * some depth instead of reading as a flat wash.
   */
  --neon: #0afd59;
  --neon-2: #00d97e;
  --neon-soft: rgba(10, 253, 89, 0.14);
  --grad: linear-gradient(135deg, #7dffab 0%, #0afd59 45%, #00d97e 100%);
  --grad-text: linear-gradient(100deg, #d6ffe6 0%, #0afd59 45%, #00d97e 100%);

  --maxw: 1200px;
  --r: 18px;
  --r-lg: 26px;
  --header-h: 72px;

  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Hero rings rotate, so their bounding box can exceed the viewport width.
     `clip` stops the scrollbar without creating a scroll container. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* the header is position:fixed, so reserve its height in the flow */
  padding-top: var(--header-h);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, summary { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--neon); color: #06120a; }

/* Ambient background glow */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 120vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 18% 12%, rgba(0, 217, 126, 0.13), transparent 70%),
    radial-gradient(45% 40% at 88% 4%, rgba(10, 253, 89, 0.11), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(0, 217, 126, 0.07), transparent 70%);
  filter: blur(4px);
}

/* Grain / grid texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
}

/* ---------- Layout ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}

section { padding-block: clamp(3.5rem, 6.5vw, 5.75rem); position: relative; z-index: 1; }
section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.skip {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--neon);
  color: #06120a;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  transition: top 0.2s;
}
.skip:focus { top: 1rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Typography helpers ------------------------------------------ */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon));
}

.h2 {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  margin-top: 1rem;
}

.lead {
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  max-width: 58ch;
}

.head { max-width: 62ch; }
.head--center {
  margin-inline: auto;
  text-align: center;
}
.head--center .eyebrow::before { display: none; }
.head--center .lead { margin-inline: auto; }

.sect-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sect-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--neon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--btn-bg);
  color: #06120a;
  box-shadow: 0 0 0 1px rgba(10, 253, 89, 0.4), 0 12px 34px -12px rgba(10, 253, 89, 0.55);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(10, 253, 89, 0.6), 0 20px 44px -14px rgba(10, 253, 89, 0.75);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: rgba(10, 253, 89, 0.55);
  color: var(--neon);
  transform: translateY(-2px);
}

.btn--text {
  padding: 0;
  color: var(--neon);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn--text svg { transition: transform 0.25s var(--ease); }
.btn--text:hover svg { transform: translateX(5px); }

/* Arrow circle */
.arrow {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--text);
  flex: none;
  transition: 0.25s var(--ease);
}
.arrow svg { width: 16px; height: 16px; }
.arrow:hover,
:is(.card, .tile, .proj, .post):hover .arrow {
  background: var(--neon);
  color: #06120a;
  border-color: transparent;
  transform: rotate(-45deg);
}

/* ---------- Header ------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 7, 10, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  /*
   * Must not shrink. The header is a flex row, and without this the wide
   * logo.svg lockup was crushed (down to 16px) whenever the logo, nav links and
   * CTA together exceeded the container — around 768-940px. The old 32px square
   * mark never showed this because it was small enough to survive.
   */
  flex: none;
}
/*
 * logo.svg is a horizontal lockup (symbol + wordmark), so it is sized by HEIGHT
 * with an automatic width. The SVG fragment in the markup crops the artboard to
 * the artwork band, which is what makes height-only sizing behave.
 *
 * The palette is bright green plus white on transparency, which suits the dark
 * header. No drop-shadow: the artwork already contains its own glow layers and
 * an extra filter muddies them.
 */
.brand .mark {
  height: 30px;
  width: auto;
  max-width: none;
  flex: none;
  display: block;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--muted);
  transition: 0.2s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

.header .btn { margin-left: 0.75rem; }

/* CSS-only mobile menu (:target based — auto-closes on any link tap) */
/*
 * The call-to-action inside the nav only belongs in the mobile dropdown: the
 * header already shows its own larger CTA button. Without this base rule the
 * nav copy also renders on desktop, giving two "Start a project" buttons
 * side by side. It is revealed again inside the (max-width: 900px) block.
 */
.nav .btn--mobile { display: none; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  place-items: center;
  transition: 0.25s;
}
.burger:hover { border-color: rgba(10, 253, 89, 0.5); }
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/*
 * The close variant draws an X from the same three bars: the middle bar is
 * hidden and the top/bottom bars are rotated into a cross. Only one of the two
 * burger anchors is ever shown, swapped on :target.
 */
.burger--close span { background: transparent; }
.burger--close span::before { top: 0; rotate: 45deg; }
.burger--close span::after { top: 0; rotate: -45deg; }

/* Tap outside to dismiss */
.backdrop { display: none; }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  padding-top: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.pill b {
  color: #06120a;
  background: var(--neon);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(10, 253, 89, 0.4);
}

.hero h1 {
  font-size: clamp(2.4rem, 1rem + 5.6vw, 5.1rem);
  margin: 1.4rem 0 1.25rem;
  letter-spacing: -0.05em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* Hero art: pure CSS "AI core" */
.core {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 470px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  /* keep the floating tags and rotating rings inside the layout box */
  overflow: clip;
  overflow-clip-margin: 34px;
}
.core__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.core__ring::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 16px 3px rgba(10, 253, 89, 0.8);
  translate: -50% 0;
}
.core__ring:nth-child(1) { inset: 0; animation: spin 22s linear infinite; }
.core__ring:nth-child(2) { inset: 11%; animation: spin 16s linear infinite reverse; border-style: dashed; }
.core__ring:nth-child(2)::after { background: var(--neon-2); box-shadow: 0 0 16px 3px rgba(0, 217, 126, 0.8); }
.core__ring:nth-child(3) { inset: 22%; animation: spin 12s linear infinite; }

.core__orb {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8ffdf, var(--neon) 38%, #0a6b3a 78%, #04231a);
  box-shadow:
    0 0 60px rgba(10, 253, 89, 0.4),
    0 0 140px rgba(0, 217, 126, 0.28),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  animation: breathe 6s ease-in-out infinite;
  position: relative;
}
.core__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    repeating-linear-gradient(0deg, rgba(5, 7, 10, 0.5) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(5, 7, 10, 0.5) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.core__tag {
  position: absolute;
  padding: 0.55rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: rgba(8, 12, 16, 0.82);
  backdrop-filter: blur(10px);
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow);
  animation: float 7s ease-in-out infinite;
}
.core__tag svg { width: 15px; height: 15px; color: var(--neon); }
.core__tag b { color: var(--text); font-weight: 650; }
.core__tag--a { top: 6%; left: -4%; }
.core__tag--b { bottom: 12%; right: -6%; animation-delay: -2.4s; }
.core__tag--c { bottom: -2%; left: 4%; animation-delay: -4.2s; }

@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe {
  50% { scale: 1.05; filter: brightness(1.12); }
}
@keyframes float {
  50% { translate: 0 -12px; }
}

/* ---------- Stat bar ---------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}
.stats div {
  background: var(--bg-soft);
  padding: 1.6rem 1.4rem;
  transition: background 0.3s;
}
.stats div:hover { background: #0c1215; }
.stats b {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats span { font-size: 0.82rem; color: var(--muted); }

/* ---------- Marquee ----------------------------------------------------- */
.marquee {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  /* The keyframe travels -50% of the track width, so adding items lengthens the
     distance. Duration is scaled with the item count to hold a constant
     scroll speed: 32s for 16 items -> 44s for 22. */
  animation: slide 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #3d5a4a;
  transition: color 0.3s;
  white-space: nowrap;
}
.marquee__track span:hover { color: var(--neon); }
@keyframes slide { to { translate: -50% 0; } }

/* ---------- Generic grid + card ----------------------------------------- */
.grid {
  display: grid;
  gap: 1.25rem;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  overflow: hidden;
  transition: 0.35s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(10, 253, 89, 0.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), var(--surface));
}
.card:hover::after { opacity: 1; }

.icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--neon-soft);
  border: 1px solid rgba(10, 253, 89, 0.25);
  color: var(--neon);
  margin-bottom: 1.25rem;
  transition: 0.35s var(--ease);
}
.icon svg { width: 24px; height: 24px; }
.card:hover .icon {
  background: var(--neon);
  color: #06120a;
  box-shadow: 0 0 28px -4px rgba(10, 253, 89, 0.6);
}

.card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: 0.93rem; }

.card__foot {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card__idx {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

/* ---------- Verticals --------------------------------------------------- */
.verticals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.vcard {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: 0.3s var(--ease);
}
.vcard svg {
  width: 21px;
  height: 21px;
  flex: none;
  color: var(--neon);
}
.vcard b { display: block; font-size: 0.93rem; font-weight: 650; line-height: 1.3; }
.vcard span { font-size: 0.78rem; color: var(--muted); }
.vcard:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 253, 89, 0.4);
  background: var(--surface-2);
}
.vcard:hover svg { filter: drop-shadow(0 0 10px rgba(10, 253, 89, 0.6)); }

/* ---------- About ------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background:
    radial-gradient(120% 110% at 0% 0%, rgba(10, 253, 89, 0.09), transparent 60%),
    var(--bg-soft);
  overflow: hidden;
}
.panel__title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-top: 1rem;
}
.panel__bars { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.bar { display: grid; gap: 0.45rem; }
.bar__top {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--muted);
}
.bar__top b { color: var(--text); }
.bar__track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
  box-shadow: 0 0 16px rgba(10, 253, 89, 0.5);
  transform-origin: left;
  animation: grow 1.6s var(--ease) both;
}
@keyframes grow { from { scale: 0 1; } }

.checks { display: grid; gap: 1.1rem; margin-top: 2rem; }
.check { display: flex; gap: 0.9rem; }
.check svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 3px;
  color: var(--neon);
}
.check h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.check p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Process ----------------------------------------------------- */
.step {
  position: relative;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 4px rgba(10, 253, 89, 0.14), 0 0 18px rgba(10, 253, 89, 0.7);
}
.step__num {
  font-size: clamp(2.6rem, 2rem + 2vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  line-height: 1;
  display: block;
  margin-bottom: 0.9rem;
  transition: 0.4s var(--ease);
}
.step:hover .step__num {
  -webkit-text-stroke: 1px rgba(10, 253, 89, 0.9);
  text-shadow: 0 0 40px rgba(10, 253, 89, 0.35);
}
.step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Work / projects --------------------------------------------- */
.proj {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-soft);
  transition: 0.35s var(--ease);
}
.proj:hover { transform: translateY(-6px); border-color: rgba(10, 253, 89, 0.4); }

.proj__art {
  aspect-ratio: 16 / 10;
  position: relative;
  display: grid;
  place-items: center;
  background: #0a1216;
  overflow: hidden;
}
.proj__art::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(10, 253, 89, 0.35), transparent 70%),
    radial-gradient(45% 45% at 75% 70%, rgba(0, 217, 126, 0.32), transparent 70%),
    conic-gradient(from 120deg at 50% 50%, #0b1f16, #071016, #0b1f16);
  filter: blur(6px);
  transition: 0.6s var(--ease);
}
.proj:hover .proj__art::before { scale: 1.12; rotate: 4deg; }
.proj__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.proj__glyph {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  color: var(--neon);
  filter: drop-shadow(0 0 22px rgba(10, 253, 89, 0.5));
}
.proj__body { padding: 1.4rem 1.5rem 1.6rem; }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.tags span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}
.proj h3 { font-size: 1.12rem; }
.proj__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.3rem;
}

/* --- Featured project (single case study) -------------------------------- */
.proj--featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.proj--featured .proj__art { aspect-ratio: auto; min-height: 380px; }
.proj--featured .proj__body {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proj--featured h3 {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  margin-bottom: 0.85rem;
}
.proj--featured p {
  color: var(--muted);
  font-size: 0.94rem;
}

.proj__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.proj__stats b {
  display: block;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proj__stats span { font-size: 0.76rem; color: var(--dim); }

/*
 * Livescores board mock. Built from plain elements so it costs no image
 * requests; the "Live" dot and the pulse are the only animation.
 */
.board {
  position: relative;
  z-index: 1;
  width: min(86%, 340px);
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(6, 10, 13, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  font-size: 0.86rem;
}
.board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.board__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff7b7b;
}
.board__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5c5c;
  box-shadow: 0 0 10px 2px rgba(255, 92, 92, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: 0.35; scale: 0.82; }
}
.board__comp {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

.board__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
/* Highlight the scoring side. */
.board__row--home .board__team,
.board__row--home .board__score { color: var(--text); font-weight: 700; }
.board__row--away .board__team { color: var(--muted); }
.board__row--away .board__score { color: var(--muted); font-weight: 600; }
/* Leading team gets a neon edge marker. */
.board__row--home::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 999px;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(10, 253, 89, 0.8);
}
.board__score {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.board__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.board__foot span:first-child { color: var(--neon); font-weight: 700; }

/*
 * "More projects" divider label. Sits between the featured case study and the
 * supporting cards, and visually de-emphasises the latter: muted, small,
 * uppercase, with a hairline rule filling the remaining width.
 */
.work-more {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.work-more::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/*
 * Supporting project card. The same component as the featured project, scaled
 * down so the hierarchy reads: one hero case study, then a lighter grid.
 */
.proj--compact .proj__body { padding: 1.25rem 1.35rem 1.4rem; }
.proj--compact h3 { font-size: 1.02rem; line-height: 1.32; }
.proj--compact .proj__art { aspect-ratio: 4 / 3; }
.proj--compact .proj__glyph { width: 54px; height: 54px; }
.proj--compact .proj__row { margin-top: 1.1rem; }
.proj--compact .card__idx { font-size: 0.7rem; letter-spacing: 0.14em; }
/* Artwork is muted until hover, so the grid does not compete with the featured card. */
.proj--compact .proj__art::before { opacity: 0.62; }
.proj--compact:hover .proj__art::before { opacity: 1; }

/* ---------- Team -------------------------------------------------------- */
.member {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.2rem;
  background: var(--surface);
  transition: 0.35s var(--ease);
}
.member:hover { transform: translateY(-6px); border-color: rgba(10, 253, 89, 0.35); }
.avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  color: #06120a;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(10, 253, 89, 0.12), 0 0 34px -8px rgba(10, 253, 89, 0.6);
}
.avatar--b { background: linear-gradient(135deg, #7dffab, #00b36a); }
.avatar--c { background: linear-gradient(135deg, #8affc0, #0afd59); }
.avatar--d { background: linear-gradient(135deg, #00d97e, #b9ff8f); }
.member h3 { font-size: 1.05rem; }
.member span { font-size: 0.84rem; color: var(--neon); }

/* ---------- Testimonials ------------------------------------------------ */
.quote {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: 0.35s var(--ease);
}
.quote:hover { border-color: rgba(10, 253, 89, 0.35); }
.quote__mark { width: 30px; height: 30px; color: var(--neon); opacity: 0.85; }
.quote p { color: #cde8d8; font-size: 0.97rem; }
.stars { display: flex; gap: 3px; color: var(--neon); }
.stars svg { width: 15px; height: 15px; }
.who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.who .avatar {
  width: 44px;
  height: 44px;
  font-size: 0.85rem;
  margin: 0;
  box-shadow: none;
}
.who b { font-size: 0.95rem; display: block; }
.who span { font-size: 0.8rem; color: var(--muted); }

/* ---------- FAQ --------------------------------------------------------- */
.faq { display: grid; gap: 0.75rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: 0.3s var(--ease);
}
.faq details[open] {
  border-color: rgba(10, 253, 89, 0.4);
  background: linear-gradient(180deg, rgba(10, 253, 89, 0.05), var(--surface));
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 650;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid var(--neon);
  border-bottom: 2px solid var(--neon);
  rotate: 45deg;
  transition: rotate 0.3s var(--ease);
  margin-top: -4px;
}
.faq details[open] summary::after { rotate: -135deg; margin-top: 4px; }
.faq .body {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
  font-size: 0.93rem;
  max-width: 72ch;
}

/* ---------- Blog -------------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  background: var(--surface);
  transition: 0.35s var(--ease);
}
.post:hover { transform: translateY(-6px); border-color: rgba(10, 253, 89, 0.35); }
.post__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: var(--dim);
}
.post__meta b {
  color: var(--neon);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.post h3 { font-size: 1.1rem; }
.post .btn--text { margin-top: auto; }

/* ---------- CTA band ---------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(2.2rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(10, 253, 89, 0.14), transparent 65%),
    var(--bg-soft);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(65% 100% at 50% 100%, #000, transparent);
  mask-image: radial-gradient(65% 100% at 50% 100%, #000, transparent);
  pointer-events: none;
}
.cta h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
.cta .lead { margin: 1rem auto 2rem; }
.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  position: relative;
}

/* ---------- Contact ----------------------------------------------------- */
.info {
  display: grid;
  gap: 1rem;
}
.info__row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: 0.3s;
}
.info__row:hover { border-color: rgba(10, 253, 89, 0.35); }
.info__row svg { width: 20px; height: 20px; color: var(--neon); flex: none; margin-top: 3px; }
.info__row b { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.info__row span { font-size: 0.95rem; }

.form {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--bg-soft);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  transition: 0.25s;
  resize: vertical;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  resize: none;
  padding-right: 2.4rem;
  /* Chevron stroke is the brand green: %230AFD59 = #0AFD59 (URL-encoded). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230AFD59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 17px;
}
.field select option { background: #0a1013; color: var(--text); }
.field--full { grid-column: 1 / -1; }

/* Honeypot: visually and programmatically removed, but still submittable. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Submission status banner */
.form__status {
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text);
}
.form__status[data-state="ok"] {
  border-color: rgba(10, 253, 89, 0.55);
  background: rgba(10, 253, 89, 0.1);
  color: #c8ffdf;
}
.form__status[data-state="error"] {
  border-color: rgba(255, 118, 118, 0.5);
  background: rgba(255, 118, 118, 0.09);
  color: #ffc9c9;
}
.form__status[data-state="pending"] {
  border-color: rgba(10, 253, 89, 0.35);
  color: var(--muted);
}

/* Per-field validation message */
.field__error {
  display: block;
  font-size: 0.82rem;
  color: #ff9d9d;
}
.field :is(input, textarea, select)[aria-invalid="true"] {
  border-color: rgba(255, 118, 118, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 118, 118, 0.12);
}

.form__note {
  font-size: 0.8rem;
  color: var(--dim);
  line-height: 1.55;
}
.field input::placeholder,
.field textarea::placeholder { color: #5b6862; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(10, 253, 89, 0.16);
}

/* ---------- Footer ------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: linear-gradient(180deg, transparent, rgba(10, 253, 89, 0.03));
  position: relative;
  z-index: 1;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer p { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; }
.footer .fcol {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.1rem;
}
.footer li + li { margin-top: 0.6rem; }
.footer li a { color: var(--muted); font-size: 0.92rem; transition: 0.2s; }
.footer li a:hover { color: var(--neon); padding-left: 4px; }

.socials { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: 0.25s var(--ease);
}
.socials svg { width: 17px; height: 17px; }
.socials a:hover {
  color: #06120a;
  background: var(--neon);
  border-color: transparent;
  transform: translateY(-3px);
}

.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--dim);
}
.footer__bottom a:hover { color: var(--neon); }
.footer__bottom nav { display: flex; gap: 1.25rem; }

/* ---------- Back to top ------------------------------------------------- */
/*
 * Revealed by a scroll-driven animation, so no JavaScript is required.
 * Hidden by default and shown once the page has scrolled past ~280px.
 *
 * In browsers without `animation-timeline: scroll()` the @supports block is
 * skipped, so the fallback below keeps the button permanently visible: the
 * feature still works, only the "hide near the top" polish is lost.
 */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;

  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(8, 12, 16, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.to-top svg {
  width: 19px;
  height: 19px;
  transition: translate 0.25s var(--ease);
}
.to-top:hover {
  background: var(--neon);
  color: #06120a;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -10px rgba(10, 253, 89, 0.7);
}
.to-top:hover svg { translate: 0 -2px; }

/* Fallback: visible everywhere until the scroll animation takes over. */
.to-top { opacity: 1; visibility: visible; }

/* Off-screen anchor used to close the mobile menu.
  The burger's close state and the ".backdrop" scrim must NOT use href="#": an
   empty fragment makes the browser jump to the top of the document, so closing
   the menu while scrolled down would lose the visitor's position.

   Pointing them at this element clears :target without moving the page. It is
   `position: fixed`, so it is always inside the viewport — the browser has
   nothing to scroll to and the offset is preserved. (A static or absolute
   element would sit at its layout position near the end of the document and
   navigation to it would jump to the bottom of the page.)

   It is decorative: clipped to 1px, non-interactive and aria-hidden. */
.close-target {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .to-top {
    opacity: 0;
    visibility: hidden;
  }

  @media (prefers-reduced-motion: no-preference) {
    .to-top {
      animation: to-top-in linear both;
      animation-timeline: scroll(root);
      /* Absolute scroll offsets: hidden at the top, fully shown by 460px. */
      animation-range: 260px 460px;
    }
    @keyframes to-top-in {
      from {
        opacity: 0;
        visibility: hidden;
        translate: 0 14px;
      }
      to {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
      }
    }
  }

  /*
   * Reduced motion: no scroll-linked fade. The button simply stays visible.
   * `animation: none` is essential — the global reduced-motion rule below
   * forces animation-duration to 0.01ms, which would otherwise pin the element
   * to the end of the animation range at every scroll position. Visibility
   * must be restored explicitly because the base rule above hides it.
   */
  @media (prefers-reduced-motion: reduce) {
    .to-top {
      animation: none;
      opacity: 1;
      visibility: visible;
    }
  }
}

/* ---------- Scroll reveal (progressive enhancement) --------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes reveal {
      from { opacity: 0; translate: 0 26px; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  /* Featured project stacks: board on top, copy underneath. */
  .proj--featured { grid-template-columns: 1fr; }
  .proj--featured .proj__art { min-height: 300px; }
  .hero__grid,
  .about__grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .core { width: min(100%, 380px); }
}

/*
 * The burger menu takes over from 900px down. This was 760px, but logo.svg is a
 * wide lockup (234px at 30px tall) whereas the previous square mark was 32px —
 * the header could no longer fit logo + 7 nav links + CTA below roughly 900px,
 * so the flex row was squeezing the logo. Raising the breakpoint means the
 * compact menu appears before the desktop layout runs out of room.
 */
@media (max-width: 900px) {
  /*
   * Only one burger is shown at a time. The close variant is a sibling BEFORE
   * the nav, so it is hidden by default and revealed with the :has() selector
   * once the nav is targeted.
   */
  .burger--open { display: grid; }
  .burger--close { display: none; }
  .header:has(.nav:target) .burger--open { display: none; }
  .header:has(.nav:target) .burger--close { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
    background: rgba(6, 9, 12, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    margin: 0;
    translate: 0 -8px;
    opacity: 0;
    visibility: hidden;
    transition: 0.28s var(--ease);
  }
  .nav:target {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }
  /* Hide the back-to-top button while the mobile menu is open, so it does not
     float over the dimmed backdrop. The scroll animation must be cancelled
     first — `animation-fill-mode: both` would otherwise win over these
     declarations and keep the button visible. */
  .header:has(.nav:target) ~ .to-top {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /*
   * Tap-outside-to-close scrim.
   *
   * It MUST be a sibling of `.header`, not a child. `.header` has
   * `backdrop-filter`, which makes it the containing block for `position: fixed`
   * descendants — an `inset: … 0 0` backdrop inside it therefore resolved
   * against the 72px-tall header and ended up 0px tall, so tapping below the
   * open menu did nothing.
   *
   * Height is set explicitly with dvh rather than relying on `inset: 0`, because
   * the element is still a descendant of `.wrap` in the markup order. dvh
   * accounts for mobile browser chrome, and the fallback keeps older browsers
   * working.
   */
  .header:has(.nav:target) ~ .backdrop {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 60;
    background: rgba(3, 5, 7, 0.65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nav a { padding: 0.75rem 0.75rem; font-size: 1rem; }
  .header .btn { display: none; }
  .nav .btn--mobile {
    display: inline-flex;
    margin-top: 0.6rem;
    background: var(--neon);
    color: #06120a;
    justify-content: center;
    font-weight: 700;
  }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .verticals { grid-template-columns: repeat(2, 1fr); }
  /* Hero stats are hidden on mobile — they add height without adding much on a
     small screen, and the hero reads better ending on the call to action.
     760px matches the site's existing mobile breakpoint (where the burger menu
     takes over), so the 2- and 1-column rules that used to apply here are gone. */
  .stats { display: none; }
  /* The stats block carried most of the hero's bottom weight, so trim the
     padding that used to give it room. */
  .hero { padding-bottom: 0; }
  /* Featured project: keep the three result figures on one line where they fit,
     and shrink the board chrome a little on small screens. */
  .proj--featured .proj__art { min-height: 260px; }
  .proj__stats { gap: 0.75rem; }
  .proj__stats span { font-size: 0.72rem; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .sect-head--split { align-items: flex-start; }
  .core__tag--a { left: -2%; }
  .core__tag--b { right: -2%; }
}

@media (max-width: 420px) {
  .verticals { grid-template-columns: 1fr; }
  .core__tag--c { display: none; }
  /* Stack the result figures rather than squeezing three columns. */
  .proj__stats { grid-template-columns: 1fr; gap: 0.65rem; }
  .proj--featured .proj__art { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

@media print {
  body::before,
  body::after { display: none; }
  .header { position: static; }
}