/* ============================================================
   KULTXR — STYLE v2
   Easing: cubic-bezier(0.76, 0, 0.24, 1)
   ============================================================ */

:root {
  --black:   #080808;
  --black2:  #0e0e0e;
  --gray:    #1a1a1a;
  --gray2:   #2a2a2a;
  /*
    --muted is the secondary text colour and sits on four different dark surfaces
    (--black #080808, --black2 #0e0e0e, --gray #1a1a1a, --gray2 #2a2a2a). It was #555,
    which measures 2.33:1 on --gray and 2.68:1 on --black against a 4.5:1 requirement,
    and accounted for 31 of the 45 contrast failures the accessibility suite found.

    #8a8a8a is chosen against the WORST case - the lightest surface it sits on (--gray,
    5.04:1). Picking against the darkest surface is the trap: it passes where you tested
    and fails on the panels. One value clearing the worst case keeps this a single token
    rather than a per-surface override table.
  */
  --muted:   #8a8a8a;
  --white:   #ffffff;
  --blue:    #1a56ff;
  --blue2:   #3b7aff;
  /*
    --blue is a fill and large-display colour: 3.51:1 on --black2, legal for neither body
    text nor small labels. --blue-text is the same hue raised to 5.33:1 for the places it
    is used as small text. Do not swap them - --blue is still correct for fills.
  */
  --blue-text: #4d7fff;
  --blue-dim: rgba(26,86,255,0.12);
  --ease:    cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { font-size: 16px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.6;
  overflow-x: clip; /* clip instead of hidden — hidden breaks position:sticky */
  cursor: none;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; color: var(--blue); }
strong { color: var(--white); }
b { font-weight: 400; opacity: 0.4; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--blue); }

/* ── SELECTION ── */
::selection { background: var(--blue); color: var(--white); }

/* ── SCANLINES ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 7999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0.06) 4px
  );
}

/* ── NOISE OVERLAY ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}


/* ============================================================
   PRELOADER
   ============================================================ */

@keyframes glitch-bar {
  0%,90%,100% { transform: translateX(0); opacity: 1; }
  91%  { transform: translateX(-6px); opacity: 0.8; clip-path: inset(30% 0 40% 0); }
  93%  { transform: translateX(5px);  opacity: 0.9; clip-path: inset(60% 0 10% 0); }
  95%  { transform: translateX(-3px); opacity: 1;   clip-path: inset(10% 0 70% 0); }
  97%  { transform: translateX(0);    opacity: 1;   clip-path: none; }
}

@keyframes pre-flicker {
  0%,100% { opacity: 1; }
  92% { opacity: 1; } 93% { opacity: 0; } 94% { opacity: 1; }
  96% { opacity: 1; } 97% { opacity: 0.3; } 98% { opacity: 1; }
}

@keyframes flash-in {
  0%   { opacity: 0; transform: scaleX(0); }
  60%  { opacity: 1; transform: scaleX(1.05); }
  100% { opacity: 1; transform: scaleX(1); }
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* preloader grid bg */
#preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,86,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,86,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.pre-inner { text-align: center; position: relative; z-index: 2; }

.pre-status {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  animation: pre-flicker 3s infinite 0.5s;
}

.pre-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  opacity: 0;
  transform: translateY(60px) rotateX(20deg);
}

.pre-icon { flex-shrink: 0; height: clamp(56px, 9vw, 96px); width: auto; display: block; }

.pre-wordmark {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--white);
  line-height: 1;
}

.pre-wordmark em {
  font-style: normal;
  color: var(--blue);
  text-shadow: 0 0 30px rgba(26,86,255,0.8), 0 0 60px rgba(26,86,255,0.4);
}

.pre-bar-wrap {
  width: 320px;
  height: 2px;
  background: var(--gray);
  margin: 28px auto 10px;
  position: relative;
  overflow: hidden;
}

.pre-bar {
  height: 100%;
  width: 0%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue), 0 0 24px rgba(26,86,255,0.5);
  transition: width 0.05s linear;
}

.pre-bar-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: flash-in 1.5s ease-out infinite;
}

.pre-pct {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--blue);
  margin-bottom: 20px;
  opacity: 0;
}

.pre-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--muted);
  opacity: 0;
  text-transform: uppercase;
}

