/* ==========================================================================
   ARVOTECH IT SOLUTIONS — stylesheet
   Ported from "Arvotech Website.dc.html" (Claude Design canvas) to standalone CSS.
   Design tokens and values preserved 1:1 from the source.
   ========================================================================== */

:root {
  /* --acc drives every accent on the page, including the hero particle field.
     Value is the design's own, carried over 1:1 from the source canvas. */
  --acc: #FF6A00;

  --bg: #0A0A0A;
  --bg-alt: #0D0D0E;
  --bg-ticker: #0D0D0D;
  --panel: #101011;
  --panel-2: #0F0F10;
  --portrait: #161617;
  --ink: #EDEDEA;

  --ink-70: rgba(237, 237, 234, .7);
  --ink-65: rgba(237, 237, 234, .65);
  --ink-62: rgba(237, 237, 234, .62);
  --ink-60: rgba(237, 237, 234, .6);
  --ink-58: rgba(237, 237, 234, .58);
  --ink-55: rgba(237, 237, 234, .55);
  --ink-50: rgba(237, 237, 234, .5);
  --ink-45: rgba(237, 237, 234, .45);
  --ink-42: rgba(237, 237, 234, .42);
  --ink-40: rgba(237, 237, 234, .4);
  --ink-38: rgba(237, 237, 234, .38);
  --ink-35: rgba(237, 237, 234, .35);

  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .14);

  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1400px;
  --pad-x: 40px;

  /* Set to "paused" by the motion toggle / reduced-motion. */
  --play: running;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the fixed nav. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--acc); }

::selection { background: var(--acc); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

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

.shell { max-width: var(--shell); margin: 0 auto; width: 100%; }
.shell--narrow { max-width: 1100px; margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--acc);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  padding: 14px 22px;
}
.skip-link:focus { left: 0; color: var(--bg); }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes rise      { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes gridMove  { to { background-position: 0 44px; } }
@keyframes marquee   { to { transform: translateX(-50%); } }
@keyframes blink     { 50% { opacity: 0; } }
@keyframes pulse     { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .45; } }
@keyframes spinCW    { to { transform: rotate(360deg); } }
@keyframes spinCCW   { to { transform: rotate(-360deg); } }
@keyframes scanY     { 0% { top: -18%; } 100% { top: 118%; } }
@keyframes hatch     { to { background-position: 22px 0; } }

/* --------------------------------------------------------------------------
   Site-wide scroll trace
   A single generated path running the height of the document — sweeps that
   cross left to right, with three vortices spliced in. Drawn above content
   rather than behind it, because two sections carry opaque backgrounds that
   would swallow it; `screen` blending means it brightens the dark ground
   without darkening any text it passes over.
   -------------------------------------------------------------------------- */

.site-trace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  /* Default SVG clipping kept deliberately: this element spans the whole
     document, so stray overflow would extend the page's scroll area. */
  mix-blend-mode: screen;

  /* Per-section hues. The trace crossfades between these as it descends —
     stops are placed at each section's midpoint by main.js. Set all three to
     #FF6A00 for a single-colour trace. Literal values, not var(--acc): these
     are read back with getPropertyValue, which must return a real colour. */
  --trace-a: #FF6A00;   /* hero, process, contact — the design accent */
  --trace-b: #F7B14A;   /* services, faq — amber */
  --trace-c: #0B6B7A;   /* work, founders — teal, tying back to the mark */
}

.site-trace__track {
  fill: none;
  stroke: rgba(255, 255, 255, .045);
  stroke-width: 1;
}

/* Chunked so stroke-width can vary along the run — SVG cannot taper a single
   stroke. Every chunk samples the same userSpaceOnUse gradient, so colour
   stays continuous across the joins. */
.site-trace__line path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}

/* The chunk currently being drawn — a bright head on the advancing thread. */
.site-trace__line path.is-head {
  opacity: 1;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--acc) 80%, transparent));
}

/* Vias at each vortex and at the hexagon, lit as the thread reaches them. */
.site-trace__nodes circle {
  fill: none;
  stroke-width: 1;
  opacity: 0;
  transition: opacity .7s ease;
}
.site-trace__nodes circle.is-lit { opacity: .3; }

@media (max-width: 700px) {
  .site-trace__line path { opacity: .62; }
  .site-trace__nodes circle.is-lit { opacity: .22; }
}

/* --------------------------------------------------------------------------
   Overlays (scanlines + vignette)
   -------------------------------------------------------------------------- */

