/* ==========================================================================
   Capabilities — the pinned horizontal forge
   ========================================================================== */

.capabilities {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(ellipse 55% 50% at 80% 32%, rgba(255, 96, 51, 0.07), transparent 62%),
    radial-gradient(ellipse 45% 40% at 14% 70%, rgba(204, 255, 63, 0.045), transparent 62%),
    #090b08;
  color: var(--white);
}

.cap-pin {
  position: relative;
  height: 320vh;
}

.cap-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding: 100px 0 20px;
  overflow: hidden;
}

.cap-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  flex: 0 0 auto;
}

.cap-head .section-top {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.cap-head .display {
  color: var(--white);
}

.cap-head .display em {
  color: var(--acid);
}

.cap-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: min(300px, 25vw);
  padding-bottom: 10px;
}

.cap-head__side p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.cap-head__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(247, 244, 236, 0.45);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cap-head__hint i {
  position: relative;
  display: block;
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}

.cap-head__hint i::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--acid);
  border-right: 1px solid var(--acid);
  transform: rotate(45deg);
}

.cap-track {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(16px, 1.7vw, 26px);
  min-height: 0;
  padding-inline: var(--pad);
  will-change: transform;
}

.cap-card {
  position: relative;
  display: flex;
  flex: 0 0 clamp(420px, 38vw, 590px);
  flex-direction: column;
  height: min(56vh, 540px);
  min-height: 430px;
  padding: clamp(22px, 2vw, 30px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #12150f 0%, #0b0e0a 72%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.16);
  isolation: isolate;
}

.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(204, 255, 63, 0.1), transparent 65%);
  transition: opacity 0.6s ease;
}

.cap-card:hover::before {
  opacity: 1;
}

.cap-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 255, 63, 0.28), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.cap-card:hover::after {
  opacity: 1;
}

.cap-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cap-card__type {
  color: var(--acid);
}

.cap-card__index {
  color: rgba(247, 244, 236, 0.45);
}

.cap-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 194px;
  margin: 18px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.07);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(247, 244, 236, 0.05), transparent 66%),
    rgba(247, 244, 236, 0.018);
}

.cap-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cap-card__body h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.1vw, 45px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.cap-card__body p {
  max-width: 440px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 18px;
}

.tag-list li {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: rgba(247, 244, 236, 0.58);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

/* Web card visual */

.mini-browser {
  position: relative;
  width: 81%;
  overflow: hidden;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  transform: perspective(800px) rotateX(5deg) rotateY(-7deg) translateY(3px);
  transition: transform 0.9s var(--ease);
}

.cap-card:hover .mini-browser {
  transform: perspective(800px) rotateX(0) rotateY(0) translateY(-2px);
}

.mini-browser__bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 19px;
  padding-inline: 7px;
  border-bottom: 1px solid rgba(8, 10, 8, 0.08);
  background: #e5dfd1;
}

.mini-browser__bar i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(8, 10, 8, 0.3);
}

.mini-browser__bar span {
  margin-left: auto;
  color: rgba(8, 10, 8, 0.4);
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.02em;
}

.mini-browser__body {
  padding: 8px 10px 9px;
}

.mini-browser__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(8, 10, 8, 0.5);
  font-size: 5.5px;
  letter-spacing: 0.05em;
}

.mini-browser__nav b {
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 0.09em;
}

.mini-browser__pill {
  padding: 3px 5px;
  border: 1px solid rgba(8, 10, 8, 0.2);
  border-radius: 999px;
  color: var(--ink);
}

.mini-browser__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 0 10px;
}

