:root {
  --ink: #11110f;
  --paper: #f3f0e9;
  --white: #ffffff;
  --orange: #f05a24;
  --signal: #ff5a1f;
  --red: #c73b2f;
  --green: #173f35;
  --page-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  background: #eceae4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #eceae4;
  color: var(--ink);
  font-family: var(--font-geist-sans), Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

button,
a,
select,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

p,
h1,
h2,
h3,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--orange);
  color: #fff;
}

:focus-visible {
  outline: 3px solid #f5a623;
  outline-offset: 4px;
}

.design-stage {
  position: relative;
  overflow: clip;
}

.design-stage::before {
  background: var(--orange);
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--page-progress));
  transform-origin: left;
  width: 100%;
  z-index: 200;
}

.design {
  min-height: 100vh;
}

.design h1,
.design h2 {
  text-wrap: balance;
}

.design p {
  text-wrap: pretty;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 760;
  gap: 0.65rem;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.brand--inverse {
  color: #fff;
}

.brand-mark {
  display: grid;
  gap: 3px;
  width: 18px;
}

.brand-mark i {
  background: currentColor;
  display: block;
  height: 2px;
  transform: skewX(-28deg);
}

.brand-mark i:last-child {
  margin-left: 5px;
}

.arrow {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  display: inline-block;
  height: 8px;
  margin-left: 0.45rem;
  position: relative;
  transform: rotate(45deg);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 8px;
}

.arrow::after {
  background: currentColor;
  content: "";
  height: 1px;
  position: absolute;
  right: -2px;
  top: 3px;
  transform: rotate(-45deg);
  transform-origin: right;
  width: 20px;
}

a:hover .arrow,
button:hover .arrow {
  transform: rotate(45deg) translate(3px, -3px);
}

.concept-notice {
  color: #5b5a55;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  max-width: 44rem;
  text-transform: uppercase;
}

.concept-notice--inverse {
  color: #c8c7c1;
}

/* Comparison shell */
.design-switcher {
  background: #f8f7f3;
  border-bottom: 1px solid #d2d0c9;
  color: #171714;
  position: sticky;
  top: 0;
  z-index: 120;
}

.design-switcher__top {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  min-height: 58px;
  padding: 0.6rem clamp(1rem, 3vw, 3rem);
}

.design-switcher__top > div:first-child {
  display: grid;
  gap: 0.1rem;
}

.design-switcher__top strong {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-switcher__top span {
  color: #66645f;
  font-size: 0.7rem;
}

.family-tabs {
  display: flex;
  gap: 0.25rem;
}

.family-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 640;
  padding: 0.58rem 0.9rem;
}

.family-tabs button:hover {
  background: #ebe9e2;
}

.family-tabs button.is-active {
  background: #191916;
  color: #fff;
}

.concept-tabs {
  border-top: 1px solid #dedcd5;
  display: grid;
  grid-template-columns: minmax(210px, 360px) minmax(210px, 360px) 1fr;
  padding: 0 clamp(1rem, 3vw, 3rem);
}

.concept-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid #dedcd5;
  cursor: pointer;
  display: grid;
  gap: 0.1rem 0.8rem;
  grid-template-columns: 26px 1fr;
  min-height: 78px;
  padding: 0.8rem 1rem;
  text-align: left;
}

.concept-tabs button:first-child {
  border-left: 1px solid #dedcd5;
}