/* The full-screen wipe that slides off to reveal the site */
.pre-wipe {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateX(-100%);
  z-index: 3;
}

/* ── GLITCH BURST KEYFRAMES ── */
@keyframes glitch-x {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes glitch-clip {
  0%,100% { clip-path: none; opacity: 1; }
  10% { clip-path: inset(15% 0 55% 0); opacity: 0.9; }
  20% { clip-path: inset(70% 0 5% 0);  opacity: 1; }
  30% { clip-path: inset(35% 0 25% 0); opacity: 0.8; }
  40% { clip-path: none; }
}
@keyframes border-run {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,86,255,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(26,86,255,0); }
}

/* ── CURSOR CANVAS ── */
#cursor-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9988;
  will-change: contents;
}

/* ============================================================
   CURSOR
   ============================================================ */

#cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9990;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: transform 0.1s, opacity 0.25s ease;
  opacity: 0;
}

#cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9989;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.4s var(--ease), height 0.4s var(--ease), border-color 0.3s, opacity 0.25s ease;
  opacity: 0;
}

/* The custom cursor is positioned by JS on mousemove, so before the pointer
   moves it has no coordinates and used to paint at the origin - a white dot
   and ring bleeding off the top-left corner on every load, made louder by
   mix-blend-mode: difference. Touch devices never fire mousemove, so they sat
   there permanently. Revealed only once a real pointer moves. */
body.cursor-ready #cursor-dot,
body.cursor-ready #cursor-circle { opacity: 1; }

/* No pointer to follow, and the trail canvas is wasted work on touch. */
@media (pointer: coarse), (hover: none) {
  #cursor-dot,
  #cursor-circle,
  #cursor-canvas { display: none !important; }
}

body.is-hovering #cursor-circle { width: 72px; height: 72px; border-color: rgba(255,255,255,0.8); }
body.is-link #cursor-dot { transform: translate(-50%,-50%) scale(3); background: var(--blue); }
body.is-link #cursor-circle { width: 0; height: 0; opacity: 0; }

/* ============================================================
   NAV
   ============================================================ */

#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  transition: padding 0.4s var(--ease), background 0.4s;
}

#nav.scrolled {
  padding: 14px 48px;
  background: rgba(8,8,8,0.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0;
}

.nav-logo svg { width: 28px; height: 35px; }
.nav-icon-img { height: 34px; width: auto; display: block; }
.ft-icon-img  { height: 26px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 36px;
  opacity: 0;
}

.nl {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  transition: color 0.2s;
}
.nl:hover { color: var(--white); }

.nav-cta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--blue);
  color: var(--blue);
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
  opacity: 0;
}
.nav-cta:hover { background: var(--blue); color: var(--white); }

/*
  Sign in. Quiet beside the CTA: "Partner With Us" is the ask of a new visitor, signing in is what
  a returning one already intends. `opacity: 0` matches .nav-cta because both are revealed by the
  same GSAP timeline on load - without it this would pop in ahead of the rest of the header.
*/
.nav-signin {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transition: color 0.2s;
}
.nav-signin:hover,
.nav-signin:focus-visible { color: var(--blue); }

.mm-signin {
  display: block;
}

/* ============================================================
   BRACKET CORNERS
   ============================================================ */

.bk {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0;
}
.bk.tl { top: 28px; left: 28px; border-top: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.bk.tr { top: 28px; right: 28px; border-top: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }
.bk.bl { bottom: 28px; left: 28px; border-bottom: 1.5px solid var(--blue); border-left: 1.5px solid var(--blue); }
.bk.br { bottom: 28px; right: 28px; border-bottom: 1.5px solid var(--blue); border-right: 1.5px solid var(--blue); }

/* ============================================================
   HERO
   ============================================================ */

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: contents;
}

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 48px 100px;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(26,86,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,86,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black, transparent);
}

.hero-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(26,86,255,0.18) 0%, rgba(26,86,255,0.05) 40%, transparent 70%);
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  pointer-events: none;
}


.hero-body { position: relative; z-index: 2; max-width: 1200px; }
.bk { z-index: 2; }
.hero-scroll { z-index: 2; }
.hero-stats { z-index: 2; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
}