.mini-browser__kicker {
  color: #6c6b5f;
  font-family: var(--font-mono);
  font-size: 4.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mini-browser__hero strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

.mini-browser__cta {
  padding: 3.5px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 4.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mini-browser__tiles {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 4px;
}

.mini-browser__tiles span {
  display: block;
  height: 22px;
  border-radius: 2px;
  background: #e3ddcf;
}

.mini-browser__tiles span:first-child {
  background: linear-gradient(100deg, #d8f59b, #eef9cb);
}

.mini-browser__tiles span:last-child {
  background: linear-gradient(100deg, #f7d6c4, #f0e6d6);
}

/* Mobile card visual */

.phone {
  position: absolute;
  width: 105px;
  height: 206px;
  padding: 5px;
  border: 1px solid rgba(247, 244, 236, 0.24);
  border-radius: 17px;
  background: #050705;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
  transition: transform 0.9s var(--ease);
}

.phone::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: #0b0d0a;
  transform: translateX(-50%);
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 9px 9px;
  overflow: hidden;
  border-radius: 12px;
  background: #e6f0cb;
  color: #0c110b;
}

.phone--back {
  left: 22%;
  transform: translateY(-4%) rotate(-8deg) scale(0.88);
  opacity: 0.64;
}

.phone--back .phone__screen {
  background: #d9e5da;
}

.phone--front {
  right: 20%;
  transform: translateY(6%) rotate(4deg);
}

.cap-card:hover .phone--back {
  transform: translateY(-9%) rotate(-10deg) scale(0.88);
}

.cap-card:hover .phone--front {
  transform: translateY(2%) rotate(2deg);
}

.phone__status {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 4.5px;
  font-weight: 600;
}

.phone__eyebrow {
  margin-top: 8px;
  color: rgba(8, 10, 8, 0.5);
  font-family: var(--font-mono);
  font-size: 4.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phone__screen strong {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.phone__screen strong small {
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 5px;
  font-weight: 400;
  letter-spacing: 0;
}

.phone__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 11px auto 5px;
  border-radius: 50%;
  background: conic-gradient(#ff6033 82%, rgba(8, 10, 8, 0.08) 0);
}

.phone__ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #e6f0cb;
}

.phone__ring span,
.phone__ring small {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.phone__ring span {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.phone__ring small {
  margin-top: 2px;
  color: rgba(8, 10, 8, 0.5);
  font-family: var(--font-mono);
  font-size: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.phone__bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 29px;
  margin-top: auto;
  padding: 5px;
  border-radius: 5px;
  background: rgba(8, 10, 8, 0.05);
}

.phone__bars i {
  flex: 1;
  border-radius: 1px;
  background: rgba(8, 10, 8, 0.26);
}

.phone__bars i:nth-child(1) { height: 32%; }
.phone__bars i:nth-child(2) { height: 52%; }
.phone__bars i:nth-child(3) { height: 41%; }
.phone__bars i:nth-child(4) { height: 76%; }
.phone__bars i:nth-child(5) { height: 58%; }
.phone__bars i:nth-child(6) { height: 90%; }
.phone__bars i:nth-child(7) { height: 67%; }

.phone__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 46px;
  margin-top: 10px;
}

.phone__chart span {
  flex: 1;
  border-radius: 2px;
  background: #ff6033;
}

.phone__chart span:nth-child(1) { height: 30%; opacity: 0.4; }
.phone__chart span:nth-child(2) { height: 55%; opacity: 0.55; }
.phone__chart span:nth-child(3) { height: 44%; opacity: 0.5; }
.phone__chart span:nth-child(4) { height: 76%; opacity: 0.7; }
.phone__chart span:nth-child(5) { height: 62%; opacity: 0.6; }
.phone__chart span:nth-child(6) { height: 94%; }
.phone__chart span:nth-child(7) { height: 74%; }

.phone__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 6px;
  border-radius: 5px;
  background: rgba(8, 10, 8, 0.06);
  font-family: var(--font-mono);
  font-size: 4px;
}

.phone__row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6033;
}

.phone__row b {
  margin-left: auto;
  font-size: 4.5px;
}

.float-note {
  position: absolute;
  z-index: 4;
  padding: 5px 7px;
  border: 1px solid rgba(204, 255, 63, 0.25);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.78);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
}

.float-note--mobile { top: 16px; right: 17px; }
.float-note--api { top: 18px; right: 18px; }

/* Backend card visual */

.terminal {
  width: 84%;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.13);
  border-radius: 7px;
  background: #060806;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.52);
  transform: perspective(800px) rotateX(4deg) rotateY(5deg) translateY(3px);
  transition: transform 0.9s var(--ease);
}

.cap-card:hover .terminal {
  transform: perspective(800px) rotateX(0) rotateY(0) translateY(-2px);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding-inline: 8px;
  border-bottom: 1px solid rgba(247, 244, 236, 0.07);
  background: #0c0f0b;
}

.terminal__bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.2);
}

