/* BEASTMODE — components.css  (lead lane) ------------------------------ */

/* ---------- NAV ---------- */
.nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-nav);
  height: var(--nav-h); display: flex; align-items: center;
  padding-inline: var(--edge-pad);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature); }
.nav[data-scrolled="true"] { background: rgba(8,9,10,0.82); backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--bmd-hairline); }
.nav__inner { width: 100%; max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--bmd-white); text-decoration: none; }
.nav__brand svg, .nav__brand img { height: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); width: auto; display: block; }
.nav__brand .claw { color: var(--bmd-red); }
.nav__links { display: none; align-items: center; gap: clamp(1rem, 0.4rem + 1.4vw, 2.25rem); }
@media (min-width: 1000px) { .nav__links { display: flex; } .nav__burger { display: none; } }
.nav__link { position: relative; text-decoration: none; color: var(--bmd-mist); padding-block: 0.35em;
  transition: color var(--dur-fast) var(--ease-signature); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--bmd-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-signature); }
.nav__link:hover, .nav__link:focus-visible { color: var(--bmd-white); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--bmd-white); }

.nav__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; height: 1px; background: var(--bmd-white); width: 100%;
  transition: transform var(--dur-base) var(--ease-signature), opacity var(--dur-fast) linear; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bmd-void);
  display: flex; flex-direction: column; justify-content: center; padding: var(--edge-pad);
  clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-slower) var(--ease-signature);
  visibility: hidden; }
.drawer[data-open="true"] { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer__link { display: block; color: var(--bmd-white); text-decoration: none; padding-block: var(--space-3);
  border-bottom: 1px solid var(--bmd-hairline); }
.drawer__link .idx { color: var(--bmd-red); margin-right: var(--space-4); }

/* ---------- BUTTONS ---------- */
.btn { --_bg: transparent; --_fg: var(--bmd-white); --_bd: var(--bmd-ash);
  position: relative; display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0.95em 1.6em; min-height: 44px;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); border-radius: var(--radius-0);
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--dur-base) var(--ease-signature), border-color var(--dur-base) var(--ease-signature); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bmd-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-signature); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--bmd-void); border-color: var(--bmd-red); }
.btn__arrow { transition: transform var(--dur-base) var(--ease-signature); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--solid { --_bg: var(--bmd-red); --_fg: var(--bmd-void); --_bd: var(--bmd-red); }
.btn--solid::before { background: var(--bmd-white); }
.btn--ghost { --_bd: var(--bmd-hairline); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--bmd-white);
  text-decoration: none; padding-block: var(--space-2); }
.link-arrow::after { content: "→"; color: var(--bmd-red); transition: transform var(--dur-base) var(--ease-signature); }
.link-arrow:hover::after { transform: translateX(6px); }

/* ---------- SCROLL CUE ---------- */
.cue { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--bmd-mist); }
.cue__line { width: 1px; height: 3.5rem; background: linear-gradient(to bottom, transparent, var(--bmd-ash)); position: relative; overflow: hidden; }
.cue__line::after { content: ""; position: absolute; inset-inline: 0; height: 40%; background: var(--bmd-red);
  animation: cueRun 2.4s cubic-bezier(0.16,1,0.3,1) infinite; }
@keyframes cueRun { 0% { transform: translateY(-110%); } 60%,100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .cue__line::after { animation: none; transform: translateY(0); height: 100%; opacity: .4; } }

/* ---------- SPEC STRIP ---------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--bmd-hairline); }
.spec { padding: var(--space-6) var(--space-5) var(--space-6) 0; border-bottom: 1px solid var(--bmd-hairline); }
@media (min-width: 720px) { .spec + .spec { border-left: 1px solid var(--bmd-hairline); padding-left: var(--space-5); } }
.spec__val { display: block; color: var(--bmd-white); }
.spec__val em { font-style: normal; color: var(--bmd-red); }
.spec__key { display: block; margin-top: var(--space-2); color: var(--bmd-mist); }

/* ---------- STEPPER ---------- */
.stepper { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding-block: calc(var(--nav-h) + var(--space-5)) var(--space-6); }
.stepper__stack { position: relative; flex: 1 1 auto; margin-top: var(--space-6);
  min-height: min(64svh, 40rem); }
