/* F(SYNC) mechanical replica — layout & theme
   Structure mirrors the original's mechanics (fixed orb layer + lagged outline
   rings, section stack, sticky zoom track, marquee footer); all content and
   styling are our own. */

:root {
  --bg: #f2f2f0;
  --fg: #111113;
  --line: rgba(17, 17, 19, 0.16);
  --muted: rgba(17, 17, 19, 0.55);
  --light-grey: rgba(17, 17, 19, 0.12);
  --tile-a: #dfe6ec;
  --tile-b: #bcd9f0;
}
html.dark {
  --bg: #0b0b0c;
  --fg: #f4f4f2;
  --line: rgba(244, 244, 242, 0.18);
  --muted: rgba(244, 244, 242, 0.55);
  --light-grey: rgba(244, 244, 242, 0.14);
  --tile-a: #131720;
  --tile-b: #0e2a5c;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-var.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 300 14px/1.45 "Raleway", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
  cursor: none;
}
a, button, * { cursor: none; }
a { color: inherit; text-decoration: none; }

/* ---------- fsync mark ---------- */
.mark { display: block; fill: currentColor; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.brand-home .mark { width: 20px; }
.pre-logo, .pre-fill-inner { display: flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.pre-logo .mark, .pre-fill-inner .mark { width: 0.82em; flex: none; }
.pre-fill-inner { width: max-content; }

/* ---------- preloader ---------- */
.pre-w {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: grid; place-items: center;
}
.pre-mask { position: relative; font-size: clamp(32px, 6vw, 84px); font-weight: 300; letter-spacing: -0.02em; }
.pre-logo { opacity: 0.15; }
.pre-logo-fill {
  position: absolute; inset: 0; overflow: hidden; width: 0%;
  white-space: nowrap;
}
.pre-percent {
  position: absolute; bottom: 6vh; right: 4vw;
  font-size: clamp(24px, 4vw, 48px); font-variant-numeric: tabular-nums;
}

/* ---------- cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--fg);
  pointer-events: none; opacity: 0;
  mix-blend-mode: difference;
}
@media (hover: none) { .cursor { display: none; } * { cursor: auto; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  mix-blend-mode: difference; color: #fff;
}
.nav-logo { font-weight: 400; font-size: 17px; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 22px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; }
.nav-links a { opacity: 0.75; transition: opacity 0.25s; }
.nav-links a:hover { opacity: 1; }
.nav-mode {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); background: transparent;
  display: grid; place-items: center;
}
.mode-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.4s; }
html.dark .mode-dot { transform: scale(0.45); }

/* ---------- fixed orb layer ---------- */
.orb-w {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center;
}
.orb {
  position: absolute;
  width: 80vh; height: 80vh; min-width: 45em; min-height: 45em;
  opacity: 1;
}
.orb canvas { width: 100%; height: 100%; display: block; }
.orb-outline-w { position: absolute; inset: 0; display: grid; place-items: center; }
.orb-outline {
  width: 86vh; height: 86vh; min-width: 48em; min-height: 48em;
  border: 1px solid var(--line); border-radius: 50%;
}
.orb-outline.is-2 { width: 108vh; height: 108vh; min-width: 60em; min-height: 60em; }

/* ---------- sections ---------- */
.main-w { position: relative; z-index: 2; }
.s { position: relative; padding: 12vh 4vw; }
.s-title {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5vh;
}

/* hero — three phrases staggered around the orb on golden-ratio lines:
   vertical centers at 23.6vh / 50vh / 76.4vh (1/φ³, ½, 1−1/φ³),
   horizontal offsets 9vw (≈1/φ⁵) and 23.6vw (1/φ³) */
.s.is-hero { height: 100vh; position: relative; padding: 0; }
.hero-title {
  /* body-level layer: white + difference = reflexive per-pixel contrast —
     near-black over the page, complementary color where letters cross the orb */
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  z-index: 2; pointer-events: none;
  color: #fff; mix-blend-mode: difference;
  font-size: clamp(34px, 6.5vw, 100px); font-weight: 300;
  letter-spacing: 0.06em; line-height: 1;
  text-transform: uppercase;
}
.hero-line { position: absolute; white-space: nowrap; transform: translateY(-50%); }
.hero-line.l1 { top: 23.6vh; left: 9vw; }
.hero-line.l2 { top: 50vh; right: 9vw; }
.hero-line.l3 { top: 76.4vh; left: 23.6vw; }
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hero-title .char { display: inline-block; transform: translateY(101%); }
.hero-blocks {
  position: absolute; bottom: 10vh; left: 4vw; right: 4vw;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; letter-spacing: 0.12em; color: var(--muted);
}
.hh-tb.is-right { text-align: right; }
.hero-scroll {
  position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.3em; color: var(--muted);
}

/* team — same overlay anatomy as the work cards: gradient tile, brand-mark
   watermark, difference-blend meta bottom-left */
.s.is-team { min-height: 100vh; }
.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25em;
  max-width: 1280px; margin: 0 auto;
}
.team-card {
  position: relative; overflow: hidden; border-radius: 0.625em;
  aspect-ratio: 3 / 4; padding: 2em;
  display: flex; flex-direction: column; justify-content: flex-end;
  will-change: transform;
}
.team-tile { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; }
.team-mark { width: 34%; fill: currentColor; opacity: 0.12; }
.team-meta { color: #fff; mix-blend-mode: difference; }
.team-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.14em; opacity: 0.7; margin-bottom: 0.4em; }
.team-name { font-size: clamp(24px, 2.6vw, 38px); font-weight: 400; letter-spacing: 0.05em; }

/* work grid — source anatomy: 8-col dense grid, half-span cards, content
   OVERLAID on the tile with a difference blend; hover = image settles
   (1.05→1), info lines rise from the clip, title word slides up, cross
   rotates into an arrow. Scroll parallax (±10em odd/even) stays in JS. */
.s.is-work { min-height: 140vh; }
.hcs-grid-w {
  display: grid; grid-template-columns: repeat(8, 1fr);
  grid-auto-flow: dense; gap: 1.25em;
  max-width: 1280px; margin: 0 auto;
}
.hcs-item-w {
  grid-column: span 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  border-radius: 0.625em; padding: 2em;
  min-height: 32em; will-change: transform;
}
/* alternating heights per row pair — the staggered rhythm */
.hcs-item-w:nth-child(4n+2), .hcs-item-w:nth-child(4n+3) { min-height: 24em; align-self: end; }
.hcs-img-w {
  position: absolute; inset: 0; z-index: -1; border-radius: 0.625em;
  transform: scale(1.05);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hcs-item-w:hover .hcs-img-w { transform: scale(1); }
.t1 { background: linear-gradient(135deg, var(--tile-a), var(--tile-b)); }
.t2 { background: linear-gradient(200deg, var(--tile-b), var(--bg)); }
.t3 { background: radial-gradient(circle at 70% 30%, var(--tile-b), var(--tile-a)); }
.t4 { background: linear-gradient(320deg, var(--tile-a), var(--bg), var(--tile-b)); }
.t5 { background: radial-gradient(circle at 30% 70%, var(--tile-a), var(--bg)); }
.t6 { background: linear-gradient(90deg, var(--bg), var(--tile-b)); }
.hcs-content-w {
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
  mix-blend-mode: difference; color: #fff;
}
.hcs-titles-w { display: flex; justify-content: space-between; align-items: flex-end; }
.hcs-titles { display: flex; flex-direction: column; gap: 0.5em; max-width: 80%; overflow: hidden; }
.hcs-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.14em; opacity: 0.7; }
.hcs-title-w {
  display: flex; gap: 0.5rem; overflow: hidden;
  font-size: clamp(22px, 2.3vw, 34px); font-weight: 400; letter-spacing: 0.05em;
}
.hcs-title-w .word { display: inline-block; }
.hcs-info-w {
  display: flex; flex-direction: column; gap: 0.2em; overflow: hidden;
  font-size: 11px; letter-spacing: 0.1em; opacity: 0.85;
}
/* info lines rest fully below their clip — nothing half-sliced — and roll
   up with a small stagger on hover */
.hcs-info-w p {
  transform: translateY(115%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hcs-info-w p:nth-child(2) { transition-delay: 0.06s; }
.hcs-item-w:hover .hcs-info-w p { transform: translateY(0); }
.hcs-cross-w {
  position: relative; width: 2em; height: 2em; flex: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hcs-item-w:hover .hcs-cross-w { transform: rotate(90deg); }
.hcs-cross-w svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square;
  transition: opacity 0.35s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hcs-cross-w .arrow { opacity: 0; transform: rotate(-90deg); }
.hcs-item-w:hover .cross { opacity: 0; }
.hcs-item-w:hover .arrow { opacity: 1; transform: rotate(0deg); }

/* rolling brand network — Contra Labs About-ticker anatomy: two clipped
   columns whose duplicated sets are translated upward forever (JS-driven,
   see main.js). Rows share one fixed height (--roll-row) so the name and
   descriptor columns stay row-locked at the same pace; a gradient mask
   stands in for the original's dithering edge overlay. */
.s.is-rolling { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.roll-w {
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 2em; max-width: 1280px; margin: 0 auto; width: 100%;
  height: 62vh;
  --roll-row: clamp(38px, 4vw, 60px);
}
.roll-col {
  overflow: hidden; flex: 1;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.roll-track { list-style: none; display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.roll-set { display: flex; flex-direction: column; gap: 10px; }
.roll-item {
  height: var(--roll-row); display: flex; align-items: center;
  white-space: nowrap; text-transform: uppercase;
}
.roll-col.is-name .roll-item {
  font-size: clamp(20px, 2.4vw, 36px); font-weight: 300; letter-spacing: 0.05em;
}
.roll-col.is-desc .roll-item {
  justify-content: flex-end;
  font-size: 12px; letter-spacing: 0.14em; color: var(--muted);
}

/* CTA pill — Contra partnership-pill anatomy: overflow-clipped stacked labels
   (rest label exits up, duplicate enters from below) over an accent fill that
   rises from the bottom edge. Shared by #rolling and the /form submit. */
.roll-cta-w {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
}
.roll-w { position: relative; }
.roll-cta {
  pointer-events: auto; position: relative; display: inline-block;
  background: var(--fg); color: var(--bg);
  border: 0; border-radius: 999px; padding: 1.15em 2.4em;
  font: inherit; font-size: 13px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  overflow: hidden;
}
.roll-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--tile-b);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.roll-cta-clip { position: relative; z-index: 1; display: block; overflow: hidden; }
.roll-cta-label {
  display: block; white-space: nowrap;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.roll-cta-label.is-dup { position: absolute; inset: 0; transform: translateY(115%); color: var(--fg); }
.roll-cta:hover::after { transform: scaleY(1); }
.roll-cta:hover .roll-cta-label { transform: translateY(-115%); }
.roll-cta:hover .roll-cta-label.is-dup { transform: translateY(0); }
.roll-cta[disabled] { opacity: 0.55; pointer-events: none; }

/* form panel (/form) — same tokens, same anatomy: bordered panel, bottom-line
   inputs, pill radios, CTA submit */
.form-main { min-height: 100vh; display: grid; place-items: center; padding: 16vh 4vw 8vh; }
.form-panel {
  width: min(720px, 100%);
  border: 1px solid var(--line); border-radius: 0.625em;
  padding: clamp(2em, 4vw, 3.5em);
  background: var(--bg);
}
.form-eyebrow { font-size: 11px; letter-spacing: 0.25em; color: var(--muted); margin-bottom: 2vh; text-transform: uppercase; }
.form-title { font-size: clamp(26px, 3.6vw, 48px); font-weight: 300; letter-spacing: 0.05em; line-height: 1.05; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4em 2em; margin-top: 3em; }
.form-field {
  display: flex; flex-direction: column; gap: 0.7em;
  font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;
}
.form-field.span { grid-column: 1 / -1; }
.form-field input, .form-field textarea {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg);
  font: 300 15px/1.4 "Raleway", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em; padding: 0.5em 0; outline: none; resize: vertical;
  transition: border-color 0.3s;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--fg); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--light-grey); }
.form-roles { display: flex; gap: 0.6em; flex-wrap: wrap; }
.form-role { position: relative; }
.form-role input { position: absolute; inset: 0; opacity: 0; }
.form-role span {
  display: inline-block; padding: 0.55em 1.2em; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.form-role input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
.form-note { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.form-note a { border-bottom: 1px solid var(--line); }

/* zoom-through (hsc) */
.s.is-hsc { padding: 0; background: var(--bg); will-change: transform; }
/* soft approach edge: the section's opaque background used to knife-cut the
   orb at its top boundary — a 22vh overhang fades it in instead */
.s.is-hsc::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22vh; height: 22.5vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.hsc-track { height: 400vh; position: relative; }
.hsc-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.hsc-rotate, .hsc-scale { display: grid; place-items: center; will-change: transform; }
.hsc-img {
  width: 34vmin; height: 34vmin;
  mask: url(#hsc-carve);
  /* stays in the blue register — no corner may bleach out against the black bg */
  background: linear-gradient(135deg, #0b1e5b, #1f4fd8 55%, #7fb0ff);
  /* radius matches the mask rect (rx 20 / 1000 = 2%) so the hairline hugs the carve edge */
  border-radius: 2%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.hsc-text {
  position: absolute; z-index: 2;
  font-size: clamp(24px, 4.5vw, 68px); font-weight: 300; letter-spacing: 0.05em;
  text-align: center; max-width: 16ch; line-height: 1.05;
  /* The section itself is transformed as it leaves, which can isolate a
     descendant blend layer in Chromium and leave white type on the light
     carve. Use the theme foreground directly; the small background-coloured
     halo keeps the thin face readable while it crosses the blue geometry. */
  color: var(--fg);
  text-shadow: 0 0 0.035em var(--bg), 0 0 0.08em var(--bg);
}
.hsc-text .word { display: inline-block; overflow: hidden; vertical-align: top; }
.hsc-text .word > span { display: inline-block; }

/* capabilities */
.s.is-caps { min-height: 120vh; }
.caps-list { list-style: none; max-width: 1200px; margin: 0 auto; }
.caps-item {
  font-size: clamp(22px, 3.5vw, 52px); font-weight: 300; letter-spacing: 0.06em;
  line-height: 1.05; border-bottom: 1px solid var(--line); padding: 2vh 0;
  overflow: hidden;
}
.caps-item .word { display: inline-block; overflow: hidden; vertical-align: top; }
.caps-item .char { display: inline-block; transform: translateY(101%); }

/* footer */
.s.is-footer {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: space-between; padding-bottom: 0;
}
.footer-cta { text-align: center; margin-top: 18vh; }
.footer-kicker { font-size: 12px; letter-spacing: 0.25em; color: var(--muted); margin-bottom: 3vh; }
.footer-kicker .word, .footer-mail .word { display: inline-block; overflow: hidden; vertical-align: top; }
.footer-kicker .word > span, .footer-mail .char { display: inline-block; }
.footer-mail { font-size: clamp(20px, 3vw, 40px); font-weight: 300; letter-spacing: 0.04em; }
.marquee { overflow: hidden; white-space: nowrap; padding: 4vh 0 2vh; }
.marquee-track {
  display: inline-flex; will-change: transform;
  font-size: clamp(60px, 12vw, 190px); font-weight: 300; letter-spacing: 0.03em;
}

@media (max-width: 760px) {
  .hero-line { white-space: normal; }
  .hero-line.l1 { left: 6vw; }
  .hero-line.l2 { right: 6vw; }
  .hero-line.l3 { left: 14vw; }
  .hcs-item-w { grid-column: span 8; min-height: 22em; }
  .roll-w { --roll-row: 34px; height: 56vh; gap: 1em; }
  .roll-col.is-name .roll-item { font-size: 17px; }
  .roll-col.is-desc .roll-item { font-size: 10px; letter-spacing: 0.1em; }
  .form-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .orb { min-width: 0; min-height: 0; width: 90vw; height: 90vw; }
  .orb-outline { min-width: 0; min-height: 0; width: 96vw; height: 96vw; }
  .orb-outline.is-2 { min-width: 0; min-height: 0; width: 120vw; height: 120vw; }
}