.eyebrow-pulse {
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(26,86,255,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(26,86,255,0); }
}

/* headline mask reveal */
.hero-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(72px, 11vw, 160px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.hl-row { overflow: hidden; display: block; }

.hl-mask {
  display: block;
  overflow: hidden;
}

.hl-mask span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
  position: relative;
}

.hl-mask span i {
  font-style: normal;
  -webkit-text-stroke: 2px var(--blue);
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(26,86,255,0.8)) drop-shadow(0 0 40px rgba(26,86,255,0.4));
}

.hero-desc {
  max-width: 520px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(24px);
}

.hero-btns {
  display: flex;
  gap: 14px;
  opacity: 0;
  transform: translateY(24px);
}

.btn-fill {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  border: 1px solid var(--blue);
  transition: background 0.25s, color 0.25s;
}
.btn-fill:hover { background: var(--blue2); }
.btn-fill.mt { margin-top: 32px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: border-color 0.25s, background 0.25s;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.04); }

.hero-stats {
  display: flex;
  gap: 60px;
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateY(24px);
}

.h-stat { display: flex; flex-direction: column; gap: 4px; }

.h-stat b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  opacity: 1;
  text-shadow: 0 0 30px rgba(26,86,255,0.6), 0 0 60px rgba(26,86,255,0.3);
}

.h-stat span {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  opacity: 0;
}

.scroll-bar {
  width: 36px;
  height: 1.5px;
  background: var(--gray2);
  position: relative;
  overflow: hidden;
}
.scroll-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--blue);
  animation: sweep 2s infinite ease-in-out;
}
@keyframes sweep { to { left: 100%; } }

.hero-scroll span {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee-wrap {
  background: var(--blue);
  overflow: hidden;
  padding: 13px 0;
  position: relative;
  z-index: 10;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}

.marquee-track span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  flex-shrink: 0;
  color: var(--white);
}

.marquee-track b { opacity: 0.45; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* revenue marquee (reverse) */
.rev-marquee-wrap {
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
  background: var(--black2);
}
.rev-marquee-track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: marquee-rev 36s linear infinite;
  white-space: nowrap;
}
.rev-marquee-track span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-shrink: 0;
}
.rev-marquee-track b { opacity: 0.25; }
@keyframes marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ============================================================
   SECTION TAG
   ============================================================ */

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.section-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--blue);
  
}

/* ============================================================
   STATEMENT (PINNED)
   ============================================================ */

#statement {
  height: 250vh;
  position: relative;
}

.stmt-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px;
  overflow: hidden;
}

.stmt-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stmt-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--blue);
}

.stmt-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.4em;
  max-width: 1100px;
}

.sw {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(52px, 8vw, 112px);
  font-weight: 900;
  line-height: 0.92;
  text-transform: uppercase;
  /* Resting colour before JS lights each word. #383838 measured 1.70:1 on --black,
     below the 3:1 large-text minimum. #626262 measures 3.28:1. */
  color: #626262;
  transition: color 0.4s var(--ease);
  display: block;
}

.sw.lit { color: var(--white); }
.sw.accent-w.lit { color: var(--blue);  }

.stmt-sub {
  margin-top: 48px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stmt-sub.lit {
  opacity: 1;
  transform: translateY(0);
}
.stmt-sub p { font-size: 14px; color: var(--muted); line-height: 1.75; }

.stmt-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gray);
}
.stmt-progress-fill {
  height: 100%;
  background: var(--blue);
  width: 0%;
  transition: width 0.05s linear;
  
}

/* ============================================================
   CAPABILITIES (2x4 GRID)
   ============================================================ */

#capabilities {
  position: relative;
  padding: 120px 48px;
}

.cap-head {
  max-width: 1400px;
  margin: 0 auto 56px;
}

.cap-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.cap-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}
.cap-hl em { font-style: normal; color: var(--blue); }

.cap-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray);
  border: 1px solid var(--gray);
}

.cap-card {
  background: var(--black);
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background 0.35s var(--ease);
  overflow: hidden;
  min-height: 320px;
}

/* Animated sweep on hover */
.cap-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.cap-card:hover::after { left: 140%; }