.stepper__head { display: flex; align-items: baseline; gap: var(--space-4); color: var(--bmd-mist); }
.stepper__head b { color: var(--bmd-white); font-weight: inherit; }
.stepper__dots { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.stepper__dot { height: 2px; }
.stepper__dot[aria-selected="true"] { box-shadow: 0 0 12px var(--bmd-red-glow); }
.stepper__dot { width: 2.25rem; height: 1px; background: var(--bmd-ash); border: 0; padding: 0; cursor: pointer;
  position: relative; transition: background var(--dur-base) var(--ease-signature); }
.stepper__dot[aria-selected="true"] { background: var(--bmd-red); }
.stepper__bar { height: 1px; background: var(--bmd-hairline); margin-top: var(--space-5); overflow: hidden; }
.stepper__bar i { display: block; height: 100%; width: 100%; background: var(--bmd-red);
  transform: scaleX(0); transform-origin: left; }
.stepper__panel { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  display: flex; align-items: center; }
.stepper__panel[data-active="true"] { opacity: 1; pointer-events: auto; }
.stepper__panel > .split { width: 100%; align-items: center; }
.stepper__panel .fig { height: min(60svh, 34rem); }
@media (max-width: 899px) {
  .stepper { min-height: auto; padding-block: var(--space-6); }
  .stepper__stack { min-height: 0; }
  .stepper__panel { position: relative; inset: auto; opacity: 1; pointer-events: auto; display: block;
    padding-block: var(--space-7); border-top: 1px solid var(--bmd-hairline); }
  .stepper__panel .fig { height: auto; aspect-ratio: 4/3; }
  .stepper__dots, .stepper__bar { display: none; }
}
/* the panel title shares its row with a same-height figure, so it gets
   roughly half the container instead of the full-width room u-h1 assumes --
   a smaller, still-bold cap keeps every service name (incl. "VISUALIZATION",
   "PROTOTYPING") on one line instead of overflow-wrap breaking it mid-word. */
.stepper__title { font-size: clamp(1.75rem, 1.05rem + 2.3vw, 3.375rem); }

/* ---------- INDEX ROWS (projects / journal) ---------- */
.idx-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4) var(--space-5);
  align-items: center; padding-block: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--bmd-hairline); text-decoration: none; color: inherit;
  position: relative; isolation: isolate; }
.idx-row::before { content: ""; position: absolute; inset: 0 calc(var(--edge-pad) * -0.5); z-index: -1;
  background: var(--bmd-carbon); opacity: 0; transition: opacity var(--dur-base) var(--ease-signature); }
.idx-row:hover::before, .idx-row:focus-visible::before { opacity: 1; }
.idx-row__n { color: var(--bmd-red); }
.idx-row__t { color: var(--bmd-white); transition: transform var(--dur-slow) var(--ease-signature); }
.idx-row:hover .idx-row__t { transform: translateX(var(--space-3)); }
.idx-row__m { color: var(--bmd-mist); text-align: right; display: none; }
@media (min-width: 720px) { .idx-row__m { display: block; } }
.idx-row__peek { position: absolute; right: 8%; top: 50%; width: 15rem; aspect-ratio: 4/3;
  translate: 0 -50%; opacity: 0; scale: 0.94; pointer-events: none; z-index: 1; overflow: clip;
  transition: opacity var(--dur-base) var(--ease-signature), scale var(--dur-slow) var(--ease-signature); }
.idx-row__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1100px) and (hover: hover) { .idx-row:hover .idx-row__peek { opacity: 1; scale: 1; } }

/* ---------- CARDS ---------- */
.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); background: var(--bmd-carbon); border: 1px solid var(--bmd-hairline);
  text-decoration: none; color: inherit; overflow: clip;
  transition: border-color var(--dur-base) var(--ease-signature), background var(--dur-base) var(--ease-signature); }
.card::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; height: 1px; width: 100%;
  background: var(--bmd-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-signature); }
.card:hover { border-color: var(--bmd-ash); background: var(--bmd-graphite); }
.card:hover::after { transform: scaleX(1); }
.card__n { color: #FF5A60; }  /* 5.1:1 on graphite; --bmd-red is 4.35:1 there */
.card__t { color: var(--bmd-white); }
.card__d { color: var(--bmd-mist); }

/* ---------- MARQUEE ---------- */
.marquee { overflow: clip; border-block: 1px solid var(--bmd-hairline); padding-block: var(--space-5); }
.marquee__track { display: flex; align-items: center; gap: var(--space-8); width: max-content; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--bmd-mist); white-space: nowrap; }
.marquee__item i { width: 5px; height: 5px; background: var(--bmd-red); display: inline-block; }

/* ---------- DRAG RAIL ---------- */
.rail-drag { overflow: clip; cursor: grab; }
.rail-drag:active { cursor: grabbing; }
.rail-drag__track { display: flex; gap: var(--gutter); width: max-content; padding-inline: var(--edge-pad); will-change: transform; }
.rail-drag__item { width: clamp(15rem, 34vw, 30rem); flex: 0 0 auto; }

/* ---------- QUOTE ---------- */
.quote { border-left: 1px solid var(--bmd-red); padding-left: clamp(1.25rem, 0.5rem + 3vw, 3rem); }
.quote cite { display: block; margin-top: var(--space-5); color: var(--bmd-mist); font-style: normal; }

