/* ============================================================================
   Mandioca — visual language v2.
   One continuous surface: a single fixed light field behind the whole page,
   centred type on the vertical axis, and one object per section arriving out
   of depth as you scroll. No section paints its own background, so there are
   no seams anywhere.
   ========================================================================== */

:root {
  --black:   #040605;
  --panel:   #0E1211;
  --hair:    rgba(255, 255, 255, 0.07);
  --hair-2:  rgba(255, 255, 255, 0.13);

  --white:   #FFFFFF;
  --grey:    #8C948F;          /* 5.5:1 on the ground */
  --grey-dim:#79827C;          /* 4.65:1 — the old #5E655F was 3.39:1 and failed AA */
  --placeholder: #79827C;

  --lime:    #D9DF2D;
  --teal:    #1FAE93;

  --font: "Inter Tight", "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gut: clamp(1.3rem, 5vw, 5rem);
  --navh: 64px;
}

* { box-sizing: border-box; }

/* no smooth scrolling: a menu click must land on its section, not travel
   through every one on the way. The jump is covered by .veil instead. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, canvas, svg { display: block; max-width: 100%; }

::selection { background: rgba(217, 223, 45, 0.28); }

/* ══════════════════════════════════════════════════════════════════════
   THE SKY — one fixed light field for the entire page.
   Because it never scrolls and no section paints over it, the background
   is literally continuous: there is no seam to hide.
   ══════════════════════════════════════════════════════════════════════ */
.sky {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--black);
}
.sky canvas {
  width: 100%; height: 100%;
  /* rendered at a fraction of the real size, so the upscale is the blur */
  image-rendering: auto;
}
/* a faint vignette keeps the corners from lifting */
.sky::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 26%, rgba(4, 6, 5, 0.78) 96%),
    linear-gradient(180deg, rgba(4, 6, 5, 0.45), rgba(4, 6, 5, 0) 22%, rgba(4, 6, 5, 0) 76%, rgba(4, 6, 5, 0.4));
}

/* ══════════════════════════════════════════════════════════════════════
   FRAME — sections are transparent windows onto the sky
   ══════════════════════════════════════════════════════════════════════ */