.fx-scanlines,
.fx-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.fx-scanlines {
  z-index: 90;
  opacity: .55;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .13) 0px,
    rgba(0, 0, 0, .13) 1px,
    transparent 1px,
    transparent 3px
  );
}
.fx-scanlines[hidden] { display: none; }

.fx-vignette {
  z-index: 89;
  background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 62%, rgba(0, 0, 0, .38));
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--acc);
}

.section-title {
  margin: 16px 0 0;
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.section-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-40);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above .fx-scanlines (90) and .fx-vignette (89): the CRT texture is meant
     for page content, not for the fixed chrome. Keeping it below those two
     laid 1px scanlines across the logo. The nav is a stacking context, so the
     logo cannot be lifted out on its own — this has to happen here. */
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px var(--pad-x);
  background: rgba(10, 10, 10, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand:hover { color: var(--ink); }
.brand__mark { flex: none; display: block; }
.brand__text { display: flex; align-items: baseline; gap: 8px; }
.brand__name { font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.brand__sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--ink-45);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
}
.nav__links a { color: var(--ink-65); }
.nav__links a:hover { color: var(--acc); }

/* Email CTA that lives inside the collapsed mobile menu. Desktop shows the
   solid .nav__cta button instead, so this stays hidden there. */
.nav__links-cta { display: none; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  padding: 10px 14px;
  cursor: pointer;
}
.nav__toggle:hover { border-color: var(--acc); color: var(--acc); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .15em;
  background: var(--acc);
  color: var(--bg);
  padding: 11px 20px;
  font-size: 11px;
  transition: box-shadow .3s, transform .3s;
}
.btn:hover {
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 0 34px color-mix(in oklab, var(--acc) 55%, transparent);
}

.btn--lg {
  font-size: 13px;
  letter-spacing: .13em;
  padding: 18px 32px;
}
.btn--lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 44px color-mix(in oklab, var(--acc) 55%, transparent);
}

.btn--xl {
  font-size: 14px;
  letter-spacing: .14em;
  padding: 20px 46px;
}
.btn--xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 54px color-mix(in oklab, var(--acc) 60%, transparent);
}

.btn-ghost {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .13em;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--ink);
  padding: 17px 32px;
  transition: border-color .3s, color .3s;
}
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 150px var(--pad-x) 0;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__grid {
  position: absolute;
  left: -12%; right: -12%;
  bottom: -2px;
  height: 44%;
  z-index: 0;
  opacity: .75;
  background-image:
    linear-gradient(color-mix(in oklab, var(--acc) 15%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--acc) 15%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(700px) rotateX(58deg);
  transform-origin: 50% 100%;
  animation: gridMove 1.7s linear infinite;
  animation-play-state: var(--play);
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, black 70%);
  mask-image: linear-gradient(180deg, transparent 8%, black 70%);
}

.hero__beam {
  position: absolute;
  left: 0; right: 0;
  top: -18%;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklab, var(--acc) 10%, transparent) 54%,
    color-mix(in oklab, var(--acc) 32%, transparent) 58%,
    transparent 62%
  );
  animation: scanY 8s linear infinite;
  animation-play-state: var(--play);
}
.hero__beam[hidden] { display: none; }

/* Orbit diagram */
.orbit {
  position: absolute;
  right: 2vw;
  top: 50%;
  transform: translateY(-52%);
  width: 500px;
  height: 500px;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
}
.orbit__cross-h { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .07); }
.orbit__cross-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 255, 255, .07); }

.orbit__ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  animation-play-state: var(--play);
}
.orbit__ring--outer {
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border: 1px dashed rgba(255, 255, 255, .17);
  animation: spinCW 46s linear infinite;
}
.orbit__ring--mid {
  width: 330px; height: 330px; margin: -165px 0 0 -165px;
  border: 1px dashed color-mix(in oklab, var(--acc) 60%, transparent);
  animation: spinCCW 30s linear infinite;
}
.orbit__ring--inner {
  width: 205px; height: 205px; margin: -102.5px 0 0 -102.5px;
  border: 1px solid rgba(255, 255, 255, .11);
}

.orbit__node-a {
  position: absolute; top: -3.5px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 14px var(--acc);
}
.orbit__node-b {
  position: absolute; bottom: -2.5px; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(237, 237, 234, .8);
}
.orbit__core {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 36px var(--acc);
  animation: pulse 2.4s ease-in-out infinite;
  animation-play-state: var(--play);
}

.hero__body { position: relative; z-index: 2; }

.hero__kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .32em;
  color: var(--acc);
  animation: rise .8s cubic-bezier(.16, 1, .3, 1) .05s both;
}