.terminal__bar i:first-child { background: #ff6033; }
.terminal__bar i:nth-child(2) { background: #e6c95a; }
.terminal__bar i:nth-child(3) { background: #9fc95f; }

.terminal__bar span {
  margin-left: auto;
  color: rgba(247, 244, 236, 0.35);
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.04em;
}

.terminal__body {
  padding: 10px 12px 12px;
  color: rgba(247, 244, 236, 0.65);
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 2.05;
}

.term-dim { color: rgba(247, 244, 236, 0.35); }
.term-acid { color: var(--acid); }

.term-caret {
  display: inline-block;
  width: 4px;
  height: 8px;
  margin-left: 2px;
  background: var(--acid);
  vertical-align: -1px;
  animation: caretBlink 1.1s steps(2) infinite;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

/* Data card visual */

.data-map {
  position: relative;
  width: 88%;
  height: 161px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(247, 244, 236, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 244, 236, 0.04) 1px, transparent 1px),
    rgba(7, 9, 7, 0.6);
  background-size: 24px 24px;
  border: 1px solid rgba(247, 244, 236, 0.08);
}

.data-map svg {
  position: absolute;
  inset: 11px 4px;
  width: calc(100% - 8px);
  height: calc(100% - 22px);
}

.data-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 6px;
  border: 1px solid rgba(247, 244, 236, 0.1);
  border-radius: 4px;
  background: rgba(8, 10, 8, 0.78);
  color: rgba(247, 244, 236, 0.8);
  font-family: var(--font-mono);
  font-size: 5.5px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  backdrop-filter: blur(5px);
}

.data-node small {
  color: rgba(247, 244, 236, 0.36);
  font-size: 4.5px;
}

.data-node--1 { top: 7%; left: 4%; }
.data-node--2 { right: 4%; bottom: 7%; }
.data-node--3 { top: 7%; right: 7%; }

/* More card */

.cap-card--more {
  background: var(--acid);
  color: var(--ink);
  border-color: var(--acid);
}

.cap-card--more::after {
  background: linear-gradient(90deg, transparent, rgba(8, 10, 8, 0.25), transparent);
}

.cap-card--more::before {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(8, 10, 8, 0.1), transparent 70%);
}

.cap-card--more .cap-card__top,
.cap-card--more .cap-card__index,
.cap-card--more .cap-card__type {
  color: rgba(8, 10, 8, 0.6);
}

.cap-card__more-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 12px;
}

.serif-mark {
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 0.7;
}

.cap-card--more h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 4.6vw, 66px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.cap-card--more h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.cap-card--more p {
  max-width: 390px;
  margin-top: 20px;
  color: rgba(8, 10, 8, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.cap-card--more .text-link {
  align-self: flex-start;
  margin-top: 28px;
  color: var(--ink);
}

.cap-card--more .text-link__line {
  background: rgba(8, 10, 8, 0.26);
}

.cap-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.cap-progress {
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.cap-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acid);
}

.cap-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1;
}

.cap-count span:first-child {
  color: var(--acid);
  font-size: 13px;
}

.cap-count__divider {
  color: rgba(247, 244, 236, 0.25);
}

.cap-foot__note {
  color: rgba(247, 244, 236, 0.35);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* No-JS safety net for the pinned section */

html.no-js .cap-pin {
  height: auto;
}

html.no-js .cap-stage {
  position: static;
  height: auto;
}

html.no-js .cap-track {
  flex-wrap: wrap;
  transform: none !important;
}

/* ==========================================================================
   Work — oversized editorial case studies
   ========================================================================== */

.work {
  overflow: hidden;
}

.work__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  margin: clamp(36px, 4.5vw, 62px) 0 clamp(46px, 6vw, 84px);
}

.work__heading .display {
  color: var(--ink);
}

.work__heading .display em {
  color: var(--ember);
}

.work__heading-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: min(290px, 25vw);
  padding-bottom: 9px;
}

.work__heading-side p {
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.55;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 4.8vw, 76px) clamp(22px, 3vw, 46px);
}

.project {
  position: relative;
  min-width: 0;
}

.project--full {
  grid-column: 1 / -1;
}

.project__media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #0b0e0b;
  container-type: inline-size;
}

.project--full .project__media {
  aspect-ratio: 2.08 / 1;
}

.project--half .project__media {
  aspect-ratio: 1.07 / 1;
}

.project__media .pv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.001) translate3d(var(--pvx, 0px), var(--pvy, 0px), 0);
  transition: transform 1.2s var(--ease);
  will-change: transform;
}

.project:hover .project__media .pv {
  transform: scale(1.025) translate3d(var(--pvx, 0px), var(--pvy, 0px), 0);
}

.project__hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

.project__hit:focus-visible {
  outline-offset: -4px;
}

.project__view {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(247, 244, 236, 0.18);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.64);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-7px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease);
}

.project__view span {
  color: var(--acid);
  font-size: 11px;
}