.concept-tabs button > span {
  align-items: center;
  border: 1px solid #aaa8a1;
  border-radius: 50%;
  display: flex;
  font-size: 0.65rem;
  grid-row: 1 / span 2;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.concept-tabs button strong {
  font-size: 0.85rem;
}

.concept-tabs button small {
  color: #6b6964;
  font-size: 0.66rem;
}

.concept-tabs button:hover,
.concept-tabs button.is-active {
  background: #eceae3;
}

.concept-tabs button.is-active > span {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.concept-count {
  align-items: baseline;
  display: flex;
  font-size: 1.8rem;
  font-weight: 700;
  justify-content: flex-end;
  padding: 1rem 0;
}

.concept-count span {
  color: #76736d;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.35rem;
}

/* Shared commerce and footer */
.commerce-panel {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: 1.15fr 0.8fr 1fr;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 6vw, 7rem);
}

.commerce-panel--light {
  background: #f8f7f3;
  color: #171714;
}

.commerce-panel--paper {
  background: #e9e5db;
  color: #171714;
}

.commerce-panel--dark {
  background: #121311;
  color: #fff;
}

.commerce-panel--signal {
  background: var(--signal);
  color: #111;
}

.commerce-panel__copy h2 {
  font-size: clamp(2.4rem, 5vw, 5.7rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 0.96;
  max-width: 9ch;
}

.commerce-panel__copy p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 2rem;
  max-width: 42ch;
}

.weapon-choice {
  border: 0;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.weapon-choice legend {
  font-size: 0.7rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.weapon-choice button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.85rem 1rem;
  text-align: left;
}

.weapon-choice button[aria-pressed="true"] {
  background: currentColor;
  color: #fff;
}

.commerce-panel--dark .weapon-choice button[aria-pressed="true"] {
  color: #111;
}

.commerce-panel--signal .weapon-choice button[aria-pressed="true"] {
  color: var(--signal);
}

.commerce-panel__action {
  display: grid;
  gap: 1rem;
}

.commerce-panel__action > div {
  border-bottom: 1px solid currentColor;
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.commerce-panel__action span {
  font-size: 0.78rem;
}

.commerce-panel__action strong {
  font-size: 0.78rem;
}

.primary-action {
  align-items: center;
  background: var(--orange);
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  font-weight: 720;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 1.2rem;
}

.commerce-panel--signal .primary-action {
  background: #111;
}

.commerce-status {
  font-size: 0.68rem;
  line-height: 1.45;
  opacity: 0.72;
}

.site-footer {
  align-items: center;
  background: #f5f3ed;
  border-top: 1px solid #ccc9c0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 2.5rem clamp(1.25rem, 6vw, 7rem);
}

.site-footer--inverse {
  background: #0e0f0d;
  border-color: #333430;
  color: #fff;
}

.site-footer p,
.site-footer > a {
  font-size: 0.7rem;
  line-height: 1.5;
}

.site-footer > a {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-enter] {
  transition:
    clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease-out;
}

/* 1 — Timing strip */
.timing {
  background: #111310;
  color: #f7f5ef;
}

.timing-nav {
  align-items: center;
  border-bottom: 1px solid #353731;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
}

.timing-nav > div {
  display: flex;
  gap: 2rem;
}

.timing-nav a,
.timing-nav button {
  font-size: 0.72rem;
}

.timing-nav button {
  background: #f4f1e9;
  border: 0;
  cursor: pointer;
  justify-self: end;
  padding: 0.85rem 1.1rem;
}

.timing-nav__action {
  background: #f4f1e9;
  color: #111310;
  font-size: 0.72rem;
  justify-self: end;
  padding: 0.85rem 1.1rem;
}

.timing-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  min-height: min(820px, calc(100vh - 72px));
  overflow: hidden;
  position: relative;
}

.timing-score {
  align-items: center;
  border-bottom: 1px solid #343630;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto 1fr auto;
  min-height: 118px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
}

.timing-score span {
  color: #a9aaa2;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.timing-score strong {
  color: var(--orange);
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 500;
  justify-self: center;
  letter-spacing: -0.04em;
}

.timing-clock {
  border-left: 1px solid #343630;
  border-right: 1px solid #343630;
  color: #fff;
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(1rem, 2vw, 1.65rem);
  padding: 1rem clamp(1.4rem, 5vw, 5rem);
}

.timing-hero__copy {
  align-self: end;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 4vw, 4.5rem);
  position: relative;
  z-index: 2;
}

.timing-hero__copy h1 {
  font-size: clamp(3.1rem, 6.2vw, 6rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 0.92;
  max-width: 9ch;
}

.timing-hero__copy p {
  color: #c9cac3;
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 2.3rem;
  max-width: 44ch;
}

.text-action,
.timing-hero__copy > a,
.lines-hero__statement a,
.atelier-intro a,
.film-hero__copy a,
.poster-copy a,
.quiet-hero__copy a,
.quiet-materials a {
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 2.2rem;
}

.timing-product {
  align-self: stretch;
  background: #e9e6de;
  overflow: hidden;
  position: relative;
}

.timing-product::after {
  background: linear-gradient(90deg, #111310 0, transparent 18%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.timing-product img {
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.image-label,
.timing-product span {
  bottom: 1.25rem;
  color: #1b1b18;
  font-size: 0.62rem;
  left: 2rem;
  letter-spacing: 0.06em;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.step-row {
  bottom: 3.4rem;
  display: grid;
  gap: 5px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(16, 1fr);
  left: clamp(1.25rem, 4vw, 4.5rem);
  position: absolute;
  right: clamp(1.25rem, 4vw, 4.5rem);
  z-index: 4;
}

.step-row i {
  background: #343630;
  height: 5px;
}

.step-row i:nth-child(4n + 1) {
  background: #6e2f1d;
}

.step-row i:nth-child(8) {
  animation: timing-chase 2.8s linear infinite;
  background: var(--orange);
}

@keyframes timing-chase {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

.timing-hero > .concept-notice {
  bottom: 1.25rem;
  left: clamp(1.25rem, 4vw, 4.5rem);
  position: absolute;
  z-index: 5;
}

.signal-story {
  background: #eceae2;
  color: #151612;
  padding: clamp(6rem, 12vw, 12rem) clamp(1.25rem, 6vw, 7rem);
}

.signal-story__intro {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.4fr 0.6fr;
}

.signal-story__intro h2 {
  font-size: clamp(3rem, 7vw, 7.6rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 11ch;
}

.signal-story__intro p {
  align-self: end;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 43ch;
}

.signal-story__intro:not(.is-in) {
  clip-path: inset(0 0 100% 0);
}

.signal-path {
  border-top: 1px solid #9f9e97;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(5rem, 9vw, 9rem);
  position: relative;
}

.signal-path:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

.signal-path article {
  border-right: 1px solid #bbb9b1;
  min-height: 260px;
  padding: 2rem;
}

.signal-path article:first-child {
  border-left: 1px solid #bbb9b1;
}

.signal-path span {
  color: #696861;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-path strong {
  display: block;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 4rem;
  max-width: 12ch;
}

.signal-path p {
  font-size: 0.8rem;
  line-height: 1.55;
  margin-top: 1rem;
  max-width: 30ch;
}

.signal-runner {
  background: var(--orange);
  border-radius: 50%;
  height: 13px;
  left: 0;
  position: absolute;
  top: -7px;
  transform: translateX(calc(var(--page-progress) * 70vw));
  width: 13px;
}

.timing-field {
  background: #191a17;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
}

.timing-field > img {
  height: 78vh;
  min-height: 620px;
  object-fit: cover;
  width: 100%;
}

.timing-field__copy {
  align-self: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.timing-field__copy:not(.is-in) {
  transform: translateX(2.5rem);
}

.timing-field__copy h2 {
  font-size: clamp(2.6rem, 4.5vw, 5rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.timing-field__copy > p {
  color: #bdbeb7;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.timing-field dl {
  border-top: 1px solid #454640;
  margin-top: 3rem;
}

.timing-field dl > div {
  border-bottom: 1px solid #454640;
  display: flex;
  font-size: 0.7rem;
  justify-content: space-between;
  padding: 1rem 0;
}

.timing-field dt {
  color: #96978f;
}

/* 2 — Piste lines */
.lines {
  background: #f2efe7;
  color: #191916;
}

.lines-nav,
.atelier-nav,
.quiet-nav {
  align-items: center;
  border-bottom: 1px solid #cbc8bf;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  padding: 0 clamp(1.25rem, 5vw, 6rem);
}

.lines-nav p {
  color: #69675f;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lines-nav > a {
  font-size: 0.72rem;
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lines-hero {
  display: grid;
  grid-template-columns: 0.12fr 1.05fr 0.6fr;
  min-height: min(860px, calc(100vh - 76px));
  padding: clamp(3rem, 6vw, 7rem) clamp(1.25rem, 5vw, 6rem) 2rem;
  position: relative;
}

.lines-index {
  align-items: center;
  display: flex;
  flex-direction: column;
  grid-row: 1 / span 2;
  padding: 0 1rem;
}

.lines-index span {
  color: #68665f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
}

.lines-index i {
  background: #c4c1b8;
  flex: 1;
  margin: 0.6rem 0;
  width: 1px;
}

.lines-hero h1 {
  font-size: clamp(4.3rem, 10vw, 10rem);
  font-weight: 560;
  grid-column: 2 / -1;
  letter-spacing: -0.04em;
  line-height: 0.79;
  position: relative;
  z-index: 3;
}

.lines-hero h1 span {
  color: var(--red);
  display: block;
  margin-left: 17%;
  transform: translateX(calc(var(--page-progress) * 5vw));
  transition: transform 120ms linear;
}

.lines-hero__statement {
  align-self: end;
  grid-column: 2;
  padding: 3rem 3rem 5rem 0;
}

.lines-hero__statement p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 39ch;
}

.lines-hero figure {
  align-self: end;
  grid-column: 3;
  height: 58vh;
  min-height: 410px;
  overflow: hidden;
  position: relative;
}

.lines-hero figure img {
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  width: 100%;
}

.lines-hero figcaption {
  background: #f2efe7;
  bottom: 0;
  font-size: 0.6rem;
  left: 0;
  padding: 0.7rem 0.9rem;
  position: absolute;
  text-transform: uppercase;
}

.lines-hero > .concept-notice {
  bottom: 2rem;
  grid-column: 2;
  position: absolute;
}

.piste-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.piste-comparison > div {
  min-height: 650px;
  padding: clamp(4rem, 7vw, 7rem);
}

.piste-comparison__old {
  background: #292a27;
  color: #efeee9;
}

.piste-comparison__new {
  background: #c63c30;
  color: #fff;
}

.piste-comparison > div:not(.is-in) {
  clip-path: inset(0 0 100% 0);
}

.piste-comparison span {
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.piste-comparison h2 {
  font-size: clamp(2.6rem, 4.5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.94;
  margin-top: 4rem;
  max-width: 10ch;
}

.piste-map {
  border: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 120px;
  margin-top: 8rem;
  opacity: 0.8;
  position: relative;
}

.piste-map i {
  border-right: 1px solid currentColor;
}

.piste-map i:last-child {
  border-left: 1px solid currentColor;
  border-right: 0;
}

.piste-map b {
  align-self: center;
  background: currentColor;
  height: 2px;
}

.piste-map--old::before,
.piste-map--old::after {
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  height: 48px;
  position: absolute;
  top: 35px;
  width: 48px;
}

.piste-map--old::before {
  left: 12%;
}

.piste-map--old::after {
  right: 12%;
}

.piste-map--new::before,
.piste-map--new::after {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 8px;
  position: absolute;
  top: 55px;
  width: 8px;
}

.piste-map--new::before {
  left: 30%;
}

.piste-map--new::after {
  right: 30%;
}

.lines-detail {
  background: #f2efe7;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
}

.lines-detail__image img {
  height: 76vh;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.lines-detail__copy {
  align-self: center;
  padding: clamp(4rem, 8vw, 9rem);
}

.lines-detail__copy:not(.is-in) {
  transform: translateX(2rem);
}

.lines-detail__copy h2 {
  font-size: clamp(2.5rem, 4vw, 4.6rem);
  font-weight: 610;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.lines-detail__copy p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.lines-detail__copy ul {
  border-top: 1px solid #b9b6ae;
  list-style: none;
  margin-top: 3rem;
}

.lines-detail__copy li {
  border-bottom: 1px solid #b9b6ae;
  font-size: 0.75rem;
  padding: 1rem 0;
}

/* 3 — Bench cut */
.bench {
  background: #171814;
  color: #efeee8;
}

.bench h1,
.bench h2,
.bench h3,
.atelier h1,
.atelier h2 {
  font-family: var(--font-material), var(--font-geist-sans), sans-serif;
}

.bench-header,
.film-nav,
.case-header {
  align-items: center;
  border-bottom: 1px solid #3a3b35;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 74px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
}

.bench-header__readout {
  display: flex;
  gap: 2.2rem;
}

.bench-header span,
.bench-header a,
.film-nav span,
.film-nav a,
.case-header span,
.case-header a {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.bench-header > a,
.film-nav > a,
.case-header > a {
  justify-self: end;
}

.bench-hero {
  height: min(830px, calc(100vh - 74px));
  min-height: 670px;
  overflow: hidden;
  position: relative;
}

.bench-hero > img {
  filter: saturate(0.85) contrast(1.03);
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  width: 100%;
}

.bench-hero::after {
  background:
    linear-gradient(90deg, rgba(13, 14, 12, 0.95) 0, rgba(13, 14, 12, 0.2) 58%),
    linear-gradient(0deg, rgba(13, 14, 12, 0.8), transparent 35%);
  content: "";
  inset: 0;
  position: absolute;
}

.bench-hero__copy {
  bottom: clamp(5rem, 11vw, 10rem);
  left: clamp(1.25rem, 6vw, 7rem);
  max-width: 650px;
  position: absolute;
  z-index: 3;
}

.bench-hero__copy h1 {
  font-size: clamp(3.8rem, 7vw, 7.4rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.bench-hero__copy p {
  color: #cbcbc3;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 45ch;
}

.bench-calipers {
  display: flex;
  gap: 2.5vw;
  position: absolute;
  right: 3rem;
  top: 3rem;
  transform: translateX(calc(var(--page-progress) * -12vw));
  transition: transform 120ms linear;
  z-index: 3;
}

.bench-calipers i {
  background: #a1a099;
  height: 15px;
  position: relative;
  width: 1px;
}

.bench-calipers i::after {
  background: #a1a099;
  content: "";
  height: 1px;
  left: -4px;
  position: absolute;
  top: 7px;
  width: 9px;
}

.bench-hero .concept-notice {
  bottom: 1.4rem;
  left: clamp(1.25rem, 6vw, 7rem);
  position: absolute;
  z-index: 3;
}

.bench-teardown {
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.bench-teardown__title {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.2fr 0.5fr;
}

.bench-teardown__title:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

.bench-teardown__title h2 {
  font-size: clamp(3rem, 6.5vw, 6.7rem);
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 0.91;
  max-width: 12ch;
}

.bench-teardown__title p {
  align-self: end;
  color: #aaa9a2;
  font-size: 0.9rem;
  line-height: 1.7;
}

.teardown-list {
  border-top: 1px solid #4b4c45;
  margin-top: 7rem;
}

.teardown-list article {
  align-items: center;
  border-bottom: 1px solid #4b4c45;
  display: grid;
  gap: 2rem;
  grid-template-columns: 50px 0.65fr 1fr 0.6fr;
  min-height: 120px;
}

.teardown-list article:not(.is-in) {
  transform: translateX(-2rem);
}

.teardown-list span,
.teardown-list p,
.teardown-list b {
  color: #a7a79f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.68rem;
  font-weight: 450;
}

.teardown-list h3 {
  font-size: 1.35rem;
  font-weight: 600;
}

.teardown-list b {
  color: var(--orange);
  justify-self: end;
}

.bench-evidence {
  background: #292a26;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
}

.bench-evidence figure {
  position: relative;
}

.bench-evidence figure img {
  height: 75vh;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.bench-evidence figcaption {
  background: #171814;
  bottom: 0;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  left: 0;
  padding: 0.8rem 1rem;
  position: absolute;
}

.bench-evidence > div {
  align-self: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.bench-evidence > div:not(.is-in) {
  transform: translateY(2rem);
}

.bench-evidence h2 {
  font-size: clamp(2.5rem, 4vw, 4.6rem);
  font-weight: 590;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.bench-evidence ul {
  border-top: 1px solid #55564f;
  list-style: none;
  margin-top: 3rem;
}

.bench-evidence li {
  border-bottom: 1px solid #55564f;
  font-size: 0.74rem;
  padding: 1rem 0;
}

.bench-evidence p {
  color: var(--orange);
  font-size: 0.7rem;
  margin-top: 1.3rem;
}

/* 4 — Atelier */
.atelier {
  background: #fbfaf7;
  color: #181815;
}

.atelier-nav > div,
.quiet-nav > div {
  display: flex;
  gap: 2rem;
}

.atelier-nav a,
.quiet-nav a {
  font-size: 0.7rem;
}

.atelier-hero {
  display: grid;
  grid-template-columns: 74px 0.8fr 1.1fr;
  min-height: min(900px, calc(100vh - 76px));
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 5vw, 6rem) 2rem 0;
  position: relative;
}

.atelier-side {
  align-self: end;
  font-size: 0.58rem;
  justify-self: center;
  letter-spacing: 0.15em;
  margin-bottom: 4rem;
  text-transform: uppercase;
  transform: rotate(-90deg);
  white-space: nowrap;
}

.atelier-hero h1 {
  align-self: start;
  font-size: clamp(3.7rem, 7vw, 7.5rem);
  font-weight: 500;
  grid-column: 2 / -1;
  letter-spacing: -0.04em;
  line-height: 0.88;
  position: relative;
  z-index: 3;
}

.atelier-hero figure {
  align-self: end;
  grid-column: 3;
  height: 61vh;
  min-height: 460px;
  overflow: hidden;
  position: relative;
}

.atelier-hero figure img {
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  position: relative;
  width: 100%;
  z-index: 2;
}

.atelier-ghost {
  color: #eeeae1;
  font-size: clamp(10rem, 22vw, 25rem);
  font-weight: 760;
  left: -46%;
  letter-spacing: -0.06em;
  line-height: 0.7;
  position: absolute;
  top: -12%;
  transform: translateX(calc(var(--page-progress) * 8vw));
  transition: transform 120ms linear;
  z-index: 1;
}

.atelier-hero figcaption {
  background: #fbfaf7;
  bottom: 0;
  font-size: 0.58rem;
  left: 0;
  padding: 0.75rem 1rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.atelier-intro {
  align-self: end;
  grid-column: 2;
  grid-row: 2;
  padding: 3rem 4rem 5rem 0;
}

.atelier-intro p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 34ch;
}

.atelier-hero > .concept-notice {
  bottom: 2rem;
  left: 74px;
  padding-left: clamp(1.25rem, 5vw, 6rem);
  position: absolute;
}

.atelier-object {
  background: #ded8cb;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 6vw, 7rem);
}

.atelier-object__statement {
  align-self: start;
  padding-right: clamp(2rem, 6vw, 7rem);
}

.atelier-object__statement:not(.is-in) {
  transform: translateY(3rem);
}

.atelier-object__statement h2 {
  font-size: clamp(3rem, 5.7vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.atelier-object__statement p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 38ch;
}

.atelier-object > img {
  height: 65vh;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.atelier-object dl {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.atelier-object dl > div {
  border-right: 1px solid #aaa396;
  padding: 1rem;
}

.atelier-object dt {
  color: #716d64;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.atelier-object dd {
  font-size: 0.75rem;
  margin-top: 0.6rem;
}

.atelier-use {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
}

.atelier-use > img {
  height: 80vh;
  min-height: 650px;
  object-fit: cover;
  width: 100%;
}

.atelier-use > div {
  align-self: end;
  padding: clamp(3rem, 7vw, 7rem);
}

.atelier-use > div:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.atelier-use h2 {
  font-size: clamp(2.7rem, 4.4vw, 4.8rem);
  font-weight: 510;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.atelier-use p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

/* 5 — Bout film */
.film {
  background: #0d0e0c;
  color: #fff;
}

.film h1,
.film h2,
.film h3,
.notebook h1,
.notebook h2,
.notebook h3 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
}

.film-nav {
  background: #0d0e0c;
}

.film-hero {
  height: min(860px, calc(100vh - 74px));
  min-height: 680px;
  overflow: hidden;
  position: relative;
}

.film-hero > img {
  filter: saturate(0.45) contrast(1.18);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.film-hero::after {
  background:
    linear-gradient(90deg, rgba(5, 6, 5, 0.88), transparent 58%),
    linear-gradient(0deg, rgba(5, 6, 5, 0.62), transparent 50%);
  content: "";
  inset: 0;
  position: absolute;
}

.film-shutter {
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  height: 100%;
  left: 37%;
  position: absolute;
  top: 0;
  transform: translateX(calc(var(--page-progress) * 10vw));
  width: 26%;
  z-index: 2;
}

.film-hero__copy {
  bottom: clamp(5rem, 11vw, 10rem);
  left: clamp(1.25rem, 6vw, 7rem);
  max-width: 750px;
  position: absolute;
  z-index: 4;
}

.film-hero__copy h1 {
  font-size: clamp(4rem, 8.4vw, 8.8rem);
  font-weight: 690;
  letter-spacing: -0.04em;
  line-height: 0.84;
  max-width: 9ch;
}

.film-hero__copy p {
  color: #d0d1ca;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 2rem;
  max-width: 43ch;
}

.film-hero__copy a {
  color: #f3c74f;
}

.film-frame-data {
  align-items: center;
  display: flex;
  gap: 1.2rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 4;
}

.film-frame-data span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
}

.film-frame-data i {
  background: #f3c74f;
  height: 8px;
  width: 8px;
}

.film-hero > .concept-notice {
  bottom: 1.5rem;
  left: clamp(1.25rem, 6vw, 7rem);
  position: absolute;
  z-index: 4;
}

.film-sequence {
  background: #f0eee8;
  color: #171714;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 5vw, 6rem);
}

.film-sequence__heading {
  align-items: end;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr auto;
}

.film-sequence__heading:not(.is-in) {
  clip-path: inset(0 0 100% 0);
}

.film-sequence__heading h2 {
  font-size: clamp(3.2rem, 7vw, 7rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 10ch;
}

.film-sequence__heading p {
  font-size: 0.7rem;
  max-width: 34ch;
}

.contact-sheet {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6rem;
}

.contact-sheet article:not(.is-in) {
  opacity: 0.35;
  transform: translateX(-1rem);
}

.contact-sheet__image {
  background-position: center;
  background-size: cover;
  filter: grayscale(1) contrast(1.18);
  height: 300px;
  overflow: hidden;
  position: relative;
}

.contact-sheet article:nth-child(1) .contact-sheet__image {
  background-position: 15% center;
}

.contact-sheet article:nth-child(2) .contact-sheet__image {
  background-position: 38% center;
}

.contact-sheet article:nth-child(3) .contact-sheet__image {
  background-position: 62% center;
}

.contact-sheet article:nth-child(4) .contact-sheet__image {
  background-position: 82% center;
}

.contact-sheet__image span {
  background: #f3c74f;
  bottom: 0;
  color: #111;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.65rem;
  left: 0;
  padding: 0.5rem;
  position: absolute;
}

.contact-sheet h3 {
  font-size: 1.25rem;
  margin-top: 1.2rem;
}

.contact-sheet p {
  font-size: 0.74rem;
  line-height: 1.5;
  margin-top: 0.7rem;
  padding-right: 1rem;
}

.film-product {
  align-items: center;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  padding: clamp(5rem, 9vw, 9rem) 0 clamp(5rem, 9vw, 9rem) clamp(1.25rem, 6vw, 7rem);
}

.film-product__copy {
  padding-right: clamp(3rem, 7vw, 8rem);
}

.film-product__copy:not(.is-in) {
  transform: translateY(3rem);
}

.film-product__copy h2 {
  font-size: clamp(2.7rem, 4.7vw, 5rem);
  font-weight: 630;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.film-product__copy p {
  color: #b8b9b2;
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.film-product__copy ul {
  border-top: 1px solid #44453f;
  list-style: none;
  margin-top: 3rem;
}

.film-product__copy li {
  border-bottom: 1px solid #44453f;
  color: #f3c74f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.66rem;
  padding: 1rem 0;
}

.film-product > img {
  height: 68vh;
  min-height: 560px;
  object-fit: cover;
  width: 100%;
}

/* 6 — Coach notebook */
.notebook {
  background:
    linear-gradient(90deg, transparent 71px, #d85748 72px, transparent 73px),
    linear-gradient(#f0eee7 31px, #d8d4c9 32px, #f0eee7 33px);
  background-size: 100% 100%, 100% 33px;
  color: #1b1b18;
}

.notebook-header {
  align-items: center;
  background: #f0eee7;
  border-bottom: 2px solid #1b1b18;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  padding: 0 clamp(1.25rem, 5vw, 6rem);
}

.notebook-header p,
.notebook-header > a {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.63rem;
}

.notebook-header > a {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notebook-hero {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  min-height: min(850px, calc(100vh - 76px));
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 7rem) 3rem 106px;
  position: relative;
}

.notebook-hero h1 {
  font-size: clamp(3.8rem, 7.4vw, 7.6rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 9.5ch;
  position: relative;
  z-index: 3;
}

.notebook-hero > p {
  align-self: end;
  font-size: 1rem;
  grid-column: 1;
  line-height: 1.7;
  max-width: 42ch;
  padding-bottom: 6rem;
}

.notebook-hero > img {
  align-self: center;
  filter: contrast(1.02) saturate(0.8);
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 66vh;
  min-height: 520px;
  object-fit: cover;
  transform: rotate(1.2deg);
  width: 100%;
}

.notebook-note {
  background: #f3c84b;
  border: 1px solid #1b1b18;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  padding: 0.65rem 0.8rem;
  position: absolute;
  z-index: 4;
}

.notebook-note--one {
  right: 7%;
  top: 12%;
  transform: rotate(2deg) translateX(calc(var(--page-progress) * -8vw));
  transition: transform 120ms linear;
}

.notebook-note--two {
  bottom: 16%;
  right: 31%;
  transform: rotate(-2deg);
}

.notebook-hero > .concept-notice {
  bottom: 1.5rem;
  left: 106px;
  position: absolute;
}

.lesson-flow {
  background: #1a1b18;
  color: #f0eee7;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 6vw, 7rem);
}

.lesson-flow article {
  align-items: center;
  border-top: 1px solid #51524c;
  display: grid;
  gap: 2rem;
  grid-template-columns: 90px 1fr 0.6fr 0.8fr;
  min-height: 220px;
}

.lesson-flow article:last-child {
  border-bottom: 1px solid #51524c;
}

.lesson-flow article:not(.is-in) {
  transform: translateX(-2rem);
}

.lesson-flow article > span {
  color: #f3c84b;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.65rem;
}

.lesson-flow h2 {
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 17ch;
}

.lesson-flow p {
  color: #bfc0b8;
  font-size: 0.8rem;
  line-height: 1.6;
}

.lesson-diagram {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.lesson-diagram i {
  border: 1px solid #f0eee7;
  border-radius: 50%;
  height: 22px;
  width: 22px;
}

.lesson-diagram i:last-child {
  justify-self: end;
}

.lesson-diagram b {
  background: #f3c84b;
  height: 2px;
}

.lesson-diagram--2 i:first-child {
  background: #f3c84b;
}

.lesson-diagram--3 i {
  background: #f3c84b;
}

.notebook-proof {
  background: #f0eee7;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  padding-left: 73px;
}

.notebook-proof img {
  height: 76vh;
  min-height: 620px;
  object-fit: cover;
  width: 100%;
}

.notebook-proof > div {
  align-self: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.notebook-proof > div:not(.is-in) {
  transform: rotate(1.5deg) translateY(2rem);
}

.notebook-proof h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.7rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.notebook-proof ul {
  list-style: none;
  margin-top: 3rem;
}

.notebook-proof li {
  border-top: 1px solid #a8a59b;
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 1rem 0;
}

/* 7 — Club poster */
.poster {
  background: #e7dfcf;
  color: #161612;
}

.poster h1,
.poster h2,
.poster h3,
.poster-word,
.case-design h1,
.case-design h2,
.case-design h3 {
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.poster-nav {
  align-items: center;
  border-bottom: 2px solid #161612;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 74px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
}

.poster-nav span,
.poster-nav > a {
  font-size: 0.64rem;
  font-weight: 680;
  letter-spacing: 0.08em;
}

.poster-nav > a {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.poster-hero {
  height: min(880px, calc(100vh - 74px));
  min-height: 700px;
  overflow: hidden;
  position: relative;
}

.poster-word {
  font-size: clamp(10rem, 25vw, 25rem);
  font-weight: 780;
  letter-spacing: -0.07em;
  line-height: 0.68;
  position: absolute;
  z-index: 1;
}

.poster-word--arc {
  color: #d14937;
  left: -1.5rem;
  top: 3rem;
}

.poster-word--one {
  bottom: 1rem;
  color: #161612;
  right: -1rem;
}

.poster-image {
  bottom: 11%;
  filter: contrast(1.18) grayscale(1);
  height: 61%;
  left: 34%;
  mix-blend-mode: multiply;
  overflow: hidden;
  position: absolute;
  transform: translateY(calc(var(--page-progress) * -5vw)) rotate(-3deg);
  transition: transform 120ms linear;
  width: 48%;
  z-index: 2;
}

.poster-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.poster-copy {
  background: #f0c540;
  left: 6%;
  padding: clamp(2rem, 4vw, 4rem);
  position: absolute;
  top: 46%;
  transform: rotate(1.5deg);
  width: min(440px, 35vw);
  z-index: 4;
}

.poster-copy h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 730;
  letter-spacing: -0.04em;
  line-height: 0.87;
}

.poster-copy p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-top: 1.5rem;
}

.poster-seal {
  align-items: center;
  background: #d14937;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 0.65rem;
  font-weight: 700;
  height: 100px;
  justify-content: center;
  letter-spacing: 0.08em;
  position: absolute;
  right: 4%;
  text-align: center;
  top: 8%;
  transform: rotate(8deg);
  width: 100px;
  z-index: 5;
}

.poster-hero > .concept-notice {
  bottom: 1rem;
  left: 1.5rem;
  position: absolute;
  z-index: 5;
}

.poster-club {
  background: #d14937;
  color: #fff;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.poster-club__headline:not(.is-in) {
  transform: translateX(-4rem);
}

.poster-club__headline > span {
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.1em;
}

.poster-club__headline h2 {
  font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 770;
  letter-spacing: -0.04em;
  line-height: 0.8;
  margin-top: 1rem;
}

.poster-club__grid {
  border-top: 2px solid #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 7rem;
}

.poster-club__grid article {
  border-right: 1px solid rgba(255, 255, 255, 0.65);
  min-height: 230px;
  padding: 2rem;
}

.poster-club__grid strong {
  font-size: 1.5rem;
}

.poster-club__grid p {
  font-size: 0.8rem;
  line-height: 1.55;
  margin-top: 4rem;
  max-width: 30ch;
}

.poster-object {
  align-items: center;
  background: #e7dfcf;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
}

.poster-object > img {
  height: 74vh;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.poster-object > div {
  padding: clamp(3rem, 7vw, 7rem);
}

.poster-object > div:not(.is-in) {
  transform: rotate(-2deg) translateY(3rem);
}

.poster-object h2 {
  font-size: clamp(3rem, 5vw, 5.4rem);
  font-weight: 730;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

.poster-object p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 2rem;
}

/* 8 — Equipment case */
.case-design {
  background: #ff5b20;
  color: #12120f;
}

.case-header {
  border-bottom-color: #12120f;
}

.case-hero {
  border-bottom: 12px solid #12120f;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  min-height: min(860px, calc(100vh - 74px));
  overflow: hidden;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 5vw, 6rem);
  position: relative;
}

.case-hero::before,
.case-hero::after {
  border: 3px solid #12120f;
  content: "";
  height: 90px;
  position: absolute;
  top: -50px;
  width: 200px;
}

.case-hero::before {
  left: 14%;
}

.case-hero::after {
  right: 14%;
}

.case-hero h1 {
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 740;
  letter-spacing: -0.04em;
  line-height: 0.86;
  max-width: 8ch;
  position: relative;
  z-index: 2;
}

.case-hero > p {
  align-self: end;
  font-size: 1rem;
  grid-column: 1;
  line-height: 1.65;
  max-width: 42ch;
  padding: 4rem 4rem 6rem 0;
}

.case-hero figure {
  align-self: center;
  background: #141512;
  border: 4px solid #141512;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 600px;
  overflow: hidden;
  position: relative;
  transform: translateY(calc(var(--page-progress) * -3vw));
  transition: transform 120ms linear;
}

.case-hero figure img {
  filter: contrast(1.08);
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.case-hero figcaption {
  background: #141512;
  bottom: 0;
  color: #fff;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  left: 0;
  padding: 0.8rem;
  position: absolute;
}

.case-hero__action {
  border: 2px solid #12120f;
  bottom: 5rem;
  font-size: 0.72rem;
  font-weight: 760;
  left: clamp(1.25rem, 5vw, 6rem);
  padding: 1rem 1.2rem;
  position: absolute;
  z-index: 3;
}

.case-hero > .concept-notice {
  bottom: 1.5rem;
  left: clamp(1.25rem, 5vw, 6rem);
  position: absolute;
}

.case-inventory {
  background: #1a1b18;
  color: #fff;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.case-inventory__title {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 0.5fr;
}

.case-inventory__title:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

.case-inventory__title h2 {
  font-size: clamp(3.2rem, 6.5vw, 6.7rem);
  font-weight: 690;
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 10ch;
}

.case-inventory__title p {
  align-self: end;
  color: #bbbcb5;
  font-size: 0.9rem;
  line-height: 1.65;
}

.case-slots {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  margin-top: 6rem;
}

.case-slot {
  border: 2px solid #6c6d65;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 1.5rem;
}

.case-slot--hub {
  grid-row: span 2;
  min-height: 536px;
}

.case-slot:last-child {
  grid-column: 2 / span 2;
}

.case-slot span,
.case-slot b {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
}

.case-slot strong {
  font-size: 1.5rem;
  margin-top: auto;
  max-width: 10ch;
}

.case-slot b {
  color: var(--signal);
  font-weight: 500;
  margin-top: 1rem;
}

.case-field {
  background: #ff5b20;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
}

.case-field > img {
  filter: saturate(0.65) contrast(1.1);
  height: 76vh;
  min-height: 620px;
  object-fit: cover;
  width: 100%;
}

.case-field > div {
  align-self: end;
  padding: clamp(3rem, 7vw, 7rem);
}

.case-field > div:not(.is-in) {
  transform: translateY(3rem);
}

.case-field h2 {
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 710;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.case-field p {
  font-size: 0.88rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.case-design .commerce-panel--signal {
  border-top: 12px solid #12120f;
}

/* 9 — Spec manual */
.manual {
  background: #f3f1e9;
  color: #161713;
}

.manual h1,
.manual h2,
.manual h3,
.quiet h1,
.quiet h2,
.quiet h3 {
  font-family: var(--font-commerce), Georgia, serif;
}

.manual-header {
  align-items: center;
  border-bottom: 1px solid #8f9187;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
}

.manual-header span,
.manual-header > a {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
}

.manual-header > a {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.manual-hero {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  min-height: min(850px, calc(100vh - 72px));
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 5vw, 6rem) 2rem;
  position: relative;
}

.manual-title {
  padding-right: clamp(2rem, 5vw, 5rem);
}

.manual-title h1 {
  font-size: clamp(3.2rem, 6vw, 6.3rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.91;
  max-width: 10ch;
}

.manual-title p {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 2.2rem;
  max-width: 42ch;
}

.manual-hero > img {
  height: 56vh;
  min-height: 440px;
  object-fit: cover;
  width: 100%;
}

.manual-record {
  align-self: end;
  grid-column: 2;
  transform: translateX(calc(var(--page-progress) * -4vw));
  transition: transform 120ms linear;
}

.manual-record dl {
  border-top: 2px solid #1b1c18;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.manual-record dl > div {
  border-right: 1px solid #aaa9a1;
  padding: 1rem;
}

.manual-record dt {
  color: #6b6c65;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.manual-record dd {
  font-size: 0.72rem;
  margin-top: 0.7rem;
}

.manual-hero > .concept-notice {
  bottom: 2rem;
  left: clamp(1.25rem, 5vw, 6rem);
  position: absolute;
}

.manual-function {
  background: #173f35;
  color: #fff;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.manual-function h2 {
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  font-weight: 620;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.manual-function h2:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

.manual-function ol {
  border-top: 1px solid #91a49e;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin-top: 6rem;
}

.manual-function li {
  border-right: 1px solid #91a49e;
  min-height: 240px;
  padding: 1.6rem;
}

.manual-function li span {
  font-size: 1.3rem;
  font-weight: 630;
}

.manual-function li p {
  color: #d2ded9;
  font-size: 0.76rem;
  line-height: 1.55;
  margin-top: 5rem;
}

.manual-spec {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
}

.manual-spec__image img {
  height: 76vh;
  min-height: 600px;
  object-fit: cover;
  width: 100%;
}

.manual-spec__table {
  align-self: center;
  padding: clamp(3rem, 6vw, 6rem);
}

.manual-spec__table h2 {
  font-size: clamp(2.5rem, 4.3vw, 4.6rem);
  font-weight: 630;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.manual-spec table {
  border-collapse: collapse;
  font-size: 0.7rem;
  margin-top: 3rem;
  width: 100%;
}

.manual-spec th,
.manual-spec td {
  border-bottom: 1px solid #aaa9a1;
  padding: 1rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.manual-spec th {
  color: #676860;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* 10 — Quiet precision */
.quiet {
  background: #fbfbf8;
  color: #191916;
}

.quiet-nav > div {
  justify-self: end;
}

.quiet-hero {
  display: grid;
  grid-template-columns: 0.63fr 1.37fr;
  min-height: min(880px, calc(100vh - 76px));
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 6vw, 7rem) 2rem;
  position: relative;
}

.quiet-hero__copy {
  align-self: center;
  padding-right: clamp(3rem, 7vw, 8rem);
}

.quiet-hero__copy h1 {
  font-size: clamp(3.3rem, 5.8vw, 6.2rem);
  font-weight: 510;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.quiet-hero__copy p {
  color: #56564f;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 40ch;
}

.quiet-hero figure {
  align-self: center;
  position: relative;
  transform: translateY(calc(var(--page-progress) * -3vw));
  transition: transform 120ms linear;
}

.quiet-hero figure img {
  height: 64vh;
  min-height: 520px;
  object-fit: cover;
  width: 100%;
}

.quiet-hero figcaption {
  color: #65655e;
  font-size: 0.6rem;
  margin-top: 0.8rem;
  text-transform: uppercase;
}

.quiet-hero > .concept-notice {
  bottom: 2rem;
  left: clamp(1.25rem, 6vw, 7rem);
  position: absolute;
}

.quiet-system {
  background: #ece9e1;
  padding: clamp(7rem, 13vw, 13rem) clamp(1.25rem, 7vw, 8rem);
}

.quiet-system h2 {
  font-size: clamp(3.3rem, 7vw, 7.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.91;
  max-width: 9ch;
}

.quiet-system h2:not(.is-in) {
  transform: translateY(3rem);
}

.quiet-system__row {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  margin-top: 8rem;
}

.quiet-system__row article {
  border-top: 1px solid #8e8d86;
  min-height: 200px;
  padding: 1.4rem 0;
}

.quiet-system__row > i {
  background: #83827a;
  height: 1px;
  margin: 0 2rem;
  width: 5vw;
}

.quiet-system__row span {
  color: #74736c;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.quiet-system__row strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 580;
  margin-top: 2rem;
}

.quiet-system__row p {
  font-size: 0.76rem;
  line-height: 1.55;
  margin-top: 1rem;
  max-width: 28ch;
}

.quiet-materials {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
}

.quiet-materials > img {
  height: 80vh;
  min-height: 650px;
  object-fit: cover;
  width: 100%;
}

.quiet-materials > div {
  align-self: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.quiet-materials > div:not(.is-in) {
  transform: translateX(2rem);
}

.quiet-materials h2,
.quiet-use h2 {
  font-size: clamp(2.8rem, 4.5vw, 4.9rem);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.quiet-materials p,
.quiet-use p {
  color: #55554f;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.quiet-use {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  padding: clamp(6rem, 11vw, 11rem) 0 clamp(6rem, 11vw, 11rem) clamp(1.25rem, 7vw, 8rem);
}

.quiet-use > div {
  align-self: center;
  padding-right: clamp(3rem, 7vw, 8rem);
}

.quiet-use > div:not(.is-in) {
  clip-path: inset(0 0 100% 0);
}

.quiet-use > img {
  height: 75vh;
  min-height: 620px;
  object-fit: cover;
  width: 100%;
}

/* Responsive */
@media (max-width: 980px) {
  .commerce-panel {
    grid-template-columns: 1fr 1fr;
  }

  .commerce-panel__copy {
    grid-column: 1 / -1;
  }

  .timing-hero,
  .lines-detail,
  .timing-field,
  .bench-evidence,
  .atelier-use,
  .film-product,
  .notebook-proof,
  .poster-object,
  .case-field,
  .manual-spec,
  .quiet-materials {
    grid-template-columns: 1fr;
  }

  .timing-hero {
    min-height: auto;
  }

  .timing-score {
    grid-column: 1;
  }

  .timing-product {
    height: 65vh;
    min-height: 520px;
  }

  .step-row {
    display: none;
  }

  .timing-hero > .concept-notice {
    bottom: auto;
    left: auto;
    padding: 1.5rem;
    position: relative;
  }

  .signal-story__intro,
  .bench-teardown__title,
  .film-sequence__heading,
  .case-inventory__title {
    grid-template-columns: 1fr;
  }

  .timing-field > img,
  .lines-detail__image img,
  .bench-evidence figure img,
  .atelier-use > img,
  .notebook-proof img,
  .poster-object > img,
  .case-field > img,
  .manual-spec__image img,
  .quiet-materials > img {
    height: 62vh;
    min-height: 500px;
  }

  .lines-hero {
    grid-template-columns: 50px 1fr;
  }

  .lines-hero h1 {
    grid-column: 2;
  }

  .lines-hero__statement {
    grid-column: 2;
  }

  .lines-hero figure {
    grid-column: 2;
    height: 55vh;
  }

  .lines-hero > .concept-notice {
    display: none;
  }

  .atelier-hero {
    grid-template-columns: 52px 1fr;
  }

  .atelier-hero h1 {
    grid-column: 2;
  }

  .atelier-hero figure {
    grid-column: 2;
  }

  .atelier-intro {
    grid-column: 2;
    grid-row: auto;
  }

  .atelier-object {
    grid-template-columns: 1fr;
  }

  .atelier-object__statement {
    padding-bottom: 4rem;
  }

  .atelier-object dl {
    grid-column: 1;
  }

  .atelier-object > img {
    min-height: 500px;
  }

  .contact-sheet {
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
  }

  .film-product {
    padding-left: 0;
  }

  .film-product__copy {
    padding: 5rem;
  }

  .poster-copy {
    width: min(440px, 52vw);
  }

  .case-hero {
    grid-template-columns: 1fr;
    padding-bottom: 8rem;
  }

  .case-hero > p {
    padding-bottom: 3rem;
  }

  .case-hero figure {
    grid-column: 1;
    grid-row: auto;
  }

  .case-slots {
    grid-template-columns: 1fr 1fr;
  }

  .case-slot--hub {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }

  .case-slot:last-child {
    grid-column: 1 / -1;
  }

  .manual-hero {
    grid-template-columns: 1fr;
  }

  .manual-title {
    padding-bottom: 4rem;
  }

  .manual-record {
    grid-column: 1;
  }

  .manual-function ol {
    grid-template-columns: 1fr 1fr;
  }

  .quiet-hero {
    grid-template-columns: 1fr;
  }

  .quiet-hero__copy {
    padding-bottom: 4rem;
  }

  .quiet-system__row {
    grid-template-columns: 1fr;
  }

  .quiet-system__row > i {
    height: 50px;
    margin: 0 auto;
    width: 1px;
  }

  .quiet-use {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .quiet-use > div {
    padding: 5rem;
  }
}

@media (max-width: 760px) {
  .design-switcher {
    position: sticky;
  }

  .design-switcher__top {
    display: block;
    min-height: auto;
    padding: 0.65rem 0.75rem 0.5rem;
  }

  .design-switcher__top > div:first-child span {
    display: none;
  }

  .family-tabs {
    display: grid;
    gap: 0.1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0.45rem;
    overflow: visible;
    padding-bottom: 0;
  }

  .family-tabs button {
    font-size: 0.59rem;
    min-width: 0;
    padding: 0.48rem 0.12rem;
    white-space: nowrap;
  }

  .concept-tabs {
    grid-template-columns: 1fr 1fr;
    padding: 0 0.75rem;
  }

  .concept-tabs button {
    min-height: 86px;
    padding: 0.7rem;
  }

  .concept-tabs button:first-child {
    border-left: 0;
  }

  .concept-tabs button:nth-child(2) {
    border-right: 0;
  }

  .concept-tabs button small {
    display: none;
  }

  .concept-count {
    display: none;
  }

  .timing-nav,
  .lines-nav,
  .atelier-nav,
  .film-nav,
  .case-header,
  .manual-header,
  .notebook-header,
  .poster-nav,
  .quiet-nav,
  .bench-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 0 1.1rem;
  }

  .timing-nav > div,
  .timing-nav > button,
  .lines-nav p,
  .atelier-nav > div,
  .film-nav span,
  .case-header span,
  .manual-header span,
  .notebook-header p,
  .poster-nav span,
  .quiet-nav > div,
  .bench-header__readout {
    display: none;
  }

  .timing-score {
    grid-template-columns: auto 1fr auto 1fr auto;
    min-height: 80px;
    padding: 0 1rem;
  }

  .timing-score strong {
    font-size: 2.1rem;
  }

  .timing-clock {
    font-size: 0.8rem;
    padding: 0.7rem;
  }

  .timing-hero__copy {
    padding: 290px 1.25rem 4rem;
    position: relative;
    z-index: 3;
  }

  .timing-product {
    height: 260px;
    left: 0;
    min-height: 0;
    position: absolute;
    right: 0;
    top: 80px;
    width: 100%;
    z-index: 1;
  }

  .timing-product::after {
    background: linear-gradient(0deg, #111310 0, transparent 42%);
  }

  .timing-product .image-label {
    color: #111310;
    left: 1rem;
  }

  .timing-hero__copy h1,
  .bench-hero__copy h1,
  .film-hero__copy h1,
  .case-hero h1,
  .notebook-hero h1 {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .signal-story,
  .bench-teardown,
  .film-sequence,
  .lesson-flow,
  .poster-club,
  .case-inventory,
  .manual-function,
  .quiet-system {
    padding: 5rem 1.25rem;
  }

  .signal-path {
    grid-template-columns: 1fr;
  }

  .signal-path article {
    border-bottom: 1px solid #bbb9b1;
    min-height: 200px;
  }

  .signal-runner {
    display: none;
  }

  .piste-comparison {
    grid-template-columns: 1fr;
  }

  .piste-comparison > div {
    min-height: 520px;
    padding: 4rem 1.25rem;
  }

  .lines-hero {
    display: block;
    min-height: auto;
    padding: 4rem 1.25rem 1.5rem;
  }

  .lines-index {
    display: none;
  }

  .lines-hero h1 {
    font-size: clamp(4.2rem, 21vw, 7rem);
  }

  .lines-hero__statement {
    padding: 3rem 0;
  }

  .lines-hero figure {
    height: 62vh;
    min-height: 480px;
  }

  .lines-detail__copy,
  .timing-field__copy,
  .bench-evidence > div,
  .atelier-use > div,
  .poster-object > div,
  .case-field > div,
  .manual-spec__table,
  .quiet-materials > div {
    padding: 4rem 1.25rem;
  }

  .bench-hero {
    min-height: 650px;
  }

  .bench-hero__copy {
    bottom: 6rem;
    left: 1.25rem;
    right: 1.25rem;
  }

  .bench-calipers {
    right: 1.25rem;
  }

  .teardown-list article {
    gap: 1rem;
    grid-template-columns: 34px 1fr;
    padding: 1.5rem 0;
  }

  .teardown-list p,
  .teardown-list b {
    grid-column: 2;
    justify-self: start;
  }

  .atelier-hero {
    display: block;
    min-height: auto;
    padding: 4rem 1.25rem 2rem;
  }

  .atelier-side {
    display: none;
  }

  .atelier-hero h1 {
    font-size: clamp(3.3rem, 14vw, 5.2rem);
  }

  .atelier-hero figure {
    height: 58vh;
    margin-top: 3rem;
  }

  .atelier-intro {
    padding: 3rem 0 4rem;
  }

  .atelier-hero > .concept-notice {
    bottom: auto;
    left: auto;
    padding: 0;
    position: relative;
  }

  .atelier-object {
    padding: 5rem 1.25rem;
  }

  .atelier-object dl {
    grid-template-columns: 1fr;
  }

  .atelier-object dl > div {
    border-bottom: 1px solid #aaa396;
    border-right: 0;
  }

  .film-hero {
    min-height: 680px;
  }

  .film-hero__copy {
    bottom: 6rem;
    left: 1.25rem;
    right: 1.25rem;
  }

  .film-frame-data {
    right: 1rem;
  }

  .film-shutter {
    left: 20%;
    width: 60%;
  }

  .contact-sheet {
    grid-template-columns: 1fr;
  }

  .film-product__copy {
    padding: 4rem 1.25rem;
  }

  .notebook-hero {
    display: block;
    min-height: auto;
    padding: 4rem 1.25rem 4rem 92px;
  }

  .notebook-hero > p {
    padding: 2rem 0 3rem;
  }

  .notebook-hero > img {
    height: 55vh;
    min-height: 420px;
  }

  .notebook-note--one {
    right: 1rem;
  }

  .notebook-note--two {
    bottom: 12%;
    right: 1rem;
  }

  .notebook-hero > .concept-notice {
    bottom: auto;
    left: auto;
    margin-top: 2rem;
    position: relative;
  }

  .lesson-flow article {
    grid-template-columns: 1fr;
    padding: 2rem 0;
  }

  .lesson-diagram {
    margin-top: 1rem;
    max-width: 240px;
  }

  .notebook-proof {
    padding-left: 0;
  }

  .poster-hero {
    min-height: 760px;
  }

  .poster-word {
    font-size: 39vw;
  }

  .poster-image {
    height: 54%;
    left: 18%;
    transform: rotate(-3deg);
    width: 70%;
  }

  .poster-copy {
    bottom: 4rem;
    left: 1rem;
    padding: 1.5rem;
    top: auto;
    width: calc(100% - 2rem);
  }

  .poster-copy h1 {
    font-size: 3.2rem;
  }

  .poster-seal {
    height: 76px;
    right: 1rem;
    width: 76px;
  }

  .poster-club__grid {
    grid-template-columns: 1fr;
  }

  .poster-club__grid article {
    border-bottom: 1px solid rgba(255,255,255,.65);
    border-right: 0;
  }

  .case-hero {
    padding: 4rem 1.25rem 8rem;
  }

  .case-hero figure,
  .case-hero figure img {
    min-height: 440px;
  }

  .case-hero__action {
    bottom: 4rem;
    left: 1.25rem;
  }

  .case-slots {
    grid-template-columns: 1fr;
  }

  .case-slot--hub,
  .case-slot:last-child {
    grid-column: 1;
  }

  .manual-hero {
    min-height: auto;
    padding: 4rem 1.25rem;
  }

  .manual-title h1 {
    font-size: 3.7rem;
  }

  .manual-record dl {
    grid-template-columns: 1fr 1fr;
  }

  .manual-hero > .concept-notice {
    bottom: auto;
    left: auto;
    margin-top: 2rem;
    position: relative;
  }

  .manual-function ol {
    grid-template-columns: 1fr;
  }

  .manual-function li {
    border-bottom: 1px solid #91a49e;
    border-right: 0;
    min-height: 180px;
  }

  .manual-function li p {
    margin-top: 3rem;
  }

  .manual-spec {
    display: block;
  }

  .manual-spec__table {
    overflow-x: auto;
  }

  .quiet-hero {
    min-height: auto;
    padding: 4rem 1.25rem;
  }

  .quiet-hero__copy {
    padding-right: 0;
  }

  .quiet-hero figure img {
    min-height: 440px;
  }

  .quiet-hero > .concept-notice {
    bottom: auto;
    left: auto;
    margin-top: 2rem;
    position: relative;
  }

  .quiet-use > div {
    padding: 4rem 1.25rem;
  }

  .commerce-panel {
    gap: 3rem;
    grid-template-columns: 1fr;
    padding: 5rem 1.25rem;
  }

  .commerce-panel__copy {
    grid-column: 1;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.25rem;
  }

  .site-footer > a {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  [data-enter] {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .signal-runner,
  .film-shutter,
  .lines-hero h1 span,
  .bench-calipers,
  .atelier-ghost,
  .notebook-note--one,
  .poster-image,
  .case-hero figure,
  .manual-record,
  .quiet-hero figure {
    transform: none !important;
  }
}

/* ================================================================
   K-Fencing catalog navigation + category fieldbooks
   ================================================================ */

.kfe-site-nav {
  align-items: stretch;
  background: var(--kfe-carbon-rebuild, #252622);
  border-bottom: 1px solid var(--kfe-rule, #50514b);
  color: var(--kfe-white, #f2eee5);
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  min-height: 72px;
  position: relative;
  z-index: 120;
}

.kfe-logo {
  align-self: stretch;
  background: #f7f4ec;
  color: var(--kfe-ink, #1a1a17);
  display: block;
  min-height: 72px;
  overflow: hidden;
  position: relative;
  width: 210px;
}

.kfe-logo > span {
  display: block;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.kfe-logo img {
  display: block;
  height: auto;
  left: 10px;
  max-width: none;
  position: absolute;
  top: -18px;
  width: 190px;
}

.kfe-site-nav__categories {
  align-items: stretch;
  display: flex;
  justify-content: center;
}

.kfe-category-menu {
  position: relative;
}

.kfe-category-menu__trigger {
  align-items: center;
  color: #cfccc4;
  display: flex;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.64rem;
  height: 72px;
  letter-spacing: 0.06em;
  padding: 0 2.4rem;
  position: relative;
  text-transform: uppercase;
  transition:
    background-color 220ms ease-out,
    color 220ms ease-out;
}

.kfe-category-menu__trigger::after {
  background: var(--kfe-orange, #f05a24);
  bottom: -1px;
  content: "";
  height: 3px;
  left: 1.6rem;
  position: absolute;
  right: 1.6rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--kfe-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.kfe-category-menu:hover .kfe-category-menu__trigger,
.kfe-category-menu:focus-within .kfe-category-menu__trigger,
.kfe-category-menu__trigger[aria-current="page"] {
  background: #30312d;
  color: #fff;
}

.kfe-category-menu:hover .kfe-category-menu__trigger::after,
.kfe-category-menu:focus-within .kfe-category-menu__trigger::after,
.kfe-category-menu__trigger[aria-current="page"]::after {
  transform: scaleX(1);
}

.kfe-category-menu__panel {
  background: var(--kfe-paper, #d8d3c9);
  border-top: 3px solid var(--kfe-orange, #f05a24);
  color: var(--kfe-ink, #1a1a17);
  left: 0;
  min-width: 330px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% - 1px);
  transform: translateY(-8px);
  transition:
    opacity 180ms ease-out,
    transform 260ms var(--kfe-ease, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 180ms;
  visibility: hidden;
}

.kfe-category-menu:nth-child(2) .kfe-category-menu__panel {
  left: auto;
  right: 0;
}

.kfe-category-menu:hover .kfe-category-menu__panel,
.kfe-category-menu:focus-within .kfe-category-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.kfe-category-menu__panel > a {
  align-items: center;
  border-bottom: 1px solid #aaa69d;
  color: inherit;
  display: grid;
  gap: 0.3rem;
  min-height: 69px;
  padding: 0.9rem 1.2rem;
  transition:
    background-color 180ms ease-out,
    padding-left 260ms var(--kfe-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.kfe-category-menu__panel > a:hover,
.kfe-category-menu__panel > a:focus-visible {
  background: #ebe7de;
  padding-left: 1.45rem;
}

.kfe-category-menu__panel strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.kfe-category-menu__panel span {
  color: #4f4c46;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.54rem;
  text-transform: uppercase;
}

.kfe-category-menu__panel .kfe-category-menu__all {
  align-items: center;
  background: #1a1a17;
  border-bottom: 0;
  color: #fff;
  display: flex;
  font-size: 0.67rem;
  justify-content: space-between;
  min-height: 52px;
  text-transform: uppercase;
}

.kfe-category-menu__status {
  align-items: center;
  display: flex;
  min-height: 112px;
  padding: 1.4rem;
}

.kfe-category-menu__status strong {
  font-size: 3rem;
  line-height: 0.9;
}

.kfe-category-menu__all .dark-arrow {
  color: var(--kfe-orange, #f05a24);
  flex: 0 0 auto;
  margin-right: 0.25rem;
}

.kfe-site-nav__pointone {
  align-items: start;
  background: var(--kfe-paper, #d8d3c9);
  color: var(--kfe-ink, #1a1a17);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.35rem;
  transition: background-color 220ms ease-out;
}

.kfe-site-nav__pointone:hover,
.kfe-site-nav__pointone:focus-visible {
  background: #ebe7de;
}

.kfe-site-nav__pointone strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.kfe-site-nav__pointone span {
  color: #9e2e20;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.kfe-logo:focus-visible,
.kfe-category-menu__trigger:focus-visible,
.kfe-site-nav__pointone:focus-visible {
  outline: 2px solid var(--kfe-orange, #f05a24);
  outline-offset: -4px;
}

.kfe-category {
  --kfe-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kfe-carbon-rebuild: #252622;
  --kfe-carbon-rebuild-deep: #171815;
  --kfe-paper: #d8d3c9;
  --kfe-white: #f2eee5;
  --kfe-orange: #f05a24;
  --kfe-rule: #50514b;
  --kfe-ink: #1a1a17;
  background: var(--kfe-carbon-rebuild);
  color: var(--kfe-white);
  min-width: 320px;
  overflow: clip;
}

.kfe-category h1,
.kfe-category h2,
.kfe-category h3 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-weight: 780;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.kfe-category p {
  text-wrap: pretty;
}

.kfe-category img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kfe-category-hero {
  display: grid;
  grid-template-columns: minmax(390px, 0.84fr) minmax(520px, 1.16fr);
  min-height: calc(100svh - 72px);
  overflow: hidden;
}

.kfe-category-hero__copy {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.2rem, 5vw, 6rem);
  position: relative;
  z-index: 3;
}

.kfe-category-hero h1 {
  font-size: clamp(4.2rem, 6.7vw, 6rem);
  line-height: 0.82;
  max-width: 8ch;
}

.kfe-category-hero__copy > p {
  color: #c8c5bc;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 44ch;
}

.kfe-category-hero__copy > a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 0.68rem;
  gap: 0.8rem;
  margin-top: 2.1rem;
}

.kfe-category-hero__image {
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.kfe-category-hero__image img {
  animation: kfe-category-develop 1150ms var(--kfe-ease) both;
  filter: grayscale(0.65) brightness(0.72) contrast(1.1);
  transform-origin: center;
}

.kfe-category-hero__image figcaption {
  background: rgba(23, 24, 21, 0.9);
  bottom: 0;
  color: #c2c0b8;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.52rem;
  left: 0;
  padding: 0.75rem 1rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.kfe-category-hero__scan {
  animation: kfe-category-scan 1450ms 450ms var(--kfe-ease) both;
  background: var(--kfe-orange);
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 2;
}

.kfe-category-hero__gate {
  animation: kfe-category-gate 1250ms 200ms var(--kfe-ease) both;
  background: var(--kfe-carbon-rebuild);
  inset: 0;
  position: absolute;
  transform-origin: right;
  z-index: 2;
}

@keyframes kfe-category-develop {
  from {
    filter: grayscale(1) brightness(0.35) contrast(1.2);
    transform: scale(1.05);
  }
  to {
    filter: grayscale(0.65) brightness(0.72) contrast(1.1);
    transform: scale(1);
  }
}

@keyframes kfe-category-scan {
  0% {
    opacity: 0;
    transform: translateY(-300px) scaleX(0);
  }
  22% {
    opacity: 1;
    transform: translateY(-300px) scaleX(1);
  }
  80% {
    opacity: 1;
    transform: translateY(300px) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateY(300px) scaleX(0);
  }
}

@keyframes kfe-category-gate {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.kfe-equipment-coming {
  align-items: center;
  background: #0b0c0a;
  display: grid;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  padding: clamp(4rem, 8vw, 9rem) clamp(1.2rem, 8vw, 9rem);
  position: relative;
}

.kfe-equipment-coming h1 {
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.82;
  max-width: 9ch;
  position: relative;
  z-index: 2;
}

.kfe-equipment-coming h1 span,
.kfe-equipment-coming h1 strong {
  display: block;
}

.kfe-equipment-coming h1 span {
  color: #7e8077;
}

.kfe-equipment-coming h1 strong {
  color: var(--kfe-white);
  font-weight: inherit;
}

.kfe-equipment-coming__shutter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  inset: 0;
  position: absolute;
}

.kfe-equipment-coming__shutter i {
  background: #11120f;
  border-right: 1px solid #262721;
  display: block;
}

.kfe-equipment-coming__shutter i:first-child {
  animation: kfe-equipment-shutter-left 1200ms var(--kfe-ease) both;
}

.kfe-equipment-coming__shutter i:nth-child(2) {
  animation: kfe-equipment-shutter-center 1200ms 90ms var(--kfe-ease) both;
}

.kfe-equipment-coming__shutter i:last-child {
  animation: kfe-equipment-shutter-right 1200ms 180ms var(--kfe-ease) both;
  border-right: 0;
}

.kfe-equipment-coming__line {
  background: var(--kfe-orange);
  bottom: 11%;
  height: 2px;
  left: clamp(1.2rem, 8vw, 9rem);
  position: absolute;
  transform-origin: left;
  width: min(42vw, 620px);
  animation: kfe-equipment-line 900ms 620ms var(--kfe-ease) both;
}

@keyframes kfe-equipment-shutter-left {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-4%);
  }
}

@keyframes kfe-equipment-shutter-center {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(4%);
  }
}

@keyframes kfe-equipment-shutter-right {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-7%);
  }
}

@keyframes kfe-equipment-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.kfe-equipment-index {
  background: var(--kfe-paper);
  color: var(--kfe-ink);
  display: grid;
  gap: clamp(3rem, 8vw, 10rem);
  grid-template-columns: 0.72fr 1.28fr;
  padding: clamp(6rem, 10vw, 10rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-equipment-index > header {
  align-self: start;
  position: sticky;
  top: 2rem;
}

.kfe-equipment-index h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  line-height: 0.86;
  max-width: 8ch;
}

.kfe-equipment-index header p {
  color: #5b5953;
  font-size: 0.86rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 38ch;
}

.kfe-equipment-index ol {
  border-top: 1px solid #8f8a81;
}

.kfe-equipment-index li {
  border-bottom: 1px solid #8f8a81;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 36px minmax(150px, 0.72fr) 1fr 150px;
  min-height: 170px;
  padding: 2rem 0;
}

.kfe-equipment-index li > span,
.kfe-equipment-index li small,
.kfe-equipment-index li > strong {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.kfe-equipment-index li > span {
  color: #56534d;
}

.kfe-equipment-index h3 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 0.94;
}

.kfe-equipment-index li small {
  color: #56534d;
  display: block;
  line-height: 1.5;
  margin-top: 0.7rem;
}

.kfe-equipment-index li > p {
  color: #4f4c46;
  font-size: 0.78rem;
  line-height: 1.65;
  max-width: 45ch;
}

.kfe-equipment-index li > strong {
  color: #9e2e20;
  justify-self: end;
  text-align: right;
}

.kfe-category-proof {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  min-height: 68svh;
}

.kfe-category-proof > div {
  align-content: center;
  padding: clamp(5rem, 9vw, 10rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-category-proof h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  line-height: 0.86;
  max-width: 12ch;
}

.kfe-category-proof > div:first-child p {
  color: #c2c0b8;
  font-size: 0.86rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 48ch;
}

.kfe-category-proof__status {
  background: #1a1b18;
  border-left: 1px solid var(--kfe-rule);
  display: grid;
}

.kfe-category-proof__status span,
.kfe-category-proof__status p {
  color: #aaa89f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.kfe-category-proof__status strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.kfe-category-proof__status i {
  background: var(--kfe-orange);
  display: block;
  height: 3px;
  margin: 2rem 0;
  transform: scaleX(0.36);
  transform-origin: left;
}

.kfe-trainer-product {
  background: var(--kfe-carbon-rebuild-deep);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  min-height: 90svh;
  overflow: hidden;
}

.kfe-trainer-product figure {
  min-height: 680px;
  overflow: hidden;
  position: relative;
}

.kfe-trainer-product figure img {
  filter: grayscale(0.35) brightness(0.76) contrast(1.05);
}

.kfe-trainer-product figure > span {
  bottom: -0.12em;
  color: rgba(242, 238, 229, 0.12);
  font-family: var(--font-tactical), sans-serif;
  font-size: clamp(6rem, 12vw, 13rem);
  font-weight: 800;
  left: 2%;
  letter-spacing: -0.07em;
  line-height: 0.74;
  position: absolute;
}

.kfe-trainer-product > div {
  align-content: center;
  padding: clamp(5rem, 8vw, 9rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-trainer-product__status {
  color: #f1784a;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.kfe-trainer-product h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  line-height: 0.86;
  margin-top: 1.3rem;
  max-width: 9ch;
}

.kfe-trainer-product p {
  color: #c2c0b8;
  font-size: 0.86rem;
  line-height: 1.7;
  margin: 2rem 0;
  max-width: 44ch;
}

.kfe-trainer-sequence {
  background: var(--kfe-paper);
  color: var(--kfe-ink);
  padding: clamp(6rem, 10vw, 10rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-trainer-sequence ol {
  border-bottom: 1px solid #8f8a81;
  border-top: 1px solid #8f8a81;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.kfe-trainer-sequence li {
  min-height: 210px;
  padding: 2rem 1.5rem;
  position: relative;
}

.kfe-trainer-sequence li:not(:last-child) {
  border-right: 1px solid #8f8a81;
}

.kfe-trainer-sequence li::after {
  background: #272822;
  border-radius: 50%;
  bottom: -5px;
  content: "";
  height: 9px;
  left: 1.5rem;
  position: absolute;
  width: 9px;
}

.kfe-trainer-sequence li:first-child::after {
  background: var(--kfe-orange);
  box-shadow: 0 0 0 5px var(--kfe-paper);
}

.kfe-trainer-sequence li span,
.kfe-trainer-sequence > p {
  color: #55524c;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.kfe-trainer-sequence li strong {
  display: block;
  font-family: var(--font-tactical), sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  line-height: 0.95;
  margin-top: 5rem;
  text-transform: uppercase;
}

.kfe-trainer-sequence > p {
  margin-top: 2rem;
}

.kfe-trainer-catalog {
  background: var(--kfe-carbon-rebuild);
  padding: clamp(6rem, 10vw, 10rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-trainer-catalog h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  line-height: 0.86;
  margin-bottom: clamp(3rem, 6vw, 6rem);
  max-width: 9ch;
}

.kfe-trainer-catalog__product {
  align-items: center;
  border-bottom: 1px solid var(--kfe-rule);
  border-top: 1px solid var(--kfe-rule);
  color: inherit;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 0.5fr 0.8fr 0.8fr;
  min-height: 180px;
  padding: 2rem 0;
  transition:
    background-color 220ms ease-out,
    padding 260ms var(--kfe-ease);
}

.kfe-trainer-catalog__product:hover,
.kfe-trainer-catalog__product:focus-visible {
  background: #30312d;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.kfe-trainer-catalog__product:focus-visible {
  outline: 2px solid var(--kfe-orange);
  outline-offset: 4px;
}

.kfe-trainer-catalog__product > strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: clamp(3rem, 5vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
}

.kfe-trainer-catalog__product > span {
  color: #f1784a;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.kfe-trainer-catalog__product > p {
  color: #c2c0b8;
  font-size: 0.78rem;
}

.kfe-trainer-catalog__product > b {
  font-size: 0.68rem;
  font-weight: 650;
  justify-self: end;
}

.kfe-category-footer {
  align-items: center;
  border-top: 1px solid var(--kfe-rule);
  display: grid;
  gap: 2rem;
  grid-template-columns: 210px 2fr 1fr;
  min-height: 128px;
  padding-right: clamp(1.2rem, 6vw, 7rem);
}

.kfe-category-footer .kfe-logo {
  min-height: 128px;
}

.kfe-category-footer .kfe-logo img {
  left: 10px;
  top: 7px;
  width: 190px;
}

.kfe-category-footer p {
  color: #aaa89f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  line-height: 1.5;
  max-width: 62ch;
  text-transform: uppercase;
}

.kfe-category-footer > a:last-child {
  font-size: 0.68rem;
  justify-self: end;
}

.kfe-footer .kfe-logo {
  min-height: 72px;
}

.dark-footer .kfe-logo {
  min-height: 72px;
}

@media (max-width: 1080px) {
  .kfe-category-hero {
    grid-template-columns: 0.82fr 1.18fr;
  }

  .kfe-equipment-index {
    gap: 4rem;
    grid-template-columns: 0.64fr 1.36fr;
  }

  .kfe-equipment-index li {
    grid-template-columns: 30px minmax(130px, 0.62fr) 1fr;
  }

  .kfe-equipment-index li > strong {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .kfe-site-nav {
    grid-template-columns: 1fr 150px;
    min-height: 112px;
  }

  .kfe-site-nav > .kfe-logo {
    height: 62px;
    min-height: 62px;
    width: 150px;
  }

  .kfe-site-nav > .kfe-logo img {
    left: 4px;
    top: -10px;
    width: 142px;
  }

  .kfe-site-nav__categories {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .kfe-category-menu {
    flex: 1;
  }

  .kfe-category-menu__trigger {
    border-top: 1px solid var(--kfe-rule, #50514b);
    height: 50px;
    justify-content: center;
    padding: 0 1rem;
  }

  .kfe-category-menu:first-child .kfe-category-menu__trigger {
    border-right: 1px solid var(--kfe-rule, #50514b);
  }

  .kfe-category-menu__panel {
    display: none;
  }

  .kfe-site-nav__pointone {
    grid-column: 2;
    grid-row: 1;
    min-width: 150px;
    padding: 0 0.9rem;
  }

  .kfe-hero {
    min-height: 0;
  }

  .carbon-original-stage .carbon-hero,
  .kfe-category-hero {
    min-height: 0;
  }

  .kfe-category-hero {
    display: flex;
    flex-direction: column;
  }

  .kfe-category-hero__copy {
    padding: 4rem 1.2rem 4.5rem;
  }

  .kfe-category-hero h1 {
    font-size: clamp(3.5rem, 15vw, 5rem);
    max-width: 8ch;
  }

  .kfe-category-hero__image {
    min-height: 480px;
  }

  .kfe-equipment-coming {
    min-height: calc(100svh - 112px);
    padding: 4rem 1.2rem;
  }

  .kfe-equipment-coming h1 {
    font-size: clamp(3rem, 15vw, 6rem);
  }

  .kfe-equipment-coming__line {
    left: 1.2rem;
    width: calc(100% - 2.4rem);
  }

  .kfe-equipment-index {
    display: block;
    padding: 6rem 1.2rem;
  }

  .kfe-equipment-index > header {
    position: static;
  }

  .kfe-equipment-index h2 {
    font-size: clamp(3.2rem, 13vw, 4.4rem);
  }

  .kfe-equipment-index ol {
    margin-top: 4rem;
  }

  .kfe-equipment-index li {
    gap: 1rem;
    grid-template-columns: 30px 1fr;
    padding: 1.8rem 0;
  }

  .kfe-equipment-index li > p,
  .kfe-equipment-index li > strong {
    grid-column: 2;
  }

  .kfe-category-proof,
  .kfe-trainer-product {
    display: block;
    min-height: 0;
  }

  .kfe-category-proof > div,
  .kfe-trainer-product > div {
    padding: 5rem 1.2rem;
  }

  .kfe-category-proof__status {
    border-left: 0;
    border-top: 1px solid var(--kfe-rule);
  }

  .kfe-trainer-product figure {
    min-height: 490px;
  }

  .kfe-trainer-sequence {
    padding: 6rem 1.2rem;
  }

  .kfe-trainer-sequence ol {
    grid-template-columns: 1fr 1fr;
  }

  .kfe-trainer-sequence li {
    min-height: 165px;
  }

  .kfe-trainer-sequence li:nth-child(2) {
    border-right: 0;
  }

  .kfe-trainer-sequence li:nth-child(-n + 2) {
    border-bottom: 1px solid #8f8a81;
  }

  .kfe-trainer-sequence li strong {
    margin-top: 3.6rem;
  }

  .kfe-trainer-catalog {
    padding: 6rem 1.2rem;
  }

  .kfe-trainer-catalog h2 {
    font-size: clamp(3rem, 13vw, 6rem);
  }

  .kfe-trainer-catalog__product {
    gap: 1rem;
    grid-template-columns: 1fr auto;
    min-height: 210px;
  }

  .kfe-trainer-catalog__product > p,
  .kfe-trainer-catalog__product > b {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .kfe-category-footer {
    grid-template-columns: 150px 1fr;
    padding-right: 1.2rem;
  }

  .kfe-category-footer .kfe-logo {
    min-height: 120px;
    width: 150px;
  }

  .kfe-category-footer .kfe-logo img {
    left: 4px;
    top: 12px;
    width: 142px;
  }

  .kfe-category-footer p {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 1.2rem 2rem;
  }

  .kfe-category-footer > a:last-child {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kfe-category-hero__image img,
  .kfe-category-hero__scan,
  .kfe-category-hero__gate,
  .kfe-equipment-coming__shutter i,
  .kfe-equipment-coming__line,
  .kfe-category-menu__panel,
  .kfe-category-menu__trigger::after {
    animation: none !important;
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  .kfe-category-hero__scan,
  .kfe-category-hero__gate {
    display: none;
  }

  .kfe-equipment-coming__shutter i {
    transform: none !important;
  }
}

/* ================================================================
   Redline Atelier After Dark
   Three progressively darker Atelier × Fieldbook refinements
   ================================================================ */

:root {
  --atelier-scroll: 0;
  --atelier-scroll-px: 0px;
  --atelier-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --atelier-orange: #f05a24;
  --atelier-red: #b94032;
  --atelier-carbon: #252622;
  --atelier-nocturne: #130e0e;
  --atelier-black: #050605;
  --atelier-paper: #e5e0d6;
}

.atelier-stage {
  background: #0b0c0a;
  min-width: 320px;
  overflow: clip;
}

.atelier-stage::before {
  background: var(--atelier-orange);
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--atelier-scroll));
  transform-origin: left;
  width: 100%;
  z-index: 500;
}

.atelier-transition {
  animation: atelier-enter 720ms var(--atelier-ease) both;
}

@keyframes atelier-enter {
  from {
    clip-path: inset(0 0 10% 0);
    opacity: 0.35;
    transform: translateY(28px);
  }
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }
}

.dark-site {
  color: #f7f4ec;
  min-height: 100vh;
}

.dark-site h1,
.dark-site h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.dark-site h1 {
  font-size: clamp(4rem, 7.2vw, 6rem);
  font-weight: 780;
  line-height: 0.82;
  text-transform: uppercase;
}

.dark-site h2 {
  font-size: clamp(3rem, 5.7vw, 6rem);
  font-weight: 740;
  line-height: 0.88;
  text-transform: uppercase;
}

.dark-site p {
  text-wrap: pretty;
}

.dark-site img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.dark-brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 780;
  gap: 0.68rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.dark-brand > span {
  display: grid;
  gap: 3px;
  width: 18px;
}

.dark-brand i {
  background: currentColor;
  display: block;
  height: 2px;
  transform: skewX(-28deg);
}

.dark-brand i:last-child {
  margin-left: 5px;
}

.dark-arrow {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  display: inline-block;
  height: 8px;
  margin-left: 0.55rem;
  position: relative;
  transform: rotate(45deg);
  transition: transform 260ms var(--atelier-ease);
  width: 8px;
}

.dark-arrow::after {
  background: currentColor;
  content: "";
  height: 1px;
  position: absolute;
  right: -2px;
  top: 3px;
  transform: rotate(-45deg);
  transform-origin: right;
  width: 21px;
}

a:hover .dark-arrow,
button:hover .dark-arrow {
  transform: rotate(45deg) translate(4px, -4px);
}

.dark-truth {
  color: #c9c6bc;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 76ch;
  text-transform: uppercase;
}

[data-dark-reveal] {
  clip-path: inset(0 0 14% 0);
  opacity: 0;
  transform: translateY(36px);
  transition:
    clip-path 850ms var(--atelier-ease),
    opacity 520ms ease-out,
    transform 850ms var(--atelier-ease);
}

[data-dark-reveal].is-visible {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
}

/* Darkness selector */

.dark-switcher {
  background: #e8e4db;
  border-bottom: 1px solid #aaa79f;
  color: #171714;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) 2.4fr;
  min-height: 96px;
  position: sticky;
  top: 0;
  z-index: 300;
}

.dark-switcher__title {
  align-content: center;
  border-right: 1px solid #c1beb5;
  display: grid;
  gap: 0.18rem;
  padding: 1rem clamp(1rem, 3vw, 3rem);
}

.dark-switcher__title strong {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dark-switcher__title span {
  color: #625f58;
  font-size: 0.68rem;
}

.dark-switcher__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.dark-switcher__options button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid #c1beb5;
  cursor: pointer;
  display: grid;
  gap: 0.05rem 0.8rem;
  grid-template-columns: 28px 1fr;
  min-width: 0;
  padding: 0.9rem 1.15rem;
  text-align: left;
}

.dark-switcher__options button:last-child {
  border-right: 0;
}

.dark-switcher__options button > span {
  align-items: center;
  border: 1px solid #7c7972;
  border-radius: 50%;
  display: flex;
  font-size: 0.66rem;
  grid-row: 1 / span 2;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.dark-switcher__options strong {
  font-size: 0.82rem;
}

.dark-switcher__options small {
  color: #65625b;
  font-size: 0.62rem;
}

.dark-switcher__options button:hover {
  background: #dcd8cf;
}

.dark-switcher__options button.is-active {
  color: #fff;
}

.dark-switcher__options button.is-active > span {
  background: var(--atelier-orange);
  border-color: var(--atelier-orange);
  color: #17110d;
}

.dark-switcher__options button:nth-child(1).is-active {
  background: #2a2b27;
}

.dark-switcher__options button:nth-child(2).is-active {
  background: #17100f;
}

.dark-switcher__options button:nth-child(3).is-active {
  background: #050605;
}

.dark-switcher__options button.is-active small {
  color: #c8c5bc;
}

/* Shared dark navigation and commerce */

.dark-nav {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.dark-nav > div {
  display: flex;
  gap: 2rem;
}

.dark-nav a,
.dark-nav span {
  font-size: 0.68rem;
}

.dark-nav > a:last-child {
  justify-self: end;
}

.dark-order {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: 1.08fr 0.72fr 1fr;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.dark-order__copy h2 {
  max-width: 10ch;
}

.dark-order__copy p {
  color: #c8c5bc;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 44ch;
}

.dark-order fieldset {
  border: 0;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.dark-order legend {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.dark-order fieldset button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 660;
  padding: 0.9rem 1rem;
  text-align: left;
}

.dark-order fieldset button[aria-pressed="true"] {
  background: #f2eee5;
  color: #151512;
}

.dark-order__action {
  display: grid;
  gap: 1rem;
}

.dark-order__action > div {
  border-bottom: 1px solid currentColor;
  display: flex;
  font-size: 0.76rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.dark-primary-action {
  align-items: center;
  background: var(--atelier-orange);
  border: 0;
  border-radius: 0;
  color: #17110d;
  cursor: pointer;
  display: flex;
  font-size: 0.8rem;
  font-weight: 740;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 1.2rem;
}

.dark-order__checkout {
  border: 1px solid currentColor;
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.dark-order__checkout[hidden] {
  display: none;
}

.dark-order__checkout span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dark-order__checkout strong {
  font-size: 0.94rem;
}

.dark-order__checkout p {
  color: #bdbab1;
  font-size: 0.67rem;
  line-height: 1.5;
}

.dark-order__action > p {
  color: #bdbab1;
  font-size: 0.67rem;
  line-height: 1.5;
}

.dark-footer {
  align-items: center;
  border-top: 1px solid #393a35;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 2.5rem clamp(1.25rem, 6vw, 7rem);
}

.dark-footer > a:last-child {
  font-size: 0.68rem;
  justify-self: end;
}

/* Shared signal sequence */

.dark-signal {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  padding: clamp(7rem, 13vw, 14rem) clamp(1.2rem, 6vw, 7rem);
}

.dark-signal__intro {
  align-self: start;
  padding-right: clamp(2rem, 7vw, 8rem);
  position: sticky;
  top: 170px;
}

.dark-signal__intro h2 {
  max-width: 9ch;
}

.dark-signal__intro p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 40ch;
}

.dark-signal__sequence {
  display: grid;
  grid-template-columns: 24px 1fr;
}

.dark-signal__rail {
  background: #66665e;
  margin: 0 auto;
  position: relative;
  width: 1px;
}

.dark-signal__rail > i {
  background: currentColor;
  border: 3px solid currentColor;
  border-radius: 50%;
  height: 11px;
  left: -5px;
  position: absolute;
  width: 11px;
}

.dark-signal__rail > i:nth-child(1) {
  top: 4%;
}

.dark-signal__rail > i:nth-child(2) {
  top: 31%;
}

.dark-signal__rail > i:nth-child(3) {
  top: 59%;
}

.dark-signal__rail > i:nth-child(4) {
  top: 88%;
}

.dark-signal__rail > b {
  background: var(--atelier-orange);
  border: 4px solid currentColor;
  border-radius: 50%;
  height: 20px;
  left: -10px;
  position: absolute;
  top: calc(var(--atelier-scroll) * 90%);
  transition: top 120ms linear;
  width: 20px;
  z-index: 2;
}

.dark-signal ol {
  list-style: none;
  padding-left: clamp(2rem, 5vw, 5rem);
}

.dark-signal li {
  border-top: 1px solid currentColor;
  min-height: 225px;
  padding: 1.35rem 0 4rem;
}

.dark-signal li > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dark-signal li strong {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.9rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin-top: 1.1rem;
  max-width: 22ch;
}

.dark-signal li p {
  font-size: 0.77rem;
  line-height: 1.55;
  margin-top: 1.4rem;
  max-width: 50ch;
}

/* A — Carbon Atelier */

.dark-site--carbon {
  background: var(--atelier-carbon);
  color: #f2eee5;
}

.carbon-nav {
  border-color: #50514b;
}

.carbon-hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.2fr);
  min-height: calc(100vh - 168px);
  overflow: hidden;
  position: relative;
}

.carbon-score {
  align-items: center;
  background: #1b1c19;
  border-bottom: 1px solid #4b4c46;
  display: grid;
  font-family: var(--font-geist-mono), monospace;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto auto auto 1fr;
  min-height: 82px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.carbon-score > span {
  color: #aaa9a1;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

.carbon-score > span:last-child {
  text-align: right;
}

.carbon-score strong {
  color: var(--atelier-orange);
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  font-weight: 500;
  padding: 0 clamp(2rem, 6vw, 6rem);
}

.carbon-score time {
  border-left: 1px solid #4b4c46;
  border-right: 1px solid #4b4c46;
  font-size: 0.75rem;
  padding: 0 1.7rem;
}

.carbon-hero__copy {
  align-self: center;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
  z-index: 3;
}

.carbon-hero__copy p {
  color: #cbc8bf;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2.4rem;
  max-width: 42ch;
}

.carbon-hero__copy > a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.carbon-hero__image {
  min-height: 650px;
  overflow: hidden;
  position: relative;
}

.carbon-hero__image img {
  filter: grayscale(1) contrast(1.05) brightness(0.72);
  animation: carbon-develop-image 5.2s var(--atelier-ease) infinite alternate;
}

@keyframes carbon-develop-image {
  from {
    filter: grayscale(1) contrast(0.82) brightness(0.52);
  }
  to {
    filter: grayscale(0.62) contrast(1.08) brightness(0.78);
  }
}

.carbon-develop {
  background: #5c5952;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.34;
  position: absolute;
  transform: translateY(calc(var(--atelier-scroll) * 110%));
  transition: transform 120ms linear;
}

.carbon-scan {
  background: var(--atelier-orange);
  height: 2px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 12%;
  animation: carbon-scan 4.4s var(--atelier-ease) infinite;
}

@keyframes carbon-scan {
  0%,
  12% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translateY(430px);
  }
  84%,
  100% {
    opacity: 0;
    transform: translateY(430px);
  }
}

.carbon-hero__image figcaption {
  bottom: 1rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: 1rem;
  position: absolute;
  text-transform: uppercase;
}

.carbon-instant {
  background: #d9d4ca;
  bottom: 3.8rem;
  color: #171714;
  display: grid;
  gap: 0.75rem;
  padding: 1.4rem;
  position: absolute;
  right: 3rem;
  width: 220px;
  z-index: 4;
}

.carbon-instant span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.carbon-instant strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.4rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.carbon-instant a {
  border-top: 1px solid #77756d;
  color: #9e2e20;
  font-size: 0.65rem;
  font-weight: 720;
  padding-top: 0.75rem;
}

.carbon-hero > .dark-truth {
  bottom: 1rem;
  left: clamp(1.2rem, 4vw, 4.8rem);
  position: absolute;
  z-index: 4;
}

.dark-site--carbon .dark-signal {
  background: #d8d3c9;
  color: #1a1a17;
}

.dark-site--carbon .dark-signal__intro p,
.dark-site--carbon .dark-signal li p {
  color: #55534d;
}

.dark-site--carbon .dark-signal__rail > b {
  border-color: #d8d3c9;
}

.carbon-material {
  background: #1a1b18;
  display: grid;
  grid-template-columns: 0.64fr 1.36fr;
  min-height: 90vh;
}

.carbon-material > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.carbon-material > div p {
  color: #c2c0b8;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.carbon-material figure {
  min-height: 760px;
  position: relative;
}

.carbon-material figure img {
  filter: grayscale(0.55) brightness(0.75) contrast(1.08);
}

.carbon-measure {
  background: #d8d3c9;
  color: #1a1a17;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  padding: 0.55rem;
  position: absolute;
  text-transform: uppercase;
}

.carbon-measure::after {
  background: #d8d3c9;
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: 90px;
}

.carbon-measure--one {
  left: 8%;
  top: 18%;
}

.carbon-measure--one::after {
  left: 100%;
}

.carbon-measure--two {
  bottom: 18%;
  right: 8%;
}

.carbon-measure--two::after {
  right: 100%;
}

.carbon-bout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  min-height: 85vh;
}

.carbon-bout figure {
  min-height: 720px;
}

.carbon-bout img {
  filter: grayscale(1) contrast(1.07) brightness(0.65);
}

.carbon-bout > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.carbon-bout p {
  color: #c2c0b8;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.dark-site--carbon .dark-order {
  background: #30312d;
}

/* B — Redline Nocturne */

.dark-site--nocturne {
  background: var(--atelier-nocturne);
  color: #f8eee9;
}

.nocturne-nav {
  border-color: #4b2825;
}

.nocturne-nav > span {
  font-family: var(--font-geist-mono), monospace;
  justify-self: center;
  text-transform: uppercase;
}

.nocturne-hero {
  min-height: calc(100vh - 168px);
  overflow: hidden;
  position: relative;
}

.nocturne-hero > figure {
  inset: 0;
  position: absolute;
}

.nocturne-hero figure img {
  filter: grayscale(0.7) sepia(0.2) contrast(1.1) brightness(0.52);
  transform: scale(1.03);
}

.nocturne-wash {
  background: #6f1f1a;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.52;
  position: absolute;
}

.nocturne-shutter {
  background: #130e0e;
  inset: 0;
  position: absolute;
  animation: nocturne-shutter 5.4s var(--atelier-ease) infinite;
}

@keyframes nocturne-shutter {
  0%,
  14% {
    clip-path: inset(0);
    opacity: 0.88;
  }
  48%,
  78% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.15;
  }
  100% {
    clip-path: inset(100% 0 0 0);
    opacity: 0.6;
  }
}

.nocturne-hero__copy {
  left: clamp(1.2rem, 5vw, 6rem);
  max-width: 690px;
  position: absolute;
  top: 12%;
  z-index: 3;
}

.nocturne-hero__copy h1 {
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transform: translateY(calc(var(--atelier-scroll) * -7vh));
}

.nocturne-hero__copy p {
  color: #efd0ca;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2.4rem;
  max-width: 42ch;
}

.nocturne-hero__copy > a {
  color: #fff;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.nocturne-drawer {
  background: #b94032;
  bottom: 0;
  color: #fff;
  display: grid;
  gap: 1rem;
  padding: 2rem;
  position: absolute;
  right: 5%;
  width: 310px;
  z-index: 4;
}

.nocturne-drawer span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.nocturne-drawer strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.8rem;
  line-height: 0.96;
  text-transform: uppercase;
}

.nocturne-drawer a {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.67rem;
  font-weight: 720;
  padding-top: 1rem;
}

.nocturne-time {
  align-items: center;
  background: #0f0b0b;
  bottom: 0;
  display: flex;
  font-family: var(--font-geist-mono), monospace;
  gap: 2rem;
  left: 0;
  padding: 1.4rem clamp(1.2rem, 5vw, 6rem);
  position: absolute;
  right: 0;
  width: calc(95% - 310px);
  z-index: 3;
}

.nocturne-time span {
  color: #f36b54;
  font-size: 1.1rem;
}

.nocturne-time time {
  color: #d5b3ad;
  font-size: 0.67rem;
}

.nocturne-hero > .dark-truth {
  bottom: 5rem;
  left: clamp(1.2rem, 5vw, 6rem);
  position: absolute;
  z-index: 4;
}

.dark-site--nocturne .dark-signal {
  background: #221313;
  color: #f8eee9;
  grid-template-columns: 0.58fr 1.42fr;
}

.dark-site--nocturne .dark-signal__intro p,
.dark-site--nocturne .dark-signal li p {
  color: #d4aaa3;
}

.dark-site--nocturne .dark-signal__rail {
  background: #88423a;
  color: #d5b1aa;
}

.dark-site--nocturne .dark-signal__rail > b {
  border-color: #221313;
}

.dark-signal--cross .dark-signal__sequence {
  grid-template-columns: 1fr;
}

.dark-signal--cross .dark-signal__rail {
  height: 1px;
  margin: 0;
  width: 100%;
}

.dark-signal--cross .dark-signal__rail > i {
  left: auto;
  top: -5px;
}

.dark-signal--cross .dark-signal__rail > i:nth-child(1) {
  left: 3%;
}

.dark-signal--cross .dark-signal__rail > i:nth-child(2) {
  left: 31%;
}

.dark-signal--cross .dark-signal__rail > i:nth-child(3) {
  left: 61%;
}

.dark-signal--cross .dark-signal__rail > i:nth-child(4) {
  left: 94%;
}

.dark-signal--cross .dark-signal__rail > b {
  left: calc(var(--atelier-scroll) * 94%);
  top: -10px;
  transition: left 120ms linear;
}

.dark-signal--cross ol {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
}

.dark-signal--cross li {
  min-height: 270px;
  padding: 2rem 2rem 4rem 0;
}

.dark-signal--cross li:nth-child(even) {
  padding-left: 2rem;
}

.nocturne-assembly {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  min-height: 95vh;
}

.nocturne-assembly__copy {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.nocturne-assembly__copy p {
  color: #d3aaa3;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.nocturne-assembly dl {
  border-top: 1px solid #75433e;
  margin-top: 3rem;
}

.nocturne-assembly dl > div {
  border-bottom: 1px solid #75433e;
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  padding: 0.95rem 0;
}

.nocturne-assembly dt {
  color: #bf8880;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.61rem;
  text-transform: uppercase;
}

.nocturne-assembly dd {
  font-size: 0.76rem;
}

.nocturne-assembly__image {
  min-height: 760px;
  overflow: hidden;
  position: relative;
}

.nocturne-assembly__image img {
  filter: grayscale(0.5) brightness(0.6) contrast(1.1);
  transform: scale(1.06) translateY(calc(var(--atelier-scroll) * -6%));
}

.nocturne-aperture {
  border: 1px solid #db7566;
  inset: 10%;
  position: absolute;
  transform: scale(calc(0.78 + var(--atelier-scroll) * 0.22));
}

.nocturne-bout {
  min-height: 90vh;
  overflow: hidden;
  position: relative;
}

.nocturne-bout__word {
  color: #70221d;
  font-family: var(--font-tactical), sans-serif;
  font-size: min(29vw, 26rem);
  font-weight: 780;
  left: -2vw;
  line-height: 0.7;
  position: absolute;
  top: 2%;
  transform: translateX(calc(var(--atelier-scroll) * -14vw));
  white-space: nowrap;
}

.nocturne-bout figure {
  height: 74vh;
  min-height: 620px;
  position: absolute;
  right: 0;
  top: 14%;
  width: 68%;
}

.nocturne-bout img {
  filter: grayscale(1) brightness(0.48) contrast(1.18);
}

.nocturne-bout > div:last-child {
  background: #130e0e;
  bottom: 8%;
  left: 6%;
  padding: clamp(2rem, 5vw, 5rem);
  position: absolute;
  width: 42%;
  z-index: 3;
}

.nocturne-bout > div:last-child p {
  color: #d4aaa3;
  font-size: 0.86rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.dark-site--nocturne .dark-order {
  background: #291313;
}

/* C — Black Piste */

.dark-site--blackout {
  background: var(--atelier-black);
  color: #f8f7f1;
}

.blackout-nav {
  border-color: #2d2f2a;
}

.blackout-nav > div {
  color: #a9aaa2;
  font-family: var(--font-geist-mono), monospace;
  justify-self: center;
  text-transform: uppercase;
}

.blackout-hero {
  min-height: calc(100vh - 168px);
  overflow: hidden;
  position: relative;
}

.blackout-hero__type {
  left: clamp(1.2rem, 5vw, 6rem);
  max-width: 720px;
  position: absolute;
  top: 11%;
  z-index: 4;
}

.blackout-hero__type h1 {
  max-width: 10ch;
}

.blackout-hero__type p {
  color: #c4c5bd;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2.4rem;
  max-width: 38ch;
}

.blackout-hero__type > a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.blackout-hero > figure {
  bottom: 0;
  height: 84%;
  position: absolute;
  right: 0;
  width: 68%;
}

.blackout-hero figure img {
  filter: grayscale(1) brightness(0.42) contrast(1.28);
}

.blackout-iris {
  background: #050605;
  inset: 0;
  position: absolute;
  animation: blackout-iris 5.8s var(--atelier-ease) infinite alternate;
}

@keyframes blackout-iris {
  from {
    clip-path: circle(14% at 62% 54%);
    opacity: 0.92;
  }
  to {
    clip-path: circle(72% at 62% 54%);
    opacity: 0.2;
  }
}

.blackout-beam {
  background: var(--atelier-orange);
  height: 1px;
  left: 8%;
  opacity: 0.95;
  position: absolute;
  right: 8%;
  top: 16%;
  animation: blackout-beam 4s var(--atelier-ease) infinite;
}

@keyframes blackout-beam {
  0%,
  10% {
    opacity: 0;
    transform: translateY(0);
  }
  18% {
    opacity: 1;
  }
  76% {
    opacity: 1;
    transform: translateY(500px);
  }
  88%,
  100% {
    opacity: 0;
    transform: translateY(500px);
  }
}

.blackout-hero figcaption {
  bottom: 1rem;
  color: #aeb0a7;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  position: absolute;
  right: 1rem;
  text-transform: uppercase;
}

.blackout-score {
  align-items: center;
  bottom: 0;
  display: flex;
  font-family: var(--font-geist-mono), monospace;
  gap: 1.2rem;
  left: clamp(1.2rem, 5vw, 6rem);
  position: absolute;
  z-index: 5;
}

.blackout-score span {
  color: #8d8f87;
  font-size: 0.62rem;
}

.blackout-score strong {
  color: var(--atelier-orange);
  font-size: 2.5rem;
  font-weight: 500;
}

.blackout-score i {
  background: #6d6f67;
  height: 1px;
  width: 42px;
  animation: blackout-score 1.8s ease-out infinite;
}

@keyframes blackout-score {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleX(0.45);
  }
  24% {
    background: var(--atelier-orange);
    opacity: 1;
    transform: scaleX(1);
  }
}

.blackout-instant {
  background: #f1eee5;
  bottom: 0;
  color: #11110f;
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  position: absolute;
  right: 5%;
  width: 240px;
  z-index: 5;
}

.blackout-instant strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.5rem;
  line-height: 0.92;
  text-transform: uppercase;
}

.blackout-instant a {
  border-top: 1px solid #777770;
  color: #9e2e20;
  font-size: 0.65rem;
  font-weight: 720;
  padding-top: 0.8rem;
}

.blackout-hero > .dark-truth {
  bottom: 4rem;
  left: clamp(1.2rem, 5vw, 6rem);
  position: absolute;
  z-index: 5;
}

.dark-site--blackout .dark-signal {
  background: #0b0c0a;
  color: #f6f4ed;
  grid-template-columns: 0.58fr 1.42fr;
}

.dark-site--blackout .dark-signal__intro p,
.dark-site--blackout .dark-signal li p {
  color: #b7b9b0;
}

.dark-site--blackout .dark-signal__rail {
  background: #343630;
  color: #84867f;
}

.dark-site--blackout .dark-signal__rail > b {
  border-color: #0b0c0a;
  box-shadow: 0 8px 28px rgba(240, 90, 36, 0.28);
}

.dark-signal--piste .dark-signal__sequence {
  grid-template-columns: 80px 1fr;
}

.dark-signal--piste .dark-signal__rail {
  width: 2px;
}

.dark-signal--piste li {
  min-height: 300px;
}

.blackout-detail {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  min-height: 92vh;
}

.blackout-detail figure {
  min-height: 760px;
  overflow: hidden;
  position: relative;
}

.blackout-detail img {
  filter: grayscale(1) brightness(0.5) contrast(1.2);
  transform: scale(1.04) translateY(calc(var(--atelier-scroll) * -5%));
}

.blackout-crosshair {
  border: 1px solid #a33a2d;
  height: 48%;
  left: 28%;
  position: absolute;
  top: 22%;
  width: 44%;
}

.blackout-crosshair::before,
.blackout-crosshair::after {
  background: #a33a2d;
  content: "";
  position: absolute;
}

.blackout-crosshair::before {
  height: 1px;
  left: -28%;
  right: -28%;
  top: 50%;
}

.blackout-crosshair::after {
  bottom: -22%;
  left: 50%;
  top: -22%;
  width: 1px;
}

.blackout-detail > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.blackout-detail p {
  color: #b7b9b0;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.blackout-bout {
  min-height: 90vh;
  overflow: hidden;
  position: relative;
}

.blackout-bout figure {
  inset: 0;
  position: absolute;
}

.blackout-bout img {
  filter: grayscale(1) brightness(0.36) contrast(1.3);
}

.blackout-call {
  bottom: 8%;
  left: 6%;
  max-width: 680px;
  position: absolute;
}

.blackout-call > span {
  color: rgba(240, 90, 36, 0.3);
  font-family: var(--font-geist-mono), monospace;
  font-size: min(18vw, 14rem);
  left: -2rem;
  line-height: 0.7;
  position: absolute;
  top: -6rem;
  white-space: nowrap;
}

.blackout-call h2,
.blackout-call p {
  position: relative;
  z-index: 2;
}

.blackout-call p {
  color: #c1c3ba;
  font-size: 0.88rem;
  line-height: 1.7;
  margin-top: 2rem;
  max-width: 44ch;
}

.dark-site--blackout .dark-order {
  background: #090a08;
}

/* Responsive darkness levels */

@media (max-width: 1080px) {
  .dark-switcher {
    grid-template-columns: 190px 1fr;
  }

  .dark-order {
    grid-template-columns: 1fr 1fr;
  }

  .dark-order__copy {
    grid-column: 1 / -1;
  }

  .carbon-hero {
    grid-template-columns: 0.78fr 1.22fr;
  }

  .carbon-material,
  .carbon-bout,
  .nocturne-assembly,
  .blackout-detail {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .dark-switcher {
    display: block;
    min-height: auto;
  }

  .dark-switcher__title {
    border-right: 0;
    padding: 0.62rem 0.75rem;
  }

  .dark-switcher__title span {
    display: none;
  }

  .dark-switcher__options button {
    gap: 0.25rem;
    grid-template-columns: 22px 1fr;
    min-height: 66px;
    padding: 0.55rem 0.45rem;
  }

  .dark-switcher__options button > span {
    grid-row: 1;
    height: 22px;
    width: 22px;
  }

  .dark-switcher__options strong {
    font-size: 0.65rem;
    line-height: 1.1;
  }

  .dark-switcher__options small {
    display: none;
  }

  .dark-site h1 {
    font-size: clamp(3.45rem, 15vw, 3.8rem);
    line-height: 0.88;
  }

  .dark-site h2 {
    font-size: clamp(3.2rem, 14vw, 5rem);
  }

  .dark-nav {
    column-gap: 1rem;
    grid-template-columns: 1fr auto;
    min-height: 62px;
    padding: 0 1rem;
  }

  .dark-nav > div,
  .dark-nav > span {
    display: none;
  }

  .dark-nav > a:last-child {
    white-space: nowrap;
  }

  .carbon-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .carbon-score {
    grid-template-columns: 1fr auto auto auto 1fr;
    min-height: 66px;
    order: 0;
    padding: 0 1rem;
  }

  .carbon-score strong {
    font-size: 2rem;
    padding: 0 0.65rem;
  }

  .carbon-score time {
    font-size: 0.6rem;
    padding: 0 0.6rem;
  }

  .carbon-hero__image {
    min-height: 360px;
    order: 2;
  }

  .carbon-hero__copy {
    order: 1;
    padding: 3rem 1.2rem 3.5rem;
  }

  .carbon-instant {
    bottom: 1.2rem;
    right: 1.2rem;
  }

  .carbon-hero > .dark-truth {
    bottom: 1.2rem;
    left: 1.2rem;
    max-width: calc(100% - 250px);
  }

  .dark-signal {
    display: block;
    padding: 6rem 1.2rem;
  }

  .dark-signal__intro {
    padding: 0;
    position: static;
  }

  .dark-signal__sequence {
    margin-top: 4rem;
  }

  .dark-signal ol {
    padding-left: 1.4rem;
  }

  .dark-signal li {
    min-height: 245px;
  }

  .dark-signal--cross .dark-signal__sequence {
    display: grid;
    grid-template-columns: 22px 1fr;
  }

  .dark-signal--cross .dark-signal__rail {
    height: auto;
    margin: 0 auto;
    width: 1px;
  }

  .dark-signal--cross .dark-signal__rail > i {
    left: -5px !important;
  }

  .dark-signal--cross .dark-signal__rail > i:nth-child(1) {
    top: 4%;
  }

  .dark-signal--cross .dark-signal__rail > i:nth-child(2) {
    top: 31%;
  }

  .dark-signal--cross .dark-signal__rail > i:nth-child(3) {
    top: 59%;
  }

  .dark-signal--cross .dark-signal__rail > i:nth-child(4) {
    top: 88%;
  }

  .dark-signal--cross .dark-signal__rail > b {
    left: -10px;
    top: calc(var(--atelier-scroll) * 90%);
  }

  .dark-signal--cross ol {
    display: block;
    padding-left: 1.4rem;
  }

  .dark-signal--cross li,
  .dark-signal--cross li:nth-child(even) {
    min-height: 245px;
    padding: 1.35rem 0 4rem;
  }

  .dark-signal--piste .dark-signal__sequence {
    grid-template-columns: 30px 1fr;
  }

  .dark-signal--piste li {
    min-height: 270px;
  }

  .carbon-material,
  .carbon-bout,
  .nocturne-assembly,
  .blackout-detail {
    display: block;
  }

  .carbon-material > div,
  .carbon-bout > div,
  .nocturne-assembly__copy,
  .blackout-detail > div {
    padding: 5rem 1.2rem;
  }

  .carbon-material figure,
  .carbon-bout figure,
  .nocturne-assembly__image,
  .blackout-detail figure {
    min-height: 470px;
  }

  .nocturne-hero {
    min-height: 1030px;
  }

  .nocturne-hero > figure {
    bottom: auto;
    height: 390px;
    top: 430px;
  }

  .nocturne-hero__copy {
    left: 1.2rem;
    right: 1.2rem;
    top: 2.5rem;
  }

  .nocturne-hero__copy h1 {
    transform: none;
  }

  .nocturne-drawer {
    bottom: 0;
    right: 1.2rem;
    width: 250px;
  }

  .nocturne-time {
    bottom: 0;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    width: calc(100% - 250px);
  }

  .nocturne-time span {
    font-size: 0.75rem;
  }

  .nocturne-hero > .dark-truth {
    bottom: 7.5rem;
    left: 1.2rem;
    max-width: 55%;
  }

  .nocturne-bout {
    min-height: 900px;
  }

  .nocturne-bout__word {
    font-size: 10rem;
  }

  .nocturne-bout figure {
    height: 430px;
    top: 6rem;
    width: 92%;
  }

  .nocturne-bout > div:last-child {
    bottom: 3rem;
    left: 1.2rem;
    padding: 2.5rem 1.2rem;
    width: calc(100% - 2.4rem);
  }

  .blackout-hero {
    min-height: 940px;
  }

  .blackout-hero__type {
    left: 1.2rem;
    right: 1.2rem;
    top: 3.5rem;
  }

  .blackout-hero > figure {
    bottom: 9rem;
    height: 410px;
    width: 100%;
  }

  .blackout-score {
    bottom: 1rem;
    left: 1.2rem;
  }

  .blackout-instant {
    bottom: 0;
    right: 1.2rem;
    width: 210px;
  }

  .blackout-hero > .dark-truth {
    bottom: 5.3rem;
    left: 1.2rem;
    max-width: 48%;
  }

  .blackout-bout {
    min-height: 850px;
  }

  .blackout-call {
    bottom: 4rem;
    left: 1.2rem;
    right: 1.2rem;
  }

  .dark-order {
    display: block;
    padding: 5rem 1.2rem;
  }

  .dark-order fieldset,
  .dark-order__action {
    margin-top: 3rem;
  }

  .dark-footer {
    grid-template-columns: 1fr auto;
    padding: 2.5rem 1.2rem;
  }

  .dark-footer .dark-truth {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-transition,
  .carbon-hero__image img,
  .carbon-scan,
  .nocturne-shutter,
  .blackout-iris,
  .blackout-beam,
  .blackout-score i {
    animation: none !important;
  }

  .carbon-develop,
  .nocturne-hero__copy h1,
  .nocturne-assembly__image img,
  .nocturne-aperture,
  .nocturne-bout__word,
  .blackout-detail img,
  .dark-signal__rail > b {
    transform: none !important;
  }

  .carbon-develop,
  .nocturne-shutter,
  .blackout-iris,
  .dark-signal__rail > b {
    display: none;
  }
}

/* ================================================================
   Three hybrid finalists
   Tactical storytelling × material buying × club-culture force
   ================================================================ */

:root {
  --hybrid-scroll: 0;
  --hybrid-scroll-px: 0px;
  --hybrid-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hybrid-paper: #f4f0e7;
  --hybrid-ink: #11110f;
  --hybrid-orange: #f05a24;
  --hybrid-red: #c93f2f;
  --hybrid-yellow: #f0ca4f;
  --hybrid-green: #153d31;
}

.hybrid-stage {
  background: #e8e5de;
  min-width: 320px;
  overflow: clip;
}

.hybrid-stage::before {
  background: var(--hybrid-orange);
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--hybrid-scroll));
  transform-origin: left;
  width: 100%;
  z-index: 500;
}

.hybrid-transition {
  animation: hybrid-enter 700ms var(--hybrid-ease) both;
}

@keyframes hybrid-enter {
  from {
    clip-path: inset(0 0 8% 0);
    opacity: 0.4;
    transform: translateY(24px);
  }
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }
}

.hybrid {
  min-height: 100vh;
}

.hybrid h1,
.hybrid h2 {
  text-wrap: balance;
}

.hybrid p {
  text-wrap: pretty;
}

.hybrid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hybrid-brand {
  align-items: center;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 780;
  gap: 0.7rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.hybrid-brand--inverse {
  color: #fff;
}

.hybrid-brand > span {
  display: grid;
  gap: 3px;
  width: 18px;
}

.hybrid-brand i {
  background: currentColor;
  display: block;
  height: 2px;
  transform: skewX(-28deg);
}

.hybrid-brand i:last-child {
  margin-left: 5px;
}

.hybrid-arrow {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  display: inline-block;
  height: 8px;
  margin-left: 0.55rem;
  position: relative;
  transform: rotate(45deg);
  transition: transform 260ms var(--hybrid-ease);
  width: 8px;
}

.hybrid-arrow::after {
  background: currentColor;
  content: "";
  height: 1px;
  position: absolute;
  right: -2px;
  top: 3px;
  transform: rotate(-45deg);
  transform-origin: right;
  width: 21px;
}

a:hover .hybrid-arrow,
button:hover .hybrid-arrow {
  transform: rotate(45deg) translate(4px, -4px);
}

.hybrid-truth {
  color: #5c5a54;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.61rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 72ch;
  text-transform: uppercase;
}

.hybrid-truth--inverse {
  color: #bdbdb4;
}

[data-reveal] {
  clip-path: inset(0 0 18% 0);
  opacity: 0;
  transform: translateY(38px);
  transition:
    clip-path 850ms var(--hybrid-ease),
    opacity 550ms ease-out,
    transform 850ms var(--hybrid-ease);
}

[data-reveal].is-revealed {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
}

/* Finalist selector */

.finalist-switcher {
  align-items: stretch;
  background: #f8f6f0;
  border-bottom: 1px solid #ccc9c0;
  color: #171714;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) 2.4fr;
  min-height: 96px;
  position: sticky;
  top: 0;
  z-index: 300;
}

.finalist-switcher__title {
  align-content: center;
  border-right: 1px solid #d2cfc7;
  display: grid;
  gap: 0.2rem;
  padding: 1rem clamp(1rem, 3vw, 3rem);
}

.finalist-switcher__title strong {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.finalist-switcher__title span {
  color: #6b6860;
  font-size: 0.68rem;
}

.finalist-switcher__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.finalist-switcher__options button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid #d2cfc7;
  cursor: pointer;
  display: grid;
  gap: 0.05rem 0.8rem;
  grid-template-columns: 28px 1fr;
  min-width: 0;
  padding: 0.9rem 1.15rem;
  text-align: left;
}

.finalist-switcher__options button:last-child {
  border-right: 0;
}

.finalist-switcher__options button > span {
  align-items: center;
  border: 1px solid #98958c;
  border-radius: 50%;
  display: flex;
  font-size: 0.68rem;
  grid-row: 1 / span 2;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.finalist-switcher__options strong {
  font-size: 0.82rem;
}

.finalist-switcher__options small {
  color: #6a675f;
  font-size: 0.62rem;
  line-height: 1.35;
}

.finalist-switcher__options button:hover {
  background: #eeebe4;
}

.finalist-switcher__options button.is-active {
  background: #1a1a17;
  color: #fff;
}

.finalist-switcher__options button.is-active small {
  color: #c5c3bc;
}

.finalist-switcher__options button.is-active > span {
  background: var(--hybrid-orange);
  border-color: var(--hybrid-orange);
}

/* Shared commerce */

.hybrid-buy {
  align-items: start;
  background: #eeeae1;
  color: #171714;
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: 1.1fr 0.72fr 1fr;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.hybrid-buy--inverse {
  background: #141512;
  color: #fff;
}

.hybrid-buy__heading h2 {
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.94;
  max-width: 9ch;
}

.hybrid-buy__heading p {
  font-size: 0.92rem;
  line-height: 1.65;
  margin-top: 2rem;
  max-width: 43ch;
}

.hybrid-weapons {
  border: 0;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.hybrid-weapons legend {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.hybrid-weapons button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 660;
  padding: 0.9rem 1rem;
  text-align: left;
}

.hybrid-weapons button[aria-pressed="true"] {
  background: currentColor;
  color: #fff;
}

.hybrid-buy--inverse .hybrid-weapons button[aria-pressed="true"] {
  color: #141512;
}

.hybrid-buy__action {
  display: grid;
  gap: 1rem;
}

.hybrid-buy__action > div {
  border-bottom: 1px solid currentColor;
  display: flex;
  font-size: 0.76rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.hybrid-primary-action {
  align-items: center;
  background: var(--hybrid-orange);
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.8rem;
  font-weight: 750;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 1.25rem;
}

.hybrid-buy__action > p {
  font-size: 0.68rem;
  line-height: 1.5;
  opacity: 0.72;
}

.hybrid-footer {
  align-items: center;
  background: #f8f6f0;
  border-top: 1px solid #cbc8c0;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 2.5rem clamp(1.25rem, 6vw, 7rem);
}

.hybrid-footer--inverse {
  background: #0e0f0d;
  border-color: #35362f;
  color: #fff;
}

.hybrid-footer > a:last-child {
  font-size: 0.7rem;
  justify-self: end;
}

/* A — Signal Fieldbook */

.hybrid--trace {
  background: #111310;
  color: #f7f4ec;
}

.trace-nav {
  align-items: center;
  border-bottom: 1px solid #34372f;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 70px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.trace-nav > div {
  display: flex;
  gap: 2rem;
}

.trace-nav > div a,
.trace-nav__buy {
  font-size: 0.69rem;
}

.trace-nav__buy {
  background: #f5f1e8;
  color: #111310;
  justify-self: end;
  padding: 0.9rem 1.05rem;
}

.trace-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(440px, 1.25fr);
  min-height: calc(100vh - 166px);
  overflow: hidden;
  position: relative;
}

.trace-score {
  align-items: center;
  background: #171916;
  border-bottom: 1px solid #35372f;
  display: grid;
  font-family: var(--font-geist-mono), monospace;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto auto auto 1fr;
  min-height: 84px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.trace-score > span {
  color: #9c9d95;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.trace-score > span:last-child {
  text-align: right;
}

.trace-score strong {
  color: var(--hybrid-orange);
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  padding: 0 clamp(2rem, 6vw, 7rem);
}

.trace-score time {
  border-left: 1px solid #3c3e37;
  border-right: 1px solid #3c3e37;
  font-size: 0.78rem;
  padding: 0 2rem;
}

.trace-hero__copy {
  align-self: center;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
  z-index: 2;
}

.trace-hero__copy h1 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(4.7rem, 8.3vw, 8.5rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.78;
  text-transform: uppercase;
}

.trace-hero__copy p {
  color: #c5c6be;
  font-size: 0.93rem;
  line-height: 1.65;
  margin-top: 2.7rem;
  max-width: 40ch;
}

.trace-hero__copy > a {
  color: #fff;
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 720;
  margin-top: 2rem;
}

.trace-hero__product {
  min-height: 620px;
  overflow: hidden;
  position: relative;
}

.trace-hero__product img {
  filter: contrast(1.04) saturate(0.88);
}

.trace-hero__product::after {
  border: 1px solid rgba(240, 90, 36, 0.78);
  content: "";
  inset: 9% 8%;
  pointer-events: none;
  position: absolute;
}

.trace-scan {
  background: var(--hybrid-orange);
  height: 2px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 12%;
  animation: trace-scan 4.2s var(--hybrid-ease) infinite;
}

.trace-scan::before {
  background: var(--hybrid-orange);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -4px;
  position: absolute;
  top: -4px;
  width: 10px;
}

@keyframes trace-scan {
  0%,
  12% {
    opacity: 0;
    transform: translateY(0);
  }
  18% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(420px);
  }
  82%,
  100% {
    opacity: 0;
    transform: translateY(420px);
  }
}

.trace-hero__product figcaption {
  bottom: 1.2rem;
  color: #deddd7;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.61rem;
  left: 1.4rem;
  position: absolute;
  text-transform: uppercase;
}

.trace-hero > .hybrid-truth {
  bottom: 1.2rem;
  left: clamp(1.2rem, 4vw, 4.8rem);
  position: absolute;
}

.trace-route {
  background: #f0ede4;
  color: #171714;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  padding: clamp(7rem, 13vw, 14rem) clamp(1.2rem, 6vw, 7rem);
}

.trace-route__intro {
  align-self: start;
  padding-right: clamp(2rem, 6vw, 7rem);
  position: sticky;
  top: 170px;
}

.trace-route__intro h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(3.2rem, 5vw, 5.7rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

.trace-route__intro p {
  color: #55544f;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 2rem;
  max-width: 38ch;
}

.trace-route__body {
  display: grid;
  grid-template-columns: 22px 1fr;
}

.trace-route__rail {
  background: #b8b4ab;
  margin: 0 auto;
  position: relative;
  width: 1px;
}

.trace-route__rail i {
  background: var(--hybrid-orange);
  border: 4px solid #f0ede4;
  border-radius: 50%;
  height: 18px;
  left: -9px;
  position: absolute;
  top: calc(var(--hybrid-scroll) * 92%);
  transition: top 120ms linear;
  width: 18px;
}

.trace-route ol {
  list-style: none;
  padding-left: clamp(2rem, 5vw, 5rem);
}

.trace-route li {
  border-top: 1px solid #9e9b92;
  min-height: 230px;
  padding: 1.35rem 0 4rem;
}

.trace-route li > span {
  color: #6b6861;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.trace-route li strong {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 2.8rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 1.1rem;
  max-width: 20ch;
}

.trace-route li p {
  color: #595750;
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 1.5rem;
  max-width: 47ch;
}

.trace-proof {
  background: var(--hybrid-green);
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  min-height: 90vh;
}

.trace-proof figure {
  min-height: 720px;
  overflow: hidden;
  position: relative;
}

.trace-proof figure img {
  filter: grayscale(1) contrast(1.06);
  transform: scale(1.04);
}

.trace-frame {
  border: 1px solid rgba(240, 202, 79, 0.86);
  color: #f8e9a4;
  display: grid;
  font-family: var(--font-geist-mono), monospace;
  gap: 0.35rem;
  padding: 0.7rem;
  position: absolute;
}

.trace-frame span {
  font-size: 0.56rem;
  text-transform: uppercase;
}

.trace-frame strong {
  font-size: 0.66rem;
}

.trace-frame--one {
  height: 38%;
  left: 8%;
  top: 23%;
  width: 30%;
}

.trace-frame--two {
  height: 34%;
  right: 8%;
  top: 35%;
  width: 27%;
}

.trace-proof__copy {
  align-self: center;
  padding: clamp(3rem, 6vw, 7rem);
}

.trace-proof__copy h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(3rem, 5vw, 5.8rem);
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
}

.trace-proof__copy p {
  color: #d0d8d2;
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.trace-proof__copy a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.trace-material {
  background: #111310;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  min-height: 85vh;
}

.trace-material > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.trace-material h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(3rem, 5vw, 5.6rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

.trace-material p {
  color: #bfc0b8;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.trace-material figure {
  min-height: 720px;
  position: relative;
}

.trace-material figcaption {
  bottom: 1rem;
  color: #2b2b28;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  left: 1rem;
  position: absolute;
  text-transform: uppercase;
}

/* B — Redline Atelier */

.hybrid--relay {
  background: #f5f1e8;
  color: #171714;
}

.relay-nav {
  align-items: center;
  border-bottom: 1px solid #cbc6bb;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 74px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.relay-nav > div {
  display: flex;
  gap: 2rem;
}

.relay-nav a {
  font-size: 0.68rem;
}

.relay-nav > a:last-child {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.relay-hero {
  display: grid;
  grid-template-columns: 0.8fr 1.45fr 0.55fr;
  min-height: calc(100vh - 170px);
  overflow: hidden;
  position: relative;
}

.relay-hero__copy {
  align-self: end;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.2rem, 4vw, 4.8rem);
}

.relay-hero__copy h1 {
  font-family: var(--font-commerce), Georgia, serif;
  font-size: clamp(3.6rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.91;
}

.relay-hero__copy p {
  color: #55524b;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2.4rem;
  max-width: 39ch;
}

.relay-hero__copy > a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.relay-hero__image {
  margin: clamp(3rem, 6vw, 7rem) 0;
  min-height: 660px;
  overflow: hidden;
  position: relative;
}

.relay-hero__image img {
  filter: grayscale(0.78) sepia(0.16) contrast(0.92);
  animation: relay-develop-image 4.8s var(--hybrid-ease) infinite alternate;
}

@keyframes relay-develop-image {
  from {
    filter: grayscale(1) sepia(0.45) contrast(0.72);
  }
  to {
    filter: grayscale(0.15) sepia(0) contrast(1.02);
  }
}

.relay-develop {
  background: #c54b2f;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.35;
  position: absolute;
  transform: translateY(calc(var(--hybrid-scroll) * 108%));
  transition: transform 120ms linear;
}

.relay-hero__image figcaption {
  bottom: 1rem;
  color: #4b4840;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: 1rem;
  position: absolute;
  text-transform: uppercase;
}

.relay-order {
  align-self: center;
  background: var(--hybrid-red);
  color: #fff;
  display: grid;
  gap: 1rem;
  margin-left: -2.2rem;
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.relay-order > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.relay-order strong {
  font-family: var(--font-material), var(--font-geist-sans), sans-serif;
  font-size: 2rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.relay-order p {
  font-size: 0.72rem;
  line-height: 1.5;
}

.relay-order a {
  border-top: 1px solid rgba(255, 255, 255, 0.52);
  font-size: 0.68rem;
  font-weight: 700;
  padding-top: 1rem;
}

.relay-hero > .hybrid-truth {
  bottom: 1rem;
  left: clamp(1.2rem, 4vw, 4.8rem);
  position: absolute;
}

.relay-process {
  background: #8e2d24;
  color: #fff;
  padding: clamp(7rem, 13vw, 14rem) clamp(1.2rem, 6vw, 7rem);
}

.relay-process > header {
  display: grid;
  gap: clamp(2rem, 8vw, 9rem);
  grid-template-columns: 1.4fr 0.6fr;
}

.relay-process h2 {
  font-family: var(--font-commerce), Georgia, serif;
  font-size: clamp(3.7rem, 7vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.88;
  max-width: 12ch;
}

.relay-process header p {
  align-self: end;
  color: #f0cbc4;
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 42ch;
}

.relay-stations {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  margin-top: clamp(5rem, 10vw, 11rem);
}

.relay-stations article {
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.28fr 1fr 0.7fr;
  padding: 2rem 0 4rem;
}

.relay-stations span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.relay-stations strong {
  font-size: clamp(1.7rem, 3vw, 3.3rem);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1;
}

.relay-stations p {
  color: #f0cbc4;
  font-size: 0.76rem;
  line-height: 1.55;
}

.relay-kit {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  min-height: 95vh;
}

.relay-kit__copy {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.relay-kit h2 {
  font-family: var(--font-material), var(--font-geist-sans), sans-serif;
  font-size: clamp(4rem, 7vw, 7.3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.8;
  text-transform: uppercase;
}

.relay-kit__copy > p {
  color: #57544d;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2.2rem;
}

.relay-kit dl {
  border-top: 1px solid #aaa59a;
  margin-top: 3rem;
}

.relay-kit dl > div {
  border-bottom: 1px solid #aaa59a;
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  padding: 0.9rem 0;
}

.relay-kit dt {
  color: #6b675f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.relay-kit dd {
  font-size: 0.76rem;
}

.relay-kit__figure {
  min-height: 780px;
  overflow: hidden;
  position: relative;
}

.relay-kit__figure img {
  transform: scale(1.04) translateY(calc(var(--hybrid-scroll) * -5%));
}

.relay-measure {
  background: #f4f0e7;
  border: 1px solid #44413b;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.57rem;
  padding: 0.55rem;
  position: absolute;
  text-transform: uppercase;
}

.relay-measure::after {
  background: #44413b;
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: 80px;
}

.relay-measure--a {
  left: 8%;
  top: 19%;
}

.relay-measure--a::after {
  left: 100%;
}

.relay-measure--b {
  bottom: 20%;
  right: 8%;
}

.relay-measure--b::after {
  right: 100%;
}

.relay-bout {
  background: #191916;
  color: #fff;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
}

.relay-bout figure {
  min-height: 720px;
}

.relay-bout img {
  filter: grayscale(1) contrast(1.05);
}

.relay-bout > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.relay-bout h2 {
  font-family: var(--font-commerce), Georgia, serif;
  font-size: clamp(3rem, 5vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.relay-bout p {
  color: #c8c6be;
  font-size: 0.88rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.hybrid--relay .hybrid-buy__heading h2 {
  font-family: var(--font-commerce), Georgia, serif;
  font-weight: 500;
}

/* C — Club Transmission */

.hybrid--drop {
  background: #e7dfd0;
  color: #141411;
}

.drop-nav {
  align-items: center;
  border-bottom: 2px solid #141411;
  column-gap: 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.drop-nav > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.61rem;
  justify-self: center;
  text-transform: uppercase;
}

.drop-nav > a {
  font-size: 0.7rem;
  font-weight: 720;
  justify-self: end;
}

.drop-hero {
  min-height: calc(100vh - 168px);
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
}

.drop-marquee {
  color: var(--hybrid-red);
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-size: clamp(8rem, 20vw, 22rem);
  left: -4vw;
  letter-spacing: -0.02em;
  line-height: 0.7;
  opacity: 0.98;
  position: absolute;
  top: 4vw;
  transform: translateX(calc(var(--hybrid-scroll) * -32vw));
  white-space: nowrap;
}

.drop-hero__headline {
  max-width: 42rem;
  position: relative;
  z-index: 3;
}

.drop-hero__headline h1 {
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-size: clamp(6rem, 12vw, 12rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.7;
  text-transform: uppercase;
}

.drop-hero__headline p {
  font-size: 0.92rem;
  font-weight: 580;
  line-height: 1.6;
  margin-top: 2.2rem;
  max-width: 38ch;
}

.drop-hero__headline > a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 760;
  margin-top: 1.8rem;
}

.drop-hero__image {
  bottom: -10%;
  height: 77%;
  position: absolute;
  right: 8%;
  transform: rotate(-4deg) translateY(calc(var(--hybrid-scroll) * 6vh));
  width: 54%;
  z-index: 2;
}

.drop-hero__image img {
  filter: grayscale(1) contrast(1.15);
}

.drop-hero__image::after {
  border: 6px solid #f1c94a;
  content: "";
  inset: -12px;
  pointer-events: none;
  position: absolute;
}

.drop-wipe {
  animation: drop-squeegee 4.6s var(--hybrid-ease) infinite;
  background: var(--hybrid-yellow);
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.45;
  position: absolute;
  transform-origin: left;
}

@keyframes drop-squeegee {
  0%,
  12% {
    clip-path: inset(0 100% 0 0);
  }
  48%,
  72% {
    clip-path: inset(0);
  }
  92%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}

.drop-hero__image figcaption {
  background: #f1c94a;
  bottom: -38px;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: -12px;
  padding: 0.7rem;
  position: absolute;
  text-transform: uppercase;
}

.drop-ticket {
  background: #151512;
  bottom: 7%;
  color: #fff;
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  position: absolute;
  right: 3%;
  transform: rotate(3deg);
  width: 210px;
  z-index: 4;
}

.drop-ticket > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.55rem;
}

.drop-ticket strong {
  font-family: var(--font-material), var(--font-geist-sans), sans-serif;
  font-size: 1.65rem;
  line-height: 0.9;
  text-transform: uppercase;
}

.drop-ticket a {
  border-top: 1px solid #7e7d76;
  color: var(--hybrid-yellow);
  font-size: 0.66rem;
  font-weight: 720;
  padding-top: 0.8rem;
}

.drop-hero > .hybrid-truth {
  bottom: 1.2rem;
  left: clamp(1.2rem, 4vw, 4.8rem);
  position: absolute;
  z-index: 4;
}

.drop-story {
  background: #11120f;
  color: #fff;
  padding: clamp(7rem, 12vw, 13rem) clamp(1.2rem, 6vw, 7rem);
}

.drop-story__title {
  align-items: end;
  display: grid;
  grid-template-columns: 1fr 0.45fr;
}

.drop-story h2 {
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-size: clamp(6rem, 13vw, 13rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.72;
  text-transform: uppercase;
}

.drop-story__title p {
  color: #bbbcb4;
  font-size: 0.85rem;
  line-height: 1.6;
}

.drop-beats {
  border-top: 1px solid #696b62;
  margin-top: 5rem;
}

.drop-beats article {
  align-items: start;
  border-bottom: 1px solid #696b62;
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.6fr 1fr 0.7fr;
  min-height: 210px;
  padding: 1.5rem 0 3rem;
}

.drop-beat__time {
  color: var(--hybrid-yellow);
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(1rem, 2vw, 2rem);
}

.drop-beat__score {
  align-items: center;
  color: var(--hybrid-orange);
  display: flex;
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(3rem, 7vw, 7rem);
  gap: 1.2rem;
  line-height: 0.7;
}

.drop-beat__score i {
  background: #77786f;
  height: 2px;
  width: 34px;
  animation: score-pulse 1.8s ease-out infinite;
}

@keyframes score-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleX(0.55);
  }
  25% {
    background: var(--hybrid-yellow);
    opacity: 1;
    transform: scaleX(1);
  }
}

.drop-beats strong {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

.drop-beats p {
  color: #bbbcb4;
  font-size: 0.76rem;
  line-height: 1.55;
}

.drop-product {
  background: var(--hybrid-yellow);
  display: grid;
  grid-template-columns: 0.18fr 1.25fr 0.67fr;
  min-height: 90vh;
  overflow: hidden;
  position: relative;
}

.drop-product__word {
  color: var(--hybrid-red);
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-size: clamp(14rem, 30vw, 32rem);
  left: -4vw;
  line-height: 0.7;
  position: absolute;
  top: 5%;
  transform: translateX(calc(var(--hybrid-scroll) * 12vw));
  white-space: nowrap;
}

.drop-product figure {
  grid-column: 2;
  margin: clamp(4rem, 8vw, 9rem) 0;
  min-height: 660px;
  overflow: hidden;
  position: relative;
  transform: rotate(2.5deg);
  z-index: 2;
}

.drop-product figure img {
  filter: contrast(1.08);
}

.drop-product__copy {
  align-self: center;
  background: #141411;
  color: #fff;
  margin-left: -2.5rem;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  z-index: 3;
}

.drop-product__copy h2 {
  font-family: var(--font-material), var(--font-geist-sans), sans-serif;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  letter-spacing: -0.035em;
  line-height: 0.82;
  text-transform: uppercase;
}

.drop-product__copy p {
  color: #c9c7bd;
  font-size: 0.86rem;
  line-height: 1.65;
  margin-top: 2rem;
}

.drop-product__copy a {
  color: var(--hybrid-yellow);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2rem;
}

.drop-detail {
  background: #e7dfd0;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  min-height: 85vh;
}

.drop-detail figure {
  min-height: 720px;
}

.drop-detail > div {
  align-self: center;
  padding: clamp(4rem, 7vw, 8rem);
}

.drop-detail > div > span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.61rem;
  text-transform: uppercase;
}

.drop-detail h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin-top: 2rem;
  text-transform: uppercase;
}

.drop-detail p {
  color: #535149;
  font-size: 0.88rem;
  line-height: 1.7;
  margin-top: 2rem;
}

.hybrid--drop .hybrid-buy {
  background: var(--hybrid-red);
  color: #fff;
}

.hybrid--drop .hybrid-buy__heading h2 {
  font-family: var(--font-culture), var(--font-geist-sans), sans-serif;
  font-size: clamp(4.2rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.72;
  text-transform: uppercase;
}

.hybrid--drop .hybrid-weapons button[aria-pressed="true"] {
  color: var(--hybrid-red);
}

.hybrid--drop .hybrid-primary-action {
  background: var(--hybrid-yellow);
  color: #161613;
}

/* Hybrid responsive behavior */

@media (max-width: 1080px) {
  .finalist-switcher {
    grid-template-columns: 190px 1fr;
  }

  .hybrid-buy {
    grid-template-columns: 1fr 1fr;
  }

  .hybrid-buy__heading {
    grid-column: 1 / -1;
  }

  .trace-hero,
  .relay-kit,
  .relay-bout,
  .trace-proof,
  .trace-material,
  .drop-detail {
    grid-template-columns: 1fr 1fr;
  }

  .relay-hero {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .relay-order {
    bottom: 4rem;
    margin: 0;
    position: absolute;
    right: 2rem;
    width: 230px;
  }

  .drop-product {
    grid-template-columns: 0.05fr 1.3fr 0.65fr;
  }
}

@media (max-width: 760px) {
  .finalist-switcher {
    display: block;
    min-height: auto;
  }

  .finalist-switcher__title {
    border-right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0.62rem 0.75rem;
  }

  .finalist-switcher__title span {
    display: none;
  }

  .finalist-switcher__options button {
    display: grid;
    gap: 0.28rem;
    grid-template-columns: 22px 1fr;
    min-height: 66px;
    padding: 0.55rem 0.45rem;
  }

  .finalist-switcher__options button > span {
    grid-row: 1;
    height: 22px;
    width: 22px;
  }

  .finalist-switcher__options strong {
    font-size: 0.67rem;
    line-height: 1.1;
  }

  .finalist-switcher__options small {
    display: none;
  }

  .trace-nav,
  .relay-nav,
  .drop-nav {
    column-gap: 1rem;
    grid-template-columns: 1fr auto;
    min-height: 62px;
    padding: 0 1rem;
  }

  .trace-nav > div,
  .relay-nav > div,
  .drop-nav > span {
    display: none;
  }

  .drop-nav > a {
    white-space: nowrap;
  }

  .trace-score {
    grid-template-columns: 1fr auto auto auto 1fr;
    min-height: 68px;
    padding: 0 1rem;
  }

  .trace-score strong {
    font-size: 2rem;
    padding: 0 0.7rem;
  }

  .trace-score time {
    font-size: 0.62rem;
    padding: 0 0.65rem;
  }

  .trace-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .trace-score {
    order: 0;
  }

  .trace-hero__product {
    min-height: 360px;
    order: 1;
  }

  .trace-hero__copy {
    order: 2;
    padding: 4rem 1.2rem 6rem;
  }

  .trace-hero__copy h1 {
    font-size: clamp(4.6rem, 23vw, 7.3rem);
  }

  .trace-hero > .hybrid-truth {
    bottom: 1.2rem;
    left: 1.2rem;
    max-width: calc(100% - 2.4rem);
  }

  .trace-route,
  .trace-proof,
  .trace-material,
  .relay-kit,
  .relay-bout,
  .drop-detail,
  .hybrid-buy {
    display: block;
  }

  .trace-route {
    padding: 6rem 1.2rem;
  }

  .trace-route__intro {
    padding: 0;
    position: static;
  }

  .trace-route__body {
    margin-top: 4rem;
  }

  .trace-route ol {
    padding-left: 1.4rem;
  }

  .trace-route li {
    min-height: 250px;
  }

  .trace-proof figure,
  .trace-material figure,
  .relay-kit__figure,
  .relay-bout figure,
  .drop-detail figure {
    min-height: 480px;
  }

  .trace-proof__copy,
  .trace-material > div,
  .relay-kit__copy,
  .relay-bout > div,
  .drop-detail > div {
    padding: 5rem 1.2rem;
  }

  .relay-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 5rem;
  }

  .relay-hero__copy {
    order: 2;
    padding: 4rem 1.2rem;
  }

  .relay-hero__copy h1 {
    font-size: clamp(3.6rem, 15vw, 5.4rem);
  }

  .relay-hero__image {
    margin: 0;
    min-height: 430px;
    order: 1;
  }

  .relay-order {
    bottom: auto;
    margin: -2rem 1.2rem 0;
    order: 3;
    position: relative;
    right: auto;
    width: auto;
  }

  .relay-hero > .hybrid-truth {
    bottom: 1rem;
    left: 1.2rem;
    max-width: calc(100% - 2.4rem);
  }

  .relay-process {
    padding: 6rem 1.2rem;
  }

  .relay-process > header,
  .relay-stations article {
    display: block;
  }

  .relay-process h2 {
    font-size: clamp(3.6rem, 15vw, 5.5rem);
  }

  .relay-process header p {
    margin-top: 2rem;
  }

  .relay-stations article {
    padding: 1.5rem 0 3.5rem;
  }

  .relay-stations strong,
  .relay-stations p {
    display: block;
    margin-top: 1.4rem;
  }

  .drop-hero {
    min-height: 980px;
    padding: 3.5rem 1.2rem;
  }

  .drop-marquee {
    font-size: 11rem;
    top: 7rem;
  }

  .drop-hero__headline h1 {
    font-size: clamp(5.6rem, 26vw, 8rem);
  }

  .drop-hero__headline p {
    max-width: 30ch;
  }

  .drop-hero__image {
    bottom: auto;
    height: 340px;
    right: 6%;
    top: 35rem;
    width: 76%;
  }

  .drop-ticket {
    bottom: 1.8rem;
    right: 1rem;
    width: 180px;
  }

  .drop-hero > .hybrid-truth {
    bottom: 1rem;
    left: 1rem;
    max-width: 45%;
  }

  .drop-story {
    padding: 6rem 1.2rem;
  }

  .drop-story__title,
  .drop-beats article {
    display: block;
  }

  .drop-story h2 {
    font-size: clamp(5rem, 23vw, 8rem);
  }

  .drop-story__title p {
    margin-top: 2rem;
  }

  .drop-beats article {
    min-height: 0;
    padding: 1.5rem 0 3.5rem;
  }

  .drop-beats strong,
  .drop-beats p {
    display: block;
    margin-top: 1.5rem;
  }

  .drop-product {
    display: block;
    min-height: 0;
    padding: 4rem 0;
  }

  .drop-product__word {
    font-size: 16rem;
  }

  .drop-product figure {
    margin: 2rem 1.2rem;
    min-height: 430px;
  }

  .drop-product__copy {
    margin: -3rem 0 0 2.2rem;
    padding: 3rem 1.2rem;
  }

  .hybrid-buy {
    padding: 5rem 1.2rem;
  }

  .hybrid-weapons,
  .hybrid-buy__action {
    margin-top: 3rem;
  }

  .hybrid-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 2.5rem 1.2rem;
  }

  .hybrid-footer .hybrid-truth {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hybrid-transition,
  .trace-scan,
  .relay-hero__image img,
  .drop-wipe,
  .drop-beat__score i {
    animation: none !important;
  }

  .drop-marquee,
  .drop-hero__image,
  .drop-product__word,
  .relay-develop,
  .relay-kit__figure img,
  .trace-route__rail i {
    transform: none !important;
  }

  .relay-develop {
    display: none;
  }
}

/* ================================================================
   Carbon Atelier × Redline Nocturne
   Three blended storefront refinements
   ================================================================ */

:root {
  --blend-scroll: 0;
  --blend-scroll-px: 0px;
  --blend-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --blend-carbon: #24251f;
  --blend-carbon-deep: #171814;
  --blend-night: #120d0c;
  --blend-oxblood: #4b211d;
  --blend-red: #d66d57;
  --blend-orange: #f05a24;
  --blend-paper: #eeeae1;
  --blend-white: #f6f2e9;
  --blend-ink: #151512;
}

.blend-stage {
  background: #d8d4cb;
  min-width: 320px;
  overflow: clip;
}

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

.blend-stage a {
  color: inherit;
  text-decoration: none;
}

.blend-stage a,
.blend-stage button {
  -webkit-tap-highlight-color: transparent;
}

.blend-stage a:focus-visible,
.blend-stage button:focus-visible {
  outline: 3px solid #f0a43a;
  outline-offset: -3px;
}

.blend-transition {
  animation: blend-enter 720ms var(--blend-ease) both;
}

@keyframes blend-enter {
  from {
    clip-path: inset(0 0 3.5rem 0);
    filter: saturate(0.7);
    transform: translateY(2.5rem);
  }

  to {
    clip-path: inset(0);
    filter: saturate(1);
    transform: translateY(0);
  }
}

.blend-selector {
  background: var(--blend-paper);
  border-bottom: 1px solid #a9a59b;
  color: var(--blend-ink);
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 94px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.blend-selector__title {
  align-content: center;
  border-right: 1px solid #bdb9af;
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.8rem;
}

.blend-selector__title strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.blend-selector__title span {
  color: #625f58;
  font-size: 0.68rem;
}

.blend-selector__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.blend-selector__options button {
  align-items: center;
  background: transparent;
  border: 0;
  border-right: 1px solid #c6c2b9;
  color: var(--blend-ink);
  cursor: pointer;
  display: grid;
  gap: 0.1rem 0.8rem;
  grid-template-columns: 28px 1fr;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  text-align: left;
}

.blend-selector__options button:last-child {
  border-right: 0;
}

.blend-selector__options button > span {
  align-items: center;
  border: 1px solid #77736c;
  border-radius: 50%;
  display: flex;
  font-size: 0.66rem;
  grid-row: 1 / span 2;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.blend-selector__options button strong {
  font-size: 0.82rem;
}

.blend-selector__options button small {
  color: #646158;
  font-size: 0.62rem;
}

.blend-selector__options button:hover {
  background: #dcd8cf;
}

.blend-selector__options button.is-active {
  background: var(--blend-carbon);
  color: var(--blend-white);
}

.blend-selector__options button:nth-child(2).is-active {
  background: var(--blend-night);
}

.blend-selector__options button:nth-child(3).is-active {
  background: #201b19;
}

.blend-selector__options button.is-active > span {
  background: var(--blend-orange);
  border-color: var(--blend-orange);
  color: #17110d;
}

.blend-selector__options button.is-active small {
  color: #c8c3ba;
}

.blend-site {
  background: var(--blend-carbon);
  color: var(--blend-white);
  font-family: var(--font-geist-sans), sans-serif;
  min-height: 100vh;
}

.blend-site h1,
.blend-site h2,
.blend-site h3,
.blend-site p,
.blend-site figure,
.blend-site dl,
.blend-site dd {
  margin: 0;
}

.blend-site h1,
.blend-site h2 {
  font-family: var(--font-tactical), sans-serif;
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-wrap: balance;
}

.blend-site h1 {
  font-size: clamp(4.5rem, 7.8vw, 6rem);
  max-width: 8ch;
  text-transform: uppercase;
}

.blend-site h2 {
  font-size: clamp(3rem, 5.4vw, 5rem);
}

.blend-site p {
  font-size: 0.92rem;
  line-height: 1.7;
}

.blend-site img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.blend-brand {
  align-items: center;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 760;
  gap: 0.7rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.blend-brand > span {
  display: grid;
  gap: 3px;
  width: 19px;
}

.blend-brand i {
  background: currentColor;
  display: block;
  height: 2px;
  transform: skewX(-28deg);
}

.blend-brand i:last-child {
  margin-left: 5px;
}

.blend-arrow {
  border-bottom: 1px solid currentColor;
  display: inline-block;
  height: 7px;
  margin-left: 0.5rem;
  position: relative;
  transition: width 220ms var(--blend-ease);
  width: 28px;
}

.blend-arrow::after {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
  height: 6px;
  position: absolute;
  right: 0;
  top: 3px;
  transform: rotate(45deg);
  width: 6px;
}

a:hover .blend-arrow,
button:hover .blend-arrow {
  width: 38px;
}

.blend-nav {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
  z-index: 8;
}

.blend-nav > div {
  align-items: center;
  display: flex;
  gap: 2rem;
}

.blend-nav a,
.blend-nav span {
  font-size: 0.66rem;
}

.blend-nav > div span {
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blend-nav > a:last-child {
  justify-self: end;
}

.blend-truth {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem !important;
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1.45 !important;
  max-width: 58ch;
  text-transform: uppercase;
}

.blend-score {
  align-items: center;
  border-bottom: 1px solid #45463f;
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  min-height: 102px;
  padding: 0 clamp(1.2rem, 4vw, 4.8rem);
}

.blend-score span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

.blend-score span:last-child {
  text-align: right;
}

.blend-score strong {
  color: var(--blend-orange);
  font-family: var(--font-geist-mono), monospace;
  font-size: clamp(2.7rem, 4.2vw, 4.5rem);
  font-weight: 500;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

.blend-score time {
  border-left: 1px solid #55564f;
  border-right: 1px solid #55564f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.68rem;
  padding: 0 2rem;
}

.blend-score--compact {
  border: 0;
  min-height: 58px;
  padding: 0;
}

.blend-score--compact strong {
  font-size: 1.5rem;
  padding: 0 0.8rem;
}

.blend-score--compact time {
  font-size: 0.56rem;
  padding: 0 0.8rem;
}

[data-blend-reveal] {
  clip-path: inset(0 0 12% 0);
  opacity: 0.72;
  transform: translateY(1.8rem);
  transition:
    clip-path 800ms var(--blend-ease),
    opacity 650ms var(--blend-ease),
    transform 800ms var(--blend-ease);
}

[data-blend-reveal].is-visible {
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}

/* Shared signal path */

.blend-signal {
  background: var(--blend-paper);
  color: var(--blend-ink);
  min-height: 920px;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.blend-signal__intro {
  max-width: 48rem;
}

.blend-signal__intro h2 {
  max-width: 9ch;
}

.blend-signal__intro p {
  color: #57544e;
  margin-top: 2rem;
  max-width: 54ch;
}

.blend-signal__sequence {
  position: relative;
}

.blend-signal ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blend-signal li {
  border-top: 1px solid #8c887f;
  padding: 1.5rem 0 4.5rem;
}

.blend-signal li > span {
  color: #6a665f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.blend-signal li strong {
  display: block;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.12;
  margin-top: 1rem;
  max-width: 23ch;
}

.blend-signal li p {
  color: #5a5750;
  font-size: 0.82rem;
  margin-top: 1rem;
  max-width: 46ch;
}

.blend-signal__rail {
  background: #a39f96;
  position: relative;
}

.blend-signal__rail i,
.blend-signal__rail b {
  background: var(--blend-paper);
  border: 1px solid #4a4741;
  border-radius: 50%;
  display: block;
  height: 11px;
  position: absolute;
  width: 11px;
}

.blend-signal__rail b {
  background: var(--blend-orange);
  border-color: var(--blend-orange);
  box-shadow: 0 4px 14px rgba(130, 38, 8, 0.28);
  height: 21px;
  transition:
    left 120ms linear,
    top 120ms linear;
  width: 21px;
}

.blend-signal--ledger {
  display: grid;
  gap: clamp(4rem, 9vw, 10rem);
  grid-template-columns: 0.82fr 1.18fr;
}

.blend-signal--ledger .blend-signal__intro {
  align-self: start;
  position: sticky;
  top: 9rem;
}

.blend-signal--ledger .blend-signal__sequence {
  display: grid;
  gap: 2rem;
  grid-template-columns: 24px 1fr;
}

.blend-signal--ledger .blend-signal__rail {
  height: calc(100% - 4rem);
  margin-top: 1rem;
  width: 1px;
}

.blend-signal--ledger .blend-signal__rail i {
  left: -5px;
}

.blend-signal--ledger .blend-signal__rail i:nth-child(1) {
  top: 0;
}

.blend-signal--ledger .blend-signal__rail i:nth-child(2) {
  top: 31%;
}

.blend-signal--ledger .blend-signal__rail i:nth-child(3) {
  top: 63%;
}

.blend-signal--ledger .blend-signal__rail i:nth-child(4) {
  top: 96%;
}

.blend-signal--ledger .blend-signal__rail b {
  left: -10px;
  top: calc(var(--blend-scroll) * 90%);
}

.blend-signal--ledger li {
  min-height: 235px;
}

.blend-signal--horizon {
  min-height: 760px;
}

.blend-signal--horizon .blend-signal__sequence {
  margin-top: clamp(5rem, 10vw, 9rem);
}

.blend-signal--horizon .blend-signal__rail {
  height: 1px;
  width: 100%;
}

.blend-signal--horizon .blend-signal__rail i {
  top: -5px;
}

.blend-signal--horizon .blend-signal__rail i:nth-child(1) {
  left: 0;
}

.blend-signal--horizon .blend-signal__rail i:nth-child(2) {
  left: 33%;
}

.blend-signal--horizon .blend-signal__rail i:nth-child(3) {
  left: 66%;
}

.blend-signal--horizon .blend-signal__rail i:nth-child(4) {
  left: calc(100% - 11px);
}

.blend-signal--horizon .blend-signal__rail b {
  left: calc(var(--blend-scroll) * 94%);
  top: -10px;
}

.blend-signal--horizon ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.5rem;
}

.blend-signal--horizon li {
  border-top: 0;
  min-height: 270px;
  padding: 1.5rem 2.5rem 3rem 0;
}

.blend-signal--relay {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: 0.9fr 1.1fr;
}

.blend-signal--relay .blend-signal__intro {
  align-self: center;
}

.blend-signal--relay .blend-signal__sequence {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
}

.blend-signal--relay .blend-signal__rail {
  grid-column: 2;
  grid-row: 1;
  height: calc(100% - 3rem);
  margin-top: 1.5rem;
  width: 1px;
}

.blend-signal--relay .blend-signal__rail i {
  left: -5px;
}

.blend-signal--relay .blend-signal__rail i:nth-child(1) {
  top: 0;
}

.blend-signal--relay .blend-signal__rail i:nth-child(2) {
  top: 32%;
}

.blend-signal--relay .blend-signal__rail i:nth-child(3) {
  top: 65%;
}

.blend-signal--relay .blend-signal__rail i:nth-child(4) {
  top: 97%;
}

.blend-signal--relay .blend-signal__rail b {
  left: -10px;
  top: calc(var(--blend-scroll) * 91%);
}

.blend-signal--relay ol {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 1fr 30px 1fr;
}

.blend-signal--relay li {
  min-height: 235px;
}

.blend-signal--relay li:nth-child(odd) {
  grid-column: 1;
  padding-right: 2.5rem;
}

.blend-signal--relay li:nth-child(even) {
  grid-column: 3;
  padding-left: 2.5rem;
}

.blend-signal--relay li:nth-child(2) {
  grid-row: 1;
  margin-top: 9rem;
}

.blend-signal--relay li:nth-child(3) {
  grid-row: 2;
}

.blend-signal--relay li:nth-child(4) {
  grid-row: 2;
  margin-top: 9rem;
}

/* Shared commerce */

.blend-order {
  align-items: start;
  background: #10110e;
  color: var(--blend-white);
  display: grid;
  gap: clamp(2rem, 6vw, 7rem);
  grid-template-columns: 1.05fr 0.68fr 1fr;
  padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 6vw, 7rem);
}

.blend-order__copy h2 {
  max-width: 10ch;
}

.blend-order__copy p {
  color: #c8c3ba;
  margin-top: 2rem;
  max-width: 46ch;
}

.blend-order fieldset {
  border: 0;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.blend-order legend {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.blend-order fieldset button {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 680;
  padding: 0.95rem 1rem;
  text-align: left;
}

.blend-order fieldset button[aria-pressed="true"] {
  background: var(--blend-paper);
  color: var(--blend-ink);
}

.blend-order__action {
  display: grid;
  gap: 1rem;
}

.blend-order__price {
  border-bottom: 1px solid currentColor;
  display: flex;
  font-size: 0.76rem;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.blend-primary-action {
  align-items: center;
  background: var(--blend-orange);
  border: 0;
  border-radius: 0;
  color: #17110d;
  cursor: pointer;
  display: flex;
  font-size: 0.8rem;
  font-weight: 760;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 1.2rem;
  text-align: left;
}

.blend-checkout {
  border: 1px solid currentColor;
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.blend-checkout[hidden] {
  display: none;
}

.blend-checkout span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.blend-checkout strong {
  font-size: 0.94rem;
}

.blend-checkout p,
.blend-order__action > p {
  color: #bdb8af;
  font-size: 0.67rem;
  line-height: 1.5;
}

.blend-footer {
  align-items: center;
  background: #10110e;
  border-top: 1px solid #393a35;
  color: var(--blend-white);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 2.5rem clamp(1.25rem, 6vw, 7rem);
}

.blend-footer > a:last-child {
  font-size: 0.67rem;
  justify-self: end;
}

/* A — Redline Carbon */

.blend-site--redcarbon {
  background: var(--blend-carbon);
}

.redcarbon-hero {
  display: grid;
  grid-template-columns: 42% 58%;
  grid-template-rows: auto minmax(720px, calc(100svh - 166px));
  min-height: 900px;
  position: relative;
}

.redcarbon-hero > .blend-score {
  grid-column: 1 / -1;
}

.redcarbon-hero__copy {
  align-content: center;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  padding: clamp(4rem, 7vw, 8rem) clamp(2rem, 5vw, 5rem);
}

.redcarbon-hero__copy p {
  color: #cbc7bd;
  margin-top: 2.6rem;
  max-width: 43ch;
}

.redcarbon-hero__copy > a {
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2.6rem;
}

.redcarbon-hero__product {
  grid-column: 2;
  grid-row: 2;
  min-height: 720px;
  overflow: hidden;
  position: relative;
}

.redcarbon-hero__product img {
  filter: grayscale(1) contrast(1.04) brightness(0.72);
}

.redcarbon-hero__product figcaption {
  bottom: 1rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: 1rem;
  letter-spacing: 0.04em;
  position: absolute;
  text-transform: uppercase;
  z-index: 4;
}

.redcarbon-develop {
  background: rgba(74, 33, 29, 0.6);
  inset: 0;
  mix-blend-mode: color;
  position: absolute;
  transform: translateX(calc((1 - var(--blend-scroll)) * 100%));
  transition: transform 120ms linear;
  z-index: 2;
}

.redcarbon-scan {
  background: var(--blend-orange);
  height: 1px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 32%;
  animation: redcarbon-scan 4.8s var(--blend-ease) infinite alternate;
  z-index: 3;
}

@keyframes redcarbon-scan {
  0% {
    top: 28%;
  }

  100% {
    top: 72%;
  }
}

.redcarbon-drawer {
  background: var(--blend-red);
  bottom: 0;
  color: #17110d;
  display: grid;
  gap: 1.2rem;
  padding: 2rem;
  position: absolute;
  right: 0;
  width: min(310px, 28vw);
  z-index: 5;
}

.redcarbon-drawer span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.redcarbon-drawer strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.75rem;
  line-height: 0.94;
  text-transform: uppercase;
}

.redcarbon-drawer a {
  border-top: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 720;
  padding-top: 1rem;
}

.redcarbon-hero > .blend-truth {
  bottom: 1.5rem;
  left: clamp(2rem, 5vw, 5rem);
  max-width: calc(42% - 5rem);
  position: absolute;
}

.redcarbon-material {
  background: var(--blend-paper);
  color: var(--blend-ink);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 820px;
}

.redcarbon-material > div {
  align-content: center;
  display: grid;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 6vw, 7rem);
}

.redcarbon-material > div p {
  color: #5a5750;
  margin-top: 2rem;
  max-width: 44ch;
}

.redcarbon-material dl {
  border-top: 1px solid #8e8a81;
  margin-top: 3.5rem;
}

.redcarbon-material dl > div {
  border-bottom: 1px solid #8e8a81;
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.5fr 1fr;
  padding: 1rem 0;
}

.redcarbon-material dt {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.redcarbon-material dd {
  font-size: 0.78rem;
}

.redcarbon-material figure {
  min-height: 820px;
  overflow: hidden;
  position: relative;
}

.redcarbon-material figure img {
  filter: grayscale(0.72) sepia(0.12);
}

.redcarbon-material figure span {
  background: var(--blend-red);
  bottom: 2rem;
  color: #17110d;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.62rem;
  left: 0;
  padding: 1rem 1.3rem;
  position: absolute;
  text-transform: uppercase;
}

.redcarbon-bout {
  background: var(--blend-oxblood);
  display: grid;
  grid-template-columns: 1.24fr 0.76fr;
  min-height: 760px;
}

.redcarbon-bout figure {
  min-height: 760px;
  overflow: hidden;
}

.redcarbon-bout figure img {
  filter: saturate(0.75) contrast(1.05);
}

.redcarbon-bout > div {
  align-content: end;
  display: grid;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 5vw, 5rem);
}

.redcarbon-bout > div p {
  color: #d4c4bd;
  margin-top: 2rem;
  max-width: 40ch;
}

.blend-site--redcarbon .blend-order {
  background: var(--blend-carbon-deep);
}

/* B — Night Fieldbook */

.blend-site--fieldbook {
  background: var(--blend-night);
}

.fieldbook-hero {
  min-height: max(900px, calc(100svh - 166px));
  overflow: hidden;
  position: relative;
}

.fieldbook-hero > figure {
  inset: 0;
  position: absolute;
}

.fieldbook-hero > figure img {
  filter: grayscale(0.62) contrast(1.08) brightness(0.64);
}

.fieldbook-wash {
  background: rgba(69, 29, 25, 0.52);
  inset: 0;
  mix-blend-mode: multiply;
  position: absolute;
}

.fieldbook-shutter {
  background: rgba(238, 234, 225, 0.12);
  bottom: 0;
  position: absolute;
  top: 0;
  width: 28%;
  animation: fieldbook-shutter 6.5s var(--blend-ease) infinite alternate;
}

@keyframes fieldbook-shutter {
  0% {
    left: -24%;
  }

  100% {
    left: 96%;
  }
}

.fieldbook-hero__type {
  left: clamp(1.5rem, 5vw, 5rem);
  position: absolute;
  top: clamp(5rem, 9vw, 8rem);
  z-index: 4;
}

.fieldbook-hero__type h1 {
  max-width: 9ch;
}

.fieldbook-hero__type p {
  color: #e1d3cd;
  margin-top: 2.5rem;
  max-width: 44ch;
}

.fieldbook-hero__type > a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2.5rem;
}

.fieldbook-ledger {
  background: var(--blend-paper);
  bottom: 0;
  color: var(--blend-ink);
  left: 0;
  padding: 0.8rem clamp(1.5rem, 5vw, 5rem) 1rem;
  position: absolute;
  width: 58%;
  z-index: 5;
}

.fieldbook-ledger > span {
  display: block;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.54rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fieldbook-dock {
  background: var(--blend-red);
  bottom: 0;
  color: #17110d;
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 115px;
  padding: 1.4rem clamp(1.5rem, 4vw, 4rem);
  position: absolute;
  right: 0;
  width: 42%;
  z-index: 6;
}

.fieldbook-dock div {
  align-content: center;
  display: grid;
  gap: 0.35rem;
}

.fieldbook-dock span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.fieldbook-dock strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.fieldbook-dock a {
  align-self: center;
  border-bottom: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 720;
  padding-bottom: 0.35rem;
}

.fieldbook-hero > .blend-truth {
  bottom: 8.5rem;
  left: clamp(1.5rem, 5vw, 5rem);
  position: absolute;
  z-index: 5;
}

.fieldbook-detail {
  background: var(--blend-oxblood);
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  min-height: 830px;
}

.fieldbook-detail figure {
  min-height: 830px;
  overflow: hidden;
  position: relative;
}

.fieldbook-detail figure img {
  filter: grayscale(0.42) contrast(1.08);
  transform: scale(calc(1.06 - var(--blend-scroll) * 0.04));
}

.fieldbook-aperture {
  border: 1px solid rgba(240, 90, 36, 0.8);
  height: 38%;
  left: 31%;
  position: absolute;
  top: 29%;
  transform: scale(calc(0.74 + var(--blend-scroll) * 0.26));
  width: 38%;
}

.fieldbook-aperture::before,
.fieldbook-aperture::after {
  background: var(--blend-orange);
  content: "";
  position: absolute;
}

.fieldbook-aperture::before {
  height: 1px;
  left: -45%;
  right: -45%;
  top: 50%;
}

.fieldbook-aperture::after {
  bottom: -45%;
  left: 50%;
  top: -45%;
  width: 1px;
}

.fieldbook-detail > div {
  align-content: center;
  display: grid;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 5vw, 5rem);
}

.fieldbook-detail > div p {
  color: #d1c1ba;
  margin-top: 2rem;
  max-width: 42ch;
}

.fieldbook-index {
  border-top: 1px solid #8a5e55;
  display: grid;
  margin-top: 3.5rem;
}

.fieldbook-index span {
  border-bottom: 1px solid #8a5e55;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.64rem;
  padding: 0.9rem 0;
  text-transform: uppercase;
}

.fieldbook-bout {
  background: #0f0c0b;
  min-height: 880px;
  overflow: hidden;
  position: relative;
}

.fieldbook-bout figure {
  height: 650px;
  left: 12%;
  overflow: hidden;
  position: absolute;
  top: 7rem;
  width: 72%;
}

.fieldbook-bout figure img {
  filter: saturate(0.72) contrast(1.08);
}

.fieldbook-bout__score {
  color: rgba(184, 74, 56, 0.56);
  font-family: var(--font-tactical), sans-serif;
  font-size: clamp(9rem, 22vw, 23rem);
  font-weight: 760;
  left: -1rem;
  letter-spacing: -0.04em;
  line-height: 0.8;
  position: absolute;
  top: 2rem;
  white-space: nowrap;
  transform: translateX(calc(var(--blend-scroll-px) * -0.12));
}

.fieldbook-bout > div:last-child {
  background: var(--blend-paper);
  bottom: 0;
  color: var(--blend-ink);
  padding: 3.5rem;
  position: absolute;
  right: 0;
  width: min(520px, 42vw);
}

.fieldbook-bout > div:last-child p {
  color: #5c5851;
  margin-top: 1.5rem;
}

.blend-site--fieldbook .blend-order {
  background: var(--blend-night);
}

/* C — Atelier Relay */

.blend-site--relay {
  background: #201b19;
}

.relayblend-hero {
  display: grid;
  grid-template-columns: 0.82fr 1.3fr 0.62fr;
  grid-template-rows: 1fr auto;
  min-height: max(900px, calc(100svh - 166px));
  overflow: hidden;
  position: relative;
}

.relayblend-hero__title {
  align-content: start;
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4.5rem);
  z-index: 5;
}

.relayblend-hero__title h1 {
  max-width: 8ch;
}

.relayblend-hero__title a {
  font-size: 0.72rem;
  font-weight: 720;
  margin-top: 2.3rem;
  width: fit-content;
}

.relayblend-hero__product {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  min-height: 900px;
  overflow: hidden;
  position: relative;
}

.relayblend-hero__product img {
  filter: grayscale(0.75) contrast(1.08) brightness(0.68);
}

.relayblend-exposure {
  background: rgba(92, 38, 31, 0.64);
  inset: 0;
  mix-blend-mode: color;
  position: absolute;
  transform: translateY(calc((1 - var(--blend-scroll)) * 42%));
}

.relayblend-beam {
  background: var(--blend-orange);
  bottom: 13%;
  height: 1px;
  left: 6%;
  position: absolute;
  right: 6%;
  animation: relayblend-beam 4.2s var(--blend-ease) infinite alternate;
}

@keyframes relayblend-beam {
  from {
    left: 6%;
    right: 48%;
  }

  to {
    left: 48%;
    right: 6%;
  }
}

.relayblend-index {
  align-content: center;
  background: var(--blend-red);
  color: #17110d;
  display: grid;
  gap: 0;
  grid-column: 3;
  grid-row: 1;
  margin: 4rem 0 10rem;
  padding: 2rem;
  position: relative;
  z-index: 6;
}

.relayblend-index span {
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.relayblend-index strong {
  border-top: 1px solid currentColor;
  font-size: 0.78rem;
  padding: 0.9rem 0;
}

.relayblend-index a {
  border-top: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 720;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
}

.relayblend-hero__copy {
  align-content: end;
  background: var(--blend-paper);
  color: var(--blend-ink);
  display: grid;
  gap: 2.5rem;
  grid-column: 1;
  grid-row: 2;
  min-height: 245px;
  padding: 2.5rem clamp(1.5rem, 4vw, 4.5rem);
  position: relative;
  z-index: 7;
}

.relayblend-hero__copy p:first-child {
  max-width: 40ch;
}

.relayblend-hero > .blend-score {
  bottom: 0;
  grid-column: 2 / 4;
  left: calc(100% * 0.82 / 2.74);
  min-height: 84px;
  padding: 0 2rem;
  position: absolute;
  right: 0;
  z-index: 8;
}

.relayblend-components {
  background: var(--blend-paper);
  color: var(--blend-ink);
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  grid-template-rows: auto auto;
  min-height: 920px;
}

.relayblend-components > div:first-child {
  align-content: center;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 5vw, 5rem);
}

.relayblend-components > div:first-child p {
  color: #5a5750;
  margin-top: 2rem;
}

.relayblend-components__detail {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 920px;
  overflow: hidden;
  position: relative;
}

.relayblend-components__detail img {
  filter: grayscale(0.55) sepia(0.08);
}

.relayblend-components__detail span {
  background: var(--blend-red);
  bottom: 2rem;
  color: #17110d;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: 0;
  padding: 1rem 1.25rem;
  position: absolute;
  text-transform: uppercase;
}

.relayblend-components__list {
  align-content: end;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  padding: 0 clamp(2rem, 5vw, 5rem) 5rem;
}

.relayblend-components__list span {
  border-top: 1px solid #8e8a81;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  padding-top: 0.8rem;
  text-transform: uppercase;
}

.relayblend-components__list strong {
  font-size: 0.9rem;
  padding: 0.5rem 0 1.2rem;
}

.relayblend-bout {
  background: var(--blend-oxblood);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  min-height: 820px;
  overflow: hidden;
}

.relayblend-bout > div {
  align-content: end;
  display: grid;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 5vw, 5rem);
}

.relayblend-bout > div p {
  color: #d7c6bf;
  margin-top: 2rem;
}

.relayblend-bout figure {
  min-height: 820px;
  overflow: hidden;
  position: relative;
}

.relayblend-bout figure img {
  filter: saturate(0.65) contrast(1.08);
}

.relayblend-gate {
  background: var(--blend-night);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(calc(var(--blend-scroll) * -100%));
  transition: transform 120ms linear;
  width: 42%;
}

.blend-site--relay .blend-order {
  background: #171311;
}

/* Responsive Carbon × Redline blends */

@media (max-width: 1080px) {
  .blend-selector {
    grid-template-columns: 195px 1fr;
  }

  .blend-order {
    grid-template-columns: 1fr 1fr;
  }

  .blend-order__copy {
    grid-column: 1 / -1;
  }

  .redcarbon-hero {
    grid-template-columns: 45% 55%;
  }

  .redcarbon-material,
  .fieldbook-detail,
  .relayblend-components {
    grid-template-columns: 1fr 1fr;
  }

  .relayblend-hero {
    grid-template-columns: 0.92fr 1.18fr 0.72fr;
  }
}

@media (max-width: 760px) {
  .blend-selector {
    display: block;
    min-height: auto;
  }

  .blend-selector__title {
    border-right: 0;
    padding: 0.62rem 0.75rem;
  }

  .blend-selector__title span {
    display: none;
  }

  .blend-selector__options button {
    gap: 0.2rem;
    grid-template-columns: 22px 1fr;
    min-height: 66px;
    padding: 0.55rem 0.45rem;
  }

  .blend-selector__options button > span {
    grid-row: 1;
    height: 22px;
    width: 22px;
  }

  .blend-selector__options button strong {
    font-size: 0.64rem;
    line-height: 1.1;
  }

  .blend-selector__options button small {
    display: none;
  }

  .blend-site h1 {
    font-size: clamp(3.45rem, 15vw, 3.8rem);
    line-height: 0.88;
  }

  .blend-site h2 {
    font-size: clamp(3rem, 13vw, 4.3rem);
  }

  .blend-nav {
    column-gap: 1rem;
    grid-template-columns: 1fr auto;
    min-height: 62px;
    padding: 0 1rem;
  }

  .blend-nav > div {
    display: none;
  }

  .blend-nav > a:last-child {
    white-space: nowrap;
  }

  .blend-score {
    min-height: 66px;
    padding: 0 1rem;
  }

  .blend-score strong {
    font-size: 2rem;
    padding: 0 0.65rem;
  }

  .blend-score time {
    font-size: 0.58rem;
    padding: 0 0.55rem;
  }

  .blend-signal {
    display: block;
    min-height: 0;
    padding: 6rem 1.2rem;
  }

  .blend-signal__intro {
    position: static !important;
  }

  .blend-signal__sequence {
    display: grid !important;
    grid-template-columns: 24px 1fr !important;
    margin-top: 4rem !important;
  }

  .blend-signal__rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: calc(100% - 4rem) !important;
    margin: 1rem auto 0 !important;
    width: 1px !important;
  }

  .blend-signal__rail i {
    left: -5px !important;
    top: auto !important;
  }

  .blend-signal__rail i:nth-child(1) {
    top: 0 !important;
  }

  .blend-signal__rail i:nth-child(2) {
    top: 31% !important;
  }

  .blend-signal__rail i:nth-child(3) {
    top: 63% !important;
  }

  .blend-signal__rail i:nth-child(4) {
    top: 96% !important;
  }

  .blend-signal__rail b {
    left: -10px !important;
    top: calc(var(--blend-scroll) * 90%) !important;
  }

  .blend-signal ol {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-left: 1.2rem;
  }

  .blend-signal li,
  .blend-signal--relay li:nth-child(odd),
  .blend-signal--relay li:nth-child(even) {
    margin: 0 !important;
    min-height: 235px;
    padding: 1.4rem 0 4rem !important;
  }

  .blend-order {
    display: block;
    padding: 5rem 1.2rem;
  }

  .blend-order fieldset,
  .blend-order__action {
    margin-top: 3rem;
  }

  .blend-footer {
    grid-template-columns: 1fr auto;
    padding: 2.5rem 1.2rem;
  }

  .blend-footer .blend-truth {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .redcarbon-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .redcarbon-hero > .blend-score {
    order: 0;
  }

  .redcarbon-hero__copy {
    display: contents;
  }

  .redcarbon-hero__copy h1 {
    order: 1;
    padding: 3rem 1.2rem 0;
  }

  .redcarbon-hero__copy p {
    background: var(--blend-carbon);
    margin: 0;
    order: 3;
    padding: 3rem 1.2rem;
  }

  .redcarbon-hero__copy > a {
    margin: 1.8rem 1.2rem 3rem;
    order: 1;
    width: fit-content;
  }

  .redcarbon-hero__product {
    min-height: 390px;
    order: 2;
  }

  .redcarbon-drawer {
    bottom: 1rem;
    right: 1rem;
    width: 220px;
  }

  .redcarbon-hero > .blend-truth {
    bottom: 1.1rem;
    left: 1rem;
    max-width: calc(100% - 250px);
  }

  .redcarbon-material,
  .redcarbon-bout,
  .fieldbook-detail,
  .relayblend-components,
  .relayblend-bout {
    display: block;
    min-height: 0;
  }

  .redcarbon-material > div,
  .redcarbon-bout > div,
  .fieldbook-detail > div,
  .relayblend-components > div:first-child,
  .relayblend-bout > div {
    padding: 5rem 1.2rem;
  }

  .redcarbon-material figure,
  .redcarbon-bout figure,
  .fieldbook-detail figure,
  .relayblend-components__detail,
  .relayblend-bout figure {
    min-height: 470px;
  }

  .fieldbook-hero {
    min-height: 930px;
  }

  .fieldbook-hero__type {
    left: 1.2rem;
    right: 1.2rem;
    top: 2.5rem;
  }

  .fieldbook-hero > figure {
    bottom: auto;
    height: 430px;
    top: 420px;
  }

  .fieldbook-ledger {
    bottom: 0;
    padding: 0.6rem 1rem;
    width: 58%;
  }

  .fieldbook-dock {
    min-height: 104px;
    padding: 1rem;
    width: 42%;
  }

  .fieldbook-dock {
    display: block;
  }

  .fieldbook-dock a {
    display: block;
    margin-top: 0.75rem;
  }

  .fieldbook-hero > .blend-truth {
    bottom: 7.5rem;
    left: 1.2rem;
    max-width: 52%;
  }

  .fieldbook-bout {
    min-height: 850px;
  }

  .fieldbook-bout figure {
    height: 430px;
    left: 0;
    top: 8rem;
    width: 92%;
  }

  .fieldbook-bout__score {
    font-size: 10rem;
  }

  .fieldbook-bout > div:last-child {
    bottom: 2rem;
    padding: 2.5rem 1.2rem;
    width: calc(100% - 1.2rem);
  }

  .relayblend-hero {
    display: block;
    min-height: 970px;
    position: relative;
  }

  .relayblend-hero__title {
    padding: 3.5rem 1.2rem 2rem;
    position: relative;
  }

  .relayblend-hero__product {
    height: 430px;
    min-height: 0;
    position: relative;
  }

  .relayblend-index {
    bottom: 155px;
    margin: 0;
    padding: 1.2rem;
    position: absolute;
    right: 1rem;
    width: 190px;
  }

  .relayblend-index strong {
    padding: 0.55rem 0;
  }

  .relayblend-hero__copy {
    min-height: 230px;
    padding: 2rem 1.2rem;
  }

  .relayblend-hero > .blend-score {
    bottom: 0;
    left: 0;
    min-height: 66px;
    position: absolute;
    right: 0;
  }

  .relayblend-components__detail {
    min-height: 500px;
  }

  .relayblend-components__list {
    padding: 0 1.2rem 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blend-transition,
  .redcarbon-scan,
  .fieldbook-shutter,
  .relayblend-beam {
    animation: none !important;
  }

  [data-blend-reveal],
  .redcarbon-develop,
  .fieldbook-detail figure img,
  .fieldbook-aperture,
  .fieldbook-bout__score,
  .relayblend-exposure,
  .relayblend-gate {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .blend-signal__rail b,
  .redcarbon-scan,
  .fieldbook-shutter,
  .relayblend-beam {
    display: none !important;
  }
}

/* ================================================================
   Carbon Atelier — restored original with commissioning motion
   ================================================================ */

:root {
  --carbon-signal-progress: 0;
}

.carbon-original-stage .carbon-hero {
  min-height: calc(100svh - 72px);
}

.carbon-original-stage .carbon-score {
  overflow: hidden;
  position: relative;
}

.carbon-score__trace {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240, 90, 36, 0.18),
    var(--atelier-orange),
    rgba(240, 90, 36, 0.18),
    transparent
  );
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  transform: translateX(-105%);
  width: 34%;
  animation: carbon-score-trace 1800ms var(--atelier-ease) 180ms both paused;
}

.carbon-score__lock {
  animation: carbon-score-lock 720ms steps(2, end) both paused;
}

.carbon-score__lock:nth-of-type(2) {
  animation-delay: 460ms;
}

.carbon-hero.is-motion-visible .carbon-score__trace,
.carbon-hero.is-motion-visible .carbon-score__lock {
  animation-play-state: running;
}

@keyframes carbon-score-trace {
  0% {
    opacity: 0;
    transform: translateX(-105%);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(300%);
  }
}

@keyframes carbon-score-lock {
  0%,
  34% {
    color: #5b4a40;
    opacity: 0.25;
  }
  35%,
  64% {
    color: #fff3e8;
    opacity: 1;
  }
  65%,
  100% {
    color: var(--atelier-orange);
    opacity: 1;
  }
}

.carbon-title-sequence {
  display: grid;
}

.carbon-title-sequence span {
  display: block;
  width: fit-content;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateY(0.28em);
  animation: carbon-title-resolve 760ms var(--atelier-ease) both;
}

.carbon-title-sequence span:nth-child(1) {
  animation-delay: 120ms;
}

.carbon-title-sequence span:nth-child(2) {
  animation-delay: 250ms;
}

.carbon-title-sequence span:nth-child(3) {
  animation-delay: 390ms;
}

.carbon-title-sequence span:nth-child(4) {
  animation-delay: 520ms;
}

@keyframes carbon-title-resolve {
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }
}

.carbon-original-stage .carbon-instant {
  animation: carbon-order-slip 760ms var(--atelier-ease) 980ms both;
}

@keyframes carbon-order-slip {
  from {
    opacity: 0;
    transform: translateX(42px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.carbon-original-stage .carbon-hero__image img,
.carbon-original-stage .carbon-scan {
  animation-play-state: paused;
}

.carbon-original-stage .carbon-hero.is-motion-visible .carbon-hero__image img,
.carbon-original-stage .carbon-hero.is-motion-visible .carbon-scan {
  animation-play-state: running;
}

.carbon-inspection {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.carbon-inspection > i {
  border: 1px solid rgba(241, 236, 226, 0.72);
  border-radius: 50%;
  height: 13px;
  opacity: 0.22;
  position: absolute;
  width: 13px;
  animation: carbon-inspection-node 4.4s var(--atelier-ease) infinite paused;
}

.carbon-inspection > i::after {
  background: rgba(241, 236, 226, 0.52);
  content: "";
  height: 1px;
  left: 11px;
  position: absolute;
  top: 5px;
  width: 34px;
}

.carbon-inspection > i span {
  color: #f5f0e7;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.5rem;
  font-style: normal;
  left: 52px;
  letter-spacing: 0.08em;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
}

.carbon-inspection > i:nth-child(1) {
  left: 45%;
  top: 32%;
}

.carbon-inspection > i:nth-child(2) {
  left: 22%;
  top: 59%;
  animation-delay: 520ms;
}

.carbon-inspection > i:nth-child(3) {
  left: 64%;
  top: 60%;
  animation-delay: 1040ms;
}

.carbon-inspection > i:nth-child(4) {
  left: 51%;
  top: 74%;
  animation-delay: 1560ms;
}

.carbon-hero.is-motion-visible .carbon-inspection > i {
  animation-play-state: running;
}

@keyframes carbon-inspection-node {
  0%,
  12%,
  72%,
  100% {
    border-color: rgba(241, 236, 226, 0.52);
    box-shadow: 0 0 0 0 rgba(240, 90, 36, 0);
    opacity: 0.22;
  }
  22%,
  42% {
    border-color: var(--atelier-orange);
    box-shadow: 0 0 0 5px rgba(240, 90, 36, 0.16);
    opacity: 1;
  }
}

.carbon-original-stage .dark-signal__rail > b {
  top: calc(var(--carbon-signal-progress) * 90%);
}

.carbon-material__figure {
  overflow: hidden;
}

.carbon-material__figure .carbon-measure {
  opacity: 0;
  transition:
    opacity 360ms ease-out 300ms,
    transform 680ms var(--atelier-ease) 300ms;
}

.carbon-material__figure .carbon-measure--one {
  transform: translateX(-24px);
}

.carbon-material__figure .carbon-measure--two {
  transform: translateX(24px);
  transition-delay: 470ms;
}

.carbon-material__figure .carbon-measure::after {
  transform: scaleX(0);
  transition: transform 820ms var(--atelier-ease) 620ms;
}

.carbon-material__figure .carbon-measure--one::after {
  transform-origin: left;
}

.carbon-material__figure .carbon-measure--two::after {
  transform-origin: right;
  transition-delay: 790ms;
}

.carbon-material__figure.is-visible .carbon-measure {
  opacity: 1;
  transform: none;
}

.carbon-material__figure.is-visible .carbon-measure::after {
  transform: scaleX(1);
}

.carbon-bout figure {
  overflow: hidden;
  position: relative;
}

.carbon-bout-gate {
  background:
    linear-gradient(90deg, #252622 0 34%, #34352f 34% 35%, #252622 35% 100%);
  inset: 0;
  position: absolute;
  transform: translateX(0);
}

.carbon-bout figure.is-visible .carbon-bout-gate {
  animation: carbon-bout-open 1050ms var(--atelier-ease) 220ms both;
}

@keyframes carbon-bout-open {
  to {
    transform: translateX(-102%);
  }
}

.carbon-original-stage .dark-primary-action {
  transition:
    background-color 220ms ease-out,
    color 220ms ease-out,
    transform 220ms var(--atelier-ease);
}

.carbon-original-stage .dark-primary-action:hover {
  background: #ff6a31;
  transform: translateY(-2px);
}

.carbon-original-stage .dark-primary-action:active {
  transform: translateY(0);
}

.carbon-original-stage .dark-order__checkout:not([hidden]) {
  animation: carbon-checkout-open 460ms var(--atelier-ease) both;
  transform-origin: top;
}

@keyframes carbon-checkout-open {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .carbon-original-stage .carbon-hero {
    min-height: 0;
  }

  .carbon-title-sequence {
    display: block;
  }

  .carbon-title-sequence span {
    max-width: 100%;
  }

  .carbon-original-stage .carbon-hero > .dark-truth {
    background: #1b1c19;
    bottom: auto;
    left: auto;
    max-width: none;
    order: 3;
    padding: 1rem 1.2rem 1.2rem;
    position: static;
    width: 100%;
  }

  .carbon-original-stage .carbon-hero__image figcaption {
    bottom: 1rem;
    line-height: 1.4;
    max-width: 108px;
  }

  .carbon-inspection > i span {
    font-size: 0.43rem;
    left: 38px;
  }

  .carbon-inspection > i::after {
    width: 23px;
  }

  .carbon-inspection > i:nth-child(1) {
    left: 43%;
    top: 29%;
  }

  .carbon-inspection > i:nth-child(2) {
    left: 16%;
    top: 58%;
  }

  .carbon-inspection > i:nth-child(3) {
    left: 62%;
    top: 57%;
  }

  .carbon-inspection > i:nth-child(4) {
    left: 48%;
    top: 76%;
  }

  .carbon-material__figure .carbon-measure::after {
    width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carbon-score__trace,
  .carbon-inspection,
  .carbon-bout-gate {
    display: none !important;
  }

  .carbon-score__lock,
  .carbon-title-sequence span,
  .carbon-original-stage .carbon-instant,
  .carbon-original-stage .dark-order__checkout:not([hidden]) {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .carbon-material__figure .carbon-measure,
  .carbon-material__figure .carbon-measure::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .carbon-original-stage .dark-primary-action {
    transition: none;
  }
}

/* ================================================================
   K-Fencing company landing page
   Carbon Atelier extended from product to company
   ================================================================ */

:root {
  --kfe-scroll: 0;
  --kfe-company-progress: 0;
  --kfe-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kfe-carbon-rebuild: #252622;
  --kfe-carbon-rebuild-deep: #171815;
  --kfe-paper: #d8d3c9;
  --kfe-white: #f2eee5;
  --kfe-orange: #f05a24;
  --kfe-rule: #50514b;
  --kfe-ink: #1a1a17;
}

.kfe-home {
  background: var(--kfe-carbon-rebuild);
  color: var(--kfe-white);
  min-width: 320px;
  overflow: clip;
}

.kfe-home::before {
  background: var(--kfe-orange);
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(var(--kfe-scroll));
  transform-origin: left;
  width: 100%;
  z-index: 500;
}

.kfe-home h1,
.kfe-home h2 {
  font-family: var(--font-tactical), var(--font-geist-sans), sans-serif;
  font-weight: 780;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.kfe-home h2 {
  font-size: clamp(3.2rem, 5.7vw, 6rem);
  line-height: 0.88;
}

.kfe-home img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.kfe-home p {
  text-wrap: pretty;
}

.kfe-nav {
  align-items: center;
  border-bottom: 1px solid var(--kfe-rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 72px;
  padding-left: clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
  z-index: 20;
}

.kfe-brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 780;
  gap: 0.72rem;
  letter-spacing: 0.13em;
  width: fit-content;
}

.kfe-brand > span:last-child {
  color: #a9a79f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  margin-left: 0.25rem;
}

.kfe-mark {
  display: grid;
  gap: 3px;
  width: 18px;
}

.kfe-mark i {
  background: currentColor;
  display: block;
  height: 2px;
  transform: skewX(-28deg);
}

.kfe-mark i:last-child {
  margin-left: 5px;
}

.kfe-nav__links {
  display: flex;
  gap: 2.2rem;
}

.kfe-nav__links a {
  color: #c9c6bd;
  font-size: 0.68rem;
  transition: color 220ms ease-out;
}

.kfe-nav__links a:hover {
  color: #fff;
}

.kfe-nav__product {
  align-items: center;
  align-self: stretch;
  background: var(--kfe-paper);
  color: var(--kfe-ink);
  display: grid;
  justify-self: end;
  min-width: 210px;
  padding: 0 1.4rem;
  transition: background-color 220ms ease-out;
}

.kfe-nav__product:hover {
  background: #ebe7de;
}

.kfe-nav__product strong {
  font-size: 0.78rem;
  text-transform: uppercase;
}

.kfe-nav__product span {
  color: #9e2e20;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.kfe-hero {
  display: grid;
  grid-template-columns: minmax(390px, 0.86fr) minmax(540px, 1.14fr);
  min-height: calc(100svh - 72px);
  overflow: hidden;
  position: relative;
}

.kfe-hero__copy {
  align-self: center;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.2rem, 4vw, 4.8rem);
  position: relative;
  z-index: 4;
}

.kfe-title {
  display: grid;
  font-size: clamp(3.8rem, 5vw, 5.6rem);
  line-height: 0.84;
}

.kfe-title span {
  clip-path: inset(0 100% 0 0);
  display: block;
  opacity: 0;
  transform: translateY(0.24em);
  width: fit-content;
  animation: kfe-title-resolve 760ms var(--kfe-ease) both;
}

.kfe-title span:nth-child(1) {
  animation-delay: 100ms;
}

.kfe-title span:nth-child(2) {
  animation-delay: 220ms;
}

.kfe-title span:nth-child(3) {
  animation-delay: 340ms;
}

.kfe-title span:nth-child(4) {
  animation-delay: 460ms;
}

.kfe-title span:nth-child(5) {
  animation-delay: 580ms;
}

@keyframes kfe-title-resolve {
  to {
    clip-path: inset(0);
    opacity: 1;
    transform: none;
  }
}

.kfe-hero__copy > p {
  color: #cbc8bf;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2.5rem;
  max-width: 43ch;
}

.kfe-hero__actions {
  align-items: center;
  display: flex;
  gap: 1.7rem;
  margin-top: 2.2rem;
}

.kfe-hero__actions a {
  font-size: 0.7rem;
  font-weight: 720;
}

.kfe-hero__actions a:first-child {
  border-bottom: 1px solid var(--kfe-orange);
  padding-bottom: 0.55rem;
}

.kfe-hero__actions a:last-child {
  color: #aaa89f;
}

.kfe-hero__scene {
  min-height: 680px;
  overflow: hidden;
  position: relative;
}

.kfe-hero__scene img {
  filter: grayscale(1) contrast(1.12) brightness(0.5);
  transform: scale(1.025);
  transition: filter 1600ms var(--kfe-ease);
}

.kfe-hero.is-motion-visible .kfe-hero__scene img {
  filter: grayscale(0.76) contrast(1.08) brightness(0.64);
}

.kfe-hero__gate {
  background: var(--kfe-carbon-rebuild);
  inset: 0;
  position: absolute;
  transform: translateX(0);
  animation: kfe-hero-gate 1150ms var(--kfe-ease) 260ms both paused;
}

.kfe-hero.is-motion-visible .kfe-hero__gate {
  animation-play-state: running;
}

@keyframes kfe-hero-gate {
  to {
    transform: translateX(102%);
  }
}

.kfe-piste-line {
  background: var(--kfe-orange);
  height: 2px;
  left: 0;
  position: absolute;
  top: 57%;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
  animation: kfe-piste-draw 1250ms var(--kfe-ease) 780ms both paused;
}

.kfe-hero.is-motion-visible .kfe-piste-line {
  animation-play-state: running;
}

@keyframes kfe-piste-draw {
  to {
    transform: scaleX(1);
  }
}

.kfe-hero__scene figcaption {
  bottom: 1rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  left: 1rem;
  line-height: 1.5;
  max-width: 44ch;
  position: absolute;
  text-transform: uppercase;
  z-index: 3;
}

.kfe-hero__product {
  align-items: end;
  background: var(--kfe-paper);
  bottom: 3rem;
  color: var(--kfe-ink);
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 142px;
  padding: 1.4rem;
  position: absolute;
  right: 3rem;
  width: 260px;
  z-index: 6;
  animation: kfe-product-slip 800ms var(--kfe-ease) 1050ms both;
}

.kfe-hero__product strong {
  align-self: end;
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.9rem;
  grid-column: 1 / -1;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

.kfe-hero__product > span:not(.dark-arrow) {
  color: #9e2e20;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
}

@keyframes kfe-product-slip {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-kfe-reveal] {
  clip-path: inset(0 0 14% 0);
  opacity: 0;
  transform: translateY(34px);
  transition:
    clip-path 850ms var(--kfe-ease),
    opacity 520ms ease-out,
    transform 850ms var(--kfe-ease);
}

[data-kfe-reveal].is-visible {
  clip-path: inset(0);
  opacity: 1;
  transform: none;
}

.kfe-company {
  background: var(--kfe-paper);
  color: var(--kfe-ink);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  padding: clamp(7rem, 13vw, 14rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-company__statement {
  align-self: start;
  padding-right: clamp(2rem, 7vw, 8rem);
  position: sticky;
  top: 110px;
}

.kfe-company__statement h2 {
  max-width: 9ch;
}

.kfe-company__statement p {
  color: #55534d;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2.2rem;
  max-width: 39ch;
}

.kfe-company__sequence {
  display: grid;
  grid-template-columns: 24px 1fr;
}

.kfe-company__rail {
  background: #77756d;
  margin: 0 auto;
  position: relative;
  width: 1px;
}

.kfe-company__rail i {
  background: var(--kfe-ink);
  border-radius: 50%;
  height: 11px;
  left: -5px;
  position: absolute;
  width: 11px;
}

.kfe-company__rail i:nth-child(1) {
  top: 7%;
}

.kfe-company__rail i:nth-child(2) {
  top: 48%;
}

.kfe-company__rail i:nth-child(3) {
  top: 89%;
}

.kfe-company__rail b {
  background: var(--kfe-orange);
  border: 4px solid var(--kfe-paper);
  border-radius: 50%;
  height: 20px;
  left: -10px;
  position: absolute;
  top: calc(var(--kfe-company-progress) * 90%);
  transition: top 120ms linear;
  width: 20px;
  z-index: 2;
}

.kfe-company__sequence ol {
  list-style: none;
  padding-left: clamp(2rem, 5vw, 5rem);
}

.kfe-company__sequence li {
  border-top: 1px solid var(--kfe-ink);
  min-height: 260px;
  padding: 1.6rem 0 4rem;
}

.kfe-company__sequence li strong {
  display: block;
  font-size: clamp(1.7rem, 2.8vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.03;
  max-width: 19ch;
}

.kfe-company__sequence li p {
  color: #55534d;
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 1.5rem;
  max-width: 47ch;
}

.kfe-pointone {
  background: var(--kfe-carbon-rebuild-deep);
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.kfe-pointone__product {
  min-height: 760px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.kfe-pointone__product img {
  filter: grayscale(1) contrast(0.96) brightness(0.58);
}

.kfe-pointone__develop {
  background: #5c5952;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.3;
  position: absolute;
  transition: opacity 1200ms var(--kfe-ease);
}

.kfe-pointone.is-motion-visible .kfe-pointone__develop {
  opacity: 0.08;
}

.kfe-pointone__scan {
  background: var(--kfe-orange);
  height: 2px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 14%;
  animation: kfe-product-scan 4.8s var(--kfe-ease) infinite paused;
}

.kfe-pointone.is-motion-visible .kfe-pointone__scan {
  animation-play-state: running;
}

@keyframes kfe-product-scan {
  0%,
  14% {
    opacity: 0;
    transform: translateY(0);
  }
  22%,
  70% {
    opacity: 1;
  }
  78% {
    opacity: 1;
    transform: translateY(470px);
  }
  90%,
  100% {
    opacity: 0;
    transform: translateY(470px);
  }
}

.kfe-pointone__product figcaption {
  bottom: 1rem;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  left: 1rem;
  position: absolute;
  text-transform: uppercase;
}

.kfe-pointone__copy {
  align-self: center;
  padding: clamp(5rem, 8vw, 9rem) clamp(1.2rem, 6vw, 7rem);
  position: relative;
  z-index: 3;
}

.kfe-pointone__copy h2 {
  max-width: 8ch;
}

.kfe-pointone__copy p {
  color: #c2c0b8;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-top: 2.2rem;
  max-width: 43ch;
}

.kfe-primary-action {
  align-items: center;
  background: var(--kfe-orange);
  color: var(--kfe-ink);
  display: flex;
  font-size: 0.75rem;
  font-weight: 740;
  justify-content: space-between;
  margin-top: 2.5rem;
  min-height: 58px;
  padding: 0 1.2rem;
  transition:
    background-color 220ms ease-out,
    transform 220ms var(--kfe-ease);
}

.kfe-primary-action:hover {
  background: #ff6a31;
  transform: translateY(-2px);
}

.kfe-pointone__word {
  bottom: -0.14em;
  color: rgba(242, 238, 229, 0.035);
  font-family: var(--font-tactical), sans-serif;
  font-size: min(15vw, 13rem);
  font-weight: 800;
  left: 41%;
  letter-spacing: -0.06em;
  line-height: 0.75;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

.kfe-detail {
  background: var(--kfe-carbon-rebuild);
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  min-height: 88svh;
}

.kfe-detail__copy {
  align-self: center;
  padding: clamp(5rem, 8vw, 9rem) clamp(1.2rem, 6vw, 7rem);
}

.kfe-detail__copy h2 {
  max-width: 9ch;
}

.kfe-detail__copy p {
  color: #c2c0b8;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 2.2rem;
  max-width: 40ch;
}

.kfe-detail figure {
  min-height: 720px;
  overflow: hidden;
  position: relative;
}

.kfe-detail figure img {
  filter: grayscale(0.65) brightness(0.74) contrast(1.08);
}

.kfe-detail figure span {
  background: var(--kfe-paper);
  color: var(--kfe-ink);
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.56rem;
  padding: 0.55rem;
  position: absolute;
  text-transform: uppercase;
}

.kfe-detail figure span::after {
  background: var(--kfe-paper);
  content: "";
  height: 1px;
  position: absolute;
  top: 50%;
  width: 88px;
}

.kfe-detail figure span:first-of-type {
  left: 8%;
  top: 20%;
}

.kfe-detail figure span:first-of-type::after {
  left: 100%;
}

.kfe-detail figure span:last-of-type {
  bottom: 18%;
  right: 8%;
}

.kfe-detail figure span:last-of-type::after {
  right: 100%;
}

.kfe-footer {
  align-items: center;
  border-top: 1px solid var(--kfe-rule);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 2.5rem clamp(1.2rem, 6vw, 7rem);
}

.kfe-footer p {
  color: #aaa89f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.58rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.kfe-footer > a:last-child {
  font-size: 0.68rem;
  justify-self: end;
}

.pointone-nav-status {
  font-family: var(--font-geist-mono), monospace;
  justify-self: end;
  text-transform: uppercase;
}

.pointone-coming {
  align-items: center;
  background: #30312d;
}

.pointone-coming__status {
  border-top: 1px solid #77786f;
  display: grid;
  gap: 0.7rem;
  padding-top: 1.2rem;
}

.pointone-coming__status strong {
  font-family: var(--font-tactical), sans-serif;
  font-size: 1.45rem;
  text-transform: uppercase;
}

.pointone-coming__status p {
  color: #bdbab1;
  font-size: 0.72rem;
}

.pointone-coming > .dark-primary-action {
  min-width: 250px;
}

@media (max-width: 1080px) {
  .kfe-hero {
    grid-template-columns: 0.82fr 1.18fr;
  }

  .kfe-title {
    font-size: clamp(3.55rem, 5.2vw, 4.8rem);
  }

  .kfe-company,
  .kfe-pointone,
  .kfe-detail {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .kfe-nav {
    grid-template-columns: 1fr auto;
    min-height: 62px;
    padding-left: 1rem;
  }

  .kfe-nav__links {
    display: none;
  }

  .kfe-nav__product {
    min-width: 145px;
    padding: 0 0.9rem;
  }

  .kfe-brand {
    gap: 0.55rem;
  }

  .kfe-brand > span:last-child {
    display: none;
  }

  .kfe-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .kfe-hero__copy {
    order: 0;
    padding: 2.8rem 1.2rem 3rem;
  }

  .kfe-title {
    display: block;
    font-size: clamp(2.2rem, 9.2vw, 2.75rem);
    line-height: 0.88;
  }

  .kfe-title span {
    max-width: 100%;
  }

  .kfe-hero__copy > p {
    margin-top: 2rem;
  }

  .kfe-hero__actions {
    align-items: start;
    flex-direction: column;
    gap: 1.2rem;
  }

  .kfe-hero__scene {
    min-height: 430px;
    order: 1;
  }

  .kfe-hero__scene figcaption {
    max-width: 145px;
  }

  .kfe-hero__product {
    bottom: 1.2rem;
    min-height: 122px;
    right: 1.2rem;
    width: 205px;
  }

  .kfe-company {
    display: block;
    padding: 6rem 1.2rem;
  }

  .kfe-company__statement {
    padding: 0;
    position: static;
  }

  .kfe-company__sequence {
    margin-top: 4rem;
  }

  .kfe-company__sequence ol {
    padding-left: 1.4rem;
  }

  .kfe-company__sequence li {
    min-height: 245px;
  }

  .kfe-pointone,
  .kfe-detail {
    display: block;
    min-height: 0;
  }

  .kfe-pointone__product,
  .kfe-detail figure {
    min-height: 470px;
  }

  .kfe-pointone__copy,
  .kfe-detail__copy {
    padding: 5rem 1.2rem;
  }

  .kfe-pointone__word {
    bottom: 0;
    font-size: 7rem;
    left: 0.8rem;
  }

  .kfe-detail figure span::after {
    width: 58px;
  }

  .kfe-footer {
    grid-template-columns: 1fr auto;
    padding: 2.5rem 1.2rem;
  }

  .kfe-footer p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pointone-coming {
    display: block;
  }

  .pointone-coming__status,
  .pointone-coming > .dark-primary-action {
    margin-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kfe-title span,
  .kfe-hero__gate,
  .kfe-piste-line,
  .kfe-hero__product,
  .kfe-pointone__scan {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .kfe-hero__gate,
  .kfe-piste-line,
  .kfe-company__rail b,
  .kfe-pointone__scan {
    display: none !important;
  }

  [data-kfe-reveal],
  .kfe-hero__scene img,
  .kfe-pointone__develop {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* The supplied logo includes a generous transparent artboard. Frame that
   artboard consistently while keeping every pixel of the actual mark visible. */
.kfe-home .kfe-site-nav > .kfe-logo img,
.dark-site .kfe-site-nav > .kfe-logo img,
.kfe-category .kfe-site-nav > .kfe-logo img {
  height: auto;
  left: 10px;
  object-fit: initial;
  top: -18px;
  width: 190px;
}

.kfe-category .kfe-category-footer .kfe-logo img {
  height: auto;
  left: 10px;
  object-fit: initial;
  top: 7px;
  width: 190px;
}

@media (max-width: 760px) {
  .kfe-home .kfe-site-nav > .kfe-logo img,
  .dark-site .kfe-site-nav > .kfe-logo img,
  .kfe-category .kfe-site-nav > .kfe-logo img {
    height: auto;
    left: 4px;
    top: -10px;
    width: 142px;
  }

  .kfe-category .kfe-category-footer .kfe-logo img {
    height: auto;
    left: 4px;
    top: 12px;
    width: 142px;
  }
}

/* WordPress runtime bridge: reproduce the approved font variables without
   relying on framework-generated class names. */
:root {
  --font-geist-sans: "Archivo", Helvetica, Arial, sans-serif;
  --font-geist-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --font-material: "Barlow Condensed", "Archivo", sans-serif;
  --font-tactical: "Archivo", Helvetica, Arial, sans-serif;
  --font-culture: "Bebas Neue", "Archivo", sans-serif;
  --font-commerce: "Source Serif 4", Georgia, serif;
}

body.kfe-wordpress {
  margin: 0;
  min-width: 320px;
}

.kfe-wordpress .kfe-not-found-link {
  border-bottom: 1px solid var(--kfe-orange);
  bottom: clamp(3rem, 8vw, 7rem);
  font-family: var(--font-geist-mono);
  font-size: 0.68rem;
  left: 50%;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  z-index: 4;
}

.kfe-wordpress .kfe-generic-page {
  background: var(--kfe-carbon-rebuild-deep);
  color: var(--kfe-white);
  min-height: calc(100svh - 72px);
  padding: clamp(5rem, 12vw, 12rem) clamp(1.2rem, 8vw, 9rem);
}

.kfe-wordpress .kfe-generic-page h1 {
  font-family: var(--font-tactical);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 0.9;
  max-width: 12ch;
  text-transform: uppercase;
}

.kfe-wordpress .kfe-generic-page__content {
  color: #cbc8bf;
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 2.5rem;
  max-width: 70ch;
  overflow-wrap: anywhere;
}

.kfe-wordpress .kfe-generic-page__content > * + * {
  margin-top: 1.25rem;
}

@media (max-width: 782px) {
  body.admin-bar .kfe-home::before {
    top: 46px;
  }
}

@media (min-width: 783px) {
  body.admin-bar .kfe-home::before {
    top: 32px;
  }
}