.cs-section {
  isolation: isolate;
}

.cs-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(16px, 3vw, 32px);
  min-height: clamp(480px, 94vh, 980px);
  padding: clamp(4px, 1vw, 14px) 0 clamp(10px, 2vw, 30px);
}

.cs-gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--rule-soft) calc(50% - 0.5px), var(--rule-soft) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--rule-soft) calc(50% - 0.5px), var(--rule-soft) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.cs-gridlines::before, .cs-gridlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--rule-soft) 47px, var(--rule-soft) 48px);
  opacity: 0.6;
}
.cs-gridlines::after {
  background-image: repeating-linear-gradient(to right, transparent 0, transparent 47px, var(--rule-soft) 47px, var(--rule-soft) 48px);
}

.cs-baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left center;
  transform: scaleX(0.18);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.cs-stage[data-cs-stage-state="locked"] .cs-baseline {
  transform: scaleX(1);
  opacity: 1;
}

.cs-caption {
  position: absolute;
  left: 0;
  bottom: 4%;
  color: var(--fg-2);
  max-width: 42ch;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: none !important;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 430px) {
  .cs-section { padding-bottom: 4px !important; }
  .cs-stage { min-height: clamp(420px, 90vh, 700px); padding: 2px 0 12px; }
  .cs-gridlines::before, .cs-gridlines::after { opacity: 0.45; }
  .cs-caption { left: 2%; bottom: 2%; text-align: left; max-width: 62%; color: var(--fg-2); }
  .cs-num-wrap { top: 12%; left: 0; }
  .cs-rating-wrap { left: 0; top: 2%; }
  .cs-perfect-wrap { right: 0; top: 30%; }
  .cs-hs-wrap { right: 0; bottom: 22%; }
  .cs-baseline { bottom: 10%; opacity: 0; transform: scaleX(0.15); }
  .cs-num { font-size: clamp(80px, 25vw, 104px); }
  .cs-rating-num { font-size: clamp(22px, 6.5vw, 30px); }
  .cs-hs-num { font-size: clamp(22px, 6.5vw, 30px); }
  .cs-perfect { font-size: clamp(44px, 15vw, 72px); padding: 5px 10px; }
  .cs-rating { padding: 5px 10px; }
  .cs-hs { padding: 5px 10px; }
}
@media (max-width: 375px) {
  .cs-stage { min-height: clamp(390px, 88vh, 660px); padding: 2px 0 10px; }
  .cs-caption { left: 0; bottom: 1%; max-width: 66%; font-size: 12px; }
  .cs-num-wrap { top: 10%; }
  .cs-rating-wrap { top: 1.8%; }
  .cs-perfect-wrap { top: 28%; }
  .cs-hs-wrap { bottom: 20%; }
  .cs-baseline { bottom: 8%; }
  .cs-num { font-size: clamp(72px, 24vw, 96px); }
  .cs-rating-num { font-size: clamp(20px, 6.3vw, 28px); }
  .cs-hs-num { font-size: clamp(20px, 6.3vw, 28px); }
  .cs-perfect { font-size: clamp(40px, 14vw, 66px); }
}
.cs-num-wrap {
  position: absolute;
  left: 0;
  top: 18%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  width: 100%;
  z-index: 2;
}
.cs-num-wrap .cs-num-label {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: 1;
  transform: translateX(4px);
}
.cs-num {
  font-family: var(--mono);
  font-weight: 300;
  color: var(--rule);
  font-feature-settings: "tnum" 1, "ss01";
  font-size: clamp(110px, 34vw, 340px);
  line-height: 0.88;
  letter-spacing: -0.06em;
  transform-origin: 0% 62%;
  will-change: transform;
  white-space: nowrap;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Rating === */
.cs-rating-wrap {
  position: absolute;
  left: clamp(0px, 2vw, 12px);
  top: 6%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translate(0, 0);
  opacity: 1;
  will-change: transform;
  z-index: 3;
}
.cs-item-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.cs-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: clamp(8px, 2vw, 14px) clamp(14px, 3vw, 22px);
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  width: fit-content;
  max-width: 100%;
}
.cs-rating-num {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--rule);
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

/* === Perfect A === */
.cs-perfect-wrap {
  position: absolute;
  right: clamp(0px, 2vw, 12px);
  top: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
  transform: translate(0, 0);
  opacity: 1;
  will-change: transform;
  z-index: 3;
}
.cs-perfect {
  font-family: var(--sans-vf);
  font-variation-settings: "wght" 600;
  font-size: clamp(60px, 18vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--rule);
  padding: clamp(6px, 1.5vw, 12px) clamp(14px, 3vw, 24px);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Headshot % === */
.cs-hs-wrap {
  position: absolute;
  right: 8%;
  bottom: 34%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translate(0, 0);
  opacity: 1;
  will-change: transform;
  z-index: 3;
}
.cs-hs {
  display: inline-flex;
  align-items: baseline;
  padding: clamp(8px, 2vw, 14px) clamp(14px, 3vw, 22px);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  width: fit-content;
  max-width: 100%;
  gap: 4px;
}
.cs-hs-num {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--rule);
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.cs-hs-unit {
  font-family: var(--mono);
  font-size: clamp(18px, 4vw, 30px);
  color: var(--rule-strong);
  line-height: 1;
  padding-left: 2px;
}

/* === 1971, center piece === */
/* Desktop 768+: tune anchor positions for spatial composition. All layout absolute. */
@media (min-width: 768px) {
  .cs-stage {
    min-height: clamp(520px, 92vh, 920px);
    row-gap: 0;
  }
  .cs-stage[data-cs-stage-state="locked"] .cs-num {
    letter-spacing: -0.07em;
  }
  .cs-num-wrap { top: 16%; left: clamp(0px, 1.2vw, 18px); width: auto; max-width: 74%; }
  .cs-rating-wrap { left: clamp(2px, 1vw, 20px); top: 5%; }
  .cs-perfect-wrap { right: clamp(2px, 1vw, 20px); top: 5%; }
  .cs-hs-wrap { right: clamp(10px, 4vw, 52px); bottom: 28%; }
  .cs-baseline { bottom: 6%; }
}

/* Large desktop: final anchors shifted so JS lock positions land at classic 4-corner composition */
@media (min-width: 1024px) {
  .cs-num-wrap { top: 14%; left: clamp(0px, 2vw, 30px); max-width: 70%; }
  .cs-rating-wrap { left: clamp(4px, 2vw, 32px); top: 4%; }
  .cs-perfect-wrap { right: clamp(4px, 2vw, 32px); top: 4%; }
  .cs-hs-wrap { right: clamp(20px, 5vw, 68px); bottom: 26%; }
  .cs-baseline { bottom: 6%; }
}

/* XL desktop (1440+): final anchors separate 1971 1's corner from HS box */
@media (min-width: 1440px) {
  .cs-num-wrap { top: 13%; left: clamp(0px, 3vw, 48px); max-width: 66%; }
  .cs-rating-wrap { left: clamp(12px, 2vw, 52px); top: 4%; }
  .cs-perfect-wrap { right: clamp(12px, 2vw, 52px); top: 4%; }
  .cs-hs-wrap { right: clamp(36px, 6vw, 96px); bottom: 24%; }
  .cs-baseline { bottom: 6%; }
}

/* All items absolute-positioned, transforms driven only by JS inline styles — no CSS var / locked :not dual-track. */
.cs-num-wrap .cs-num { transform: translate(0, 0) scale(1); }
.cs-rating-wrap, .cs-perfect-wrap, .cs-hs-wrap { transform: translate(0, 0); }