.frame {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(6rem, 15vh, 10rem) var(--gut) clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame--auto { min-height: 0; }
.frame--tall { min-height: 118svh; }

/* ── the statement, centred on the page's vertical axis ───────────────── */
.say {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.say h1, .say h2 {
  margin: 0;
  font-size: clamp(2.3rem, 6vw, 5.4rem);
  line-height: 0.97;
  font-weight: 600;
  letter-spacing: -0.042em;
  color: var(--white);
  text-wrap: balance;
}
.say em { font-style: normal; color: var(--lime); }
.say p {
  margin: clamp(1.2rem, 3vh, 2rem) auto 0;
  max-width: 44ch;
  font-size: clamp(0.98rem, 1.3vw, 1.28rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--grey);
  text-wrap: pretty;
}

.acts {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(1.6rem, 4vh, 2.5rem);
}
.btn {
  display: inline-flex; align-items: center;
  height: 2.85rem; padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.btn--fill { background: var(--lime); color: #0A0C05; }
.btn--fill:hover { background: #E6EC4A; }
.btn--line { border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.86); }
.btn--line:hover { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.btn--sm { height: 2.3rem; padding: 0 1.05rem; font-size: 0.82rem; }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   THE DEPTH ENGINE
   Every object declares data-depth. The script writes --near (0 far → 1
   arrived) and --past (0 → 1 leaving). Objects compose their own transform
   from those, so one engine drives very different pieces and the layers
   naturally separate because each uses a different amount of the same value.
   ══════════════════════════════════════════════════════════════════════ */
[data-depth] {
  --near: 1;
  --past: 0;
}
/* only the heavy objects get a promoted layer — promoting every statement as
   well cost more in memory than it saved in paint */
.obj, .obj--flat, .obj--rest { will-change: transform; }

/* type arrives too, but travels a fraction of the distance the object does */
.lift {
  opacity: calc(0.32 + 0.68 * var(--near));
  transform: translate3d(0, calc((1 - var(--near)) * 4vh - var(--past) * 2.5vh), 0);
}

/* The opening frame is not something that arrives — it is already here.
   The globe only drifts; it never fades in. */
.obj--rest {
  transform: translate3d(0, calc(var(--past) * -4vh), 0) scale(calc(1 + var(--past) * 0.04));
}

/* objects come out of depth: smaller, dimmer, softer, tipped slightly back */
.obj {
  opacity: calc(0.3 + 0.7 * var(--near));
  filter: blur(calc((1 - var(--near)) * 3.5px));
  transform:
    perspective(1600px)
    translate3d(0, calc((1 - var(--near)) * 13vh - var(--past) * 7vh), 0)
    rotateX(calc((1 - var(--near)) * 5deg))
    scale(calc(0.86 + 0.14 * var(--near) + 0.05 * var(--past)));
}

/* the devices already carry their own tilt, so their depth pass may only
   translate and scale — a second rotation would fight the perspective */
/* the devices carry their own focus falloff in the sharp/soft mask, so their
   depth pass must not add a second blur on top of it */
.obj--flat {
  opacity: calc(0.42 + 0.58 * var(--near));
  transform:
    translate3d(0, calc((1 - var(--near)) * 9vh - var(--past) * 5vh), 0)
    scale(calc(0.94 + 0.06 * var(--near) + 0.035 * var(--past)));
}

/* the full reduced-motion block lives at the end of this file, so it can win
   against every later rule including the phone overrides */

/* The platform section holds the composition still while the three product
   screens change under it. Without that the tablet scrolls away and you only
   ever see one of them. The pin crops the device against the viewport edge,
   which is exactly the framing we want anyway. */
#platform { min-height: 300svh; padding: 0; display: block; }
#platform .pin {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(6rem, 15vh, 10rem) var(--gut) 0;
  overflow: hidden;
}
#platform .deck { top: 58vh; height: 100vh; }

/* The phone gets its own band below the statement rather than sitting behind
   it: a centred object behind centred type makes both unreadable. The section
   clips, so the device is cropped by the frame instead of bleeding onward. */
#solutions { overflow: hidden; }
.foneslot { position: relative; width: 100%; height: 46vh; margin-top: clamp(2.5rem, 7vh, 5rem); }
#solutions .fonewrap { top: 0; height: 112vh; }

@media (max-width: 640px) {
  #platform { min-height: 260svh; }
  .foneslot { height: 40vh; }
  .hero { min-height: 100svh; }
  /* the .orb overrides live with the hero, further down the file — declaring
     them here would put them ABOVE the base rule and they would be discarded */
}

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION — one bar, two states, legible over anything
   ══════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 80;
  height: var(--navh);
  display: flex; align-items: center;
  padding: 0 var(--gut);
  transition: background 0.55s ease, border-color 0.55s ease, backdrop-filter 0.55s ease;
  border-bottom: 1px solid transparent;
}
/* a scrim under the transparent state, so links stay readable even when the
   light field drifts bright directly behind the bar */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 6, 5, 0.72), rgba(4, 6, 5, 0));
  transition: opacity 0.55s ease;
}
.nav.is-stuck {
  background: rgba(6, 9, 8, 0.82);
  border-bottom-color: var(--hair);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.nav.is-stuck::before { opacity: 0; }

/* the official horizontal lockup, never redrawn and never re-proportioned */
.nav__logo { display: flex; align-items: center; z-index: 2; }
.nav__logo img { height: 21px; width: auto; }
.nav__logo:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 2px; }

/* absolutely centred, so the links sit on the page axis whatever the logo
   and the button happen to measure */