.cap-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), #6aa3ff, var(--blue));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.cap-card:hover::before {
  animation: border-run 2s linear infinite;
}
.cap-card:hover { background: var(--blue); }
.cap-card:hover::before { transform: scaleX(1); }
.cap-card:hover .cc-num { color: rgba(255,255,255,0.7); }
.cap-card:hover h3 { color: var(--white); }
.cap-card:hover p { color: rgba(255,255,255,0.8); }

.cc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cc-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--blue);
  
}

.cc-arrow {
  font-size: 20px;
  color: var(--gray2);
  transition: color 0.2s, transform 0.3s var(--ease);
}
.cap-card:hover .cc-arrow { color: var(--white); transform: translate(6px, -6px); }

.cap-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 1.7vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}

.cap-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}

/* ============================================================
   LOOP
   ============================================================ */

#loop {
  position: relative;
  padding: 120px 48px;
  overflow: hidden;
}

.loop-ghost {
  position: absolute;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(220px, 30vw, 480px);
  font-weight: 900;
  color: rgba(255,255,255,0.018);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  letter-spacing: 0.1em;
  white-space: nowrap;
  user-select: none;
}

.loop-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.loop-head { }

.loop-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 28px;
  overflow: hidden;
}

.lh-mask { overflow: hidden; display: block; }
.lh-mask span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.loop-hl.revealed .lh-mask span { transform: translateY(0); }
.loop-hl.revealed .lh-mask:nth-child(2) span { transition-delay: 0.08s; }

.loop-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 400px;
}

.loop-diagram-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.loop-svg { width: 100%; overflow: visible; }

.loop-ring-spin {
  animation: spin 20s linear infinite;
  transform-origin: 300px 300px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ln { cursor: none; }
.ln circle:first-child { transition: opacity 0.3s; }
.ln:hover circle:first-child { opacity: 0.25 !important; }

.loop-tip {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  min-width: 260px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.loop-tip.visible { opacity: 1; }
.lt-n {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--blue);
  margin-bottom: 4px;
}
.lt-t { font-size: 13px; color: var(--muted); }

/* ============================================================
   PROPERTIES
   ============================================================ */

#properties {
  padding: 120px 48px;
}

.props-head {
  max-width: 1280px;
  margin: 0 auto 64px;
}

.props-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(56px, 7vw, 108px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  overflow: hidden;
}

.ph-mask { overflow: hidden; display: block; }
.ph-mask span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.props-hl.revealed .ph-mask span { transform: translateY(0); }
.props-hl.revealed .ph-mask:nth-child(2) span { transition-delay: 0.08s; }

.props-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.prop-panel {
  position: relative;
  background: var(--black2);
  border: 1px solid var(--gray);
  padding: 56px 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
  transition: border-color 0.4s;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease), border-color 0.4s;
}

.prop-panel.revealed { clip-path: inset(0 0 0% 0); }
#prop2 { transition-delay: 0.1s; }

.prop-panel:hover { border-color: var(--blue); }

.pp-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--blue);
}

.pp-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(44px, 4.5vw, 72px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 20px;
}

.pp-content p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 24px;
}

.pp-content ul { display: flex; flex-direction: column; gap: 0; }
.pp-content li {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--gray);
  line-height: 1.5;
}
.pp-content li span { color: var(--white); font-weight: 600; margin-right: 6px; }

.pp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  text-transform: uppercase;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: gap 0.25s;
}
.pp-cta:hover { gap: 16px; }

.pp-tag {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--gray2);
  text-transform: uppercase;
}

/* ============================================================
   dropKULTXR — sub-brand (green accent per merch brand board)
   ============================================================ */

:root { --drop-green: #21F1A8; }

.drop-tag-accent { color: var(--drop-green) !important; }

.drop-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: none !important;
  letter-spacing: -0.01em;
}
.drop-green { color: var(--drop-green); font-style: normal; }

.drop-sub {
  max-width: 720px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.drop-panel:hover { border-color: var(--drop-green) !important; }

.drop-num {
  display: flex;
  align-items: center;
}

.pp-kicker {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--drop-green);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.drop-panel .pp-content p + p { margin-top: 14px; }

.drop-cta {
  color: var(--drop-green) !important;
  border-bottom-color: var(--drop-green) !important;
}

/* 0.35 alpha composited to #155d44 on --black2, measuring 2.46:1. 0.6 composites to
   roughly #199668 at 5.16:1 and keeps the tag visibly recessive. */
.drop-panel-tag { color: rgba(33,241,168,0.6) !important; }

/* ============================================================
   CLIENTS
   ============================================================ */

#clients {
  padding: 120px 48px;
  border-top: 1px solid var(--gray);
}