/* ---------- FORM ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { color: var(--bmd-mist); }
.field input, .field textarea { width: 100%; min-height: 44px; box-sizing: border-box;
  background: transparent; color: var(--bmd-white);
  border: 0; border-bottom: 1px solid var(--bmd-ash); padding: var(--space-3) 0; font: inherit;
  transition: border-color var(--dur-base) var(--ease-signature); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--bmd-red); }
.field textarea { resize: vertical; min-height: 9rem; }
.form-note { color: var(--bmd-mist); }

/* ---------- FOOTER ---------- */
.foot { border-top: 1px solid var(--bmd-hairline); padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-6); }
.foot__grid { display: grid; gap: var(--space-8); }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot__col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.foot__col a { color: var(--bmd-mist); text-decoration: none; transition: color var(--dur-fast) var(--ease-signature); }
.foot__col a:hover { color: var(--bmd-red); }
.foot__bar { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--bmd-hairline); color: var(--bmd-mist); }
.foot__word { width: 100%; color: #1C2024; line-height: 0.82; letter-spacing: -0.045em;
  margin-top: var(--space-6); user-select: none; pointer-events: none;
  white-space: nowrap; overflow: clip; font-weight: 900;
  font-size: min(12.9vw, 13.4rem); }

/* ---------- 3D MOUNTS ---------- */
.mount3d { position: relative; width: 100%; height: clamp(24rem, 66svh, 44rem); background: var(--bmd-carbon);
  border: 1px solid var(--bmd-hairline); }
.mount3d--full { height: 100svh; border: 0; }

/* --- post-QA fixes --- */
.nav__brand img { height: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); width: auto; display: block;
}
.type-cluster hr.hr, .type-cluster .hr--red { order: 3; width: clamp(4rem, 12vw, 11rem);
  margin-inline-end: auto; margin-block: var(--space-3) var(--space-1); }
.stage__inner .type-cluster { max-width: 100%; }
.idx-row__n { min-width: 2.5rem; }
@media (min-width: 900px) { .rail__meta .u-mono-tag { white-space: nowrap; } }

/* --- nav lockup: claw mark + typeset wordmark --- */
.nav__brand { gap: var(--space-3); }
.nav__brand .mark { height: clamp(1.4rem, 1.1rem + 0.8vw, 2rem); width: auto; display: block; flex: 0 0 auto; }
.nav__brand .wm { display: flex; flex-direction: column; line-height: 1; }
.nav__brand .wm b { font-weight: 900; letter-spacing: 0.01em; color: var(--bmd-white);
  font-size: clamp(0.82rem, 0.72rem + 0.32vw, 1.02rem); }
.nav__brand .wm i { font-style: normal; color: var(--bmd-mist); letter-spacing: 0.26em;
  font-size: clamp(0.46rem, 0.42rem + 0.16vw, 0.58rem); margin-top: 0.25em; }
.nav__brand:hover .mark { filter: drop-shadow(0 0 10px var(--bmd-red-glow)); }
.nav__brand .mark, .nav__brand .wm b { transition: filter var(--dur-base) var(--ease-signature); }
/* footer gets the real logo art, at a size where it reads */
.foot__logo { width: clamp(11rem, 26vw, 20rem); height: auto; display: block; margin-bottom: var(--space-5); }

/* --- stepper title: never break mid-word --- */
.stepper__title, .stepper__panel h3 { overflow-wrap: normal; word-break: keep-all; hyphens: none;
  text-wrap: balance; }
/* --- ledger (replaces the duplicated stat strip on about) --- */
.ledger { display: grid; gap: 0; border-top: 1px solid var(--bmd-hairline); }
.ledger > div { display: grid; gap: var(--space-2) var(--space-6); padding-block: var(--space-5);
  border-bottom: 1px solid var(--bmd-hairline); }
@media (min-width: 760px) { .ledger > div { grid-template-columns: 14rem 1fr; align-items: baseline; } }
.ledger dt { color: var(--bmd-mist); }
.ledger dd { margin: 0; color: var(--bmd-white); }

/* --- hero word: never break mid-word; scale to fit the measure --- */
.stage__inner .type-cluster__word {
  overflow-wrap: normal; word-break: keep-all; hyphens: none; white-space: nowrap;
  font-size: min(12.9vw, 13.4rem); line-height: 0.88; letter-spacing: -0.035em;
}

/* --- mono tags inside captions sit on graphite; steel-derived tone fails 4.5:1 there --- */
.fig__cap .u-mono-tag, .fig figcaption .u-mono-tag, .rail-drag .u-mono-tag { color: var(--bmd-mist); }
.fig__cap { color: var(--bmd-mist); }

/* --- display headings need real air before the copy that follows --- */
:is(.u-display-xl, .u-display-l, .u-display-m, .u-h1) + *,
:is(.u-display-xl, .u-display-l, .u-display-m, .u-h1) + * > :first-child {
  margin-top: var(--space-7);
}
.rail__body > :is(h1, h2, h3) + * { margin-top: var(--space-7); }

/* --- the viewer's error state has to be readable, not a silent red bar --- */
.viewer3d-loading.is-error, .gallery3d-loading.is-error {
  color: var(--bmd-white);
  display: flex; align-items: center; gap: 0.6em;
  z-index: 3;
}
.viewer3d-loading.is-error::before, .gallery3d-loading.is-error::before { content: "⚠"; }