.hero__title {
  margin: 26px 0 0;
  font-size: clamp(52px, 7.4vw, 114px);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.02em;
}
.hero__line-1 { animation: rise .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
.hero__line-2 {
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) .28s both;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc);
}
.caret {
  display: inline-block;
  width: .13em;
  height: .74em;
  background: var(--acc);
  margin-left: .1em;
  -webkit-text-stroke: 0;
  animation: blink 1.1s steps(1) infinite;
  animation-play-state: var(--play);
}

.hero__lede {
  margin: 34px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-62);
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) .4s both;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) .52s both;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .09);
  margin-top: 76px;
  padding: 18px 0 30px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-42);
  animation: rise .9s cubic-bezier(.16, 1, .3, 1) .64s both;
}
.hero__stats .on { color: var(--acc); }

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.ticker {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  background: var(--bg-ticker);
  position: relative;
  z-index: 2;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  animation-play-state: var(--play);
}
.ticker__row {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 15px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .28em;
  color: var(--ink-55);
  white-space: nowrap;
}
.ticker__row i { color: var(--acc); font-style: normal; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 128px var(--pad-x) 110px; }
.section--band {
  padding: 110px var(--pad-x);
  background: var(--bg-alt);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.section--process { padding: 128px var(--pad-x) 120px; }
.section--faq { padding: 128px var(--pad-x) 120px; }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.grid-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 20px;
  margin-top: 60px;
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 34px 32px 30px;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--acc) 60%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.corner-tl,
.corner-br { position: absolute; width: 14px; height: 14px; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--acc); border-right: 2px solid var(--acc); }

.card__num {
  position: absolute;
  top: 14px; right: 22px;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .13);
}

.card__tag {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--acc);
}
.card__title { margin: 10px 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.card__desc {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-58);
  max-width: 420px;
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-60);
}
.card__list div { display: flex; gap: 10px; }
.card__list b { color: var(--acc); font-weight: 400; }

/* Glyphs */
.glyph-grid { display: grid; grid-template-columns: repeat(2, 9px); gap: 4px; }
.glyph-grid span { width: 9px; height: 9px; border: 1px solid var(--acc); }
.glyph-grid span.fill { background: var(--acc); border: 0; }

.glyph-bars { display: flex; flex-direction: column; gap: 4px; height: 22px; justify-content: center; }
.glyph-bars span { height: 4px; display: block; }
.glyph-bars span:nth-child(1) { width: 24px; background: var(--acc); }
.glyph-bars span:nth-child(2) { width: 17px; background: color-mix(in oklab, var(--acc) 55%, transparent); }
.glyph-bars span:nth-child(3) { width: 10px; background: rgba(255, 255, 255, .25); }

.glyph-circle {
  width: 20px; height: 20px;
  border: 1.5px solid var(--acc);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.glyph-circle span { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; }

.glyph-diamond { width: 22px; height: 22px; display: grid; place-items: center; }
.glyph-diamond > span {
  width: 15px; height: 15px;
  border: 1.5px solid var(--acc);
  transform: rotate(45deg);
  display: grid;
  place-items: center;
}
.glyph-diamond > span > span { width: 5px; height: 5px; background: var(--acc); }

/* --------------------------------------------------------------------------
   Work bays
   -------------------------------------------------------------------------- */

.work__lede {
  margin: 20px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-60);
}

.work__status {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink-40);
  text-align: right;
}
.work__status .live {
  color: var(--acc);
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.work__status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
  animation: pulse 1.8s ease-in-out infinite;
  animation-play-state: var(--play);
}

.grid-bays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 60px;
}

.bay {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px dashed rgba(255, 255, 255, .13);
  padding: 30px 28px 26px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  transition: transform .35s, border-color .35s;
}
.bay:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--acc) 50%, transparent);
}
.bay--next { border-color: rgba(255, 255, 255, .16); }
.bay--next:hover { border-color: color-mix(in oklab, var(--acc) 70%, transparent); }

.bay__hatch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 11px);
  background-size: 22px 22px;
  animation: hatch 3s linear infinite;
  animation-play-state: var(--play);
}
.bay--next .bay__hatch {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px);
  animation-duration: 2.4s;
}
.bay:nth-child(3) .bay__hatch { animation-duration: 3.6s; }

.bay__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
}
.bay__id { color: var(--ink-55); }
.bay--next .bay__id { color: var(--acc); }

.bay__badge {
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink-45);
  padding: 4px 9px;
  font-size: 10px;
}
.bay__badge--next {
  border-color: color-mix(in oklab, var(--acc) 55%, transparent);
  color: var(--acc);
}