.clients-head {
  max-width: 1400px;
  margin: 0 auto 48px;
}

.clients-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  margin-top: 18px;
}
.clients-hl em { font-style: normal; color: var(--blue); }

.clients-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--gray);
  border: 1px solid var(--gray);
}

.client-box {
  background: var(--black);
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.client-box:hover { background: var(--blue); color: var(--white); }

/* ============================================================
   CONTACT FORM
   ============================================================ */

.contact-form {
  max-width: 620px;
  margin: 44px auto 40px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cf-row { display: block; }
.cf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.cf-field { display: flex; flex-direction: column; gap: 8px; }

.cf-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  background: var(--black2);
  border: 1px solid var(--gray);
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  padding: 14px 16px;
  transition: border-color 0.25s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.cf-field textarea { resize: vertical; min-height: 110px; }
.cf-field select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%),
                    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus { outline: none; border-color: var(--blue); }
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: #444; }

.cf-submit {
  margin-top: 6px;
  background: var(--blue);
  color: var(--white);
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 34px;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.cf-submit:hover { background: var(--blue2); }

.cf-status {
  font-size: 13px;
  color: var(--blue);
  min-height: 20px;
}

/* ── SOCIAL ── */
.contact-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 34px 0 30px;
}
.contact-social .social-ic {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray);
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  cursor: default; /* not linked yet — profiles going live soon */
}
.contact-social .social-ic:hover {
  color: var(--white);
  border-color: var(--blue);
}

/* ============================================================
   K/AYO
   ============================================================ */

#kayo {
  position: relative;
  padding: 120px 48px;
  background: var(--black2);
  overflow: hidden;
}

.kayo-bg-text {
  position: absolute;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(180px, 22vw, 360px);
  font-weight: 900;
  color: rgba(255,255,255,0.025);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.kayo-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.kayo-logo-big {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(60px, 7vw, 100px);
  font-weight: 900;
  line-height: 1;
  margin: 16px 0 8px;
  letter-spacing: 0.02em;
}
.kayo-logo-big em { color: var(--blue); }

.kayo-sub-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 32px;
}

.kayo-left p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.kayo-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kayo-card {
  padding: 32px 0;
  border-bottom: 1px solid var(--gray);
}
.kayo-card:first-child { border-top: 1px solid var(--gray); }

.kc-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  /* 11px is small text, so this needs the 4.5:1 token, not the fill colour. */
  color: var(--blue-text);
  margin-bottom: 12px;
}

.kayo-card h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.kayo-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ============================================================
   CONTACT / CLOSER
   ============================================================ */

#contact {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 48px;
  overflow: hidden;
  background: var(--black);
}

#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(26,86,255,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 30%, rgba(26,86,255,0.06) 0%, transparent 55%);
}

.contact-inner { position: relative; z-index: 2; }

.contact-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.contact-tag::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--blue);
}
.contact-tag::after {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--blue);
}

.contact-hl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(64px, 10vw, 148px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 40px;
  overflow: hidden;
}

.ch-mask { overflow: hidden; display: block; }
.ch-mask span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.contact-hl.revealed .ch-mask span { transform: translateY(0); }
.contact-hl.revealed .ch-mask:nth-child(2) span { transition-delay: 0.08s; }

.contact-desc {
  max-width: 520px;
  margin: 0 auto 48px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.contact-desc.revealed { opacity: 1; transform: translateY(0); }

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  border-bottom: 1.5px solid var(--blue);
  padding-bottom: 4px;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s, gap 0.3s;
}
.contact-cta.revealed { opacity: 1; transform: translateY(0); }
.contact-cta:hover { gap: 20px; }