.project:hover .project__view,
.project__hit:focus-visible .project__view {
  opacity: 1;
  transform: none;
}

.project__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-top: 17px;
}

.project__index {
  align-self: start;
  padding-top: 3px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.project__title h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.project__title p {
  margin-top: 5px;
  color: var(--muted-dark);
  font-size: 12px;
  line-height: 1.4;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.project__tags span {
  padding: 5px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.project__year {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
}

/* ————— Lumen visual ————— */

.pv--lumen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5cqw;
  background:
    radial-gradient(circle at 74% 28%, rgba(204, 255, 63, 0.1), transparent 42%),
    radial-gradient(circle at 22% 80%, rgba(255, 96, 51, 0.08), transparent 38%),
    #070a08;
}

.pv--lumen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 244, 236, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 244, 236, 0.035) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 76%);
}

.lumen-ui {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 91%;
  height: 83%;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.11);
  border-radius: 1.4cqw;
  background: #0c110e;
  box-shadow: 0 4cqw 9cqw rgba(0, 0, 0, 0.6);
  transform: perspective(1400px) rotateX(1.6deg) rotateY(-1.4deg);
  transition: transform 1.2s var(--ease);
}

.project:hover .lumen-ui {
  transform: perspective(1400px) rotateX(0) rotateY(0);
}

.lumen-nav {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  flex: 0 0 7.2cqw;
  padding-inline: 3.4cqw;
  border-bottom: 1px solid rgba(247, 244, 236, 0.08);
}

.lumen-logo {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-right: auto;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.lumen-logo i {
  display: block;
  width: 1.2cqw;
  height: 1.2cqw;
  border: 0.25cqw solid var(--acid);
  border-radius: 50%;
}

.lumen-links {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  color: rgba(247, 244, 236, 0.42);
  font-family: var(--font-mono);
  font-size: 0.68cqw;
  letter-spacing: 0.04em;
}

.lumen-links b {
  color: var(--white);
  font-weight: 400;
}

.lumen-avatar {
  display: grid;
  place-items: center;
  width: 2.7cqw;
  height: 2.7cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd0a2, #ff6033);
  color: #1a0904;
  font-family: var(--font-mono);
  font-size: 0.58cqw;
  font-weight: 600;
}

.lumen-content {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.7fr);
  gap: 4.4cqw;
  flex: 1;
  min-height: 0;
  padding: 3.2cqw 3.4cqw 3.4cqw;
}

.lumen-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lumen-eyebrow {
  color: rgba(247, 244, 236, 0.4);
  font-family: var(--font-mono);
  font-size: 0.7cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lumen-amount {
  margin-top: 0.85cqw;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 5.4cqw;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.lumen-amount span {
  color: rgba(247, 244, 236, 0.4);
  font-size: 0.45em;
}

.lumen-delta {
  margin-top: 0.65cqw;
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: 0.72cqw;
  letter-spacing: 0.03em;
}

.lumen-chart {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 2.8cqw;
  padding-top: 1cqw;
  border-top: 1px solid rgba(247, 244, 236, 0.07);
}

.lumen-chart svg {
  width: 100%;
  height: calc(100% - 1.7cqw);
  overflow: visible;
}

.lumen-months {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5cqw;
  color: rgba(247, 244, 236, 0.28);
  font-family: var(--font-mono);
  font-size: 0.55cqw;
  letter-spacing: 0.03em;
}

.lumen-side {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  min-width: 0;
}

.lumen-balance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 17cqw;
  padding: 1.8cqw;
  overflow: hidden;
  border-radius: 1cqw;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(145deg, #e1ff91, #b8ef31);
  color: var(--ink);
}

.lumen-balance-card::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -35%;
  width: 65%;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 10, 8, 0.2);
  border-radius: 50%;
}

.lumen-card-label {
  font-family: var(--font-mono);
  font-size: 0.54cqw;
  letter-spacing: 0.1em;
}

.lumen-balance-card b {
  margin-top: 0.5cqw;
  font-family: var(--font-display);
  font-size: 2cqw;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.lumen-card-chip {
  width: 2.3cqw;
  height: 1.65cqw;
  margin-top: auto;
  border: 1px solid rgba(8, 10, 8, 0.28);
  border-radius: 0.3cqw;
  background: linear-gradient(135deg, rgba(8, 10, 8, 0.1), rgba(255, 255, 255, 0.3));
}

.lumen-card-number {
  margin-top: 0.7cqw;
  font-family: var(--font-mono);
  font-size: 0.62cqw;
  letter-spacing: 0.08em;
}

.lumen-card-brand {
  position: absolute;
  right: 1.7cqw;
  bottom: 1.5cqw;
  font-family: var(--font-display);
  font-size: 0.8cqw;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.lumen-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55cqw;
}

.lumen-quick > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45cqw;
  padding: 0.8cqw 0.2cqw;
  border: 1px solid rgba(247, 244, 236, 0.08);
  border-radius: 0.65cqw;
  color: rgba(247, 244, 236, 0.52);
  font-family: var(--font-mono);
  font-size: 0.5cqw;
}