.bay__figure {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 26px 0;
}
.bay__figure span {
  font-size: clamp(46px, 6vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .13);
}
.bay--next .bay__figure span { -webkit-text-stroke-color: rgba(255, 255, 255, .2); }

.bay__foot { position: relative; }
.bay__foot h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.bay__foot p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--ink-55); }
.bay__link {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink-50);
}
.bay__link--hot { color: var(--acc); }

.work__strip {
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-50);
}
.work__strip a { color: var(--acc); }

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

/* Five fixed columns, never auto-fit. The border-top of each phase forms one
   continuous rail; if the grid were allowed to wrap, the final row would carry
   a rail that stops halfway across and collides with the text above it. Below
   the width where five columns still fit, the rail rotates upright instead
   (see the vertical-timeline block further down). */
.grid-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 70px;
}

/* Scroll-driven trace: overlays the faint rail in the accent colour, growing
   as you read down the pipeline. Sits on the same 1px line as the phase
   borders. main.js drives width (horizontal) or height (vertical). */
.pipeline-trace {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--acc);
  box-shadow: 0 0 10px color-mix(in oklab, var(--acc) 65%, transparent);
  pointer-events: none;
  z-index: 1;
}

.phase {
  position: relative;
  border-top: 1px solid var(--line-strong);
  padding: 30px 28px 0 0;
}
.phase:last-child { padding-right: 0; }

.phase__dot {
  position: absolute;
  /* Centre the 9px dot on the rail's origin — the point the scroll trace grows
     from. The two axes need different offsets:
       across the rail (here, Y) — 5px: `top` resolves against the padding box,
         which sits 1px inside the border the rail is drawn as, so 4.5 + 1 - 0.5
         lands the centre on the rail's centre line;
       along the rail (here, X) — 4.5px: no border on this edge, so half the
         dot puts its centre exactly on the rail's start.
     The vertical block mirrors these. */
  top: -5px; left: -4.5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, .4);
}
.phase__dot--live {
  background: var(--acc);
  border: 0;
  box-shadow: 0 0 16px var(--acc);
  animation: pulse 2.2s ease-in-out infinite;
  animation-play-state: var(--play);
}

/* Lit as the scroll trace reaches each dot. */
.phase__dot { transition: background-color .35s, border-color .35s, box-shadow .35s; }
.phase.is-reached .phase__dot {
  background: var(--acc);
  border-color: var(--acc);
  box-shadow: 0 0 14px color-mix(in oklab, var(--acc) 75%, transparent);
}

.phase__id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--acc);
}
.phase h3 { margin: 12px 0 4px; font-size: 19px; font-weight: 600; }
.phase__wk {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-38);
}
.phase p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-55); }

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */

.grid-founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 20px;
  margin-top: 60px;
}

.founder {
  position: relative;
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: transform .35s, border-color .35s;
}
.founder:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--acc) 55%, transparent);
}
.founder .corner-tl { z-index: 1; }

.founder__portrait {
  position: relative;
  width: 190px;
  flex: none;
  background: var(--portrait);
  border-right: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.founder__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Empty-state placeholder — swap in a real <img> to replace. */
.founder__portrait--empty::after {
  content: attr(data-label);
  position: absolute;
  inset: 12px;
  border: 1.5px dashed rgba(237, 237, 234, .18);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--ink-35);
}

.founder__body {
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 240px;
}
.founder__role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .25em;
  color: var(--acc);
}
.founder__name { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .02em; }
.founder__disc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-50);
}
.founder__body p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-58); }
.founder__unit {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-35);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: 880px;
  margin: 60px auto 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 4px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  font-family: inherit;
}

.faq__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--acc);
  flex: none;
}
.faq__label { flex: 1; font-size: 18px; font-weight: 500; }

.faq__sign {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-50);
  transition: transform .35s, color .35s;
  flex: none;
}
.faq__q[aria-expanded="true"] .faq__sign {
  color: var(--acc);
  transform: rotate(180deg);
}