.contact-tagline {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.2s;
}
.contact-tagline.revealed { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */

#footer {
  background: var(--gray);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ft-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.ft-mid {
  display: flex;
  gap: 32px;
}
.ft-mid a {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  transition: color 0.2s;
}
.ft-mid a:hover { color: var(--white); }

.ft-right {
  font-size: 11px;
  color: var(--muted);
}

/* ============================================================
   SCROLL-TRIGGERED GENERICS
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-up.revealed { opacity: 1; transform: translateY(0); }

/* Glitch burst class — toggled by JS */
.glitch-burst {
  animation: glitch-x 0.3s steps(1) forwards, glitch-clip 0.3s steps(1) forwards;
}

/* Blue flash overlay on section enter */
.section-flash {
  position: relative;
}
.section-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0s;
}
.section-flash.flashing::after { opacity: 0.12; transition: opacity 0.05s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  #nav { padding: 18px 24px; }
  #nav.scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  #hero { padding: 120px 24px 80px; }
  .hero-stats { gap: 32px; }
  .hero-scroll { left: 24px; }
  #statement .stmt-sticky { padding: 60px 24px; }
  #capabilities { padding: 80px 24px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-card { min-height: 260px; padding: 32px 24px; }
  #loop { padding: 80px 24px; }
  .loop-inner { grid-template-columns: 1fr; gap: 48px; }
  #properties { padding: 80px 24px; }
  .props-grid { grid-template-columns: 1fr; }
  #clients { padding: 80px 24px; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .client-box { min-height: 88px; font-size: 14px; }
  .cf-row-2 { grid-template-columns: 1fr; }
  #kayo { padding: 80px 24px; }
  .kayo-inner { grid-template-columns: 1fr; gap: 48px; }
  #contact { padding: 80px 24px; }
  #footer { flex-direction: column; text-align: center; padding: 24px; }
  .ft-mid { flex-wrap: wrap; justify-content: center; }
  .bk { display: none; }
}

@media (max-width: 1200px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  .cap-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   NO-MOTION / NO-JS FALLBACK LAYER
   ───────────────────────────────────────────────────────────────
   The document only carries .js when scripts are running AND the
   visitor has not asked for reduced motion. main.js also strips the
   class if gsap / ScrollTrigger / Lenis failed to load.

   Without .js, every element that the animation timeline would have
   revealed has to be visible on its own. Before this existed, a
   blocked CDN or a reduced-motion preference produced a black page:
   headlines sat outside their overflow:hidden masks and the nav,
   hero and contact copy were all opacity:0.

   !important is deliberate — this is an override layer that has to
   beat the animation defaults above.
   ══════════════════════════════════════════════════════════════ */

/* Intro overlay is meaningless with no timeline to run. */
html:not(.js) #preloader { display: none !important; }

/* Custom cursor is JS-positioned; otherwise it just parks in a corner. */
html:not(.js) #cursor-dot,
html:not(.js) #cursor-circle,
html:not(.js) #cursor-canvas { display: none !important; }

/* Anything the timeline faded in. */
html:not(.js) .nav-logo,
html:not(.js) .nav-links,
html:not(.js) .nav-cta,
html:not(.js) .bk,
html:not(.js) .hero-eyebrow,
html:not(.js) .hero-desc,
html:not(.js) .hero-btns,
html:not(.js) .hero-stats,
html:not(.js) .hero-scroll,
html:not(.js) .stmt-sub,
html:not(.js) .contact-desc,
html:not(.js) .contact-cta,
html:not(.js) .contact-tagline,
html:not(.js) .fade-up {
  opacity: 1 !important;
  transform: none !important;
}

/* Headlines are held outside overflow:hidden masks until animated. */
html:not(.js) .hl-mask span,
html:not(.js) .ph-mask span,
html:not(.js) .ch-mask span,
html:not(.js) .lh-mask span {
  transform: translateY(0) !important;
}

/* Statement words sit at #383838 until JS lights them. */
html:not(.js) .sw { color: var(--white) !important; }
html:not(.js) .sw.accent-w { color: var(--blue) !important; }

/* Scroll-driven progress bars have nothing driving them. */
html:not(.js) .stmt-progress { display: none !important; }

/* Hover tooltip has no pointer affordance without JS. */
html:not(.js) .loop-tip { display: none !important; }

/* ───────────────────────────────────────────────────────────────
   Reduced motion. The .js class is withheld above, so the reveal
   rules already apply. What remains is stopping the purely CSS
   animation that would otherwise keep running — the two infinite
   marquees are continuous motion a visitor cannot pause, which is
   the situation WCAG 2.2.2 is about.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Marquees keep their content legible, just stationary. */
  .marquee-track,
  .rev-marquee-track {
    animation: none !important;
    transform: none !important;
  }

  /* Decorative motion layers off entirely. */
  #cursor-canvas,
  #hero-canvas,
  .loop-ring-spin,
  .eyebrow-pulse { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ───────────────────────────────────────────────────────────────
   .nav-links is display:none below 960px and nothing replaced it, so
   tablet and phone visitors had no way to reach Services, System,
   dropKULTXR, Clients or Platform. This is that replacement.
   ══════════════════════════════════════════════════════════════ */

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;               /* 44px min touch target */
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
  z-index: 10001;
}
.nav-burger:hover { border-color: var(--blue); }
.nav-burger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: transform 0.28s var(--ease), opacity 0.2s ease;
}
/* Bars morph into a cross while open. */
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 96px 32px 48px;
  background: rgba(8, 8, 8, 0.97);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mm-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.mm-links a {
  display: block;
  padding: 14px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.2s ease, padding-left 0.2s var(--ease);
}
.mm-links a:hover,
.mm-links a:focus-visible { color: var(--blue); padding-left: 8px; }
.mm-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.mm-links .mm-cta {
  margin-top: 20px;
  border-bottom: none;
  color: var(--blue);
}