.lumen-quick i {
  display: grid;
  place-items: center;
  width: 1.55cqw;
  height: 1.55cqw;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.07);
  color: var(--acid);
  font-size: 0.7cqw;
  font-style: normal;
}

.lumen-float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 1.15cqw 1.4cqw;
  border: 1px solid rgba(247, 244, 236, 0.12);
  border-radius: 0.9cqw;
  background: rgba(9, 12, 10, 0.82);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.8cqw;
  letter-spacing: 0.02em;
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  animation: labelFloat 8s ease-in-out infinite;
}

.lumen-float i {
  display: grid;
  place-items: center;
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-style: normal;
  font-size: 0.85cqw;
}

.lumen-float small {
  display: block;
  margin-top: 0.2cqw;
  color: rgba(247, 244, 236, 0.4);
  font-size: 0.58cqw;
}

.lumen-float--1 { top: 16%; right: 4%; animation-delay: -2s; }
.lumen-float--2 { bottom: 12%; left: 2.5%; animation-delay: -4s; }

/* ————— Sable visual ————— */

.pv--sable {
  padding: 3.6cqw 4cqw;
  background: #e9e2d4;
  color: #181510;
}

.sable-nav {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding-bottom: 2.2cqw;
  border-bottom: 1px solid rgba(24, 21, 16, 0.16);
  color: rgba(24, 21, 16, 0.6);
  font-family: var(--font-mono);
  font-size: 0.72cqw;
  letter-spacing: 0.04em;
}