.nav__links {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  height: 100%;
  display: flex; align-items: center; gap: 1.9rem;
}
.nav__links a {
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.62);
  text-decoration: none; transition: color 0.35s ease;
}
.nav__links a:hover, .nav__links a.on { color: #fff; }

.nav__end { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; z-index: 2; }

.nav__burger {
  display: none;
  width: 38px; height: 38px; margin-right: -8px;
  border: 0; background: none; padding: 0;
  position: relative; cursor: pointer;
}
.nav__burger i {
  position: absolute; left: 9px; right: 9px; height: 1.5px;
  background: #fff; border-radius: 2px;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.3s ease;
}
.nav__burger i:nth-child(1) { top: 14px; }
.nav__burger i:nth-child(2) { top: 22px; }
body.menu .nav__burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu .nav__burger i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 6, 5, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.4rem;
  padding: var(--navh) var(--gut) 4rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
body.menu .sheet { opacity: 1; visibility: visible; }
/* :not(.btn) — otherwise the display size lands on the pill and the label
   spills straight out of it */
.sheet a:not(.btn) {
  font-size: 1.9rem; font-weight: 600; letter-spacing: -0.035em;
  color: #fff; text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hair);
}
/* flex:none — the sheet is a column flex container, and .btn's fixed height is
   a definite main size, so without this the pill shrinks to its 21px content
   height on any short viewport (every phone in landscape). */
.sheet .btn { margin-top: 1.7rem; align-self: flex-start; flex: none; }
@media (max-height: 620px) {
  .sheet { justify-content: flex-start; overflow-y: auto; }
  .sheet a:not(.btn) { font-size: 1.45rem; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__end .btn--sm { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — the globe low in the frame, cropped by the bottom edge
   ══════════════════════════════════════════════════════════════════════ */
/* the sphere is wider than the viewport by design (132vw, 152vw on a phone),
   so the hero has to crop it — otherwise the document scrolls sideways */
.hero { justify-content: flex-start; overflow: hidden; }

.orb {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0;
  /* it has to FIT: at 132vw the hero's overflow sliced the sphere down both
     sides and the straight cut looked like a mistake */
  width: min(1060px, 94vw);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, 60%);
}
.orb__in { position: absolute; inset: 0; }
.orb canvas { width: 100%; height: 100%; }

/* translucent panels around the globe: light film, visible edge, never a box */
.glasses { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1400px; }
.glass {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: linear-gradient(152deg,
              rgba(255, 255, 255, 0.085),
              rgba(255, 255, 255, 0.02) 55%,
              rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(4px) saturate(1.15) brightness(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15) brightness(1.15);
  padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.42rem;
}
.glass i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.glass i.w1 { width: 38%; } .glass i.w2 { width: 62%; } .glass i.w3 { width: 50%; }
.glass i.lime { background: rgba(217, 223, 45, 0.4); }
.glass .blockish {
  margin-top: auto; height: 38%; border-radius: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
}
.glass .dots { display: flex; gap: 4px; }
.glass .dots u { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.2); }

.glass--a { left: 4%;  bottom: 5%;  width: clamp(120px, 13vw, 190px);   height: clamp(78px, 8.4vw, 122px); transform: rotateY(21deg) rotateX(7deg) rotateZ(-3deg); }
.glass--b { left: 27%; bottom: 20%; width: clamp(132px, 14.5vw, 210px); height: clamp(86px, 9.4vw, 136px); transform: rotateY(13deg) rotateX(4deg) rotateZ(-1.5deg); }
.glass--c { right: 8%; bottom: 13%; width: clamp(126px, 13.5vw, 198px); height: clamp(80px, 8.6vw, 126px); transform: rotateY(-19deg) rotateX(8deg) rotateZ(3deg); }
@media (max-width: 780px) {
  .glass--b { display: none; }
  .glass--a { left: -3%; bottom: 8%; }
  .glass--c { right: -5%; bottom: 2%; }
}
/* the sphere climbs on a phone, so the hero does not open on dead black */
@media (max-width: 640px) {
  .orb { width: 118vw; transform: translate(-50%, 30%); }
}

/* ══════════════════════════════════════════════════════════════════════
   THE TILTED PLANE — tablet and phone share one lighting model
   ══════════════════════════════════════════════════════════════════════ */
.deck {
  position: absolute; z-index: 2;
  left: 0; top: 60vh;
  width: 100%; height: 100vh;
  perspective: 2200px;
  /* centred: the plane sits on the page axis like everything else */
  perspective-origin: 50% 0%;
  pointer-events: none;
}
.deck__tilt {
  position: absolute; left: 50%; top: 0;
  width: 1360px; height: 860px;
  margin-left: -680px;
  transform-origin: 50% 0%;
  /* a gentler tilt, so the screen reads as one whole object rather than a
     sliver disappearing off the left edge */
  transform: rotateX(49deg) rotateZ(-14deg) scale(0.96);
  transform-style: preserve-3d;
}
.deck__screen {
  position: absolute; inset: 0;
  border-radius: 14px; overflow: hidden;
  background: #0B0F0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7);
}
.deck__screen--soft {
  filter: blur(6px); border: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(112deg, transparent 56%, #000 94%);
          mask-image: linear-gradient(112deg, transparent 56%, #000 94%);
}
/* the sharp copy reaches further across the plane than it used to, so more of
   the table is readable before it hands over to the out-of-focus half */
.deck__screen--sharp {
  -webkit-mask-image: linear-gradient(112deg, #000 52%, transparent 92%);
          mask-image: linear-gradient(112deg, #000 52%, transparent 92%);
}
@media (max-width: 1200px) {
  .deck__tilt { width: 1160px; height: 740px; margin-left: -580px; transform: rotateX(50deg) rotateZ(-13deg) scale(0.9); }
}
@media (max-width: 760px) {
  .deck { top: 54vh; perspective: 1500px; }
  .deck__tilt { width: 880px; height: 580px; margin-left: -440px; transform: rotateX(48deg) rotateZ(-11deg) scale(0.86); }
}

/* which of the three screens is showing */
.deck__dots {
  position: relative; z-index: 4;
  display: flex; justify-content: center; gap: 0.55rem;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
}
.deck__dots span {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--grey-dim);
  padding: 0.4em 0.85em;
  border: 1px solid var(--hair); border-radius: 999px;
  transition: color 0.6s ease, border-color 0.6s ease;
}
.deck__dots span.on { color: var(--lime); border-color: rgba(217, 223, 45, 0.4); }

/* the phone: narrower frame, same tilt family, same light */
.fonewrap {
  position: absolute; z-index: 2;
  left: 0; top: 54vh;
  width: 100%; height: 90vh;
  perspective: 1500px;
  perspective-origin: 50% 0%;
  pointer-events: none;
}
.fonewrap__tilt {
  position: absolute; left: 50%; top: 0;
  width: 400px; height: 810px;
  margin-left: -200px;
  transform: rotateX(52deg) rotateZ(-18deg) scale(1);
  transform-style: preserve-3d;
}
.fone__sharp {
  -webkit-mask-image: linear-gradient(160deg, #000 34%, transparent 82%);
          mask-image: linear-gradient(160deg, #000 34%, transparent 82%);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.66);
}
.fone__soft {
  filter: blur(6px); border: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(160deg, transparent 38%, #000 84%);
          mask-image: linear-gradient(160deg, transparent 38%, #000 84%);
}
@media (max-width: 640px) {
  .fonewrap { top: 50vh; perspective: 1100px; }
  .fonewrap__tilt { width: 340px; height: 690px; margin-left: -170px; transform: rotateX(50deg) rotateZ(-15deg) scale(0.94); }
}

/* ── the rail field: a plane of light running to a vanishing point ────────
   No transform here: .obj--flat owns this element's transform, and a second
   declaration would silently win over the depth pass depending on order. */
.rails {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 0;
  height: 66vh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
          mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
}
.rails canvas { width: 100%; height: 100%; }
/* the copy clears the plane, so the two read as layers rather than a collision */
#how { padding-bottom: 42vh; }
@media (max-width: 640px) {
  .rails { height: 52vh; }
  #how { padding-bottom: 32vh; }
}

/* ══════════════════════════════════════════════════════════════════════
   STATEMENTS — the replacement for every card grid
   ══════════════════════════════════════════════════════════════════════ */
.stack {
  position: relative; z-index: 3;
  width: 100%; max-width: 46rem;
  margin: clamp(2.6rem, 7vh, 5rem) auto 0;
  display: flex; flex-direction: column;
  text-align: center;
}
.item { padding: clamp(1.7rem, 4vh, 2.8rem) 0; border-top: 1px solid var(--hair); }
.item:first-child { border-top: 0; padding-top: 0; }
.item__k {
  display: block;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.14em;
  color: var(--grey-dim); margin-bottom: 0.7rem;
}
.item h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  line-height: 1.06;
  font-weight: 600; letter-spacing: -0.032em;
  color: var(--white); text-wrap: balance;
}
.item h3 em { font-style: normal; color: var(--lime); }
.item p {
  margin: 0.7rem auto 0; max-width: 42ch;
  font-size: clamp(0.92rem, 1.1vw, 1.04rem);
  color: var(--grey); text-wrap: pretty;
}
.item__note {
  display: block; margin-top: 0.65rem;
  font-family: var(--mono); font-size: 0.65rem; line-height: 1.6;
  letter-spacing: 0.03em; color: var(--grey-dim);
}

/* ── proof numbers ────────────────────────────────────────────────────── */
.proof {
  position: relative; z-index: 3;
  width: 100%; max-width: 62rem;
  margin: clamp(2.2rem, 5vh, 3.4rem) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem 1rem;
  text-align: center;
}
.proof div { display: flex; flex-direction: column; gap: 0.3rem; }
.proof b {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proof > div > span {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--grey-dim); text-transform: uppercase;
}
.proof b span { font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
@media (max-width: 700px) { .proof { grid-template-columns: repeat(2, 1fr); } }

/* ── the volume curve ─────────────────────────────────────────────────── */
.curvewrap { position: relative; z-index: 2; width: 100%; max-width: 74rem; margin: clamp(2.4rem, 6vh, 3.8rem) auto 0; }
.curve { display: block; width: 100%; height: clamp(150px, 22vh, 260px); overflow: visible; }
.curve__grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.curve__area { opacity: 0; transition: opacity 1.8s ease 0.7s; }
.curve__line {
  fill: none; stroke: var(--lime); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  transition: stroke-dashoffset 3s cubic-bezier(0.24, 0.72, 0.2, 1);
}
.curve__dot {
  position: absolute; left: 100%; top: 5.83%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 5px rgba(217, 223, 45, 0.14), 0 0 22px 6px rgba(217, 223, 45, 0.28);
  opacity: 0; transition: opacity 1s ease 2.4s;
}
.curve__ax {
  display: flex; justify-content: space-between;
  margin-top: 0.7rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.09em;
  color: var(--grey-dim);
}
.is-set .curve__line { stroke-dashoffset: 0; }
.is-set .curve__area, .is-set .curve__dot { opacity: 1; }

/* ── markets ──────────────────────────────────────────────────────────── */
.mkts {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-top: clamp(1.7rem, 4vh, 2.5rem);
}
.mkts span {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em;
  color: var(--grey);
  padding: 0.44em 0.85em;
  border: 1px solid var(--hair); border-radius: 999px;
}
.mkts span b { color: var(--lime); font-weight: 400; }

/* ── partners ─────────────────────────────────────────────────────────── */
.marq {
  position: relative; z-index: 3; width: 100%;
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.marq__track {
  --mgap: clamp(2.5rem, 6vw, 5rem);
  display: flex; align-items: center; gap: var(--mgap);
  list-style: none; margin: 0; padding: 1.85rem 0;
  width: max-content;
  animation: slide 52s linear infinite;
}
/* half the track plus half a gap: translating a flat -50% lands mid-gap and the
   row visibly snaps by one gap width every cycle */
@keyframes slide { to { transform: translateX(calc(-50% - var(--mgap) / 2)); } }
.marq:hover .marq__track { animation-play-state: paused; }
.marq__track li {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--grey-dim);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  white-space: nowrap;
}
.marq__track svg { width: 21px; height: 21px; flex: none; fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1.2; }

/* ── team ─────────────────────────────────────────────────────────────── */
.roster {
  position: relative; z-index: 3;
  width: 100%; max-width: 72rem;
  margin: clamp(2.4rem, 6vh, 3.6rem) auto 0;
  /* min() — a bare 19rem track is wider than a 320px screen's content box and
     pushes the LinkedIn button off the right edge */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  text-align: left;
}
.who { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-top: 1px solid var(--hair); }
.who__ph {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  border: 1px solid var(--hair-2);
  font-family: var(--mono); font-size: 0.62rem; color: rgba(255,255,255,0.48);
}
.who__ph img { width: 100%; height: 100%; object-fit: cover; }
.who__n { display: flex; flex-direction: column; min-width: 0; }
.who__n b { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.012em; color: #fff; }
.who__n span { font-size: 0.78rem; color: var(--grey-dim); }
.who__li {
  margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair); color: var(--grey-dim);
  font-size: 0.6rem; font-weight: 600; text-decoration: none;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.who__li:hover { color: var(--lime); border-color: rgba(217, 223, 45, 0.45); }

/* ── legal ────────────────────────────────────────────────────────────── */
.legal {
  position: relative; z-index: 3;
  width: 100%; max-width: 60rem;
  margin: clamp(2.2rem, 5vh, 3.2rem) auto 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  text-align: left;
}
.legal > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.15rem 0;
  font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.08em;
  color: var(--grey); transition: color 0.4s ease;
}
.legal > summary::-webkit-details-marker { display: none; }
.legal > summary:hover { color: #fff; }
.legal > summary i { margin-left: auto; width: 11px; height: 11px; position: relative; flex: none; }
.legal > summary i::before, .legal > summary i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: currentColor; transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.legal > summary i::after { transform: rotate(90deg); }
.legal[open] > summary i::after { transform: rotate(0deg); }
.legal__body { display: flex; flex-direction: column; gap: 1.4rem; padding: 0 0 1.9rem; }
.legal__body h4 { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 600; color: #fff; }
.legal__body p { margin: 0; max-width: 70ch; font-size: 0.84rem; line-height: 1.64; color: var(--grey); }

/* ══════════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════════ */
.contact {
  position: relative; z-index: 3;
  width: 100%; max-width: 64rem;
  margin: clamp(2.4rem, 6vh, 3.6rem) auto 0;
  display: grid; grid-template-columns: 1.25fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  text-align: left;
}
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: 0.95rem; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
@media (max-width: 520px) { .f2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.42rem; }
.field > span {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--grey-dim);
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 0.95rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
                    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field select option { background: #0E1211; color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(217, 223, 45, 0.6);
  background: rgba(217, 223, 45, 0.05);
  box-shadow: 0 0 0 3px rgba(217, 223, 45, 0.12);
}
/* validation only after the field has been touched, never on a pristine form */
.form.checked :is(input, select, textarea):invalid {
  border-color: rgba(232, 100, 100, 0.65);
  background: rgba(232, 100, 100, 0.05);
}
/* the error span is also a direct child of .field, so `.field > span` (0,1,1)
   outranks a bare `.field__err` (0,1,0) and the message renders as a second
   grey uppercase label. Match the same shape and undo every inherited bit. */
.field > span.field__err {
  font-family: inherit;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
  color: #EE8585;
  display: none;
}
.form.checked :is(input, select, textarea):invalid ~ .field__err { display: block; }

.form__go { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; margin-top: 0.3rem; }
.form__go[disabled] { opacity: 0.55; cursor: default; }
/* Off-screen at -9999px is still focusable AND scrolls the document sideways
   when it takes focus. Clip it instead; the input also carries tabindex="-1". */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sent {
  display: none;
  flex-direction: column; gap: 0.7rem;
  border: 1px solid rgba(217, 223, 45, 0.3);
  background: rgba(217, 223, 45, 0.06);
  border-radius: 14px;
  padding: 1.7rem 1.6rem;
}
.sent b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.sent p { margin: 0; font-size: 0.92rem; color: var(--grey); max-width: 42ch; }
.sent a { color: var(--lime); }
.sent--fail { border-color: rgba(232, 100, 100, 0.35); background: rgba(232, 100, 100, 0.06); }
.sent--fail a { color: #F0A0A0; }
.is-sent .form, .is-failed .form { display: none; }
.is-sent .sent:not(.sent--fail) { display: flex; }
.is-failed .sent--fail { display: flex; }
.sent:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.cinfo { display: flex; flex-direction: column; gap: 1.5rem; }
.cinfo__k {
  display: block;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey-dim); margin-bottom: 0.45rem;
}
.cinfo a { color: #fff; text-decoration: none; font-size: 0.98rem; border-bottom: 1px solid rgba(217,223,45,0.35); padding-bottom: 1px; }
.cinfo a:hover { color: var(--lime); }
.offices { display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.offices div { display: flex; flex-direction: column; gap: 0.18rem; }
.offices dt { font-size: 0.86rem; font-weight: 500; color: #fff; }
.offices dd { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--grey-dim); }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.foot {
  position: relative; z-index: 3;
  border-top: 1px solid var(--hair);
  padding: clamp(2rem, 5vh, 3rem) var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem clamp(1.4rem, 4vw, 3rem);
  font-size: 0.77rem; color: var(--grey-dim);
  text-align: center;
}
.foot a { color: var(--grey-dim); text-decoration: none; transition: color 0.4s ease; }
.foot a:hover { color: var(--grey); }
.foot__logo { height: 18px; width: auto; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — last in the file so it beats every override above it.
   The canvases also stop themselves in v2.js; this handles the CSS half.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lift, .obj, .obj--flat, .obj--rest { opacity: 1; filter: none; transform: none; }
  .orb { transform: translate(-50%, 60%) !important; }
  .marq__track { animation: none; }
  .curve__line { stroke-dashoffset: 0; }
  .curve__area, .curve__dot { opacity: 1; }
  .scr { transition: none; }
  .glass { animation: none; }
}