.mm-mail {
  margin-top: 28px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.mm-mail:hover { color: var(--blue); }

/* Stop background scroll behind the open panel. */
body.menu-open { overflow: hidden; }

/* #nav is position:fixed with z-index:800, which makes it a stacking context.
   The burger's z-index:10001 is therefore scoped inside it and resolved below
   the panel at 10000, so while the menu was open a tap on the X landed on the
   overlay instead of the button. On touch there is no Escape key, so the only
   way out was picking a link. Lifting the whole bar above the panel while open
   is what actually fixes it - raising the button alone cannot escape its
   parent's stacking context. */
body.menu-open #nav { z-index: 10001; }

@media (max-width: 960px) {
  .nav-burger { display: flex; }
  /* The header CTA is redundant once the panel carries it, and it crowds
     the burger on narrow screens. */
  #nav .nav-cta { display: none; }
  /* Same reasoning: the mobile panel carries sign-in, and three controls crowd the burger. */
  #nav .nav-signin { display: none; }
}

@media (max-width: 380px) {
  .mm-links a { font-size: 26px; padding: 12px 0; }
  .mobile-menu { padding: 88px 22px 36px; }
}

/* Without JS the panel can never be opened, so hide the control entirely
   rather than offering a dead button. Anchor links in the footer still work. */
html:not(.js) .nav-burger { display: none !important; }
html:not(.js) .mobile-menu { display: none !important; }

/* With no JS the burger cannot open anything, so instead of a dead control we
   let the real nav links wrap under the logo. Otherwise hiding the burger would
   leave small screens with no navigation again - the exact problem being
   fixed here. */
@media (max-width: 960px) {
  html:not(.js) #nav {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
  }
  html:not(.js) .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 18px;
    width: 100%;
    order: 3;
  }
  html:not(.js) #nav .nav-cta { display: inline-flex !important; }
}

/* ───────────────────────────────────────────────────────────────
   Skip link. Off-screen until focused, so keyboard users can bypass
   the nav without it affecting the visual design.
   ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10002;
  padding: 12px 18px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--blue);
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────
   Visible focus for keyboard users. The design had no focus styles
   at all, so tabbing through was untrackable.
   ─────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.cf-submit:focus-visible,
.btn-fill:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/*
  The contact form's honeypot. This lived in a style="" attribute on the input until the
  Content-Security-Policy was tightened: a strict `style-src 'self'` blocks inline style
  ATTRIBUTES, not just <style> blocks, and the failure mode is the worst possible one - the
  honeypot becomes visible and every real visitor is invited to fill in the field whose only
  purpose is to catch robots. Moving it here is what lets the CSP stay strict with no
  'unsafe-inline'. It must never go back inline.

  It is also aria-hidden and tabindex="-1" in the markup, so assistive tech and the keyboard
  both skip it; this rule only handles the visual side.
*/
.cf-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}