.sable-nav b {
  margin-right: auto;
  color: #181510;
  font-family: var(--font-display);
  font-size: 1.1cqw;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.sable-nav b sup {
  color: var(--ember);
  font-size: 0.45cqw;
}

.sable-stage {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  height: calc(100% - 4cqw);
}

.sable-copy {
  position: relative;
  z-index: 2;
  padding-top: 1cqw;
}

.sable-kicker {
  color: rgba(24, 21, 16, 0.55);
  font-family: var(--font-mono);
  font-size: 0.62cqw;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sable-copy h4 {
  margin-top: 1.4cqw;
  color: #181510;
  font-family: var(--font-display);
  font-size: 6.1cqw;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.84;
}

.sable-copy h4 em {
  color: #ff6033;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.sable-link {
  display: inline-block;
  margin-top: 2.6cqw;
  padding-bottom: 0.45cqw;
  border-bottom: 1px solid rgba(24, 21, 16, 0.45);
  color: #181510;
  font-family: var(--font-mono);
  font-size: 0.64cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sable-object {
  position: relative;
  height: 81%;
  min-height: 0;
}

.sable-glow {
  position: absolute;
  top: 50%;
  left: 54%;
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 68%);
  transform: translate(-50%, -50%);
  filter: blur(6px);
}

.sable-vessel {
  position: absolute;
  top: 48%;
  left: 55%;
  width: 12.8cqw;
  height: 21.2cqw;
  border-radius: 44% 44% 38% 38% / 22% 22% 78% 78%;
  background:
    radial-gradient(ellipse at 33% 19%, rgba(255, 255, 255, 0.95), transparent 24%),
    linear-gradient(115deg, #fff9e9 0%, #d9d0bf 12%, #7e7466 24%, #27231f 37%, #8d8476 49%, #f1e9d8 57%, #a69b8b 70%, #3a342d 82%, #181511 100%);
  box-shadow:
    inset -1.3cqw -1.1cqw 2.8cqw rgba(0, 0, 0, 0.5),
    inset 0.8cqw 0.7cqw 1.8cqw rgba(255, 255, 255, 0.34),
    1.2cqw 1.8cqw 2.6cqw rgba(54, 45, 33, 0.22);
  transform: translate(-50%, -50%);
  transition: transform 1.2s var(--ease);
}

.project:hover .sable-vessel {
  transform: translate(-50%, -52%) rotate(-2deg);
}

.sable-vessel::before {
  content: "";
  position: absolute;
  top: -3.9cqw;
  left: 50%;
  width: 4.3cqw;
  height: 4.9cqw;
  border-radius: 42% 42% 20% 20%;
  background: linear-gradient(100deg, #f8f1df, #746b5e 42%, #27231f 62%, #e1d8c7 80%, #5e554a);
  transform: translateX(-50%);
  box-shadow: inset -0.5cqw 0.4cqw 0.9cqw rgba(0, 0, 0, 0.35);
}

.sable-vessel::after {
  content: "";
  position: absolute;
  top: -1.3cqw;
  left: 50%;
  width: 5.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: #12100c;
  transform: translateX(-50%);
  box-shadow: inset 0 0.4cqw 0.7cqw rgba(255, 255, 255, 0.1);
}

.sable-vessel span {
  position: absolute;
  top: 22%;
  left: 26%;
  width: 16%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
  filter: blur(0.3cqw);
  transform: rotate(-18deg);
}

.sable-shadow {
  position: absolute;
  bottom: 6%;
  left: 55%;
  width: 17cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: rgba(51, 42, 31, 0.2);
  filter: blur(1.1cqw);
  transform: translateX(-50%);
}

.sable-caption {
  position: absolute;
  bottom: 1%;
  left: 50%;
  display: flex;
  gap: 2.2cqw;
  width: 100%;
  justify-content: center;
  color: rgba(24, 21, 16, 0.68);
  font-family: var(--font-mono);
  font-size: 0.72cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.sable-caption b {
  color: #181510;
  font-weight: 400;
}

.sable-index {
  position: absolute;
  bottom: 3.5cqw;
  left: 4cqw;
  color: rgba(24, 21, 16, 0.42);
  font-family: var(--font-mono);
  font-size: 0.56cqw;
  letter-spacing: 0.06em;
}

/* ————— Relay visual ————— */

.pv--relay {
  background: #0a0f0d;
  color: var(--white);
}

.relay-top {
  position: absolute;
  top: 3.2cqw;
  right: 3.6cqw;
  left: 3.6cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  color: rgba(247, 244, 236, 0.4);
  font-family: var(--font-mono);
  font-size: 0.62cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.relay-top b {
  margin-right: auto;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05cqw;
  letter-spacing: 0.14em;
}

.relay-live {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  color: var(--acid);
}

.relay-live i {
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px rgba(204, 255, 63, 0.8);
}

.relay-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.route-path {
  stroke-dasharray: 8 8;
  animation: routeFlow 3.2s linear infinite;
}

@keyframes routeFlow {
  to { stroke-dashoffset: -32; }
}

.relay-pin {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15cqw;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.65cqw;
  letter-spacing: 0.06em;
  line-height: 1;
}

.relay-pin::before {
  content: "";
  position: absolute;
  top: -0.6cqw;
  left: -1.5cqw;
  width: 0.6cqw;
  height: 0.6cqw;
  border: 1px solid var(--acid);
  border-radius: 50%;
  background: #0a0f0d;
}

.relay-pin small {
  color: rgba(247, 244, 236, 0.38);
  font-size: 0.48cqw;
}

.relay-pin--origin { top: 72%; left: 19%; }
.relay-pin--dest { top: 22%; left: 79%; }

.relay-pin--dest::before {
  border-color: var(--ember);
}

.relay-card {
  position: absolute;
  bottom: 8%;
  left: 4.5%;
  z-index: 3;
  width: 25cqw;
  padding: 1.5cqw;
  border: 1px solid rgba(247, 244, 236, 0.12);
  border-radius: 1.1cqw;
  background: rgba(8, 12, 10, 0.78);
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.relay-card__label {
  color: rgba(247, 244, 236, 0.38);
  font-family: var(--font-mono);
  font-size: 0.52cqw;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.relay-card strong {
  display: block;
  margin-top: 0.6cqw;
  color: var(--acid);
  font-family: var(--font-display);
  font-size: 1.55cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.relay-card__route {
  display: block;
  margin-top: 0.7cqw;
  color: rgba(247, 244, 236, 0.66);
  font-family: var(--font-mono);
  font-size: 0.55cqw;
  letter-spacing: 0.02em;
}

.relay-card__progress {
  height: 0.22cqw;
  margin-top: 1.2cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.1);
}

.relay-card__progress span {
  display: block;
  width: 78%;
  height: 100%;
  background: linear-gradient(90deg, var(--ember), var(--acid));
}

.relay-card__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7cqw;
  color: rgba(247, 244, 236, 0.4);
  font-family: var(--font-mono);
  font-size: 0.48cqw;
}

.relay-phone {
  position: absolute;
  right: 5%;
  bottom: 7%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 14.2cqw;
  height: 28.4cqw;
  padding: 1.5cqw 1.3cqw;
  border: 1px solid rgba(247, 244, 236, 0.18);
  border-radius: 2cqw;
  background: #101a14;
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.55);
  transform: rotate(3.5deg);
  transition: transform 1s var(--ease);
}

.project:hover .relay-phone {
  transform: rotate(1deg) translateY(-0.5cqw);
}

.relay-phone::before {
  content: "";
  position: absolute;
  top: 0.6cqw;
  left: 50%;
  width: 3.2cqw;
  height: 0.45cqw;
  border-radius: 999px;
  background: rgba(247, 244, 236, 0.12);
  transform: translateX(-50%);
}

.relay-phone__status {
  align-self: flex-end;
  color: rgba(247, 244, 236, 0.5);
  font-family: var(--font-mono);
  font-size: 0.45cqw;
}

.relay-phone__eyebrow {
  margin-top: 2cqw;
  color: rgba(247, 244, 236, 0.4);
  font-family: var(--font-mono);
  font-size: 0.5cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.relay-phone strong {
  margin-top: 0.35cqw;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 2.5cqw;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.relay-phone__place {
  margin-top: 0.2cqw;
  color: rgba(247, 244, 236, 0.5);
  font-family: var(--font-mono);
  font-size: 0.55cqw;
}

.relay-phone__stops {
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  margin-top: 2cqw;
}

.relay-phone__stops span {
  display: block;
  height: 0.8cqw;
  border-radius: 0.2cqw;
  background: rgba(247, 244, 236, 0.08);
}

.relay-phone__stops span:nth-child(2) { width: 76%; }
.relay-phone__stops span:nth-child(3) { width: 55%; }

.relay-phone__btn {
  margin-top: auto;
  padding: 0.9cqw;
  border-radius: 0.6cqw;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.52cqw;
  text-align: center;
}

/* ————— Noma visual ————— */

.pv--noma {
  padding: 3.6cqw 4cqw;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.4), transparent 38%),
    linear-gradient(135deg, #f0b18c 0%, #e5b6a1 45%, #d2b69f 100%);
  color: #1d231d;
}

.noma-copy {
  position: relative;
  z-index: 3;
  width: 53%;
  padding-top: 2cqw;
}

.noma-kicker {
  color: rgba(29, 35, 29, 0.52);
  font-family: var(--font-mono);
  font-size: 0.58cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.noma-copy h4 {
  margin-top: 1.4cqw;
  color: #1d231d;
  font-family: var(--font-display);
  font-size: 5.3cqw;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.86;
}

.noma-copy h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.noma-copy p {
  max-width: 82%;
  margin-top: 1.7cqw;
  color: rgba(29, 35, 29, 0.62);
  font-size: 0.95cqw;
  line-height: 1.55;
}

.noma-link {
  display: inline-block;
  margin-top: 2.2cqw;
  padding-bottom: 0.4cqw;
  border-bottom: 1px solid rgba(29, 35, 29, 0.42);
  font-family: var(--font-mono);
  font-size: 0.58cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.noma-phone {
  position: absolute;
  right: 7%;
  bottom: -7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 28cqw;
  height: 44cqw;
  padding: 2.2cqw 2cqw;
  border: 1px solid rgba(29, 35, 29, 0.18);
  border-radius: 3cqw;
  background: #f5f0e6;
  box-shadow: 0 3cqw 7cqw rgba(65, 38, 23, 0.28);
  transform: rotate(4deg);
  transition: transform 1s var(--ease);
}

.project:hover .noma-phone {
  transform: rotate(1deg) translateY(-0.7cqw);
}

.noma-phone::before {
  content: "";
  position: absolute;
  top: 0.9cqw;
  left: 50%;
  width: 4.5cqw;
  height: 0.55cqw;
  border-radius: 999px;
  background: #1d231d;
  opacity: 0.18;
  transform: translateX(-50%);
}

.noma-phone__status {
  align-self: flex-end;
  color: rgba(29, 35, 29, 0.5);
  font-family: var(--font-mono);
  font-size: 0.6cqw;
}

.noma-phone__eyebrow {
  margin-top: 2.5cqw;
  color: rgba(29, 35, 29, 0.45);
  font-family: var(--font-mono);
  font-size: 0.55cqw;
  letter-spacing: 0.04em;
}

.noma-phone__title {
  margin-top: 0.4cqw;
  font-family: var(--font-display);
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.88;
}

.noma-score {
  position: relative;
  width: 11cqw;
  height: 11cqw;
  margin: 2.2cqw auto 0;
}

.noma-score svg {
  width: 100%;
  height: 100%;
}

.noma-score span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.noma-score b {
  font-family: var(--font-display);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.noma-score small {
  margin-top: 0.25cqw;
  color: rgba(29, 35, 29, 0.48);
  font-family: var(--font-mono);
  font-size: 0.45cqw;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.noma-mini {
  display: flex;
  justify-content: space-between;
  gap: 1cqw;
  margin-top: 2cqw;
  padding-top: 1.2cqw;
  border-top: 1px solid rgba(29, 35, 29, 0.12);
  color: rgba(29, 35, 29, 0.5);
  font-family: var(--font-mono);
  font-size: 0.48cqw;
  line-height: 1.6;
}

.noma-mini b {
  display: block;
  color: #1d231d;
  font-weight: 400;
}

.noma-bars {
  display: flex;
  gap: 0.5cqw;
  align-items: flex-end;
  height: 4.6cqw;
  margin-top: auto;
}

.noma-bars i {
  flex: 1;
  border-radius: 0.2cqw;
  background: #ff6a3d;
}

.noma-bars i:nth-child(1) { height: 42%; opacity: 0.4; }
.noma-bars i:nth-child(2) { height: 68%; opacity: 0.6; }
.noma-bars i:nth-child(3) { height: 52%; opacity: 0.5; }
.noma-bars i:nth-child(4) { height: 86%; opacity: 0.8; }
.noma-bars i:nth-child(5) { height: 62%; opacity: 0.6; }
.noma-bars i:nth-child(6) { height: 96%; }
.noma-bars i:nth-child(7) { height: 74%; opacity: 0.8; }
.noma-bars i:nth-child(8) { height: 55%; opacity: 0.5; }

.noma-float {
  position: absolute;
  right: 5%;
  top: 16%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 1cqw 1.2cqw;
  border: 1px solid rgba(29, 35, 29, 0.13);
  border-radius: 0.9cqw;
  background: rgba(245, 240, 230, 0.82);
  box-shadow: 0 1.4cqw 3cqw rgba(65, 38, 23, 0.16);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.95cqw;
  line-height: 1.1;
}

.noma-float i {
  display: grid;
  place-items: center;
  width: 1.9cqw;
  height: 1.9cqw;
  border-radius: 50%;
  background: #1d231d;
  color: var(--acid);
  font-style: normal;
  font-size: 0.8cqw;
}

.noma-float span {
  display: flex;
  flex-direction: column;
}

.noma-float small {
  color: rgba(29, 35, 29, 0.48);
  font-size: 0.46cqw;
  line-height: 1.4;
}

.noma-index {
  position: absolute;
  bottom: 3.4cqw;
  left: 4cqw;
  color: rgba(29, 35, 29, 0.38);
  font-family: var(--font-mono);
  font-size: 0.52cqw;
  letter-spacing: 0.06em;
}

/* ————— Next project card ————— */

.project--next {
  display: flex;
  min-height: 420px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--acid);
  color: var(--ink);
}

.project__next-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: clamp(30px, 4.3vw, 62px);
}

.project__next-inner .section-label {
  color: rgba(8, 10, 8, 0.55);
}

.project__next-mark {
  position: absolute;
  top: -25px;
  right: 24px;
  color: rgba(8, 10, 8, 0.11);
  font-family: var(--font-serif);
  font-size: 190px;
  line-height: 1;
  transform: rotate(15deg);
}

.project__next-inner h3 {
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: clamp(55px, 6.2vw, 96px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.84;
}

.project__next-inner h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.project__next-inner p {
  max-width: 370px;
  margin-top: 23px;
  color: rgba(8, 10, 8, 0.67);
  font-size: 13px;
  line-height: 1.55;
}

.project__next-inner .button {
  margin-top: 32px;
}

.project__next-word {
  position: absolute;
  right: -1%;
  bottom: -13%;
  color: rgba(8, 10, 8, 0.06);
  font-family: var(--font-display);
  font-size: clamp(170px, 22vw, 330px);
  font-weight: 600;
  letter-spacing: -0.1em;
  line-height: 0.8;
  pointer-events: none;
}