/* RADAR 2026 revamp — follows the 1440px Figma canvas. */
:root { --revamp-unit: calc(100vw / 1440); }
.first-signal, .about-revamp, .journey { font-family: var(--font-sans); }

@media (min-width: 1001px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: calc(68 * var(--revamp-unit));
    height: calc(68 * var(--revamp-unit));
    padding: 0 calc(24 * var(--revamp-unit));
  }
  .site-header .brand {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    width: calc(71.667 * var(--revamp-unit));
    height: calc(20 * var(--revamp-unit));
    justify-self: center;
  }
  .site-nav { display: contents; }
  .site-nav .nav-column {
    position: static;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(16 * var(--revamp-unit));
    font-size: calc(16 * var(--revamp-unit));
    white-space: nowrap;
  }
  .site-nav .nav-column:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-nav .nav-column:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
  .site-header .join-link { display: none; }
  .hero { height: calc(912 * var(--revamp-unit)); }
  .hero-background, .hero-photo { object-position: center; }
  .hero-photo { opacity: 1; }
  .hero-card { padding: calc(24 * var(--revamp-unit)); }
  .hero-intro { margin-top: auto !important; margin-bottom: calc(26 * var(--revamp-unit)) !important; }
  .hero-listen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 48 * var(--revamp-unit));
    min-height: calc(55 * var(--revamp-unit));
    margin: 0 calc(-24 * var(--revamp-unit)) calc(-24 * var(--revamp-unit));
    padding: 0 calc(24 * var(--revamp-unit));
    color: #fff;
    background: #171717;
    font-size: calc(16 * var(--revamp-unit));
    font-weight: 500;
  }
  .hero-listen:hover, .hero-listen:focus-visible { background: #e80000; }
  .first-signal {
    position: relative;
    height: calc(800 * var(--revamp-unit));
    background: #fff;
    color: #171717;
  }
  .signal-eyebrow {
    position: absolute;
    top: calc(44 * var(--revamp-unit));
    left: calc(24 * var(--revamp-unit));
    margin: 0;
    font-size: calc(24 * var(--revamp-unit));
    font-weight: 500;
    line-height: 1;
  }
  .first-signal h2 {
    position: absolute;
    top: calc(154 * var(--revamp-unit));
    left: calc(554 * var(--revamp-unit));
    width: calc(814 * var(--revamp-unit));
    margin: 0;
    font-size: calc(32 * var(--revamp-unit));
    font-weight: 500;
    line-height: calc(33 * var(--revamp-unit));
    letter-spacing: -.025em;
    text-transform: uppercase;
  }
  .first-signal-art {
    position: absolute;
    top: calc(308 * var(--revamp-unit));
    left: calc(24 * var(--revamp-unit));
    width: calc(448 * var(--revamp-unit));
    height: calc(448 * var(--revamp-unit));
    object-fit: cover;
  }
  .first-signal-details {
    position: absolute;
    top: calc(568 * var(--revamp-unit));
    left: calc(554 * var(--revamp-unit));
    right: calc(24 * var(--revamp-unit));
    display: grid;
    grid-template-columns: calc(380 * var(--revamp-unit)) calc(290 * var(--revamp-unit)) 1fr;
    gap: calc(28 * var(--revamp-unit));
  }
  .first-signal-details p {
    margin: 0;
    color: #777;
    font-size: calc(20 * var(--revamp-unit));
    line-height: calc(22 * var(--revamp-unit));
  }
  .first-signal-platforms { display: flex; flex-direction: column; align-items: flex-end; gap: calc(12 * var(--revamp-unit)); }
  .first-signal-platforms a { font-size: calc(14 * var(--revamp-unit)); line-height: 1; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
  .first-signal-platforms a:hover { color: #e80000; }
  /* About RADAR — Figma 1045:239. Frames (0)…(4) are five points on ONE scrubbed
     timeline, not five layouts. CSS sets only the resting geometry of state (1)+;
     GSAP owns every opacity, blur and transform between the states.
     Head block: label 20/20 at y32, copy 36/40 (1020 wide) 32 below it.
     Members start 44 below the head (32 + 20 + 32 + 240 + 44 = 368). */
  .about.about-revamp {
    position: relative;
    height: calc(800 * var(--revamp-unit));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
  }
  .about-stage { position: absolute; inset: 0; }
  .about-photo {
    position: absolute;
    top: -60.66%;
    left: .02%;
    width: 99.96%;
    height: 191.78%;
    max-width: none;
    object-fit: fill;
  }
  .about-veil { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .about-veil-dark { background: linear-gradient(180deg, rgb(0 0 0 / 44%), rgb(0 0 0 / 0%)); }
  .about-veil-red { background: rgb(232 0 0 / 44%); }
  .about-head {
    position: absolute;
    top: calc(32 * var(--revamp-unit));
    left: calc(32 * var(--revamp-unit));
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--revamp-unit));
    color: #fff;
  }
  .about-cover-label { margin: 0; font-size: calc(20 * var(--revamp-unit)); line-height: calc(20 * var(--revamp-unit)); font-weight: 500; }
  .about-cover-copy { width: calc(1020 * var(--revamp-unit)); margin: 0; font-size: calc(36 * var(--revamp-unit)); line-height: calc(40 * var(--revamp-unit)); font-weight: 400; }
  .about-members {
    position: absolute;
    top: calc(368 * var(--revamp-unit));
    left: calc(32 * var(--revamp-unit));
    display: flex;
    width: calc(1376 * var(--revamp-unit));
    flex-direction: column;
    gap: calc(16 * var(--revamp-unit));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .about-members li { display: flex; align-items: center; gap: calc(16 * var(--revamp-unit)); opacity: 0; }
  .about-members li span { color: #fff; font-size: calc(52 * var(--revamp-unit)); line-height: calc(52 * var(--revamp-unit)); font-weight: 400; }
  .about-members li small {
    border: calc(1 * var(--revamp-unit)) solid #ff4747;
    border-radius: calc(100 * var(--revamp-unit));
    padding: calc(10 * var(--revamp-unit)) calc(12 * var(--revamp-unit));
    background: #fff;
    color: #e80000;
    font-size: calc(20 * var(--revamp-unit));
    line-height: calc(24 * var(--revamp-unit));
    font-weight: 400;
  }
  /* Portraits are not part of any About frame in Figma; they stay for the mobile layout only. */
  .about-portraits { display: none; }
  .about-final-title {
    position: absolute;
    top: calc(600 * var(--revamp-unit));
    /* Frame 1018:2376 is right-anchored. Using left here leaves a large
       gutter on wide, height-fitted viewports even though 1440px looks right. */
    right: calc(32 * var(--revamp-unit));
    left: auto;
    display: flex;
    width: calc(1376 * var(--revamp-unit));
    height: calc(200 * var(--revamp-unit));
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding-left: calc(24 * var(--revamp-unit));
    font-size: calc(100 * var(--revamp-unit));
    font-weight: 400;
    line-height: calc(100 * var(--revamp-unit));
    letter-spacing: 0;
    text-align: right;
    text-transform: uppercase;
    opacity: 0;
  }
  .about-final-title-text { display: block; flex: 0 0 calc(659 * var(--revamp-unit)); width: calc(659 * var(--revamp-unit)); color: #fff; }
  .about-final-title-text > span { color: #e80000; }
  .journey { position: relative; height: calc(900 * var(--revamp-unit)); background: #fff; color: #171717; isolation: isolate; overflow: hidden; }
  .journey::before {
    position: absolute;
    z-index: 0;
    inset: 0 calc(24 * var(--revamp-unit));
    box-sizing: border-box;
    border-right: 1px solid #eee;
    content: "";
    /* Figma uses nine vertical rules / eight equal columns between x=24 and
       x=1416. The gradient draws the left rule; the explicit right border
       preserves the terminal rule without double-painting either edge. */
    background: repeating-linear-gradient(to right, #eee 0 1px, transparent 1px 12.5%);
    pointer-events: none;
  }
  .journey > h2 { position: absolute; z-index: 5; top: calc(24 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); margin: 0; font-size: calc(64 * var(--revamp-unit)); font-weight: 500; line-height: 1; letter-spacing: -.055em; }
  .journey-progress { position: absolute; z-index: 5; top: calc(34 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); font-size: calc(18 * var(--revamp-unit)); letter-spacing: .05em; }
  .journey-stage { position: absolute; inset: 0; }
  .journey-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity 450ms ease, transform 550ms var(--motion-ease), visibility 450ms; }
  .journey-panel.is-active { opacity: 1; visibility: visible; transform: none; }
  .journey-story { position: absolute; z-index: 2; top: calc(266 * var(--revamp-unit)); left: calc(142 * var(--revamp-unit)); width: calc(690 * var(--revamp-unit)); }
  .journey-year { margin: 0 0 calc(24 * var(--revamp-unit)) !important; color: #e80000 !important; font-size: calc(24 * var(--revamp-unit)) !important; font-weight: 500; }
  .journey-story h3 { margin: 0 0 calc(24 * var(--revamp-unit)); font-size: calc(52 * var(--revamp-unit)); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
  .journey-story > p:not(.journey-year) { width: calc(600 * var(--revamp-unit)); margin: 0 0 calc(20 * var(--revamp-unit)); color: #777; font-size: calc(20 * var(--revamp-unit)); line-height: calc(24 * var(--revamp-unit)); }
  .journey-photos { position: absolute; inset: 0; }
  .journey-image { position: absolute; display: block; object-fit: cover; filter: grayscale(1); }
  .journey-image-1 { right: calc(24 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-image-2 { right: calc(24 * var(--revamp-unit)); top: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(212 * var(--revamp-unit)); }
  .journey-image-3 { left: calc(24 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(236 * var(--revamp-unit)); }
  .journey-image-4 { right: calc(484 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(130 * var(--revamp-unit)); height: calc(180 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-1 { right: calc(236 * var(--revamp-unit)); top: calc(24 * var(--revamp-unit)); bottom: auto; width: calc(212 * var(--revamp-unit)); height: calc(212 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-2 { right: calc(24 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-3 { left: calc(24 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-4 { right: calc(24 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(212 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-5 { right: calc(240 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(212 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-6 { right: calc(456 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(140 * var(--revamp-unit)); height: calc(212 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-7 { right: calc(672 * var(--revamp-unit)); bottom: calc(24 * var(--revamp-unit)); width: calc(140 * var(--revamp-unit)); height: calc(160 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-8 { left: calc(24 * var(--revamp-unit)); top: calc(24 * var(--revamp-unit)); width: calc(130 * var(--revamp-unit)); height: calc(120 * var(--revamp-unit)); }
  .journey-photos-9 .journey-image-1 { width: calc(448 * var(--revamp-unit)); height: calc(448 * var(--revamp-unit)); }
}
@media (max-width: 1000px) {
  .site-header { min-height: 80px; }
  .hero-listen { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0 -24px; padding: 0 24px; background: #171717; color: #fff; }
  .hero-photo { opacity: 1; }
  .first-signal { display: grid; gap: 28px; padding: 40px 24px 56px; }
  .signal-eyebrow { margin: 0; font-size: 18px; font-weight: 500; }
  .first-signal h2 { max-width: 850px; margin: 0; font-size: clamp(24px, 4vw, 40px); line-height: 1.06; font-weight: 500; text-transform: uppercase; }
  .first-signal-art { width: min(448px, 100%); height: auto; aspect-ratio: 1; object-fit: cover; }
  .first-signal-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; }
  .first-signal-details p { margin: 0; color: #777; font-size: 18px; line-height: 1.2; }
  .first-signal-platforms { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 24px; }
  .first-signal-platforms a { text-decoration: underline; }
  /* Mobile keeps every About element in normal flow: no pin, no scrub. */
  .about.about-revamp { height: auto; min-height: 0; padding: 0; }
  .about-stage { position: relative; display: grid; align-content: start; gap: 28px; min-height: 720px; padding: 24px 24px 40px; }
  .about-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .about-veil { position: absolute; inset: 0; opacity: 1; }
  .about-veil-dark { background: linear-gradient(180deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 72%)); }
  .about-veil-red { opacity: 0; }
  .about-head { position: relative; display: grid; gap: 16px; color: #fff; }
  .about-cover-label { margin: 0; font-size: 24px; font-weight: 500; }
  .about-cover-copy { width: auto; margin: 0; font-size: clamp(22px, 4vw, 34px); line-height: 1.08; font-weight: 500; }
  .about-members { position: relative; display: grid; width: auto; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .about-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; opacity: 1; }
  .about-members li span { color: #fff; font-size: 24px; line-height: 1.1; }
  .about-members li small { border: 1px solid #ff4747; border-radius: 30px; padding: 6px 10px; background: #fff; color: #e80000; font-size: 12px; line-height: 1; }
  .about-portraits { position: relative; display: grid; width: 60%; max-width: 260px; margin-left: auto; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .about-portraits img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
  .about-final-title { position: relative; width: auto; margin: 0; padding: 0; font-size: clamp(54px, 10vw, 100px); line-height: .88; letter-spacing: -.05em; text-align: right; opacity: 1; }
  .about-final-title .about-final-title-text { color: #fff; }
  .about-final-title .about-final-title-text > span { color: #e80000; }
  .journey { padding: 36px 24px 64px; background: #fff; }
  .journey > h2 { margin: 0 0 36px; font-size: clamp(42px, 7vw, 70px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
  .journey-progress { display: none; }
  .journey-stage { display: grid; gap: 48px; }
  .journey-panel { border-top: 1px solid #dedede; padding-top: 28px; }
  .journey-year { margin: 0 0 18px; color: #e80000; font-size: 18px; }
  .journey-story h3 { max-width: 700px; margin: 0 0 24px; font-size: clamp(34px, 6vw, 52px); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
  .journey-story > p:not(.journey-year) { max-width: 700px; margin: 0 0 16px; color: #777; font-size: 18px; line-height: 1.25; }
  .journey-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
  .journey-image { width: 100%; height: 220px; object-fit: cover; filter: grayscale(1); }
}
@media (max-width: 620px) {
  .site-header .join-link { display: none; }
  .hero-card { justify-content: flex-start; }
  .hero-card .hero-intro { margin-top: 24px; margin-bottom: auto; }
  .hero-listen { font-size: 14px; flex-shrink: 0; }
  .first-signal { gap: 20px; padding: 32px 20px 44px; }
  .first-signal h2 { font-size: 23px; }
  .first-signal-details { grid-template-columns: 1fr; gap: 16px; }
  .first-signal-platforms { grid-column: 1; gap: 14px 20px; }
  .about-stage { min-height: 620px; padding: 20px 20px 36px; }
  .about-cover-label { font-size: 20px; }
  .about-cover-copy { font-size: 24px; }
  .about-members li span { font-size: 20px; }
  .about-portraits { width: 60%; max-width: 260px; margin-left: auto; }
  .about-final-title { margin-top: 48px; font-size: clamp(48px, 13vw, 70px); }
  .journey { padding: 32px 20px 48px; }
  .journey > h2 { font-size: 42px; }
  .journey-stage { gap: 42px; }
  .journey-story h3 { font-size: 36px; }
  .journey-story > p:not(.journey-year) { font-size: 16px; }
  .journey-photos { grid-template-columns: 1fr 1fr; }
  .journey-image { height: 150px; }
  .journey-image:first-child { grid-column: span 2; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-members li, .about-portraits, .about-final-title, .journey-panel { transition: none !important; }
}

/* Figma layer geometry and final responsive refinements. */
@media (min-width: 1001px) {
  .hero .hero-background {
    inset: auto;
    top: -21.56%;
    left: -25.81%;
    width: 131.71%;
    height: 148.03%;
    max-width: none;
    object-fit: fill;
    mix-blend-mode: darken;
  }
  .hero .hero-photo {
    inset: auto;
    top: -34.5%;
    left: 0;
    width: 100%;
    height: 154%;
    max-width: none;
    object-fit: fill;
    mix-blend-mode: color-dodge;
  }
  .hero-card { justify-content: flex-start; }
  .hero-card .hero-intro {
    width: calc(326 * var(--revamp-unit));
    margin-top: calc(24 * var(--revamp-unit)) !important;
    margin-bottom: auto !important;
  }
  .hero-card .hero-listen {
    align-self: flex-end;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: calc(12 * var(--revamp-unit));
    font-size: calc(16 * var(--revamp-unit));
    line-height: calc(20 * var(--revamp-unit));
  }
  .signal-eyebrow { font-size: calc(20 * var(--revamp-unit)); }
  .first-signal h2 {
    width: calc(920 * var(--revamp-unit));
    top: calc(155 * var(--revamp-unit));
    font-size: calc(32 * var(--revamp-unit));
    line-height: calc(36 * var(--revamp-unit));
  }
  .first-signal-details {
    display: flex;
    flex-direction: column;
    top: calc(576 * var(--revamp-unit));
    right: auto;
    width: calc(481 * var(--revamp-unit));
    gap: calc(12 * var(--revamp-unit));
  }
  .first-signal-details p {
    font-size: calc(20 * var(--revamp-unit));
    line-height: calc(24 * var(--revamp-unit));
  }
  .first-signal-platforms {
    position: absolute;
    top: calc(66 * var(--revamp-unit));
    left: calc(753 * var(--revamp-unit));
    align-items: flex-end;
    gap: calc(12 * var(--revamp-unit));
  }
  .first-signal-platforms a {
    border: 1px solid #f1f1f1;
    padding: calc(8 * var(--revamp-unit)) calc(12 * var(--revamp-unit));
    background: #fff;
    font-size: calc(12 * var(--revamp-unit));
    line-height: calc(12 * var(--revamp-unit));
    text-decoration: none;
  }
  .tracks-art::before {
    position: absolute;
    left: -1%;
    top: -33.6%;
    width: 101%;
    height: 145.5%;
    content: "";
    background: url("./assets/revamp-main-imgMenjadiCoverArtwork.jpg") center / cover no-repeat;
    mix-blend-mode: color-burn;
  }
  .tracks-art .tracks-background {
    top: -73.41%;
    width: 100%;
    height: 190.82%;
    object-fit: fill;
    mix-blend-mode: screen;
  }
}
@media (max-width: 1000px) {
  .hero .hero-background { mix-blend-mode: darken; }
  .hero .hero-photo { mix-blend-mode: color-dodge; }
  .tracks-art { background: #e80000; }
  .tracks-art .tracks-background { mix-blend-mode: screen; }
}
@media (max-width: 620px) {
  .hero-card .hero-listen { margin: 0 -20px -32px; }
}

/* The opening statement must be legible immediately, even before scroll triggers settle. */
.hero-word .motion-word,
.hero-word .motion-word-mask {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.hero-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (min-width: 1001px) {
  .first-signal h2 > span:first-child {
    display: block;
    width: calc(920 * var(--revamp-unit));
    font-size: calc(32 * var(--revamp-unit));
    line-height: calc(36 * var(--revamp-unit));
  }
  .first-signal h2 > span:last-child {
    display: block;
    width: calc(802 * var(--revamp-unit));
    margin-left: calc(200 * var(--revamp-unit));
    margin-top: calc(11 * var(--revamp-unit));
    font-size: calc(28 * var(--revamp-unit));
    line-height: calc(32 * var(--revamp-unit));
  }
}

/* Exact desktop geometry from the nine Figma Journey frames (1042:238).
   The markup stays shared so revamp.js can own the one pinned sequence; only each
   frame's measured coordinates differ. */
@media (min-width: 1001px) {
  .first-signal h2 { left: calc(354 * var(--revamp-unit)); }
  .first-signal-platforms a { text-transform: none; }

  .journey-story {
    inset: 0;
    width: auto;
  }
  .journey-story .journey-year,
  .journey-story h3,
  .journey-story > p:not(.journey-year) {
    position: absolute;
    margin: 0 !important;
  }
  .journey-story .journey-year {
    left: calc(198 * var(--revamp-unit));
    font-size: calc(16 * var(--revamp-unit)) !important;
    line-height: calc(16 * var(--revamp-unit));
  }
  .journey-story h3 {
    left: calc(198 * var(--revamp-unit));
    font-size: calc(52 * var(--revamp-unit));
    line-height: calc(56 * var(--revamp-unit));
    letter-spacing: 0;
  }
  .journey-story > p:not(.journey-year) {
    color: #666;
    font-size: calc(20 * var(--revamp-unit));
    line-height: calc(24 * var(--revamp-unit));
    text-align: justify;
  }
  .journey-image {
    right: auto;
    bottom: auto;
    filter: none;
  }

  .journey-panel[data-journey-index="0"] .journey-year { top: calc(266 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="0"] h3 { top: calc(306 * var(--revamp-unit)); width: calc(472 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="0"] .journey-story > p:nth-of-type(2) { top: calc(534 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); }
  .journey-photos-1 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-1 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(220 * var(--revamp-unit)); }
  .journey-photos-1 .journey-image-3 { top: calc(640 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(236 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="1"] .journey-year { top: calc(268 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="1"] h3 { top: calc(308 * var(--revamp-unit)); width: calc(590 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="1"] .journey-story > p:nth-of-type(2) { top: calc(534 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); }
  .journey-photos-2 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-2 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(224 * var(--revamp-unit)); }
  .journey-photos-2 .journey-image-3 { top: calc(644 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(232 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="2"] .journey-year { top: calc(232 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="2"] h3 { top: calc(272 * var(--revamp-unit)); width: calc(553 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="2"] .journey-story > p:nth-of-type(2) { top: calc(729 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(396 * var(--revamp-unit)); }
  .journey-photos-3 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-3 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(163 * var(--revamp-unit)); }
  .journey-photos-3 .journey-image-3 { top: calc(571 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(305 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="3"] .journey-year { top: calc(261 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="3"] h3 { top: calc(301 * var(--revamp-unit)); width: calc(553 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="3"] .journey-story > p:nth-of-type(2) { top: calc(515 * var(--revamp-unit)); left: calc(378 * var(--revamp-unit)); width: calc(448 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="3"] .journey-story > p:nth-of-type(3) { top: calc(783 * var(--revamp-unit)); right: calc(378 * var(--revamp-unit)); left: auto; width: calc(330 * var(--revamp-unit)); }
  .journey-photos-4 .journey-image-1 { top: calc(383 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(493 * var(--revamp-unit)); }
  .journey-photos-4 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(250 * var(--revamp-unit)); }
  .journey-photos-4 .journey-image-3 { top: calc(630 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(246 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="4"] .journey-year { top: calc(304 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="4"] h3 { top: calc(344 * var(--revamp-unit)); width: calc(590 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="4"] .journey-story > p:nth-of-type(2) { top: calc(534 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); }
  .journey-photos-5 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-5 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(234 * var(--revamp-unit)); }
  .journey-photos-5 .journey-image-3 { top: calc(258 * var(--revamp-unit)); right: calc(236 * var(--revamp-unit)); left: auto; width: calc(154 * var(--revamp-unit)); height: calc(170 * var(--revamp-unit)); }
  .journey-photos-5 .journey-image-4 { top: calc(716 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(160 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="5"] .journey-year { top: calc(260 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="5"] h3 { top: calc(308 * var(--revamp-unit)); width: calc(528 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="5"] .journey-story > p:nth-of-type(2) { top: calc(430 * var(--revamp-unit)); right: calc(142 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); text-align: left; }
  .journey-panel[data-journey-index="5"] .journey-story > p:nth-of-type(3) { top: calc(780 * var(--revamp-unit)); left: calc(378 * var(--revamp-unit)); width: calc(448 * var(--revamp-unit)); }
  .journey-photos-6 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-6 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(163 * var(--revamp-unit)); }
  .journey-photos-6 .journey-image-3 { top: calc(636 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(240 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="6"] .journey-year { top: calc(124 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="6"] h3 { top: calc(172 * var(--revamp-unit)); width: calc(590 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="6"] .journey-story > p:nth-of-type(2) { top: calc(284 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(566 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="6"] .journey-story > p:nth-of-type(3) { top: calc(595 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); color: #171717; }
  .journey-photos-7 .journey-image-1 { top: calc(629 * var(--revamp-unit)); left: calc(614 * var(--revamp-unit)); width: calc(86 * var(--revamp-unit)); height: calc(152 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-2 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-3 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(210 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-4 { top: calc(623 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(253 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-5 { top: calc(506 * var(--revamp-unit)); left: calc(260 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(180 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-6 { top: calc(354 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(86 * var(--revamp-unit)); height: calc(152 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-7 { top: calc(736 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(86 * var(--revamp-unit)); height: calc(152 * var(--revamp-unit)); }
  .journey-photos-7 .journey-image-8 { top: calc(534 * var(--revamp-unit)); left: calc(858 * var(--revamp-unit)); width: calc(86 * var(--revamp-unit)); height: calc(152 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="7"] .journey-year { top: calc(243 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="7"] h3 { top: calc(291 * var(--revamp-unit)); width: calc(590 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="7"] .journey-story > p:nth-of-type(2) { top: calc(529 * var(--revamp-unit)); right: calc(258 * var(--revamp-unit)); left: auto; width: calc(330 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="7"] .journey-story > p:nth-of-type(3) { top: calc(804 * var(--revamp-unit)); left: calc(496 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); }
  .journey-photos-8 .journey-image-1 { top: calc(534 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(342 * var(--revamp-unit)); }
  .journey-photos-8 .journey-image-2 { top: calc(24 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(212 * var(--revamp-unit)); height: calc(163 * var(--revamp-unit)); }
  .journey-photos-8 .journey-image-3 { top: calc(716 * var(--revamp-unit)); left: calc(24 * var(--revamp-unit)); width: calc(212 * var(--revamp-unit)); height: calc(160 * var(--revamp-unit)); }

  .journey-panel[data-journey-index="8"] .journey-year { top: calc(243 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="8"] h3 { top: calc(291 * var(--revamp-unit)); width: calc(448 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="8"] .journey-story > p:nth-of-type(2) { top: calc(544 * var(--revamp-unit)); left: calc(372 * var(--revamp-unit)); width: calc(348 * var(--revamp-unit)); }
  .journey-panel[data-journey-index="8"] .journey-story > p:nth-of-type(3) { top: calc(741 * var(--revamp-unit)); left: calc(260 * var(--revamp-unit)); width: calc(566 * var(--revamp-unit)); }
  .journey-photos-9 .journey-image-1 { top: calc(346 * var(--revamp-unit)); right: calc(24 * var(--revamp-unit)); left: auto; width: calc(448 * var(--revamp-unit)); height: calc(530 * var(--revamp-unit)); }

  .track-list > li:nth-child(1) { width: calc(167 * var(--u)); }
  .track-list > li:nth-child(2) { width: calc(204 * var(--u)); }
  .track-list > li:nth-child(3) { width: calc(250 * var(--u)); }
  .track-list > li:nth-child(4) { width: calc(241 * var(--u)); }
  .track-list > li:nth-child(5) { width: calc(553 * var(--u)); }
  .track-list > li:nth-child(6) { width: calc(464 * var(--u)); }
  .track-list > li:nth-child(7) { width: calc(590 * var(--u)); }
  .track-list > li:nth-child(8) { width: calc(232 * var(--u)); }
}
.about-final-title { color: #fff; }
.about-final-title > .about-final-title-text { color: #fff; }
.about-final-title > .about-final-title-text > span:first-child { color: #e80000; }
.about-final-title .motion-word-mask,
.about-final-title .motion-word { color: inherit; }
.tracks-art { background: #e80000; }

@media (max-width: 620px) {
  .hero-card { padding-bottom: 0; }
  .hero-card .hero-listen { margin: 0 -20px; min-height: 48px; }
}

@media (max-width: 1000px) {
  .site-nav { top: 80px; }
}

@media (min-width: 1001px) {
  .release-preview-group { transform: none; }
  .preview-actions { pointer-events: auto; }
  .preview-action { opacity: 1; visibility: visible; transform: none; }
}

/* Figma section-flow correction: one frame per section at 1440px. */
@media (min-width: 1001px) {
  .page-shell { position: relative; }
  .site-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; }
  .journey > h2 { font-size: calc(20 * var(--revamp-unit)); line-height: calc(20 * var(--revamp-unit)); letter-spacing: 0; }
  .journey-progress { top: calc(56 * var(--revamp-unit)); right: auto; left: calc(24 * var(--revamp-unit)); }
  .journey-story { top: calc(295 * var(--revamp-unit)); width: calc(590 * var(--revamp-unit)); }
  .journey-year { margin-bottom: calc(24 * var(--revamp-unit)) !important; color: #666 !important; font-size: calc(16 * var(--revamp-unit)) !important; line-height: calc(16 * var(--revamp-unit)); font-weight: 400; }
  .journey-story h3 { width: calc(472 * var(--revamp-unit)); margin: 0; font-size: calc(52 * var(--revamp-unit)); line-height: calc(56 * var(--revamp-unit)); }
  .journey-story > p:not(.journey-year) { position: absolute; top: calc(239 * var(--revamp-unit)); left: calc(354 * var(--revamp-unit)); width: calc(330 * var(--revamp-unit)); margin: 0; color: #666; font-size: calc(20 * var(--revamp-unit)); line-height: calc(24 * var(--revamp-unit)); text-align: justify; }
  .journey-image-2 { height: calc(220 * var(--revamp-unit)); }
  .countdown { height: calc(1000 * var(--revamp-unit)); min-height: 0; padding-top: calc(100 * var(--revamp-unit)); }
  .whats-next { height: calc(1000 * var(--revamp-unit)); }
}
.journey-progress button { border: 1px solid currentColor; border-radius: 50%; width: 32px; height: 32px; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.journey-progress button:disabled { opacity: .3; cursor: default; }
.journey-progress button:focus-visible { outline: 2px solid #e80000; outline-offset: 3px; }
.journey-progress { display: none; }
@media (max-width: 1000px) { .journey-progress { display: none; } }

/* GSAP state and mobile About corrections. */
@media (min-width: 1001px) {
  .journey.has-gsap-state .journey-panel { transition: none; }
  .journey.has-gsap-state .journey-story > * {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .journey.has-gsap-state .journey-image {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}
@media (max-width: 1000px) {
  /* Mobile shows both the opening photo and the member details in normal flow. */
  .about-revamp .about-members li,
  .about-revamp .about-portraits,
  .about-revamp .about-final-title { opacity: 1; transform: none; }
}

/* Hero frame 1017:2148 at its true 1440 scale: the word and the card were the last
   pieces still pinned to fixed pixels, so they drifted at every width but 1440.
   "RADAR" is 246/260 at left -21, top 698 (= bottom -46); the card is 498 x 404. */
@media (min-width: 1001px) {
  .hero-word {
    font-size: calc(246 * var(--revamp-unit));
    line-height: calc(260 * var(--revamp-unit));
    bottom: calc(-46 * var(--revamp-unit));
    left: calc(-21 * var(--revamp-unit));
    letter-spacing: 0;
  }
  .hero-card {
    width: calc(498 * var(--revamp-unit));
    height: calc(404 * var(--revamp-unit));
  }
}

/* While a state sequence is pinned the frame has to fit the viewport, so the
   composition scales on the smaller of width/height instead of width alone —
   the same fit used by the pinned Track of Menjadi stack. */
@media (min-width: 1001px) {
  .about-revamp.has-gsap-states {
    --revamp-unit: min(calc(100vw / 1440), calc(100svh / 800));
    height: 100svh;
  }
  .journey.has-gsap-state {
    --revamp-unit: min(calc(100vw / 1440), calc(100svh / 900));
    height: 100svh;
  }
  /* Keep the per-frame children relative to the full 1440 × 900 stage. */
  .journey .journey-story { top: 0; left: 0; width: auto; }
}

/* About + Journey refresh — Figma Website Radar Revamp v2 (`1065:2`).
   Only these two sections use the new geometry; earlier section rules stay intact. */
.about-v2,
.journey-v2 {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  color: #171717;
  font-family: var(--font-sans);
}

@media (min-width: 1001px) {
  /* Figma 1065:990 — 1440 × 700. Keep the section viewport-tall, then anchor
     the 310px content stack to the 24px bottom inset from the source frame. */
  .about-v2 {
    --about-u: min(calc(100vw / 1440), calc(100svh / 700));
    height: 100svh;
  }
  .about-v2__label {
    position: absolute;
    top: calc(24 * var(--about-u));
    left: calc(24 * var(--about-u));
    margin: 0;
    color: #666;
    font-size: calc(16 * var(--about-u));
    font-weight: 500;
    line-height: calc(16 * var(--about-u));
    letter-spacing: calc(1 * var(--about-u));
    text-transform: uppercase;
    white-space: nowrap;
  }
  .about-v2__intro {
    position: absolute;
    top: auto;
    bottom: calc(184 * var(--about-u));
    left: calc(24 * var(--about-u));
    display: flex;
    width: calc(1392 * var(--about-u));
    height: calc(150 * var(--about-u));
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--about-u));
    text-align: left;
  }
  .about-v2__title {
    margin: 0;
    font-size: calc(62 * var(--about-u));
    font-weight: 400;
    line-height: calc(62 * var(--about-u));
    letter-spacing: 0;
    white-space: nowrap;
  }
  .about-v2__copy {
    width: calc(663 * var(--about-u));
    margin: 0;
    color: #666;
    font-size: calc(20 * var(--about-u));
    font-weight: 400;
    line-height: calc(24 * var(--about-u));
  }
  .about-v2__journey-link {
    color: #666;
    font-size: calc(12 * var(--about-u));
    font-weight: 500;
    line-height: calc(16 * var(--about-u));
    text-underline-offset: calc(3 * var(--about-u));
  }
  .about-v2__roster {
    position: absolute;
    top: auto;
    bottom: calc(24 * var(--about-u));
    left: calc(24 * var(--about-u));
    width: calc(1392 * var(--about-u));
    height: calc(78 * var(--about-u));
  }
  .about-v2__members-label {
    margin: 0 0 calc(16 * var(--about-u));
    color: #666;
    font-size: calc(16 * var(--about-u));
    font-weight: 400;
    line-height: calc(16 * var(--about-u));
    letter-spacing: calc(1 * var(--about-u));
    text-transform: uppercase;
    white-space: nowrap;
  }
  .about-v2__members {
    display: flex;
    width: calc(1392 * var(--about-u));
    height: calc(46 * var(--about-u));
    align-items: center;
    gap: calc(32 * var(--about-u));
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }
  .about-v2__members li {
    display: flex;
    height: calc(46 * var(--about-u));
    align-items: flex-start;
    gap: calc(10 * var(--about-u));
  }
  .about-v2__members li:nth-child(1) { width: calc(220 * var(--about-u)); }
  .about-v2__members li:nth-child(2) { width: calc(394 * var(--about-u)); }
  .about-v2__members li:nth-child(3) { width: calc(252 * var(--about-u)); }
  .about-v2__members li:nth-child(4) { width: calc(291 * var(--about-u)); }
  .about-v2__members img {
    width: calc(46 * var(--about-u));
    height: calc(46 * var(--about-u));
    flex: none;
    object-fit: cover;
  }
  .about-v2__members li > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(6 * var(--about-u));
  }
  .about-v2__members span {
    color: #000;
    font-size: calc(28 * var(--about-u));
    font-weight: 400;
    line-height: calc(28 * var(--about-u));
  }
  .about-v2__members small {
    color: #e80000;
    font-size: calc(12 * var(--about-u));
    font-weight: 400;
    line-height: calc(12 * var(--about-u));
  }

  /* Figma 1065:520 — nine 1440 × 900 chapters laid side by side, scrolled
     horizontally (concept 1065:652) by the pinned `journey-horizontal` trigger
     in revamp.js. The label and progress bar stay fixed; only the track moves.
     Frame 1065:708 is chapter 0, so the intro still resolves onto it. */
  .journey-v2 {
    --journey-u: min(calc(100vw / 1440), calc(100svh / 900));
    height: 100svh;
  }
  .journey-v2__progress {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(6 * var(--journey-u));
    overflow: hidden;
    background: #f1f1f1;
  }
  /* Full-width fill scaled by GSAP. 0.14375 = the 207px fill every Figma
     chapter shows at rest (207 / 1440); scroll carries it to 1. */
  .journey-v2__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #e80000;
    transform: scaleX(0.14375);
    transform-origin: left center;
  }
  .journey-v2__title {
    position: absolute;
    z-index: 5;
    top: calc(24 * var(--journey-u));
    left: calc(24 * var(--journey-u));
    width: calc(122 * var(--journey-u));
    margin: 0;
    color: #666;
    font-size: calc(16 * var(--journey-u));
    font-weight: 400;
    line-height: calc(16 * var(--journey-u));
    letter-spacing: calc(1 * var(--journey-u));
    text-transform: uppercase;
    white-space: nowrap;
  }
  .journey-v2__title span { display: block; }
  .journey-v2__track {
    position: absolute;
    inset: 0;
    display: flex;
    will-change: transform;
  }
  .journey-v2__chapter {
    position: relative;
    flex: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  /* Geometry comes from each element's inline --x/--y/--w/--h (Figma design
     px). Right-half items carry --r and lower-half items --b instead, so on
     viewports wider or taller than 16:10 they keep the Figma 24px edge insets
     rather than floating in the middle. */
  .journey-v2__item {
    position: absolute;
    top: calc(var(--y) * var(--journey-u));
    left: calc(var(--x) * var(--journey-u));
    width: calc(var(--w) * var(--journey-u));
    height: calc(var(--h) * var(--journey-u));
    margin: 0;
  }
  .journey-v2__item.is-right {
    left: auto;
    right: calc(var(--r) * var(--journey-u));
  }
  .journey-v2__item.is-bottom {
    top: auto;
    bottom: calc(var(--b) * var(--journey-u));
  }
  .journey-v2__primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap) * var(--journey-u));
  }
  .journey-v2__year {
    margin: 0;
    color: #666;
    font-size: calc(16 * var(--journey-u));
    font-weight: 400;
    line-height: calc(16 * var(--journey-u));
    text-transform: uppercase;
    white-space: nowrap;
  }
  .journey-v2__primary h3 {
    width: calc(var(--hw) * var(--journey-u));
    margin: 0;
    font-size: calc(52 * var(--journey-u));
    font-weight: 400;
    line-height: calc(56 * var(--journey-u));
  }
  .journey-v2__copy {
    color: #666;
    font-size: calc(20 * var(--journey-u));
    font-weight: 400;
    line-height: calc(24 * var(--journey-u));
    text-align: justify;
  }
  .journey-v2__photo { overflow: hidden; }
}

@media (max-width: 1000px) {
  .about-v2 {
    min-height: 720px;
    padding: 20px;
  }
  .about-v2__label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1px;
  }
  .about-v2__intro {
    position: absolute;
    top: 40%;
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    transform: translateY(-50%);
  }
  .about-v2__title { margin: 0; font-size: clamp(30px, 8vw, 44px); line-height: 1; font-weight: 400; }
  .about-v2__copy { max-width: 614px; margin: 0; color: #666; font-size: 17px; line-height: 1.3; }
  .about-v2__journey-link { color: #666; font-size: 12px; font-weight: 500; line-height: 16px; text-underline-offset: 3px; }
  .about-v2__roster {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
  }
  .about-v2__members-label {
    margin: 0 0 14px;
    color: #666;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
  }
  .about-v2__members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .about-v2__members li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .about-v2__members img { width: 38px; height: 38px; object-fit: cover; }
  .about-v2__members li > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .about-v2__members span { font-size: 18px; line-height: 20px; }
  .about-v2__members small { color: #e80000; font-size: 10px; line-height: 12px; }
  .journey-v2 {
    height: auto;
    min-height: 100svh;
    padding: 40px 20px 20px;
  }
  .journey-v2__progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #f1f1f1;
  }
  .journey-v2__progress span { display: block; width: 14.375%; height: 100%; background: #e80000; }
  .journey-v2__title {
    position: static;
    margin: 0;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Chapters stack in normal flow: text full width, lead photo full width,
     supporting photos in two columns at their Figma aspect ratios. */
  .journey-v2__chapter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin: 72px 0 0;
  }
  .journey-v2__chapter + .journey-v2__chapter { margin-top: 96px; }
  .journey-v2__primary,
  .journey-v2__copy,
  .journey-v2__photo.is-lead { grid-column: 1 / -1; }
  .journey-v2__primary { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; }
  .journey-v2__year { margin: 0; color: #666; font-size: 14px; line-height: 16px; text-transform: uppercase; }
  .journey-v2__primary h3 { max-width: 520px; margin: 0; font-size: clamp(38px, 11vw, 52px); font-weight: 400; line-height: 1.02; }
  .journey-v2__copy { max-width: 520px; margin: 0; color: #666; font-size: 17px; line-height: 1.3; }
  .journey-v2__photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
}

/* Journey photo crops shared by both layouts (Figma image fills): cover by
   default, explicit crop offsets where the source frame sets them, and the
   one `object-contain` fill in chapter 6. */
.journey-v2__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journey-v2__photo.is-cropped img {
  position: absolute;
  top: var(--crop-top);
  left: 0;
  height: var(--crop-h);
}
.journey-v2__photo.is-contain img { object-fit: contain; }
.journey-v2__copy.is-align-left { text-align: left; }
.journey-v2__copy.is-align-right { text-align: right; }

/* Reduced motion keeps the horizontal composition but lets the reader move
   through it natively instead of via a scroll-linked pin. */
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
  .journey-v2__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    will-change: auto;
  }
  .journey-v2__chapter { scroll-snap-align: start; }
}

/* Hero `1065:796` (1440 × 800) + header states `1066:1023` (logo → Latest
   Release card) and `1066:1060` (+ → section pills). Kept last in the file so
   it wins over the older header/hero passes.

   Fit: the hero is exactly one viewport tall. The picture is a 1440 × 800
   stage scaled to *cover* the viewport (--hero-cover), so the Figma layer
   crops hold at any aspect. RADAR scales on the smaller axis (--hero-u) so it
   always fits, and sits flush left: the R's left side bearing (0.078em in
   Helvetica Neue) is pulled past the edge, as Figma's x −26 does. */
.hero {
  --hero-cover: max(calc(100vw / 1440), calc(100svh / 800));
  --hero-u: min(calc(100vw / 1440), calc(100svh / 800));
  height: 100svh;
  min-height: 0;
}
.hero .hero-stage {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(1440 * var(--hero-cover));
  height: calc(800 * var(--hero-cover));
  transform: translate(-50%, -50%);
  isolation: isolate;
  background: #670b0b;
}
.hero .hero-stage .hero-tint { display: none; }
/* Bg: 1440 × 912 box, image at −21.56% / −25.81%, 131.71% × 148.03% (fill). */
.hero .hero-stage .hero-background {
  position: absolute;
  inset: auto;
  z-index: 0;
  top: calc(-196.63 * var(--hero-cover));
  left: calc(-371.66 * var(--hero-cover));
  width: calc(1896.62 * var(--hero-cover));
  height: calc(1350.03 * var(--hero-cover));
  max-width: none;
  object-fit: fill;
  mix-blend-mode: darken;
}
/* Foto: 1440 × 800 box, image at −38.12% / −0.01%, 100% × 175.56%. */
.hero .hero-stage .hero-photo {
  position: absolute;
  inset: auto;
  z-index: 1;
  top: calc(-304.96 * var(--hero-cover));
  left: calc(-0.14 * var(--hero-cover));
  width: calc(1440 * var(--hero-cover));
  height: calc(1404.48 * var(--hero-cover));
  max-width: none;
  opacity: 1;
  object-fit: fill;
  mix-blend-mode: color-dodge;
}
.hero::after { display: none; }
/* 320 / 260, −10 tracking, line box overhanging the frame bottom by 12. */
.hero .hero-word {
  top: auto;
  bottom: calc(-12 * var(--hero-u));
  left: -0.078em;
  width: auto;
  margin: 0;
  font-size: calc(320 * var(--hero-u));
  font-weight: 400;
  line-height: calc(260 * var(--hero-u));
  letter-spacing: calc(-10 * var(--hero-u));
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Header: two white pills 12px from the corners. */
.site-header {
  --pill-u: 1px;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  min-height: 0;
  height: auto;
  align-items: center;
  justify-content: space-between;
  padding: calc(12 * var(--pill-u));
  background: transparent;
}
body.menu-open { overflow: visible; }
.site-header .brand,
.site-header .menu-toggle {
  display: flex;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 200px;
  background: #fff;
  color: #171717;
  font: inherit;
  cursor: pointer;
}
/* 50.167 × 14 mark box; the SVG is 46.92 × 14.5 with its filter overhang. */
.site-header .brand { padding: calc(5 * var(--pill-u)) calc(10 * var(--pill-u)); }
.site-header .brand img {
  display: block;
  width: calc(46.92 * var(--pill-u));
  height: calc(14.5 * var(--pill-u));
  margin: 0 calc(1.62 * var(--pill-u)) calc(-0.5 * var(--pill-u));
}
.site-header .menu-toggle { padding: calc(4 * var(--pill-u)) calc(10 * var(--pill-u)); }
.site-header .menu-toggle i { display: block; font-size: calc(16 * var(--pill-u)); }
.site-header .join-link { display: none; }

/* `1066:1096`: right-aligned stack of pills 44px from the top, 4px apart. */
.site-header .site-nav {
  position: absolute;
  inset: calc(44 * var(--pill-u)) calc(12 * var(--pill-u)) auto auto;
  z-index: 1;
  display: flex;
  width: auto;
  padding: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 * var(--pill-u));
  background: none;
  font-size: calc(12 * var(--pill-u));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-6 * var(--pill-u)));
  transition: opacity 260ms var(--motion-ease), transform 360ms var(--motion-ease), visibility 260ms;
}
.site-header .site-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.site-header .site-nav a,
.site-header .site-nav .nav-coming-soon {
  display: flex;
  align-items: center;
  padding: calc(5 * var(--pill-u)) calc(10 * var(--pill-u));
  border-radius: 200px;
  background: #fff;
  color: #666;
  font-size: calc(12 * var(--pill-u));
  font-weight: 500;
  line-height: calc(14 * var(--pill-u));
  white-space: nowrap;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible,
.site-header .site-nav a.is-active { color: #171717; font-weight: 500; }
.site-header .site-nav .nav-coming-soon {
  gap: calc(4 * var(--pill-u));
  padding: calc(2 * var(--pill-u)) calc(2 * var(--pill-u)) calc(2 * var(--pill-u)) calc(10 * var(--pill-u));
}
.site-header .site-nav .nav-coming-soon small {
  padding: calc(4 * var(--pill-u)) calc(8 * var(--pill-u));
  border-radius: 200px;
  background: #ffe227;
  color: #000;
  font-size: calc(10 * var(--pill-u));
  font-weight: 400;
  line-height: calc(12 * var(--pill-u));
}

/* `1066:1042`: Latest Release card, 552 wide, x12 / y44, 12 padding, r8. */
.latest-release {
  position: absolute;
  z-index: 1;
  top: calc(44 * var(--pill-u));
  left: calc(12 * var(--pill-u));
  display: flex;
  width: min(calc(552 * var(--pill-u)), calc(100% - 24 * var(--pill-u)));
  box-sizing: border-box;
  flex-direction: column;
  gap: calc(12 * var(--pill-u));
  padding: calc(12 * var(--pill-u));
  border-radius: calc(8 * var(--pill-u));
  background: #fff;
  color: #171717;
  font-family: var(--font-sans);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-6 * var(--pill-u)));
  transition: opacity 260ms var(--motion-ease), transform 360ms var(--motion-ease), visibility 260ms;
}
.latest-release.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.latest-release__head,
.latest-release__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.latest-release__head p {
  margin: 0;
  color: #808080;
  font-size: calc(14 * var(--pill-u));
  font-weight: 500;
  line-height: calc(14 * var(--pill-u));
}
.latest-release__close {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: #171717;
  font-size: calc(14 * var(--pill-u));
  cursor: pointer;
}
.latest-release__body {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--pill-u));
}
.latest-release__body img {
  width: calc(120 * var(--pill-u));
  height: calc(120 * var(--pill-u));
  flex: none;
  border-radius: calc(12 * var(--pill-u));
  object-fit: cover;
}
.latest-release__body p {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: #666;
  font-size: calc(28 * var(--pill-u));
  font-weight: 400;
  line-height: calc(30 * var(--pill-u));
  letter-spacing: calc(-1 * var(--pill-u));
}
.latest-release__body p span { color: #171717; text-transform: uppercase; }
.latest-release__actions a {
  padding: calc(8 * var(--pill-u)) calc(16 * var(--pill-u)) calc(9 * var(--pill-u));
  border: 1px solid #e2e2e2;
  border-radius: 200px;
  background: #fff;
  color: #171717;
  font-size: calc(12 * var(--pill-u));
  font-weight: 500;
  line-height: calc(12 * var(--pill-u));
  text-decoration: none;
  white-space: nowrap;
}
.latest-release__actions .latest-release__play {
  border-color: #171717;
  background: #171717;
  color: #fff;
}

@media (min-width: 1001px) {
  .site-header { --pill-u: var(--revamp-unit); }
}
@media (max-width: 1000px) {
  .latest-release__body p { font-size: 20px; line-height: 22px; letter-spacing: -0.5px; }
  .latest-release__body img { width: 96px; height: 96px; }
}
/* Phones: RADAR spans the full width (ink = 3.1375em at this tracking). */
@media (max-width: 1000px) {
  .hero .hero-word {
    bottom: -0.0375em;
    font-size: 31.8vw;
    line-height: 0.8125em;
    letter-spacing: -0.03125em;
  }
}

/* About copy words (runtime-injected by revamp.js, Figma 1139:218 entrance). */
.about-v2__word { display: inline-block; }
.about-v2__members img { will-change: clip-path; }

/* What's Next (Figma 995:955 / 995:957) is a 1440 × 1000 frame shown pinned at
   100svh. With a width-only unit the frame was cut to the viewport height, so
   the five 640px rows had to climb ~106 design px past the Figma end state
   (y342) and ran into the intro, which initWhatsNextStack() then faded out.
   Fitting the unit to both axes keeps the whole frame on screen, so the list
   stops at y≈342 and the intro stays readable. script.js measures with the
   same unit. */
@media (min-width: 1001px) {
  .whats-next.is-scroll-stacked { --u: min(calc(100vw / 1440), calc(100svh / 1000)); }
  /* Keep the 686px card width tied to canvas width when the pinned section
     fits a shorter viewport by height. The current y500 geometry is below. */
  .whats-next.is-scroll-stacked .schedule-list { --u: calc(100vw / 1440); }
}

/* Latest Release experiment: Figma header and copy, then the Spotify player
   in place of the cover and the PLAY / Spotify buttons. Toggle with
   `.latest-release--embed` in index.html. Fixed 352px: Spotify's player
   layout is pixel-based and only offers 352 / 152 heights. */
.latest-release__embed {
  display: none;
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 12px;
}
.latest-release--embed .latest-release__embed { display: block; }
.latest-release--embed .latest-release__body img,
.latest-release--embed .latest-release__actions { display: none; }

/* Hero → New Signal cover (`hero-cover` in revamp.js): the held hero sits
   beneath the first reordered campaign section. */
.hero.is-scroll-stacked { z-index: 0; }
.signal-v2.is-stack-cover { position: relative; z-index: 1; }

/* `about-heading` (revamp.js): white strip behind the held ABOUT RADAR label
   so the intro and roster pass cleanly beneath it, like #radartivity-title. */
@media (min-width: 1001px) {
  .about-v2__label.is-pinned-heading { z-index: 3; isolation: isolate; }
  .about-v2__label.is-pinned-heading::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: calc(-24 * var(--about-u));
    bottom: calc(-20 * var(--about-u));
    left: calc(-24 * var(--about-u));
    width: 100vw;
    background: #fff;
    pointer-events: none;
  }
}

/* Track of Menjadi background (Figma layer `1065:55`). The approved replacement
   is `tracks-background.png` (1672 × 941). Keep the existing cover-fit and
   bottom-centred crop so every responsive composition remains unchanged. */
.tracks-art { background: #171717; }
.tracks-art::before { content: none; }
.tracks .tracks-art .tracks-background {
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  mix-blend-mode: normal;
}

/* Radartivity rows (Figma `1065:857`, row `1065:864`). The gallery had grown
   to 802 × 270 with an 8px gap, so each of the 3 × 2 slots was 262 × 131 — a
   2:1 strip cut out of 360 × 640 portrait photos, which read as smeared. The
   frame is a 410-wide text column and a 446 × 300 gallery of 146 × 148 slots,
   4px apart, pushed to the right edge; rows stay 300 tall. Hover/`is-visible`
   reveal is unchanged (Figma shows the same slots at opacity 0). */
@media (min-width: 1001px) {
  .activity-row {
    grid-template-columns: calc(410 * var(--u)) 1fr;
    align-items: stretch;
  }
  .activity-meta { min-height: calc(300 * var(--u)); }
  .activity-gallery {
    grid-template-columns: repeat(3, calc(146 * var(--u)));
    grid-template-rows: repeat(2, calc(148 * var(--u)));
    width: calc(446 * var(--u));
    height: calc(300 * var(--u));
    gap: calc(4 * var(--u));
    justify-self: end;
  }
}
/* Tablet widths kept the 2:1 strips too; hold the Figma proportions there. */
@media (min-width: 621px) and (max-width: 1000px) {
  .activity-gallery {
    width: min(100%, 446px);
    height: auto;
    aspect-ratio: 446 / 300;
    gap: 4px;
    justify-self: end;
  }
}

/* Strip modal captions without body copy (kamar / studio placeholders). */
.gallery-modal-caption p:empty { display: none; }

/* Figma 1065:232: line/card rhythm is 4px + 4px, not the older 8px +
   8px. Explicit location spans prevent whitespace around the hyphen from
   inflating the right-aligned text group. The existing stack trigger still
   measures the list's actual height; this only changes its geometry. */
@media (min-width: 1001px) {
  .whats-next .schedule-list { top: calc(500 * var(--u)); gap: calc(4 * var(--u)); }
  .whats-next .schedule-list li { margin-top: calc(4 * var(--u)); }
  .whats-next .schedule-list li::before { top: calc(-5 * var(--u)); }
}
.schedule-show p { display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); }
.schedule-show p span { margin: 0; }

/* Responsive Homepage 1067:1112 uses 402px section frames. These overrides
   are deliberately phone-only so the pinned desktop compositions and GSAP
   state ownership remain untouched. */
@media (max-width: 620px) {
  .hero { height: 800px; min-height: 0; }
  .hero .hero-stage { top: 0; left: 50%; width: 402px; height: 800px; transform: translateX(-50%); }
  .hero .hero-stage .hero-background { top: -197px; left: -519px; width: 1897px; height: 1350px; }
  .hero .hero-stage .hero-photo { top: 0; left: 0; width: 402px; height: 800px; object-fit: cover; object-position: center; }
  .hero .hero-word { bottom: -5px; left: -10px; font-size: 124px; line-height: 90px; letter-spacing: -5px; }

  .about-v2 { height: 885px; min-height: 0; padding: 24px; }
  .about-v2__label { top: 24px; left: 24px; color: #666; font-size: 16px; line-height: 16px; }
  .about-v2__intro { top: 344px; right: 24px; left: 24px; gap: 16px; transform: none; }
  .about-v2__title { font-size: 52px; line-height: 56px; }
  .about-v2__copy { font-size: 16px; line-height: 20px; }
  .about-v2__journey-link { margin-top: -12px; line-height: 12px; }
  .about-v2__roster { right: 24px; bottom: 24px; left: 24px; }
  .about-v2__members-label { margin-bottom: 24px; font-size: 16px; line-height: 16px; }
  .about-v2__members { display: flex; flex-direction: column; gap: 16px; }
  .about-v2__members li { display: flex; align-items: flex-start; gap: 10px; }
  .about-v2__members img { width: 40px; height: 40px; }
  .about-v2__members li > div { gap: 8px; }
  .about-v2__members small { font-size: 12px; line-height: 12px; }
  .about-v2__members span { font-size: 20px; line-height: 20px; white-space: nowrap; }

  /* Tablet and reduced-motion Journey chapters stay in normal flow below
     the opening frame; the phone motion branch below provides the pinned states. */
  .journey-v2 { padding: 0 24px 24px; }
  .journey-v2__title { display: grid; height: 900px; place-items: center; font-size: 44px; font-weight: 400; line-height: 44px; letter-spacing: -2px; }
  .journey-v2__chapter:first-child { margin-top: 0; }

  .tracks { height: 952px; }
  .tracks-title { top: 24px; left: 24px; font-size: 56px; line-height: 56px; letter-spacing: -2px; }
  .tracks-copy { top: 274px; bottom: auto; left: 24px; width: calc(100% - 48px); }
  .tracks-copy h3 { margin-bottom: 24px; font-size: 32px; line-height: 32px; }
  .tracks-copy p { margin-bottom: 44px; font-size: 16px; line-height: 20px; }
  .tracks-copy a { font-size: 16px; line-height: 20px; }
  .track-list { right: 0; bottom: 0; width: 100%; }
  .track-list li, .track-list li:nth-child(n) { min-height: 52px; padding: 10px 24px; }
  .track-list span { font-size: 32px; line-height: 32px; letter-spacing: -2px; }
  .track-list li:nth-child(1) { order: 1; width: 167px; }
  .track-list li:nth-child(2) { order: 2; width: 191px; }
  .track-list li:nth-child(3) { order: 3; width: 355px; }
  .track-list li:nth-child(4) { order: 4; width: 235px; }
  .track-list li:nth-child(8) { order: 5; }
  .track-list li:nth-child(5) { order: 6; }
  .track-list li:nth-child(7) { order: 7; }
  .track-list li:nth-child(6) { order: 8; }
  .track-list .track-status { display: none; }
  .track-list li:nth-child(4) .track-status { display: inline-block; opacity: 1; visibility: visible; transform: none; }
  .track-list .track-artwork, .track-list .track-spotify { display: none; }
  .track-list .is-current .track-release-meta { position: static; transform: none; }
  .track-list .is-current .track-release-meta > small { font-size: 16px; line-height: 16px; }

  /* Figma 1069:1521 places the release lockup around the middle of its
     1000px frame. Keep the existing preview and release-date visibility logic. */
  .countdown { height: 1000px; min-height: 0; padding: 0; }
  .countdown-inner { position: absolute; top: 302px; left: 24px; width: calc(100% - 48px); }
  .release-visual { height: 176px; }
  .release-name { font-size: 80px; letter-spacing: -4px; }
  .release-sticker-position { top: 80px; bottom: auto; height: 100px; }
  .feedback-wall .listener-note { opacity: .1; }

  .whats-next { height: 1000px; }
  .whats-next .schedule-background { object-position: 69.4% center; }
  .whats-next > h2 { top: 24px; right: 24px; left: 24px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; font-size: 100px; line-height: 100px; letter-spacing: -8px; }
  .schedule-intro { top: 248px; right: 24px; left: 24px; width: auto; font-size: 16px; line-height: 20px; text-align: left; }
  .schedule-list { top: 328px; right: 21px; left: 24px; width: auto; gap: 2px; }
  .schedule-list li { min-height: 0; flex-direction: column; gap: 24px; margin-top: 2px; padding: 12px; }
  .schedule-list li::before { top: -3px; }
  .schedule-list time, .schedule-date { font-size: 16px; line-height: 16px; }
  .schedule-list li > div { width: 100%; gap: 8px; }
  .schedule-list h3 { font-size: 24px; line-height: 32px; }
  .schedule-list h3 small { font-size: 12px; line-height: 12px; }
  .schedule-list p { font-size: 16px; line-height: 16px; }
  .schedule-list .workshop-copy { max-width: 321px; font-size: 12px; line-height: 16px; }
  .schedule-show p { gap: 8px; }
  .schedule-month { top: 904px; right: 24px; left: 24px; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; }
  .schedule-month strong { font-size: 72px; line-height: 72px; }
  .schedule-month span { font-size: 44px; line-height: 44px; }

  .radartivity { padding: 62px 24px; }
  #radartivity-title { margin-bottom: 60px; font-size: 48px; line-height: 44px; }
  .radartivity sup { font-size: 32px; line-height: 32px; }
  /* Figma 1069:2053: year, two-row image study, then editorial copy. */
  .activity-row { display: flex; flex-direction: column; gap: 24px; }
  .activity-meta { display: contents; }
  .activity-meta time { order: 1; }
  .activity-gallery { order: 2; height: auto; aspect-ratio: 354 / 244; gap: 4px; }
  .activity-meta > div { order: 3; }

  .contact { min-height: 1000px; }
  .contact > h2 { margin: -9px 0 0; padding: 0; font-size: 76px; line-height: 76px; letter-spacing: 0; text-align: left; white-space: normal; }
  .contact-intro { width: calc(100% - 48px); margin: 109px 24px 0; font-size: 32px; line-height: 36px; letter-spacing: 0; }
  .contact-links { position: absolute; right: 0; bottom: 0; left: 0; }
  .contact-grid, .social-grid { display: flex; flex-direction: column; }
  .contact-grid a, .social-grid a { min-height: 0; padding: 24px; border-bottom: 1px solid rgb(255 255 255 / 32%); }
  .contact-grid a { height: 112px; }
  .contact-grid strong { font-size: 20px; font-weight: 500; line-height: 20px; }
  .social-grid strong { font-size: 24px; font-weight: 500; line-height: 24px; }
  .contact-grid a + a, .social-grid a + a { border-left: 0; }
}


/* The mobile Menjadi stack must keep the 402px homepage composition while its
   tabs reveal. Older `.tracks.is-stacked` rules move the title/copy to a compact
   tablet header and shrink each tab; that would change the approved layout as
   soon as JS enables the pin. Only the stage height now fits the viewport. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .tracks.is-stacked { height: 100svh; min-height: 0; }
  .tracks.is-stacked .tracks-title {
    top: 24px; left: 24px;
    font-size: 56px; line-height: 56px; letter-spacing: -2px;
  }
  .tracks.is-stacked .tracks-copy {
    top: 274px; right: auto; bottom: auto; left: 24px;
    width: calc(100% - 48px);
  }
  .tracks.is-stacked .tracks-copy h3 { margin-bottom: 24px; font-size: 32px; line-height: 32px; }
  .tracks.is-stacked .tracks-copy p { display: block; margin-bottom: 44px; font-size: 16px; line-height: 20px; }
  .tracks.is-stacked .tracks-copy a { font-size: 16px; line-height: 20px; }
  .tracks.is-stacked .track-list { right: 0; bottom: 0; width: 100%; }
  .tracks.is-stacked .track-list li {
    height: 52px; min-height: 52px; padding: 10px 24px;
  }
  .tracks.is-stacked .track-list li > span {
    font-size: 32px; line-height: 32px; letter-spacing: -2px;
  }
  .tracks.is-stacked .track-list small { font-size: 12px; line-height: 12px; }
}

/* Figma 1069:2217 — nine 402 × 900 responsive Journey checkpoints. The
   class is applied only while the mobile ScrollTrigger owns the section;
   reduced-motion and larger tablet layouts retain normal document flow. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
  .journey-v2.is-mobile-scroll {
    --journey-mobile-u: min(calc(100vw / 402), calc(100svh / 900));
    --journey-mobile-left: calc((100vw - 402 * var(--journey-mobile-u)) / 2);
    --journey-mobile-top: calc((100svh - 900 * var(--journey-mobile-u)) / 2);
    width: 100%;
    height: 100svh;
    min-height: 0;
    padding: 0;
  }
  .journey-v2.is-mobile-scroll .journey-v2__progress {
    z-index: 4;
    height: calc(6 * var(--journey-mobile-u));
  }
  .journey-v2.is-mobile-scroll .journey-v2__progress span {
    width: 100%;
    transform-origin: left center;
  }
  .journey-v2.is-mobile-scroll .journey-v2__title {
    position: absolute;
    z-index: 5;
    top: calc(var(--journey-mobile-top) + 24 * var(--journey-mobile-u));
    left: calc(var(--journey-mobile-left) + 24 * var(--journey-mobile-u));
    display: block;
    width: auto;
    height: auto;
    font-size: calc(16 * var(--journey-mobile-u));
    line-height: 1;
    letter-spacing: calc(1 * var(--journey-mobile-u));
    white-space: nowrap;
  }
  .journey-v2.is-mobile-scroll .journey-v2__track {
    position: absolute;
    inset: 0;
    display: flex;
    will-change: transform;
  }
  .journey-v2.is-mobile-scroll .journey-v2__chapter,
  .journey-v2.is-mobile-scroll .journey-v2__chapter + .journey-v2__chapter {
    position: relative;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .journey-v2.is-mobile-scroll .journey-v2__item {
    position: absolute;
    top: calc(var(--journey-mobile-top) + var(--my) * var(--journey-mobile-u));
    right: auto;
    bottom: auto;
    left: calc(var(--journey-mobile-left) + var(--mx) * var(--journey-mobile-u));
    width: calc(var(--mw) * var(--journey-mobile-u));
    height: auto;
    max-width: none;
    margin: 0;
    grid-column: auto;
  }
  .journey-v2.is-mobile-scroll .journey-v2__primary {
    --mx: 24; --my: 84; --mw: 354;
    gap: calc(24 * var(--journey-mobile-u));
  }
  .journey-v2.is-mobile-scroll .journey-v2__year {
    font-size: calc(16 * var(--journey-mobile-u));
    line-height: 1;
  }
  .journey-v2.is-mobile-scroll .journey-v2__primary h3 {
    width: 100%;
    max-width: none;
    font-size: calc(44 * var(--journey-mobile-u));
    font-weight: 400;
    line-height: 1;
  }
  .journey-v2.is-mobile-scroll .journey-v2__copy {
    --mx: 24; --mw: 354;
    color: #666;
    font-size: calc(16 * var(--journey-mobile-u));
    line-height: calc(20 * var(--journey-mobile-u));
    text-align: justify;
  }
  .journey-v2.is-mobile-scroll .journey-v2__photo {
    height: calc(var(--mh) * var(--journey-mobile-u));
    aspect-ratio: auto;
    overflow: hidden;
  }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1027:2679"] .journey-v2__copy { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:106"] .journey-v2__copy { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1031:2712"] .journey-v2__copy { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:115"] .journey-v2__copy:nth-of-type(1) { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:115"] .journey-v2__copy:nth-of-type(2) { --my: 404; --mw: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1033:2721"] .journey-v2__copy { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1035:11"] .journey-v2__copy:nth-of-type(1) { --my: 288; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1035:11"] .journey-v2__copy:nth-of-type(2) { --my: 384; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__copy:nth-of-type(1) { --my: 294; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__copy:nth-of-type(2) { --my: 410; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:57"] .journey-v2__copy:nth-of-type(1) { --my: 294; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:57"] .journey-v2__copy:nth-of-type(2) { --my: 390; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:67"] .journey-v2__copy:nth-of-type(1) { --my: 236; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:67"] .journey-v2__copy:nth-of-type(2) { --my: 332; }
  /* Figures are mapped by source-image order in the shared desktop markup. */
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1027:2679"] .journey-v2__photo:nth-of-type(1) { --mx: 189; --my: 580; --mw: 189; --mh: 144; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1027:2679"] .journey-v2__photo:nth-of-type(2) { --mx: 24; --my: 408; --mw: 165; --mh: 172; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1027:2679"] .journey-v2__photo:nth-of-type(3) { --mx: 79; --my: 724; --mw: 110; --mh: 123; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:106"] .journey-v2__photo:nth-of-type(1) { --mx: 24; --my: 458; --mw: 165; --mh: 172; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:106"] .journey-v2__photo:nth-of-type(2) { --mx: 189; --my: 630; --mw: 189; --mh: 144; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:106"] .journey-v2__photo:nth-of-type(3) { --mx: 93; --my: 774; --mw: 96; --mh: 102; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1031:2712"] .journey-v2__photo:nth-of-type(1) { --mx: 178; --my: 655; --mw: 200; --mh: 145; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1031:2712"] .journey-v2__photo:nth-of-type(2) { --mx: 80; --my: 800; --mw: 98; --mh: 76; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1031:2712"] .journey-v2__photo:nth-of-type(3) { --mx: 24; --my: 432; --mw: 154; --mh: 223; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:115"] .journey-v2__photo:nth-of-type(1) { --mx: 134; --my: 712; --mw: 148; --mh: 164; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:115"] .journey-v2__photo:nth-of-type(2) { --mx: 282; --my: 598; --mw: 96; --mh: 114; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:115"] .journey-v2__photo:nth-of-type(3) { --mx: 24; --my: 584; --mw: 110; --mh: 128; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1033:2721"] .journey-v2__photo:nth-of-type(1) { --mx: 25; --my: 682; --mw: 114; --mh: 87; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1033:2721"] .journey-v2__photo:nth-of-type(2) { --mx: 236; --my: 621; --mw: 133; --mh: 148; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1033:2721"] .journey-v2__photo:nth-of-type(3) { --mx: 139; --my: 769; --mw: 97; --mh: 107; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1033:2721"] .journey-v2__photo:nth-of-type(4) { --mx: 24; --my: 461; --mw: 212; --mh: 160; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1035:11"] .journey-v2__photo:nth-of-type(1) { --mx: 189; --my: 627; --mw: 189; --mh: 144; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1035:11"] .journey-v2__photo:nth-of-type(2) { --mx: 47; --my: 771; --mw: 142; --mh: 109; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1035:11"] .journey-v2__photo:nth-of-type(3) { --mx: 24; --my: 496; --mw: 165; --mh: 186; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(1) { --mx: 24; --my: 756; --mw: 225; --mh: 120; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(2) { --mx: 289; --my: 537; --mw: 89; --mh: 54; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(3) { --mx: 24; --my: 538; --mw: 95; --mh: 113; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(4) { --mx: 177; --my: 538; --mw: 104; --mh: 88; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(5) { --mx: 127; --my: 538; --mw: 42; --mh: 75; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(6) { --mx: 161; --my: 634; --mw: 88; --mh: 114; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(7) { --mx: 257; --my: 634; --mw: 121; --mh: 152; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:21"] .journey-v2__photo:nth-of-type(8) { --mx: 103; --my: 658; --mw: 50; --mh: 90; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:57"] .journey-v2__photo:nth-of-type(1) { --mx: 189; --my: 732; --mw: 189; --mh: 144; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:57"] .journey-v2__photo:nth-of-type(2) { --mx: 189; --my: 477; --mw: 189; --mh: 145; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:57"] .journey-v2__photo:nth-of-type(3) { --mx: 24; --my: 622; --mw: 165; --mh: 110; }
  .journey-v2.is-mobile-scroll .journey-v2__chapter[data-figma-node="1036:67"] .journey-v2__photo:nth-of-type(1) { --mx: 24; --my: 458; --mw: 354; --mh: 418; }
}

/* Footer (desktop): the 1440 × 1000 contact frame fits the viewport on both
   axes, like What's Next, so on a laptop the whole panel — CONTACT US to the
   social row — is one screen and nothing needs to move. CONTACT US sits flush
   left: `left: -0.043em` pulls the C's left side bearing (Helvetica Neue 400)
   past the edge so its ink starts at x0, the same technique as the hero RADAR. */
@media (min-width: 1001px) {
  .contact { --footer-u: min(calc(100vw / 1440), calc(100svh / 1000)); }
  .contact > h2 {
    left: -0.043em;
    transform: none;
    text-align: left;
  }
}

/* Hero navbar right group (Figma `1071:2870`): campaign pill with the yellow
   PEMIMPI tag, 4px before the + toggle. Same pill metrics
   as the MERCHANDISE / SOON item in the menu (`1066:1105`), but primary text. */
.site-header__actions {
  display: flex;
  align-items: flex-start;
  gap: calc(4 * var(--pill-u));
}
.site-header .header-release {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pill-u));
  padding: calc(2 * var(--pill-u)) calc(2 * var(--pill-u)) calc(2 * var(--pill-u)) calc(10 * var(--pill-u));
  border-radius: 200px;
  background: #fff;
  color: #171717;
  font-size: calc(12 * var(--pill-u));
  font-weight: 500;
  line-height: calc(14 * var(--pill-u));
  text-decoration: none;
  white-space: nowrap;
}
.site-header .header-release small {
  padding: calc(4 * var(--pill-u)) calc(8 * var(--pill-u));
  border-radius: 200px;
  background: #ffe227;
  color: #000;
  font-size: calc(10 * var(--pill-u));
  font-weight: 400;
  line-height: calc(12 * var(--pill-u));
}

/* Preloader, Figma 1117:746. White panel, one word at a time centred (120/120
   Light #171717: RADAR → ALTERNATIVE → ROCK → PANDAAN) and the real load percentage
   bottom-left (200/200 Light #e80000). Shown only when JS runs (`.pl-js`, set inline
   in <head>); `preloader.js` tracks real hero/font/page loading, rolls the words
   letter by letter and wipes the panel up. Failsafe: if the script never runs, the
   panel hides itself after 12s so the page can never be trapped behind it. */
.preloader { display: none; }
.pl-js .preloader {
  --pl-u: min(calc(100vw / 1440), calc(100svh / 1000));
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  display: block;
  background: #fff;
  color: #171717;
  /* Explicit, not inherited: the panel sits outside .page-shell. */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  clip-path: inset(0 0 0 0);
  animation: preloader-failsafe 0s linear 12s forwards;
}
.pl-js.is-preloading,
.pl-js.is-preloading body { overflow: hidden; }
@keyframes preloader-failsafe { to { visibility: hidden; } }
.preloader p { margin: 0; }
/* The word line is a mask: letters roll up out of it and in from below. Words are
   stacked absolutely so the outgoing and incoming ones can overlap mid-roll. */
.preloader__word {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: calc(120 * var(--pl-u));
  overflow: clip;
  font-size: calc(120 * var(--pl-u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}
.preloader__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.preloader__letter { display: inline-block; }
/* 1112:35: bottom-left, flush with the frame edges, also a mask for the exit. */
.preloader__count {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: clip;
  color: #e80000;
  font-size: calc(200 * var(--pl-u));
  line-height: 1;
  white-space: nowrap;
}
.preloader__count > span { display: inline-block; }
@media (max-width: 620px) {
  /* No phone frame: ALTERNATIVE has to fit 402px, so the word drops to 52 units. */
  .pl-js .preloader { --pl-u: min(calc(100vw / 402), calc(100svh / 900)); }
  .preloader__word { height: calc(52 * var(--pl-u)); font-size: calc(52 * var(--pl-u)); }
  .preloader__count { font-size: calc(120 * var(--pl-u)); }
}

/* ===== New Signal Incoming — Figma 1116:744 =====
   Rest state = 1109:12807 (release + tilted listener cards behind the Blur-Bot wash).
   initSignalIncoming() in script.js adds .has-signal-intro and scrubs in from
   1109:12789 / 1109:12798. Everything is laid out on the 1440 × 1000 frame with
   --sig-u; the section is exactly one screen tall and pinned by that one trigger. */
.signal-v2 {
  --sig-u: min(calc(100vw / 1440), calc(100svh / 1000));
  /* Cards follow the width only, like the 1440 frame: on short laptop screens the
     column shrinks to fit the height, but the cards keep their Figma proportion. */
  --sig-cu: calc(100vw / 1440);
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  color: #171717;
  font-family: var(--font-sans);
}
.signal-v2 [hidden] { display: none !important; }
.signal-v2__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(1440 * var(--sig-cu));
  height: calc(1000 * var(--sig-cu));
  transform: translate(-50%, -50%);
}
.signal-v2__cards { position: absolute; inset: 0; }
/* "Review" cards: 403px wide at 20/24 (or 16/20 for .is-small), then scaled by --s
   (305.3 / 326.8 / 299.5px cards in Figma are the same card at 0.7576 / 0.8108 / 0.7432).
   --fall is the falling offset from initSignalIncoming(). */
.signal-v2__card {
  position: absolute;
  top: calc(var(--y) * var(--sig-cu));
  left: calc(var(--x) * var(--sig-cu));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--sig-cu));
  width: calc(403 * var(--sig-cu));
  margin: 0;
  padding: calc(16 * var(--sig-cu));
  border-radius: calc(8 * var(--sig-cu));
  background: #fff;
  box-shadow: 0 calc(4 * var(--sig-cu)) calc(6 * var(--sig-cu)) rgb(0 0 0 / 8%);
  text-transform: uppercase;
  transform: translate(-50%, calc(-50% + var(--fall, 0px))) rotate(3deg) skewX(-5deg) scale(var(--s));
}
.signal-v2__card.is-tilt-left {
  transform: translate(-50%, calc(-50% + var(--fall, 0px))) rotate(-3deg) skewX(5deg) scale(var(--s));
}
.signal-v2__card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #171717;
  font-size: calc(20 * var(--sig-cu));
  line-height: calc(24 * var(--sig-cu));
  text-align: justify;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.signal-v2__card cite {
  color: #666;
  font-size: calc(20 * var(--sig-cu));
  font-style: normal;
  line-height: calc(20 * var(--sig-cu));
}
.signal-v2__card.is-small p { font-size: calc(16 * var(--sig-cu)); line-height: calc(20 * var(--sig-cu)); }
.signal-v2__card.is-small cite { font-size: calc(16 * var(--sig-cu)); line-height: calc(16 * var(--sig-cu)); }
/* Falling stream: every card starts at the stage top and is moved only by --fall,
   so it enters above the screen and sinks into the opaque pink foot of the wash. */
.signal-v2.is-falling .signal-v2__card { top: 0; will-change: transform; }
/* Blur-Bot (1109:12790 / 1116:740 / 1116:742). The stops are variables so the
   scrub can move them: 51/72% with a white (state 0) or pink (state 1) bottom, then
   39/66% with a pink bottom in the rest state. */
.signal-v2__wash {
  --wash-a: 39.404;
  --wash-b: 66.262;
  --wash-end: 1;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* No backdrop blur: Figma's 6px Blur-Bot made every feedback card unreadable
     in the browser. The gradient alone fades the cards at the top and bottom. */
  background: linear-gradient(180deg,
    rgb(247 231 231) 1.0241%,
    rgb(253 248 248 / 52%) calc(var(--wash-a) * 1%),
    rgb(255 255 255 / 52%) calc(var(--wash-b) * 1%),
    color-mix(in srgb, rgb(247 231 231) calc(var(--wash-end) * 100%), #fff) 100%);
}
/* 1109:12791: label and lead, 20px apart, centred on the frame. */
.signal-v2__intro { display: none; }
.signal-v2.has-signal-intro .signal-v2__intro {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--sig-u));
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.signal-v2__label {
  margin: 0;
  color: #666;
  font-size: max(12px, calc(16 * var(--sig-u)));
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.signal-v2__lead {
  width: min(calc(1392 * var(--sig-u)), calc(100vw - 48px));
  margin: 0;
  color: #ffcdcd;
  /* 62 Light (1109:12797); capped by width so the 717-unit line fits phones. */
  font-size: min(calc(62 * var(--sig-u)), 7.4vw);
  font-weight: 300;
  line-height: 1;
  white-space: normal;
}
.signal-v2__letter { color: inherit; }
/* 1113:147 / 1109:12807: 456px column, 24px gaps, centred on the frame
   (28 Light label + 120 Light PEMIMPI, 20/24 copy, full-width player). */
.signal-v2__release {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--sig-u));
  width: calc(456 * var(--sig-u));
  text-align: center;
  transform: translate(-50%, -50%);
}
.signal-v2__headline {
  margin: 0;
  color: #e80000;
  font-size: calc(28 * var(--sig-u));
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.signal-v2__name {
  margin: 0;
  color: #171717;
  font-size: calc(120 * var(--sig-u));
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.signal-v2__summary {
  width: 100%;
  color: #666;
  font-size: max(16px, calc(20 * var(--revamp-unit)));
  line-height: 1.2;
}
.signal-v2__summary p { margin: 0; }
.signal-v2__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma 1167:82: 70px player, 12px gap, then the 14px feedback CTA. */
  gap: calc(12 * var(--sig-u));
  width: calc(473 * var(--sig-u));
  max-width: calc(100vw - 48px);
}
/* Figma 1133:900: compact black player shell, scrolling ticker and inset-lit
   red preview button. Fixed component pixels keep it readable and tappable at
   every existing breakpoint while the surrounding composition keeps --sig-u. */
.signal-v2__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px;
  border-radius: 8px;
  background: #171717;
}
.signal-v2__preview-invitation {
  position: relative;
  width: 100%;
  height: 26px;
  overflow: hidden;
  /* 1139:102: the outer copies fade out, the centre one is solid white. As a
     mask on the frame (not per copy) the fade holds while the ticker moves. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
}
.signal-v2__ticker-track {
  position: absolute;
  top: 6px;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;
  color: #fff;
  font: 500 14px/14px var(--font-sans);
  white-space: nowrap;
  animation: signal-ticker 14s linear infinite;
}
/* Gap as right padding, so each half (4 copies) is exactly 50% of the track. */
.signal-v2__ticker-track span { padding-right: 8px; }
@keyframes signal-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Static: three copies centred, so one sits in the middle as in the frame. */
  .signal-v2__ticker-track { left: 50%; animation: none; transform: translateX(-50%); }
  .signal-v2__ticker-track span:nth-child(n + 4) { display: none; }
}
.signal-v2__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
}
.signal-v2__play {
  width: 100%;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 8px;
  background: linear-gradient(180deg, #ff3939 0%, #b30000 100%);
  box-shadow: inset 0 4px 4px #ff6969;
  font: 500 16px/16px var(--font-sans);
  transition: filter .25s ease;
}
/* 1139:106 is 38 tall (10 + 16 + 10 + 2 border); 40 stays as the touch floor. */
@media (hover: hover) and (pointer: fine) {
  .signal-v2__play { min-height: 38px; }
}
/* styles.css underlines [data-preview-label] for the superseded text-link player. */
.signal-v2__play [data-preview-label] { text-decoration: none; }
.signal-v2__play:hover { filter: brightness(1.08); }
.signal-v2__play:disabled { filter: grayscale(1); cursor: default; }
.signal-v2__feedback {
  padding: 0;
  border: 0;
  background: none;
  color: #171717;
  font: 500 max(12px, calc(14 * var(--sig-u)))/1 var(--font-sans);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.signal-v2__feedback:hover { color: #e80000; }
.signal-v2 :is(.signal-v2__play, .signal-v2__feedback, .signal-v2__link):focus-visible {
  outline: 2px solid #e80000;
  outline-offset: 3px;
}
/* 30-second preview progress along the button's lower edge, shown once playback starts. */
.signal-v2__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: max(2px, calc(3 * var(--sig-u)));
  background: rgb(255 255 255 / 25%);
  opacity: 0;
  transition: opacity .25s ease;
}
.signal-v2:is(.is-preview-playing, .has-preview-started, .has-preview-paused) .signal-v2__progress { opacity: 1; }
.signal-v2__progress span {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
/* 1113:132: number #171717 + unit #666, 4px inside a pair, 12px between pairs. */
.signal-v2__timer {
  display: flex;
  gap: calc(12 * var(--sig-u));
  font-size: max(12px, calc(16 * var(--sig-u)));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.signal-v2__timer div { display: flex; gap: calc(4 * var(--sig-u)); }
.signal-v2__timer strong { color: #171717; font-weight: 400; }
.signal-v2__timer span { color: #666; }
/* Not in 1109:12807; kept as quiet text links so pre-save and the full feedback
   list stay reachable. */
.signal-v2__links { display: flex; gap: calc(16 * var(--sig-u)); }
.signal-v2__link {
  padding: 0;
  border: 0;
  background: none;
  color: #666;
  font: 500 max(11px, calc(12 * var(--sig-u)))/1 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signal-v2__link:hover { color: #e80000; }
/* 1109:12807 has no secondary links. Keep the feedback modal reachable after
   the listener finishes the preview, without changing the reference rest state. */
.signal-v2__links { display: none; }
.signal-v2.has-preview-finished .signal-v2__links { display: flex; }

@media (min-width: 621px) and (max-width: 1000px) {
  /* No tablet frame: the same composition on a 1000-unit width, side cards bleed off. */
  .signal-v2 { --sig-u: min(calc(100vw / 1000), calc(100svh / 1000)); --sig-cu: var(--sig-u); }
}
@media (max-width: 620px) {
  /* No phone frame for this section. The release keeps the desktop column on a
     520-unit width; the cards move onto a 402 × 900 frame (--mx/--my) at half size
     and the two beside the column are dropped. */
  .signal-v2 {
    --sig-u: min(calc(100vw / 520), calc(100svh / 1000));
    --sig-mu: min(calc(100vw / 402), calc(100svh / 900));
  }
  .signal-v2__stage { width: calc(402 * var(--sig-mu)); height: calc(900 * var(--sig-mu)); }
  .signal-v2__card {
    --sig-cu: var(--sig-mu);
    top: calc(var(--my) * var(--sig-mu));
    left: calc(var(--mx) * var(--sig-mu));
    transform: translate(-50%, calc(-50% + var(--fall, 0px))) rotate(3deg) skewX(-5deg) scale(calc(var(--s) * .52));
  }
  .signal-v2__card.is-tilt-left {
    transform: translate(-50%, calc(-50% + var(--fall, 0px))) rotate(-3deg) skewX(5deg) scale(calc(var(--s) * .52));
  }
  .signal-v2__card.is-desktop-only { display: none; }
  /* 120 Light PEMIMPI would leave an 18px gutter at 390px; keep it near the 24px frame. */
  .signal-v2__name { font-size: calc(108 * var(--sig-u)); }
}

/* ===== Track of Menjadi, phone — Figma 1109:15962 (402 × 1000) =====
   Supersedes the older 402px rules above (32/16px copy at y274, fixed tab widths).
   Everything vertical scales with --tm-u so the 1000-unit frame fits the phone's
   real height: the static page uses the width only, the pinned stage also the
   small viewport height (Safari with its bars), so the eight tabs can never cover
   the copy. Small type has floors to stay readable on short screens. */
@media (max-width: 620px) {
  .tracks {
    --tm-u: calc(100vw / 402);
    height: calc(1000 * var(--tm-u));
    min-height: 0;
    background: #fff;
  }
  .tracks.is-stacked { --tm-u: min(calc(100vw / 402), calc(100svh / 1000)); height: 100svh; }
  /* 1109:15963 stops the art 100 units above the bottom, but mid-stack (before all
     tabs are in) that left a white band under the first tabs. The art now covers
     the whole stage, cover-fit and anchored to the bottom. */
  .tracks .tracks-art { inset: 0; height: auto; }
  .tracks .tracks-art .tracks-background { object-position: 50% 100%; }
  .tracks .tracks-title,
  .tracks.is-stacked .tracks-title {
    top: calc(24 * var(--tm-u));
    left: 24px;
    font-size: calc(56 * var(--tm-u));
    line-height: calc(56 * var(--tm-u));
    letter-spacing: calc(-2 * var(--tm-u));
  }
  /* 1109:15974: y304, 24 between intro / paragraph / link. */
  .tracks .tracks-copy,
  .tracks.is-stacked .tracks-copy {
    top: calc(304 * var(--tm-u));
    right: auto;
    bottom: auto;
    left: 24px;
    width: calc(100% - 48px);
  }
  .tracks .tracks-copy h3,
  .tracks.is-stacked .tracks-copy h3 {
    margin-bottom: calc(24 * var(--tm-u));
    font-size: max(18px, calc(24 * var(--tm-u)));
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: normal;
  }
  .tracks .tracks-copy p,
  .tracks.is-stacked .tracks-copy p {
    display: block;
    margin-bottom: calc(24 * var(--tm-u));
    font-size: max(11px, calc(12 * var(--tm-u)));
    line-height: 1.3333;
    text-align: justify;
    text-transform: uppercase;
  }
  .tracks .tracks-copy a,
  .tracks.is-stacked .tracks-copy a {
    font-size: max(14px, calc(16 * var(--tm-u)));
    font-weight: 500;
    line-height: 1.25;
  }
  /* 1109:15979: right-aligned white tabs, each as wide as its content. */
  .tracks .track-list { right: 0; bottom: 0; width: 100%; }
  .tracks .track-list > li:nth-child(n) {
    width: max-content;
    min-width: 0;
    height: calc(52 * var(--tm-u));
    min-height: 0;
    gap: calc(12 * var(--tm-u));
    padding: 0 24px;
  }
  .tracks .track-list > li > span,
  .tracks.is-stacked .track-list > li > span {
    font-size: calc(32 * var(--tm-u));
    font-weight: 400;
    line-height: 1;
    letter-spacing: calc(-2 * var(--tm-u));
  }
  .tracks .track-list .is-current .track-release-meta > small {
    font-size: max(12px, calc(16 * var(--tm-u)));
    line-height: 1;
  }
  .tracks .track-list > li:nth-child(4) .track-status {
    padding: calc(4 * var(--tm-u)) calc(8 * var(--tm-u));
    border-radius: 200px;
    font-size: max(10px, calc(12 * var(--tm-u)));
    line-height: 1;
  }
  /* Figma order: … PEMIMPI, ALTRUIS, PERSONA SEMENTARA, AKHIR DARI PERMULAAN.
     RAHASIA SEMESTA is not in the frame; it keeps its album slot before AKHIR. */
  .tracks .track-list > li:nth-child(8) { order: 5; }
  .tracks .track-list > li:nth-child(5) { order: 6; }
  .tracks .track-list > li:nth-child(6) { order: 7; }
  .tracks .track-list > li:nth-child(7) { order: 8; }
}

/* ===== Hero, phone — fits the real screen =====
   The 402 × 800 frame (1067:1112) was a fixed 800px block, so on a phone whose
   visible height is shorter (iPhone Safari with bars ≈ 664px, small Android
   ≈ 640px) RADAR sat below the first screen. The section is now one screen tall,
   the art stage covers it at the frame's proportions, and RADAR is sized to the
   width (124 / 90 / −5 at 402 → 30.85vw) and anchored to the bottom edge. */
@media (max-width: 620px) {
  .hero {
    --hero-m: max(calc(100vw / 402), calc(100svh / 800));
    height: 100svh;
    min-height: 0;
  }
  .hero .hero-stage {
    top: 50%;
    left: 50%;
    width: calc(402 * var(--hero-m));
    height: calc(800 * var(--hero-m));
    transform: translate(-50%, -50%);
  }
  .hero .hero-stage .hero-background {
    top: calc(-197 * var(--hero-m));
    left: calc(-519 * var(--hero-m));
    width: calc(1897 * var(--hero-m));
    height: calc(1350 * var(--hero-m));
  }
  .hero .hero-stage .hero-photo { width: 100%; height: 100%; }
  .hero .hero-word {
    bottom: -0.04em;
    left: -0.0806em;
    font-size: 30.85vw;
    line-height: 0.7258em;
    letter-spacing: -0.0403em;
  }
}

/* ===== Hero — Figma 1118:747 =====
   1109:12839 / 1109:12865 (desktop) and 1109:16013 / 1109:16034 (phone). The logo
   is a bare white mark; RADAR is 280 / 260 / −10, its box overhanging the bottom
   by 34; a red release pill (212 × 42, 24 from the corner) opens the 450px
   card 12px above it and reads CLOSE while open (revamp.js). */
.site-header .brand { background: transparent; }
.site-header .brand img { filter: brightness(0) invert(1); }
.hero-release {
  --pill-u: 1px;
  position: absolute;
  right: calc(24 * var(--pill-u));
  bottom: calc(24 * var(--pill-u));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12 * var(--pill-u));
}
.hero-release__toggle {
  width: calc(212 * var(--pill-u));
  padding: calc(10 * var(--pill-u));
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 200px;
  background: linear-gradient(180deg, #ff3939 0%, #b30000 100%);
  box-shadow: inset 0 calc(4 * var(--pill-u)) calc(4 * var(--pill-u)) #ff6969;
  color: #fff;
  font: 500 calc(16 * var(--pill-u)) / calc(20 * var(--pill-u)) var(--font-sans);
  text-align: center;
  cursor: pointer;
  transition: filter .25s ease;
}
.hero-release__toggle:hover { filter: brightness(1.08); }
.hero-release__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The card leaves the header: in flow above the pill, rising 8px as it opens. */
.hero-release .latest-release {
  position: static;
  width: calc(450 * var(--pill-u));
  max-width: calc(100vw - 48px);
  transform: translateY(calc(8 * var(--pill-u)));
}
.hero-release .latest-release.is-open { transform: none; }
.hero-release .latest-release__body { display: block; }
.hero-release .latest-release__body p {
  font-size: calc(24 * var(--pill-u));
  line-height: calc(28 * var(--pill-u));
  letter-spacing: calc(-1 * var(--pill-u));
}
/* Closed, the card must not take clicks or space above the pill. */
.hero-release:not(.is-open) .latest-release { position: absolute; right: 0; bottom: 100%; }
@media (min-width: 1001px) {
  .hero-release { --pill-u: var(--revamp-unit); }
}
@media (min-width: 621px) {
  .hero .hero-word {
    bottom: calc(-34 * var(--hero-u));
    left: -0.0786em;
    font-size: calc(280 * var(--hero-u));
    line-height: calc(260 * var(--hero-u));
    letter-spacing: calc(-10 * var(--hero-u));
  }
}
@media (min-width: 621px) and (max-width: 1000px) {
  /* No tablet frame: the desktop composition on a width-only unit, so RADAR
     leaves the bottom-right corner to the pill. */
  .hero { --hero-u: calc(100vw / 1440); }
}
@media (max-width: 620px) {
  /* 1109:16020: logo and + only. */
  .site-header .header-release { display: none; }
  /* 1109:16019: 138 / 138 / −5.78 at 30% white, x−18, box bottom 19 below the frame. */
  .hero .hero-word {
    bottom: -0.1377em;
    left: -0.13em;
    font-size: 34.33vw;
    line-height: 1em;
    letter-spacing: -0.0419em;
    opacity: .3;
  }
  /* 1109:16032 / 1112:84: pill centred 24 from the bottom; the open card is the
     full 362 width (20 gutters) stacked 12 above it. */
  .hero-release { right: 20px; left: 20px; align-items: center; }
  .hero-release .latest-release { width: 100%; max-width: none; }
}

/* ===== About RADAR — Figma 1139:218 =====
   Supersedes the 1065:990 About rules above (absolute intro/roster, member row).
   One grid holds intro, roster and the journey button:
   desktop 1139:2 (1440 × 800): label top-left; a 378-unit block 24 above the
     bottom — intro top-left, READ OUR JOURNEY bottom-left, roster bottom-right
     with photos on the right of right-aligned names;
   phone 1139:182 (402 × 885): label, 92 gap, intro, 56 gap, roster (photo left),
     full-width button at the bottom. */
.about-v2 .about-v2__intro,
.about-v2 .about-v2__roster {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  transform: none;
}
.about-v2 .about-v2__body { display: grid; }
.about-v2 .about-v2__intro { grid-area: intro; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.about-v2 .about-v2__roster { grid-area: roster; }
.about-v2 .about-v2__title { margin: 0; color: #171717; font-weight: 400; letter-spacing: 0; white-space: normal; }
.about-v2 .about-v2__copy { width: auto; max-width: none; margin: 0; color: #666; font-weight: 400; }
.about-v2 .about-v2__members-label { margin: 0; color: #666; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.about-v2 .about-v2__members { display: flex; width: auto; height: auto; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.about-v2 .about-v2__members li:nth-child(n) { display: flex; width: auto; height: auto; align-items: flex-start; }
.about-v2 .about-v2__members img { flex: none; object-fit: cover; }
.about-v2 .about-v2__members li > div { display: flex; min-width: 0; flex-direction: column; white-space: nowrap; }
.about-v2 .about-v2__members span { color: #000; font-weight: 400; }
.about-v2 .about-v2__members small { color: #e80000; font-weight: 400; }
/* 1139:109: the same red pill as the hero release button (1109:12863). */
.about-v2 .about-v2__journey-link {
  grid-area: link;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 200px;
  background: linear-gradient(180deg, #ff3939 0%, #b30000 100%);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .25s ease;
}
.about-v2 .about-v2__journey-link:hover { filter: brightness(1.08); }
.about-v2 .about-v2__journey-link:focus-visible { outline: 2px solid #e80000; outline-offset: 3px; }

@media (min-width: 1001px) {
  .about-v2 { --about-u: min(calc(100vw / 1440), calc(100svh / 800)); height: 100svh; }
  .about-v2 .about-v2__body {
    position: absolute;
    right: calc(24 * var(--about-u));
    bottom: calc(24 * var(--about-u));
    left: calc(24 * var(--about-u));
    height: calc(378 * var(--about-u));
    grid-template-columns: calc(447 * var(--about-u)) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "intro roster" "link roster";
  }
  .about-v2 .about-v2__intro { gap: calc(24 * var(--about-u)); }
  .about-v2 .about-v2__title { font-size: calc(62 * var(--about-u)); line-height: calc(62 * var(--about-u)); }
  .about-v2 .about-v2__copy { font-size: calc(20 * var(--about-u)); line-height: calc(24 * var(--about-u)); }
  .about-v2 .about-v2__roster {
    display: flex;
    align-self: end;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(24 * var(--about-u));
  }
  .about-v2 .about-v2__members-label { font-size: calc(16 * var(--about-u)); line-height: calc(16 * var(--about-u)); }
  .about-v2 .about-v2__members { align-items: flex-end; gap: calc(12 * var(--about-u)); }
  .about-v2 .about-v2__members li:nth-child(n) { flex-direction: row-reverse; gap: calc(10 * var(--about-u)); }
  .about-v2 .about-v2__members img { width: calc(46 * var(--about-u)); height: calc(46 * var(--about-u)); }
  .about-v2 .about-v2__members li > div { align-items: flex-end; gap: calc(6 * var(--about-u)); }
  .about-v2 .about-v2__members span { font-size: calc(28 * var(--about-u)); line-height: calc(28 * var(--about-u)); }
  .about-v2 .about-v2__members small { font-size: calc(12 * var(--about-u)); line-height: calc(12 * var(--about-u)); }
  .about-v2 .about-v2__journey-link {
    align-self: end;
    width: calc(212 * var(--about-u));
    padding: calc(10 * var(--about-u));
    box-shadow: inset 0 calc(4 * var(--about-u)) calc(4 * var(--about-u)) #ff6969;
    font-size: calc(16 * var(--about-u));
    line-height: calc(20 * var(--about-u));
  }
}

@media (max-width: 1000px) {
  /* No tablet frame: tablets use the phone stack with a 212px button. */
  .about-v2 {
    display: flex;
    height: auto;
    min-height: 885px;
    flex-direction: column;
    gap: 92px;
    padding: 24px;
  }
  .about-v2 .about-v2__label {
    position: static;
    margin: 0;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1px;
  }
  .about-v2 .about-v2__body {
    flex: 1 0 auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "intro" "roster" "link";
    row-gap: 56px;
  }
  .about-v2 .about-v2__intro { gap: 16px; }
  .about-v2 .about-v2__title { font-size: 52px; line-height: 56px; }
  .about-v2 .about-v2__copy { max-width: 614px; font-size: 16px; line-height: 20px; }
  .about-v2 .about-v2__roster { display: flex; flex-direction: column; gap: 24px; }
  .about-v2 .about-v2__members-label { font-size: 16px; line-height: 16px; }
  .about-v2 .about-v2__members { gap: 16px; }
  .about-v2 .about-v2__members li:nth-child(n) { gap: 10px; }
  .about-v2 .about-v2__members img { width: 40px; height: 40px; }
  .about-v2 .about-v2__members li > div { gap: 8px; }
  .about-v2 .about-v2__members span { font-size: 20px; line-height: 20px; }
  .about-v2 .about-v2__members small { font-size: 12px; line-height: 12px; }
  .about-v2 .about-v2__journey-link {
    align-self: end;
    width: 212px;
    padding: 10px;
    box-shadow: inset 0 4px 4px #ff6969;
    font-size: 16px;
    line-height: 20px;
  }
}
@media (max-width: 620px) {
  /* 1139:214: the button spans the 354px column. */
  .about-v2 .about-v2__journey-link { width: 100%; }
}
@media (max-width: 380px) {
  .about-v2 .about-v2__title { font-size: 44px; line-height: 48px; }
}

/* Section covers (revamp.js, mouse/trackpad): each later section, or the
   pin-spacer around it, paints above the held one before it. Same z-index for
   all, so DOM order decides; the hero keeps 0 inside its own spacer. */
.has-section-covers main > :is(section, footer, .pin-spacer) { position: relative; z-index: 1; }