/* grid-template-rows 0fr → 1fr animation, exactly as the source. */
.faq__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1);
}
.faq__q[aria-expanded="true"] + .faq__wrap { grid-template-rows: 1fr; }
.faq__wrap > div { overflow: hidden; }
.faq__wrap p {
  margin: 0;
  padding: 2px 4px 28px 56px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 660px;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  padding: 170px var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.contact__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in oklab, var(--acc) 11%, transparent), transparent 72%);
}
.contact__body { position: relative; max-width: 900px; margin: 0 auto; }
.contact__kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .32em;
  color: var(--acc);
}
.contact__title {
  margin: 26px 0 0;
  font-size: clamp(48px, 7.5vw, 104px);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.02em;
}
.contact__title .stroke { color: transparent; -webkit-text-stroke: 1.5px var(--acc); }
.contact__lede {
  margin: 32px auto 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-60);
}
.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.contact__mail {
  font-family: var(--mono);
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: .03em;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--acc) 65%, transparent);
  padding-bottom: 6px;
}
.contact__copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--ink-70);
  padding: 11px 16px;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.contact__copy:hover { border-color: var(--acc); color: var(--acc); }
.contact__foot {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  color: var(--ink-38);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 44px var(--pad-x) 52px;
}
.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__brand-row { display: flex; align-items: center; gap: 10px; }
/* Same reasoning as .nav — keep the scanlines off the mark. The footer is in
   the root stacking context, so the image can be lifted on its own. */
.footer__mark { position: relative; z-index: 91; }
.footer__brand-row span { font-weight: 700; letter-spacing: .14em; font-size: 14px; }
.footer__copy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ink-40);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
}
.footer__links a { color: var(--ink-55); }
.footer__links a:hover { color: var(--acc); }
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
}
.footer__meta a { color: var(--acc); }
.footer__meta span { color: var(--ink-40); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */

/* Fail-safe: .reveal is visible by default. JS adds .is-armed only to elements
   that start below the fold, then .is-in to play them in. If JS never runs or
   errors, every section still renders. */
.reveal.is-armed { opacity: 0; transform: translateY(30px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .orbit { width: 380px; height: 380px; opacity: .5; right: -6vw; }
}

/* Process: vertical timeline.
   Five columns stop being readable around here, so the rail turns upright —
   border-left instead of border-top, dots on the rail, phases stacked. The
   adjoining borders join into one unbroken line, so the pipeline still reads
   as a pipeline instead of a row that wrapped. */
@media (max-width: 1040px) {
  .grid-process {
    grid-template-columns: 1fr;
    margin-top: 46px;
  }

  .phase {
    border-top: 0;
    border-left: 1px solid var(--line-strong);
    padding: 0 0 34px 26px;
  }
  .phase:last-child { padding: 0 0 0 26px; }

  /* Mirror of the base offsets: the border is now on the left edge, so the 1px
     compensation moves to X and Y aligns to the rail's start. */
  .phase__dot { top: -4.5px; left: -5px; }

  .pipeline-trace { width: 1px; height: 0; }

  .phase h3 { margin: 10px 0 4px; }
  .phase p { margin-top: 10px; max-width: 60ch; }
}

@media (max-width: 900px) {
  :root { --pad-x: 24px; }

  /* Single-row header: brand on the left, MENU on the right. The solid email
     button moves into the collapsed menu so the fixed nav stays ~56px tall. */
  .nav { padding: 12px var(--pad-x); flex-wrap: wrap; }
  .nav__toggle { display: block; order: 2; }
  .nav__cta { display: none; }

  .nav__links {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 6px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    width: 100%;
    padding: 14px 2px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .nav__links-cta {
    display: block;
    margin-top: 10px;
    color: var(--acc) !important;
    font-weight: 600;
  }

  .hero { padding-top: 130px; min-height: auto; padding-bottom: 60px; }
  .orbit { display: none; }
  .hero__stats { gap: 12px 24px; }

  .section,
  .section--band,
  .section--process,
  .section--faq { padding-top: 84px; padding-bottom: 76px; }

  .contact { padding: 110px var(--pad-x); }


  .founder { flex-direction: column; }
  .founder__portrait {
    width: 100%;
    height: 220px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .work__status { text-align: left; }
  .work__status .live { justify-content: flex-start; }

  .footer__inner { flex-direction: column; }
  .footer__meta { align-items: flex-start; }
}

@media (max-width: 560px) {
  .faq__wrap p { padding-left: 4px; }
  .faq__q { gap: 14px; }
  .faq__label { font-size: 16px; }
  .contact__row { gap: 12px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the production equivalent of the source's "Calm" mode.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --play: paused; }

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal.is-armed { opacity: 1; transform: none; }
  .hero__beam { display: none; }

  /* The accordion still needs its open/close to work. */
  .faq__wrap { transition: none; }
}

/* Explicit user toggle mirrors the source's motion prop. */
body[data-motion="calm"] { --play: paused; }
body[data-motion="calm"] .hero__beam { display: none; }