/* ==========================================================================
   re.works — stylesheet
   Values transcribed from the approved Claude Design artboard
   ("re-works Home.dc.html"). Do not retune without a new artboard.
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("./switzer-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("./switzer-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Artboard props: flood = #EDE6D8, heroFlood = #FF5948 */
  --a:            #EDE6D8;
  --hero:         #FF5948;

  --bg:           #08090C;
  --nda-bg:       #17181A;
  --panel:        #0A0C10;

  --ink:          #F2F0EA;
  --ink-cream:    #EDE6D8;
  --ink-dark:     #14181E;
  --body:         #8D96A3;
  --body-soft:    #B4BCC7;
  --eyebrow-ink:  #D5DAE2;
  --mute:         #7B8492;
  --faint:        #565F6B;

  --rule:         #1E232B;
  --rule-2:       #2A313A;
  --tag-accent:   #FF7A63;

  --header-dark:  rgba(8, 9, 12, 0.72);   /* latar header saat di atas seksi gelap */
  --hairline:     rgba(20, 24, 30, 0.09); /* semua garis rambut di seksi terang,
                                             vertikal maupun horizontal */

  --pad-x:        clamp(18px, 4vw, 56px);
  --ease:         cubic-bezier(.16, 1, .3, 1);

  /* Satu-satunya radius untuk permukaan gambar besar: kartu marquee, headshot
     hero, kartu "See another deck", dan slide showcase. Sengaja tipis — cukup
     melunakkan sudut tanpa membuat halaman terbaca lembut. Pill (999px) dan
     lingkaran (50%) punya nilainya sendiri, jangan disatukan ke sini. */
  --radius:       6px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Switzer, system-ui, sans-serif;
  font-weight: 400;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #14181E; color: #EDE6D8; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--a); }
/* Plain links in the light sections tint coral on hover. Pills are excluded:
   this rule carries ID specificity, so without the exclusion it beats
   .rw-talk:hover / .rw-pill--ink:hover and paints the label coral on a coral
   background — the text disappears. */
#faq a:not(.rw-pill--ink):hover,
#contact a:not(.rw-talk):hover { color: var(--hero); }

img, svg { display: block; }
figure { margin: 0; }

/* Jam di lokasi footer — HANYA mobile. Lihat blok ≤720px. */
.rw-footer__time { display: none; }

/* Friksi penyalinan gambar — mematikan seret-ke-desktop dan seleksi.
   BUKAN proteksi; alasan lengkapnya di komentar guardImages() assets/app.js. */
img, svg {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 3px;
  border-radius: 2px;
}

.rw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--a);
  color: var(--ink-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rw-skip:focus { left: 12px; top: 12px; }

.rw-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */

@keyframes nvLine    { from { transform: translateY(105%) rotate(2deg); } to { transform: translateY(0) rotate(0); } }
@keyframes nvUp      { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nvFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes nvMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes nvPulse   { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes nvCurtain { 0%,62% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

/* --------------------------------------------------------------------------
   4. Preloader
   -------------------------------------------------------------------------- */

.rw-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5vw;
  animation: nvCurtain 2.05s cubic-bezier(.7,0,.2,1) forwards;
}
.rw-intro__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}
.rw-intro__mark { display: flex; align-items: center; gap: 14px; }
.rw-intro__mark img { height: 44px; width: auto; }
.rw-intro__word {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--ink);
}
.rw-intro__count {
  font-size: clamp(76px, 14vw, 210px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: var(--ink);
}
.rw-intro__foot {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.rw-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--pad-x);
  background: var(--header-dark);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color .45s ease, border-color .45s ease;
}
.rw-header__brand { display: flex; align-items: center; gap: 11px; }
.rw-header__brand img { height: 26px; width: auto; }
.rw-header__word {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--ink);
  transition: color .45s ease;
}
.rw-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rw-nav a {
  display: flex;
  align-items: center;
  color: var(--ink);
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.rw-nav a span { font-weight: 700; }

/* Hamburger — hanya mobile & tablet (<=1024px). Halaman deck tidak memakainya:
   header-nya cuma mark + All work, tidak ada menu untuk dilipat. */
.rw-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: color .45s ease;
}
.rw-navtoggle span {
  display: block;
  position: relative;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}
.rw-navtoggle span::before,
.rw-navtoggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}
.rw-navtoggle span::before { top: -6px; }
.rw-navtoggle span::after  { top: 6px; }
.rw-navtoggle[aria-expanded="true"] span { background: transparent; }
.rw-navtoggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.rw-navtoggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.rw-navpanel {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 5vh, 54px);
  /* Padding hanya vertikal: rail di dalamnya lebar penuh dan mengurus
     talangnya sendiri lewat margin negatif, sama seperti rail di home. */
  padding: clamp(70px, 11vh, 110px) 0 clamp(26px, 4.5vh, 44px);
  overflow-y: auto;
}
.rw-navpanel[hidden] { display: none; }

.rw-navpanel__menu {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-x);
}
.rw-navpanel a {
  /* Sentence case, bukan uppercase bertracking — mengikuti referensi Rezka,
     dan sekaligus menjauhkan panel ini dari tampilan menu generik. */
  font-size: clamp(30px, 9.5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  transition: color .3s ease;
  /* Padding vertikal, bukan gap induk: ia menaikkan tinggi target sentuh
     sampai di atas ambang 44px sekaligus memberi jarak antarbaris. */
  padding: 11px 0;
}
.rw-navpanel a:hover { color: var(--hero); }

/* Marquee di dalam panel. Rail yang sama dengan home — komponen, tinggi, dan
   drag-nya identik; yang berbeda hanya tingginya. Kartunya lazy: panel
   tertutup saat halaman dimuat, jadi tidak membebani muat pertama.
   autoRail() mengukur lebar kartu saat init, dan saat itu panel masih
   `hidden` sehingga lebarnya 0 — navMenu() menembakkan `resize` begitu panel
   dibuka supaya rail mengukur ulang. Jangan hapus baris itu. */
.rw-navpanel__rail {
  height: clamp(150px, 46vw, 260px);
  flex: none;
}
/* `.rw-rail__frame` berlatar #FFFFFF dan bergaris 1px, jadi gambar duduk 1px di
   dalamnya dan latar putih itu menyembul sebagai cincin mengelilingi tile. Di
   latar bone halaman utama cincin itu tak terlihat; di panel gelap ini ia
   menyala — terutama di tile KEYWARD yang slide-nya nyaris hitam.
   Diturunkan ke abu-abu garis: masih memisahkan tile dari latar, tanpa nyala. */
.rw-navpanel__rail .rw-rail__frame {
  background: var(--rule-2);
  border-color: var(--rule);
}

.rw-navpanel__tagline {
  margin: 0 var(--pad-x);
  padding-top: clamp(20px, 3.4vh, 34px);
  border-top: 1px solid var(--rule-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-soft);
}

@media (max-width: 1024px) {
  .rw-nav { display: none; }
  .rw-navtoggle { display: inline-flex; }
}
@media (min-width: 1025px) {
  .rw-navpanel { display: none; }
}

/* --------------------------------------------------------------------------
   6. Shared pieces
   -------------------------------------------------------------------------- */

.rw-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.rw-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rw-arrow { display: inline-flex; }
.rw-arrow svg { flex: none; }

.rw-columns {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-right: 1px solid var(--hairline);
}
.rw-columns span { border-left: 1px solid var(--hairline); }

/* Auto-scrolling rail (never user-driven) */
.rw-rail {
  position: relative;
  z-index: 1;
  /* Dulu `width: 100vw` + margin kiri negatif. `100vw` sudah termasuk lebar
     scrollbar, jadi di desktop berscrollbar klasik rail melewati tepi dan
     memunculkan scrollbar horizontal (25px di 768). Margin negatif di kedua
     sisi memberi lebar penuh yang sama tanpa menyentuh 100vw.
     autoRail() mengukur lebar kartu, bukan lebar rail — aman diubah. */
  width: auto;
  margin-inline: calc(var(--pad-x) * -1);
  /* Taller on desktop; the vh term keeps the hero inside short laptop screens.
     Below ~770px this still resolves to the artboard's 146px floor. */
  height: clamp(146px, min(19vw, 30vh), 300px);
  overflow: hidden;
  /* Drag horizontal (assets/app.js). `pan-y` membiarkan scroll vertikal halaman
     lewat — tanpa itu rail membajak scroll di ponsel. `grab` memberi tahu
     bahwa rail bisa didorong; tanpa isyarat itu tidak ada yang mencobanya. */
  touch-action: pan-y;
  cursor: grab;
  /* Tanpa mask fade di tepi — tile terpotong tegas di batas layar. */
}
.rw-rail__card {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;   /* width follows the rail height, always 16:9 */
}
.rw-rail__frame {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  color: var(--ink-dark);
  border: 1px solid rgba(20, 24, 30, 0.14);
  border-radius: var(--radius);
  /* `overflow: hidden` sendirian yang memotong gambar ke sudut — sama seperti
     .rw-headshot, .rw-slide, .rw-deckcard. JANGAN menambah `border-radius:
     inherit` pada img: img mengisi padding box, yang radius dalamnya 6−1=5px,
     jadi img ber-radius 6px akan memotong lebih dalam dari kliping induknya
     dan menyisakan sesabit latar frame di tiap sudut. */
  overflow: hidden;
  /* No hover state and no desaturation — tiles show their own colour. */
}
.rw-rail.is-dragging { cursor: grabbing; }
.rw-rail__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Pill buttons */
.rw-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: 999px;
  background-color: var(--hero);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  will-change: transform;
  transition: background-color .3s var(--ease);
}
.rw-pill:hover { filter: brightness(1.06); color: #FFFFFF; }

.rw-pill--bone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--ink-cream);
  color: var(--ink-dark);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: filter .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.rw-pill--bone:hover { background: var(--hero); color: #FFFFFF; transform: translateY(-2px); }

.rw-pill--ink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--ink-dark);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.rw-pill--ink:hover { background: var(--hero); color: #FFFFFF; transform: translateY(-2px); }

/* Accordion rows — shared by Under NDA and What you get */
.rw-row {
  padding: clamp(18px, 2.4vw, 30px) 0;
  cursor: pointer;
  transition: background-color .4s var(--ease);
}
.rw-row + .rw-row { border-top: 1px solid rgba(237, 230, 216, 0.14); }
.rw-row__head {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: center;
}
.rw-row__no { font-size: 11px; letter-spacing: 0.14em; }
.rw-row__title {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  transition: transform .45s var(--ease);
}
.rw-row__aside {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
}
.rw-row__code {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rw-plus { position: relative; flex: none; width: 14px; height: 14px; }
.rw-plus i {
  position: absolute;
  left: 0; top: 6.5px;
  width: 14px; height: 1px;
  background: currentColor;
}
.rw-plus b {
  position: absolute;
  left: 6.5px; top: 0;
  width: 1px; height: 14px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform .4s var(--ease);
}
.rw-row__detail {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .55s var(--ease), opacity .4s ease;
}
.rw-row__detail > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(16px, 2vw, 26px) 0 4px 70px;
  align-items: start;
}
.rw-row__detail p {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  max-width: 46ch;
}
.rw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-tags span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 12px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

#top {
  scroll-margin-top: 84px;
  position: relative;
  min-height: 100svh;
  background: var(--a);
  color: #FFFFFF;
  overflow: hidden;
  cursor: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(100px, 13vh, 160px) var(--pad-x) 0;
}
.rw-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 125px; height: 125px;
  border-radius: 50%;
  background: var(--ink-dark);
  opacity: 0;
  transform: translate3d(-200px, -200px, 0);
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
}
.rw-hero__body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3.4vh, 40px);
}
.rw-hero__h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(26px, 5.8vw, 88px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.rw-hero__h1 > span { display: block; overflow: hidden; padding-bottom: 0.04em; }
.rw-hero__h1 > span:last-child { padding-bottom: 0.1em; }

/* Cursor-tracked tint: coral inside a 62px radius, ink outside. */
.rw-tint {
  background-image: radial-gradient(circle at var(--cx, -300px) var(--cy, -300px), var(--hero) 0 62px, var(--ink-dark) 62px);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.rw-hero__h1 .rw-tint { display: block; }
.rw-hero__h1 > span:nth-child(1) .rw-tint { animation: nvLine 1.05s 1.55s var(--ease) both; }
.rw-hero__h1 > span:nth-child(2) .rw-tint { animation: nvLine 1.05s 1.68s var(--ease) both; }
.rw-hero__h1 > span:nth-child(3) .rw-tint { animation: nvLine 1.05s 1.81s var(--ease) both; }

.rw-hero__rail { animation: nvFade 1.2s 2s both; }

.rw-herofoot {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(34px, 6vh, 78px) 0 clamp(30px, 4.5vh, 54px);
}
/* `stretch`: tinggi headshot mengikuti blok teks di sebelahnya, jadi tepi atas
   dan bawahnya sejajar dengan judul dan baris terakhir paragraf. Dulu
   `flex-end` + aspect-ratio 4:5, yang membuat fotonya menonjol 21px di atas
   judul. Di ≤720px dikembalikan ke flex-end — lihat blok responsive. */
.rw-herofoot__left { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px); }
.rw-headshot {
  flex: none;
  position: relative;
  width: clamp(92px, 9vw, 132px);
  /* Tanpa aspect-ratio: tingginya datang dari `stretch` induknya. Gambar
     sumbernya 600×600, dan `object-fit: cover` memotong sisi seperlunya. */
  border: 1px solid rgba(20, 24, 30, 0.28);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink-dark);
  animation: nvUp 1s 1.9s var(--ease) both;
}
.rw-headshot img { width: 100%; height: 100%; object-fit: cover; }
.rw-herofoot__text { display: flex; flex-direction: column; gap: 10px; }
.rw-herofoot__title {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
  animation: nvUp 1s 1.85s var(--ease) both;
}
.rw-herofoot__copy {
  margin: 0;
  max-width: 64ch;
  text-align: left;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
  animation: nvUp 1s 1.95s var(--ease) both;
}
.rw-herofoot__cta { flex: none; animation: nvUp 1s 2.1s var(--ease) both; }

/* --------------------------------------------------------------------------
   8. Pixel wipe band
   -------------------------------------------------------------------------- */

.rw-wipe {
  position: relative;
  height: clamp(154px, 27vh, 322px);
  background: var(--wipe-bg);
  overflow: hidden;
}
.rw-wipe span {
  position: absolute;
  bottom: 0;
  width: calc(2.9412% + 1.5px);
  height: 0%;
  background: var(--wipe-col);
}
/* hero (bone) → Under NDA (dark) */
.rw-wipe--to-dark { --wipe-bg: var(--a); --wipe-col: var(--nda-bg); }
/* Process (dark) → FAQ (bone) */
.rw-wipe--to-bone { --wipe-bg: #08090C;  --wipe-col: var(--a); }

/* --------------------------------------------------------------------------
   9. Under NDA
   -------------------------------------------------------------------------- */

#nda {
  scroll-margin-top: 84px;
  background: var(--nda-bg);
  color: var(--ink-cream);
  padding: clamp(90px, 16vh, 190px) var(--pad-x) clamp(70px, 11vh, 130px);
}
#nda .rw-eyebrow {
  grid-column: span 2;
  color: rgba(237, 230, 216, 0.92);
  padding-top: 12px;
}
.rw-lead {
  grid-column: 3 / span 10;
  margin: 0;
  font-size: clamp(20px, 2.6vw, 42px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-wrap: pretty;
  animation: nvUp 1.1s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 8% entry 68%;
}
#nda .rw-lead { color: var(--ink-cream); }
.rw-lead em { font-style: normal; color: var(--hero); }

.rw-rows {
  grid-column: 3 / span 10;
  display: flex;
  flex-direction: column;
}
#nda .rw-rows { margin-top: clamp(48px, 9vh, 116px); }
#nda .rw-row:hover { background-color: #1C1F22; }
#nda .rw-row__no,
#nda .rw-plus { color: var(--ink-cream); }
#nda .rw-row__code { color: rgba(237, 230, 216, 0.62); }
#nda .rw-row__detail p { color: rgba(237, 230, 216, 0.75); }
#nda .rw-tags span {
  color: rgba(237, 230, 216, 0.7);
  border: 1px solid rgba(237, 230, 216, 0.24);
}
.rw-nda__cta {
  grid-column: 3 / span 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 48px);
}

/* --------------------------------------------------------------------------
   10. Selected work — sticky stacked panels (scroll-driven, not a slider)
   -------------------------------------------------------------------------- */

#work { scroll-margin-top: 84px; }
.rw-work__head {
  scroll-margin-top: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(44px, 7vh, 96px) var(--pad-x) clamp(26px, 4vh, 48px);
}
.rw-work__title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 22ch;
}
.rw-work__note {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}
.rw-stack { position: relative; }
.rw-panel {
  position: sticky;
  top: 0;
  height: 100svh;
  transform-origin: 50% 50%;
  will-change: transform;
}
.rw-panel__frame {
  /* Dikunci 16:9 supaya slide deck tidak pernah terpotong. Sebelumnya `inset`
     membuat frame mengikuti bentuk viewport, jadi di ponsel yang tampil hanya
     pita vertikal — 22% slide di 390px, 80% di 1440px. Lebarnya kini diambil
     dari mana yang lebih kecil: lebar panel dikurangi inset, atau tinggi panel
     dikurangi inset dikali 16/9, sehingga frame selalu muat utuh.
     `100svh` terikat pada `.rw-panel { height: 100svh }` di atas — kalau
     tinggi panel diubah, ubah juga di sini. */
  --inset: clamp(8px, 1.1vw, 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  /* `translate` (properti tersendiri, bukan `transform`) supaya tidak
     bertabrakan dengan scale/rotate yang ditulis drivePanels ke .rw-panel. */
  translate: -50% -50%;
  width: min(100% - 2 * var(--inset), (100svh - 2 * var(--inset)) * 16 / 9);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
}
.rw-panel__media {
  /* Media pas benar dengan bingkai — TANPA overscan, jadi tanpa parallax
     vertikal. Sempat dikembalikan 1 Sep 2026 lalu dibatalkan Rezka di menit
     yang sama: tampilan tanpa parallax sudah benar. Kalau suatu saat parallax
     diminta lagi, ia butuh `top/bottom: -7%` di sini DAN baris transform di
     drivePanels() — keduanya, tidak bisa salah satu. Konsekuensinya 7% tiap
     sisi thumbnail terpotong. */
  position: absolute;
  inset: 0;
  will-change: filter;
}
/* <picture> membungkus <img> sejak thumbnail mobile persegi masuk. Tanpa
   `display: block; height: 100%` ia tetap inline dan `height: 100%` pada img
   tidak punya acuan — gambar mengecil. */
.rw-panel__media picture { display: block; width: 100%; height: 100%; }
.rw-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rw-panel__caption {
  position: absolute;
  inset: 0;
  /* CTA dipusatkan (1 Sep 2026). Logo overlay sudah dibuang — thumbnail
     membawa logo dan nama deck sendiri. Padding tetap disamakan dengan
     .rw-panel__count / __topright supaya sudut-sudutnya sebaris. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* bawah */
  align-items: center;         /* tengah mendatar */
  /* Padding bawah disamakan dengan .rw-panel__count supaya CTA duduk di garis
     yang sama dengan sudut-sudut lain, hanya di tengah. */
  padding: clamp(24px, 4.5vh, 46px) var(--pad-x) clamp(22px, 4vh, 40px);
  pointer-events: none;
}
.rw-panel__cta {
  pointer-events: auto;
  padding: 13px 27px;   /* the panel pill is one step smaller than the section pills */
  background: var(--a);
}
/* Baris kanan-atas: meta (sektor · tahap) lalu `Self-initiated` di kanannya.
   Counter memegang sudut kiri-atas, CTA di tengah. */
.rw-panel__topright {
  position: absolute;
  right: var(--pad-x);
  top: clamp(24px, 4.5vh, 46px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  max-width: calc(100% - 2 * var(--pad-x));
  pointer-events: none;
}
/* ⚠️ Warnanya DIBALIK 3 September 2026 atas permintaan Rezka: chip gelap
   dengan teks terang, bukan sebaliknya. Ini menyentuh desktop — aturan warna
   ini ada di blok dasar, bukan media query — jadi kunci desktop dibuka untuk
   perubahan ini saja. Tercatat di _kunciPernahDibuka pada desktop-baseline.json.
   Geometrinya tidak berubah sedikit pun: sidik jari 18 titik identik. */
.rw-panel__flag {
  flex: none;
  background: var(--ink-dark);
  color: var(--ink);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.rw-panel__meta {
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
  /* Scrim dicabut 1 Sep 2026 supaya deck tampil penuh, jadi teks ini kini duduk
     langsung di atas thumbnail. Text-shadow menggantikan tugas scrim tanpa
     menyentuh gambarnya sama sekali — hanya glifnya yang mendapat backing. */
  text-shadow: 0 1px 2px rgba(8, 9, 12, 0.75), 0 0 10px rgba(8, 9, 12, 0.45);
  pointer-events: none;
}
.rw-panel__count {
  position: absolute;
  left: var(--pad-x);
  top: clamp(24px, 4.5vh, 46px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 2px rgba(8, 9, 12, 0.75), 0 0 10px rgba(8, 9, 12, 0.45);
  pointer-events: none;
}
.rw-panel__count b { color: #FFFFFF; font-weight: 700; }
/* Dinaikkan dua kali. Pertama ke --body-soft saat scrim dilemahkan; lalu ke
   --ink penuh saat scrim dicabut seluruhnya. Di piksel TERTERANG pita teks,
   --body-soft hanya 2,50 : 1 di KEYWARD — --ink membawanya ke 4,21, dan
   text-shadow di atas menutup sisanya. Jangan diturunkan lagi. */
.rw-panel__count span { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */

#process {
  scroll-margin-top: 84px;
  padding: clamp(90px, 16vh, 190px) var(--pad-x);
}
#process .rw-eyebrow { grid-column: span 2; color: var(--eyebrow-ink); padding-top: 12px; }
#process .rw-lead { color: var(--ink); }
#process .rw-lead em { color: var(--hero); }

.rw-timeline {
  margin-top: clamp(46px, 8vh, 104px);
  position: relative;
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.rw-timeline__edge {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  border-right: 1px dashed var(--rule-2);
}
.rw-step {
  position: relative;
  padding: clamp(26px, 4vh, 46px) clamp(14px, 1.7vw, 30px) clamp(22px, 3.4vh, 44px);
}
.rw-step__edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 1px dashed var(--rule-2);
}
.rw-step__code {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.rw-step__title {
  margin: clamp(14px, 2vh, 20px) 0 0;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
}
/* Staircase: each step's title sits one tread lower than the last. */
.rw-step:nth-child(3) .rw-step__title { margin-top: calc(clamp(14px, 2vh, 20px) + clamp(70px, 11vh, 130px)); }
.rw-step:nth-child(4) .rw-step__title { margin-top: calc(clamp(14px, 2vh, 20px) + clamp(140px, 22vh, 260px)); }
.rw-step:nth-child(5) .rw-step__title { margin-top: calc(clamp(14px, 2vh, 20px) + clamp(210px, 33vh, 390px)); }

.rw-step__copy {
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}
.rw-step__tags {
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tag-accent);
  text-wrap: pretty;
}
.rw-step__meter {
  margin-top: clamp(36px, 6vh, 84px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-step__meter span:first-child { font-size: 12px; letter-spacing: 0.04em; color: var(--ink); }
.rw-step__meter i { display: block; height: 3px; background: var(--ink-cream); }

/* ---- "What you get" — empat kartu ------------------------------------
   Menggantikan akordeon empat baris (1 September 2026). Bentuk kartunya —
   sudut membulat besar + tab folder di kanan-atas — diminta Rezka dari sebuah
   referensi, jadi ia BUKAN turunan artboard. Catatan lengkap di CLAUDE.md. */

.rw-get__head {
  grid-column: 1 / -1;
  margin: clamp(64px, 11vh, 140px) 0 0;
  text-align: center;
  /* Disamakan persis dengan .rw-work__title ("Design samples") — keduanya
     headline seksi, bukan eyebrow. Uppercase di sini TIDAK melanggar aturan
     "maksimal satu eyebrow uppercase per seksi": aturan itu soal eyebrow 11px
     bertracking, bukan display type. Lihat docs/brand.md §7. */
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.rw-getcards {
  --get-tab-h: clamp(26px, 2.2vw, 36px);
  --get-tab-w: 46%;
  --get-radius: clamp(12px, 1.1vw, 16px);
  /* Panjang mendatar diagonal yang menaikkan tepi kartu ke tab. Referensinya
     naik 40px dengan lari 55px, jadi sedikit lebih landai dari 45°. */
  --get-slant: calc(var(--get-tab-h) * 1.35);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  margin-top: clamp(34px, 6vh, 72px);
}

.rw-get {
  position: relative;
  /* Parallax masuk di mobile digerakkan JS (getCards). `will-change` hanya
     dipasang di blok ≤720px — di desktop kartunya diam dan promosi layer
     compositor cuma membuang memori. */
  margin-top: var(--get-tab-h);        /* ruang untuk tab yang menonjol ke atas */
  display: flex;
  flex-direction: column;
  /* Gradien menggelap ke bawah. Lapisan gelapnya memakai --bg, dan di puncak
     kartu ia transparan penuh — jadi warna di garis pertemuan dengan tab
     persis sama dengan tab, dan jahitannya tetap tak terlihat. Berhenti di
     0.55 supaya tepi bawah kartu tidak lenyap ke latar seksi (#08090C). */
  background:
    linear-gradient(180deg, rgba(8, 9, 12, 0) 40%, rgba(8, 9, 12, 0.55) 100%),
    var(--nda-bg);
  border-radius: var(--get-radius);
  border-top-right-radius: 0;          /* sudut itu disediakan tab */
  padding: clamp(20px, 1.8vw, 28px);
}

/* Tab folder: blok kedua sewarna kartu yang menempel tepat di atasnya,
   sehingga tepi atas kartu bertingkat seperti map arsip. Kartu dan tab
   sengaja TANPA border — garis apa pun akan terbaca sebagai jahitan di
   pertemuan keduanya. Pemisahnya kontras latar: #17181A di atas #08090C.
   Tumpang tindih 1px menutup celah subpiksel saat halaman di-zoom.

   Tepi kirinya MIRING, bukan siku. `clip-path` dan `border-radius` saling
   menumpuk: latar dilukis dulu mengikuti radius, lalu hasilnya dipotong
   poligon — jadi sudut kanan-atas tetap membulat sementara sisi kiri jadi
   diagonal. Radius kiri-atas dihapus karena poligon memotongnya habis. */
.rw-get::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  width: var(--get-tab-w);
  height: calc(var(--get-tab-h) + 1px);
  background: var(--nda-bg);
  border-radius: 0 var(--get-radius) 0 0;
  clip-path: polygon(0 100%, var(--get-slant) 0, 100% 0, 100% 100%);
}

.rw-get__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(26px, 4vh, 44px);
}

/* Angka, bukan huruf — jadi tidak menambah beban uppercase seksi ini
   (lihat docs/brand.md §7). Coral dipakai sehemat biasa: ia sejalan dengan
   tag langkah di timeline Process tepat di atasnya. */
.rw-get__no {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--hero);
}

/* Deboss: ikon duduk di dalam ceruk. Di permukaan gelap yang membuat sesuatu
   terbaca cekung adalah bayangan gelap yang jatuh dari TEPI ATAS ke dalam,
   plus satu garis pantul sangat tipis di tepi bawah. Isian sedikit lebih
   gelap dari kartunya sendiri. Urutan box-shadow penting: yang lembut dulu,
   yang tajam menimpanya. */
.rw-get__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(48px, 4.4vw, 62px);
  aspect-ratio: 1;
  border-radius: clamp(10px, 0.9vw, 14px);
  background: rgba(8, 9, 12, 0.72);
  box-shadow:
    /* dalam, tepi atas: bayangan jatuh ke dalam ceruk */
    inset 0 3px 7px rgba(0, 0, 0, 0.9),
    inset 0 1px 2px rgba(0, 0, 0, 1),
    /* dalam, tepi bawah: pantulan. Di permukaan gelap INI yang menjual kesan
       cekung — bayangan hitam di atas isian yang sudah nyaris hitam tidak
       terbaca sendirian. */
    inset 0 -1px 1px rgba(242, 240, 234, 0.10),
    /* luar, tepi bawah: satu garis terang setebal 1px, menegaskan bahwa
       permukaan kartu naik kembali setelah ceruk berakhir */
    0 1px 0 rgba(242, 240, 234, 0.045);
  color: var(--ink);
}
.rw-get__icon svg {
  display: block;
  width: clamp(21px, 1.8vw, 26px);
  height: auto;
}

.rw-get__title {
  margin: 0 0 clamp(10px, 1.4vh, 14px);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.rw-get__copy {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--body-soft);
}
#process .rw-row:hover { background-color: #0D1014; }
#process .rw-row + .rw-row { border-top: 1px solid rgba(237, 230, 216, 0.14); }
#process .rw-row__no { color: #FFFFFF; }
#process .rw-row__title { text-transform: uppercase; }
#process .rw-row__code { color: #9AA3B0; }
#process .rw-plus { color: var(--ink); }
#process .rw-row__detail p { color: var(--body-soft); }
#process .rw-tags span { color: var(--body-soft); border: 1px solid var(--rule-2); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

#faq {
  scroll-margin-top: 84px;
  background: var(--a);
  color: var(--ink-dark);
  padding: clamp(80px, 14vh, 160px) var(--pad-x) clamp(90px, 16vh, 190px);
}
.rw-faq__side {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding-top: clamp(20px, 2.8vh, 30px);
}
#faq .rw-eyebrow { color: rgba(20, 24, 30, 0.9); }
.rw-faq__title {
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  max-width: 15ch;
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink-dark);
}
.rw-faq__ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: clamp(36px, 8vh, 96px);
}
.rw-faq__ask > span:first-child {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-dark);
}
.rw-faq__ask > span:nth-child(2) {
  max-width: 30ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: rgba(20, 24, 30, 0.66);
  text-wrap: pretty;
}
.rw-faq__ask .rw-pill--ink { margin-top: 8px; }

.rw-faq__list {
  grid-column: 6 / span 7;
  display: flex;
  flex-direction: column;
  padding-top: calc(13px + clamp(14px, 2.2vh, 22px));
}
.rw-faq__list details { border-bottom: 1px solid rgba(20, 24, 30, 0.18); }
.rw-faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 2.8vh, 30px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink-dark);
  transition: color .3s ease;
}
.rw-faq__list summary::-webkit-details-marker { display: none; }
.rw-faq__list summary:hover { color: var(--tag-accent); }
.rw-faq__list p {
  margin: 0;
  padding: 0 0 clamp(22px, 3.2vh, 32px);
  max-width: 74ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(20, 24, 30, 0.66);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */

#contact {
  scroll-margin-top: 84px;
  position: relative;
  border-top: 1px solid var(--hairline);
  background: var(--a);
  color: var(--ink-dark);
  padding: clamp(80px, 15vh, 180px) var(--pad-x) clamp(52px, 8vh, 100px);
  overflow: hidden;
}
#contact .rw-columns {
  inset: auto;
  top: calc(clamp(80px, 15vh, 180px) * -1);
  bottom: calc(clamp(48px, 9vh, 110px) * -1);
  left: calc(var(--pad-x) * -1);
  right: calc(var(--pad-x) * -1);
}
.rw-magnet-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.6vh, 42px);
  text-align: center;
}
.rw-talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.6vh, 22px) clamp(26px, 4vw, 68px);
  border: 2px solid var(--ink-dark);
  background-color: var(--ink-dark);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: clamp(36px, 6.4vw, 108px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.rw-talk:hover { background-color: var(--hero); color: #FFFFFF; border-color: var(--hero); }
#contact .rw-rail { margin-top: clamp(40px, 6vh, 76px); }

.rw-contact__foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: clamp(48px, 9vh, 110px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--ink-dark);
}
.rw-status { display: flex; align-items: center; gap: 8px; }
.rw-status i {
  width: 8px; height: 8px;
  background: var(--hero);
  animation: nvPulse 2.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.rw-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 7vh, 80px) var(--pad-x) 0;
}
.rw-footgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.rw-footer__brandcol { grid-column: span 4; display: flex; flex-direction: column; gap: 22px; }
.rw-footer__mark { display: flex; align-items: center; gap: 11px; }
.rw-footer__mark img { height: 40px; width: auto; }
.rw-footer__word {
  font-size: 33px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--ink);
}
.rw-footer__tagline {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(15px, 1.25vw, 18px);   /* = skala body */
  line-height: 1.5;
  color: var(--ink);
}
.rw-footcol { display: flex; flex-direction: column; gap: 12px; }
.rw-footcol--sitemap  { grid-column: 6 / span 2; }
.rw-footcol--else     { grid-column: span 2; }
.rw-footcol--contact  { grid-column: 11 / span 2; align-items: flex-start; }
.rw-footcol > span:first-child {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-soft);
}
.rw-footcol a { font-size: 14px; }
.rw-footcol--else a { display: inline-flex; align-items: center; gap: 9px; }
.rw-footcol--else a svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.rw-footcol--else > span:last-child {
  font-size: 13px;
  color: var(--faint);
  border: 1px dashed var(--rule-2);
  border-radius: 4px;
  padding: 5px 8px;
  align-self: flex-start;
}
.rw-footcol--contact span:last-child { font-size: 14px; color: var(--mute); }

.rw-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: clamp(32px, 6vh, 64px);
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Tracking dinolkan 1 Sep 2026 atas permintaan Rezka, yang secara eksplisit
   membuka kunci desktop untuk perbaikan ini. `0.06em` membuat baris hak cipta
   terbaca renggang seperti eyebrow, padahal ia kalimat biasa. */
.rw-footer__copy { font-size: 14px; letter-spacing: 0; }
.rw-footer__copy span { text-transform: none; }
.rw-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  color: var(--mute);
  font-size: 15px;
  line-height: 1;
  transition: border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.rw-top:hover { border-color: var(--a); color: var(--a); transform: translateY(-2px); }

.rw-marquee { overflow: hidden; margin: clamp(30px, 5vh, 56px) calc(var(--pad-x) * -1) 0; }
.rw-marquee__track { display: flex; width: max-content; animation: nvMarquee 34s linear infinite; }
.rw-marquee__set {
  display: flex;
  gap: 0.4em;
  padding-right: 0.4em;
  font-size: clamp(44px, 8.4vw, 116px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #12161C;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Responsive — column counts only, per docs/brand.md §3
   -------------------------------------------------------------------------- */

@media (hover: none) {
  #top { cursor: auto !important; }
  .rw-cursor { display: none !important; }
}

@media (max-width: 1024px) {
  .rw-timeline { grid-template-columns: repeat(2, 1fr) !important; }
  .rw-step:nth-child(2) .rw-step__title,
  .rw-step:nth-child(4) .rw-step__title { margin-top: clamp(14px, 2.2vh, 22px) !important; }
  .rw-step:nth-child(3) .rw-step__title,
  .rw-step:nth-child(5) .rw-step__title { margin-top: calc(clamp(14px, 2.2vh, 22px) + clamp(70px, 11vh, 130px)) !important; }
  .rw-row__detail > div { grid-template-columns: minmax(0, 1fr) !important; row-gap: 18px; }
  .rw-getcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ⚠️ SEMENTARA — dipasang 1 September 2026 supaya sesi itu bisa ditutup.
   Rezka belum memutuskan perlakuan akhir panel di mobile, jadi ini SENGAJA
   tidak dicatat di docs/. Jangan menganggapnya spesifikasi tetap, dan jangan
   pula menghapusnya karena tidak ketemu di dokumen.

   Isinya: di bawah 900px panel berhenti setinggi viewport dan menjadi kolom
   kartu 16:9 statis bertumpuk. Kartu 16:9 di dalam panel setinggi layar akan
   menyisakan ruang kosong besar di ponsel (374×210 mengambang di panel 828px),
   jadi tinggi panelnya ikut mengempis. Jalurnya sama dengan blok
   prefers-reduced-motion di bawah. drivePanels() berhenti menulis inline style
   di bawah lebar ini — lihat guard `narrow` di assets/app.js. */
@media (max-width: 900px) {
  .rw-panel { position: relative; height: auto; }
  /* Benar-benar statis: drivePanels() sudah berhenti menulis di lebar ini, jadi
     promosi layer compositor tidak lagi ada gunanya — justru membebani
     perangkat yang paling tidak sanggup menanggungnya. */
  .rw-panel, .rw-panel__media { will-change: auto; }
  .rw-panel__frame {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    width: auto;
    margin: var(--inset);
  }
}

@media (max-width: 720px) {
  .rw-grid > *, .rw-footgrid > * { grid-column: 1 / -1 !important; }
  .rw-getcards { grid-template-columns: minmax(0, 1fr); }
  .rw-get { will-change: transform, opacity; }
  .rw-timeline { grid-template-columns: minmax(0, 1fr) !important; border-right: 0 !important; }
  .rw-step { padding-left: 0 !important; padding-right: 0 !important; padding-top: clamp(22px, 3.4vh, 34px) !important; border-top: 1px dashed var(--rule-2); }
  .rw-timeline__edge, .rw-step__edge { display: none !important; }
  /* Tangga offset dari blok ≤1024px menambah `clamp(70px, 11vh, 130px)` pada
     langkah ke-2 dan ke-4 untuk menggesernya di timeline 4 kolom. Di kolom
     tunggal itu jadi lubang 107px di antara kode dan judul, sementara langkah
     lain hanya 18px.

     Selectornya HARUS memakai `nth-child` juga. `.rw-step__title` sendirian
     (0,1,0) kalah dari `.rw-step:nth-child(n) .rw-step__title` (0,2,0) meski
     sama-sama `!important` dan berada lebih bawah — spesifisitas menang lebih
     dulu daripada urutan. */
  .rw-step:nth-child(2) .rw-step__title,
  .rw-step:nth-child(3) .rw-step__title,
  .rw-step:nth-child(4) .rw-step__title,
  .rw-step:nth-child(5) .rw-step__title { margin-top: 0 !important; }

  /* Kode langkah pindah ke SEBERANG judul, dan nomor urutnya dibuang:
       Brief & raw material ················ BR-01
     Nomor 01–04 mubazir di kolom tunggal — urutannya sudah jelas dari
     susunan bertumpuk. Grid dipakai, bukan flex, karena copy dan tags harus
     tetap membentang penuh di bawah keduanya. */
  .rw-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "judul kode" "copy copy" "tags tags";
    align-items: baseline;
    column-gap: 14px;
  }
  .rw-step__no    { display: none; }
  .rw-step__code  { grid-area: kode; }
  .rw-step__title { grid-area: judul; }
  .rw-step__copy  { grid-area: copy; margin-top: clamp(10px, 1.6vh, 14px); }
  .rw-step__tags  { grid-area: tags; }

  /* Lokasi dan jam sudah tercantum di footer tepat di bawahnya — di layar
     sempit keduanya berdempetan dan terbaca sebagai duplikat. Di mobile
     sisakan status ketersediaan saja, dipusatkan sejajar tombol Let's talk. */
  .rw-contact__foot { justify-content: center; text-align: center; }
  .rw-contact__foot > span:not(.rw-status) { display: none; }
  /* Jamnya pindah ke footer, bukan hilang. Di desktop ia tetap di baris status
     contact, jadi span ini disembunyikan di sana — kalau tidak, jam muncul dua
     kali dan itu persis duplikasi yang sedang kita hapus. */
  .rw-footer__time { display: inline; }
  /* Baris Under NDA jadi DUA baris di mobile, bukan satu deret terjepit:
       tanya (kiri) ....................... (+)
       angka besar
     Di 375 versi satu-baris memberi kolom judul hanya 95–151px, sehingga
     "Seed → Series B" pecah dan terbaca berantakan.

     `display: contents` pada .rw-row__aside melarutkan pembungkusnya supaya
     tanya dan tombol plus jadi item grid langsung — tanpa itu keduanya
     terkunci di satu sel dan tidak bisa dipisah ke dua sudut. */
  .rw-row__no { display: none; }
  .rw-row__head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "tanya plus" "judul judul" !important;
    gap: 8px 14px !important;
    align-items: center;
  }
  .rw-row__aside { display: contents; }
  .rw-row__code { grid-area: tanya; }
  .rw-plus { grid-area: plus; justify-self: end; }
  .rw-row__title { grid-area: judul; }
  .rw-row__detail > div { padding-left: 0 !important; }

  /* ---- keterbacaan paragraf Under NDA & Process di mobile --------------
     `.rw-lead` (dipakai HANYA di kedua seksi itu) memakai `line-height: 1.16`
     dan `letter-spacing: -0.03em`. Keduanya nilai display type: benar pada
     42px di desktop, tapi pada 20px di ponsel ia menghimpit baris sampai
     sulit dibaca. Dilonggarkan, tracking dikembalikan ke nyaris nol.

     Ukurannya sengaja TIDAK dinaikkan. Di 20px baris lead sudah hanya ~34
     karakter — di bawah rentang nyaman 35–60. Menaikkan ke 22px membuatnya
     31 karakter dan justru lebih sulit dibaca, bukan lebih mudah. Yang
     dinaikkan badan paragrafnya, di bawah. */
  .rw-lead {
    line-height: 1.34 !important;
    letter-spacing: -0.012em !important;
  }

  /* Badan paragraf 14 → 16px. Di 16px barisnya jadi ~42 karakter, tepat di
     tengah rentang nyaman; di 14px ia 48 karakter dan terbaca kecil pada
     layar yang dipegang sejauh lengan. */
  .rw-step__copy {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* Dua piksel lebih kecil dari .rw-step__copy, atas permintaan Rezka. Paragraf
     ini muncul di dalam baris akordeon yang sudah punya judul besar di atasnya,
     jadi ia tidak perlu bobot yang sama dengan copy langkah Process. */
  #nda .rw-row__detail p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Baris tag langkah: 11px × 62 karakter terlalu padat untuk uppercase
     bertracking, yang memang lebih lambat dibaca daripada sentence case. */
  /* Warna coral tag langkah dicabut di mobile (permintaan Rezka). Di kolom
     tunggal keempat baris tag menumpuk berdekatan dan aksen itu berubah dari
     sorotan jadi kebisingan — coral di situs ini dipakai sangat hemat. */
  .rw-step__tags { font-size: 12px !important; color: var(--mute) !important; }

  /* Pita transisi dipendekkan di mobile (permintaan Rezka): 219px di 812
     memakan hampir seperempat layar untuk sesuatu yang hanya menjembatani dua
     seksi. Jumlah langkah wipe dihitung dari tinggi ini, jadi kotaknya tetap
     persegi sendiri — lihat pixelWipe() di assets/app.js. */
  .rw-wipe { height: clamp(104px, 17vh, 180px); }

  /* Meter durasi langkah (10% / 40% / 90% / 100%) disembunyikan di mobile atas
     permintaan Rezka — di kolom tunggal ia hanya menambah tinggi tanpa membawa
     informasi yang belum ada di teks langkahnya. */
  .rw-step__meter { display: none !important; }

  /* ---- kartu design samples: pita header DI ATAS thumbnail --------------
     Referensi Rezka. Sebelumnya seluruh overlay menumpuk di atas gambar: pada
     bingkai 359×202 tumpukan atasnya mencapai y=100 — separuh tinggi kartu —
     sehingga thumbnail yang jadi alasan kartu itu ada nyaris tak terlihat.
     Kini overlay keluar jadi pita sendiri dan gambar dapat 16:9 penuh. */
  .rw-panel__frame {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: var(--nda-bg);
    overflow: hidden;
  }
  /* Thumbnail mobile PERSEGI — berkas terpisah (`card-*-mobile.webp`,
     1120×1120) yang dipilih lewat <source media> di markup, bukan hasil crop
     versi desktop. Rasio di sini harus cocok dengan berkasnya; kalau tidak,
     `object-fit: cover` akan memotong komposisi yang sudah disusun pas. */
  .rw-panel__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  /* Keterangan kembali DI DALAM thumbnail, menempel di dua sudut atas.
     Muat sejak thumbnail jadi persegi: 359×359 memberi ruang kosong di atas
     yang tidak ada waktu ia masih 359×202. Absolut, jadi tinggi kartu = tinggi
     gambar saja. */
  .rw-panel__topright {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    max-width: none;
    padding: 15px 18px;
  }
  /* Sentence case di pita, bukan uppercase bertracking: ia keterangan di bawah
     nama deck, bukan eyebrow. */
  /* Teks kembali duduk langsung di atas gambar, jadi text-shadow dari aturan
     dasar dipertahankan — tanpa itu keterangan hilang di area terang thumbnail. */
  /* Chip lebih lebar daripada teks polos, jadi meta dibatasi dan dibiarkan
     membungkus. Kartu persegi 359×359 punya ruang vertikal untuk itu. */
  .rw-panel__meta {
    min-width: 0;
    max-width: 56%;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    /* `balance` supaya dua barisnya seimbang; tanpa itu pemisah `·` menggantung
       sendirian di ujung baris pertama dan terbaca seperti salah potong. */
    text-wrap: balance;
  }

  /* `Self-initiated` menyatu ke baris keterangan (permintaan Rezka), bukan chip
     terpisah. Konsekuensinya ia lebih dekat ke catatan kaki — yang aturan 3
     CLAUDE.md larang — jadi ia dibuat bagian PALING TERANG di baris itu:
     `--ink` penuh (15,59:1) sementara meta di sekitarnya 72% opasitas.
     Kalau warnanya diturunkan, label ini benar-benar jadi catatan kaki. */
  /* Chip terisi, gaya sama dengan desktop — hanya diperkecil. Tanpa latar ia
     mengandalkan text-shadow di atas thumbnail; dengan latar sendiri ia lolos
     kontras tanpa syarat, termasuk di latar kroma biru KEYWARD yang paling
     terang. Aturan 3 CLAUDE.md terpenuhi tanpa tawar-menawar. */
  .rw-panel__flag {
    flex: none;
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 5px 8px;
    text-shadow: none;
  }
  .rw-panel__count { display: none; }

  /* Pill `View deck` TERLIHAT di mobile, dan seluruh kartu tetap bisa diketuk.
     Keduanya sekaligus, tanpa handler klik di JS (permintaan Rezka 3 Sep 2026:
     "biar audience ngeh juga" — pengunjung ponsel tidak punya hover, jadi tidak
     ada satu pun petunjuk bahwa kartunya bisa dibuka).

     ⚠️ Versi sebelumnya merentangkan <a> itu sendiri menutupi kartu dengan
     `color: transparent`. Itu memang membuat seluruh kartu bisa diketuk, tapi
     harganya pill-nya ikut hilang — dan pada kotak 359×359 `border-radius: 999px`
     berubah jadi LINGKARAN, sehingga keempat sudut kartu jatuh di luar hit-test.
     Makanya versi itu juga memaksa `border-radius: 0`.

     Sekarang dibalik: <a> kembali jadi pill normal berukuran sendiri, dan
     `::after`-nya yang direntangkan sebagai area ketuk. Pola stretched-link.
     `position: static` pada <a> itu YANG MEMBUATNYA BEKERJA — ia membuat
     `::after` mengambil acuan dari leluhur positioned terdekat, yaitu
     `.rw-panel__caption` yang sudah `inset: 0` menutupi seluruh kartu.
     Kalau <a> diberi `position: relative`, area ketuknya menciut jadi sebesar
     pill dan sisanya mati. */
  .rw-panel__caption {
    position: absolute;
    inset: 0;
    padding: 0 0 clamp(16px, 4vw, 26px);   /* pill tidak menempel tepi bawah */
  }
  .rw-panel__cta {
    position: static;
    inset: auto;
    padding: 13px 24px;                    /* 13+13+20 = 46px, di atas ambang 44 */
    background: var(--ink-cream);
    color: var(--ink-dark);
    border-radius: 999px;
  }
  .rw-panel__cta::after {
    content: '';
    position: absolute;
    inset: 0;                              /* acuannya .rw-panel__caption */
  }
  /* Hero mobile: semuanya dipusatkan, headshot disembunyikan supaya kolom
     teksnya tidak terjepit tinggal 231px di 375. */
  .rw-hero__h1 { font-size: clamp(38px, 11vw, 88px) !important; text-align: center; }
  .rw-herofoot { flex-direction: column !important; align-items: center !important; gap: clamp(20px, 3.5vh, 34px) !important; }
  .rw-headshot { display: none; }
  .rw-herofoot__text { align-items: center; }
  .rw-herofoot__title { text-align: center; }
  .rw-herofoot__copy { text-align: center; font-size: 14px; max-width: 40ch; }
  .rw-herofoot__cta { align-self: center; }
  /* Di 375px blok teks setinggi 255px sementara foto hanya selebar 92px —
     merentangkannya menghasilkan pita 92×255 (rasio 0,36). Kembalikan 4:5. */
  .rw-herofoot__left { align-items: flex-end; }

  .rw-faq__list { padding-top: 0 !important; margin-top: clamp(26px, 5vh, 44px) !important; }
  /* Marquee ditinggikan atas permintaan Rezka; kartu boleh melewati tepi layar,
     rail memang `overflow: hidden`. Lebar paksa lama dicabut supaya
     `aspect-ratio: 16 / 9` di aturan dasar kembali berlaku — override itu
     menghasilkan 248×146 (rasio 1,70), bukan 16:9. */
  .rw-rail { height: clamp(190px, 52vw, 300px) !important; }
  .rw-header { padding: 14px 18px !important; }

  /* Kaki preloader: dua teks berseberangan yang di 375 tidak muat satu baris
     dan membungkus. Diperkecil dan trackingnya dikurangi — uppercase bertracking
     boros ruang. Rezka: "kekecilan gapapa, teks itu bukan prioritas". */
  .rw-intro__foot { font-size: 10px; letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   16. Reduced motion — content stays whole, movement stops
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rw-intro { display: none; }
  .rw-cursor { display: none !important; }
  #top { cursor: auto; }
  .rw-tint {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink-dark);
  }
  .rw-marquee__track { animation: none; }
  .rw-panel { position: relative; height: auto; transform: none !important; }
  .rw-panel__frame {
    position: relative; top: auto; left: auto; translate: none;
    width: auto; margin: var(--inset);
  }
  .rw-panel__media { filter: none !important; }
  .rw-panel__caption { opacity: 1 !important; }
  .rw-row__detail { height: auto !important; opacity: 1 !important; }
}

/* ==========================================================================
   17. Deck viewer  (/embra · /keyward · /closepoint)
   No artboard exists for this page. It borrows the home page's editorial
   rhythm: a 12-column asymmetric grid, one small uppercase eyebrow per
   section, and sentence-case type doing the actual talking.
   ========================================================================== */

body.rw-deckpage { background: var(--nda-bg); }

.rw-deck {
  /* Local tokens so a deck page can flip to the light ground (see §18). */
  --deck-bg:         var(--nda-bg);   /* ground yang sama dengan seksi Under NDA */
  --deck-ink:        var(--ink);
  --deck-body:       var(--body-soft);
  --deck-meta:       var(--mute);
  --deck-eyebrow:    var(--eyebrow-ink);
  --deck-rule:       var(--rule);
  --deck-rule-2:     var(--rule-2);
  --deck-frame:      var(--panel);
  --deck-frame-edge: var(--rule-2);   /* 1.35:1 di ground baru — --rule hanya 1.13:1 */
  --deck-flag-bg:    var(--ink);
  --deck-flag-ink:   var(--ink-dark);
  --deck-meta-soft:  rgba(242, 240, 234, 0.72);

  background: var(--deck-bg);
  color: var(--deck-ink);
  padding: clamp(150px, 24vh, 300px) var(--pad-x) clamp(40px, 6vh, 80px);
}

/* ---- top bar ---- */

/* Halaman deck memakai komponen .rw-header yang sama dengan home; hanya
   latarnya diselaraskan dengan ground #17181A, dan isinya mark + All work. */
.rw-deckpage { --header-dark: rgba(23, 24, 26, 0.78); }

.rw-deck__brand { display: flex; align-items: center; gap: 11px; }
.rw-deck__brand img { height: 26px; width: auto; }
.rw-deck__brand span {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--deck-ink);
}
/* Sentence case: this is one link, not a nav bar. */
.rw-deck__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 7px 16px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  transition: color .3s ease, border-color .3s ease;
}
.rw-deck__back:hover { color: var(--hero); border-color: var(--hero); }
.rw-deck__back svg { flex: none; }

/* ---- masthead: eyebrow left, everything else right ---- */

.rw-deck__eyebrow {
  grid-column: span 2;
  padding-top: clamp(10px, 1.6vh, 18px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deck-eyebrow);
}
.rw-deck__main { grid-column: 3 / span 10; }

/* Masthead: dua baris berpasangan.
   baris 1 — kalimat lead (kiri)  |  logo deck (kanan)
   baris 2 — meta industri/stage  |  stamp Self-initiated + jumlah slide
   <h1> tetap pertama di DOM (logo memikul nama halaman); penempatan
   visualnya ke kanan diatur eksplisit lewat grid-column. */
.rw-deck__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.rw-deck__row + .rw-deck__row { margin-top: clamp(28px, 4.6vh, 52px); }

.rw-deck__logo {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.rw-deck__logo img {
  height: clamp(48px, 5.5vw, 80px);
  width: auto;
  max-width: 100%;
}

.rw-deck__lead {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  max-width: 24ch;
  font-size: clamp(20px, 2.6vw, 42px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--deck-ink);
  text-wrap: pretty;
}

/* Tiga fakta terpisah, masing-masing berikon. Ikon Lucide v1.38.0 (ISC),
   di-inline sebagai SVG currentColor seperti ikon lain di situs ini. */
.rw-deck__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px clamp(18px, 2.2vw, 32px);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--deck-meta);
}
.rw-deck__meta li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.rw-deck__meta svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.rw-deck__stamp {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
.rw-deck__flag {
  background: var(--deck-flag-bg);
  color: var(--deck-flag-ink);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rw-deck__count { font-size: clamp(14px, 1.15vw, 17px); color: var(--deck-meta); }

/* ---- design decisions ---- */

.rw-notes { margin-top: clamp(64px, 12vh, 150px); }
/* Pindah ke kolom catatan (3–12), bukan lagi eyebrow di kolom kiri.
   Format mengikuti judul blok bio hero, dengan bobot semi-bold. */
.rw-notes__eyebrow {
  display: block;
  margin: 0 0 clamp(20px, 3vh, 34px);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--deck-ink);
}
.rw-notes__list { grid-column: 3 / span 10; }
.rw-note {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline;
  padding: clamp(18px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--deck-rule);
}
.rw-note span { font-size: 11px; letter-spacing: 0.14em; color: var(--deck-ink); }
.rw-note p {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--deck-body);
  text-wrap: pretty;
}

/* ---- slides ---- */

.rw-slides {
  scroll-margin-top: 84px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(64px, 12vh, 150px);
  /* Only the showcase is capped — the page itself runs full width like home.
     1280 keeps a 16:9 slide at 720 tall, so it still fits a 900px viewport. */
  max-width: 1280px;
  margin-inline: auto;
}
.rw-slide {
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--deck-frame);
  border: 1px solid var(--deck-frame-edge);
  border-radius: var(--radius);
  overflow: hidden;
}
.rw-slide img { width: 100%; height: 100%; object-fit: contain; }

/* ---- footer: current-deck note (left) + two other decks (right) ---- */

.rw-deckfoot {
  border-top: 1px solid var(--deck-rule);
  margin-top: clamp(56px, 10vh, 120px);
  padding-top: clamp(40px, 7vh, 80px);
}
.rw-deckfoot__intro { grid-column: span 4; }
.rw-deckfoot__note {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--deck-meta);
  text-wrap: pretty;
}
.rw-deckfoot__more { grid-column: 6 / span 7; }
.rw-deckfoot__label {
  display: block;
  margin-bottom: clamp(16px, 2.6vh, 26px);
  font-size: clamp(14px, 1.15vw, 17px);
  color: var(--deck-meta);
}

.rw-deckcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

/* Same treatment as the home page work panels, minus the scroll choreography
   and minus the flag / meta / counter overlays. Hover is the only effect. */
.rw-deckcard {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--deck-frame-edge);
  border-radius: var(--radius);
  transition: transform .5s var(--ease);
}
.rw-deckcard:hover { transform: translateY(-6px); }
.rw-deckcard__media { position: absolute; inset: 0; }
.rw-deckcard__media img { width: 100%; height: 100%; object-fit: cover; }
.rw-deckcard__tint { position: absolute; inset: 0; }
.rw-deckcard__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,12,0.5) 0%, rgba(8,9,12,0.18) 34%, rgba(8,9,12,0.32) 68%, rgba(8,9,12,0.8) 100%),
    radial-gradient(95% 75% at 50% 50%, rgba(8,9,12,0.3) 0%, rgba(8,9,12,0.66) 100%);
}
.rw-deckcard__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 0 clamp(14px, 2vw, 28px);
}
.rw-deckcard__logo {
  width: clamp(120px, 13vw, 190px);
  height: clamp(38px, 4.2vw, 60px);
}
.rw-deckcard__logo img { width: 100%; height: 100%; object-fit: contain; }
.rw-deckcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--a);
  color: var(--ink-dark);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.rw-deckcard:hover .rw-deckcard__cta { background: var(--hero); color: #FFFFFF; }
.rw-deckcard__cta svg { flex: none; }

@media (max-width: 720px) {
  .rw-deck__eyebrow, .rw-notes__eyebrow { padding-top: 0; }
  .rw-deck__row { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3.4vh, 32px); }
  .rw-deck__logo, .rw-deck__lead, .rw-deck__meta, .rw-deck__stamp { grid-column: 1; grid-row: auto; }
  .rw-deck__meta { justify-content: flex-start; }
  .rw-note { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 14px !important; }
  .rw-deckfoot__intro, .rw-deckfoot__more { grid-column: 1 / -1 !important; }
  .rw-deckfoot__more { margin-top: clamp(30px, 5vh, 48px); }
}

/* Below this the two cards get too narrow for the logo + button to breathe. */
@media (max-width: 560px) {
  .rw-deckcards { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   18. Deck viewer — contact + footer
   Reuses the home page's #contact and .rw-footer components verbatim. Only
   two things differ: the inner content is capped to the same 1328px measure
   as .rw-deck, and the footer is pinned dark so it also works on the light
   KEYWARD page (where the body ground is bone).
   ========================================================================== */


/* Deck ground is #17181A, not the page black, so the band above contact
   has to start from there. */
.rw-deckpage .rw-wipe--to-bone { --wipe-bg: var(--nda-bg); }

/* Pixel wipe sudah jadi pemisahnya; hairline di sini justru memotong
   transisi itu dengan garis gelap di antara dua bidang bone. */
.rw-deckpage #contact { border-top: 0; }

.rw-deckpage .rw-footer {
  background: var(--bg);
  color: var(--ink);
}
.rw-deckpage .rw-footer a { color: var(--ink); }
.rw-deckpage .rw-footer a:hover { color: var(--a); }
.rw-deckpage .rw-footer .rw-footcol--else > span:last-child { color: var(--faint); }

/* The marquee is deliberately full-bleed, like the home page. */
.rw-deckpage .rw-footer .rw-marquee { max-width: none; }

/* ==========================================================================
   19. Deck viewer — blok penutup di seksi Contact
   Quote → potret → nama + titel → Let's talk. Menggantikan rencana marquee:
   pengunjung baru saja menggulir 17–18 slide, jadi rail slide lagi hanya
   mengulang. Semua skala dipinjam dari primitif yang sudah ada.
   ========================================================================== */

.rw-closing {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(34px, 6vh, 68px);
  margin-bottom: clamp(40px, 7vh, 84px);
}

.rw-closing__quote {
  margin: 0;
  max-width: 46ch;   /* muat baris terpanjang; pemenggalan diatur span per kalimat */
  font-size: clamp(20px, 2.6vw, 42px);   /* = .rw-lead */
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--ink-dark);
  text-wrap: pretty;
}
/* Satu span per kalimat → tepat dua baris di desktop, memenggal di titik. */
.rw-closing__quote span { display: block; }

.rw-closing__sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rw-closing__portrait {
  width: clamp(76px, 7vw, 104px);
  aspect-ratio: 1;                       /* lingkaran presisi */
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 30, 0.28);
}
.rw-closing__portrait img { width: 100%; height: 100%; object-fit: cover; }

.rw-closing__who { display: flex; flex-direction: column; gap: 5px; }
.rw-closing__name {
  font-size: clamp(17px, 1.5vw, 22px);   /* = judul blok bio hero */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-dark);
}
.rw-closing__title {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: rgba(20, 24, 30, 0.64);         /* 4.91:1 di bone */
}

/* ==========================================================================
   JARING PENGAMAN MAILTO
   Panel yang muncul HANYA kalau klik pada tautan mailto tidak membuka handler
   surel apa pun. Alasan lengkapnya di komentar mailFallback() assets/app.js.

   Elemennya dibuat JS saat pertama dibutuhkan, jadi ia TIDAK ADA di DOM saat
   halaman dimuat — tidak menyentuh satu piksel pun dari geometri desktop yang
   dikunci 1 September 2026.

   Ground-nya gelap, bukan terang: kelima CTA mailto duduk di seksi bone (hero
   dan contact), jadi panel gelap yang menonjol di sana adalah kasus utamanya.
   z-index 250 — di atas tirai intro (200) dan header (110), tapi di bawah
   .rw-skip (300) yang harus tetap tertinggi saat difokus.

   ⚠️ VERSI KEDUA (3 Sep 2026): dulu ini toast satu baris yang hanya menyalin
   alamat. Sekarang ia panel dengan tiga aksi, jadi ia HARUS bisa diklik —
   `pointer-events` dihidupkan hanya saat tampil, dan mati lagi saat tidak.
   Jangan mengembalikannya ke `none` permanen; itu akan mematikan tombolnya.
   ========================================================================== */
/* Scrim. Panel ini gelap, dan di posisi gulir tertentu ia mendarat di atas
   seksi yang juga gelap — footer, Under NDA, seluruh halaman deck. Di sana ia
   praktis tak terlihat dan terlewat begitu saja (dilaporkan Rezka 3 Sep 2026).
   Scrim mengisolasinya, jadi ia terbaca sama di setiap posisi gulir.

   55% berada di tengah rentang 40–60% yang dianjurkan untuk scrim modal. Blur
   2px ikut menandakan bahwa latar sedang tidak aktif dan bisa diklik untuk
   menutup — bukan hiasan. */
.rw-mailtoast__scrim {
  position: fixed;
  inset: 0;
  z-index: 249;
  background: rgba(8, 9, 12, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.rw-mailtoast__scrim[data-tampil="1"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s;
}

/* Dipusatkan, bukan di kaki layar. Di kaki layar ia bersaing dengan apa pun
   yang kebetulan ada di sana; di tengah, di atas scrim, ia selalu jadi hal
   pertama yang dilihat. */
.rw-mailtoast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 250;
  width: max-content;
  max-width: min(92vw, 800px);
  /* Simetris. Sebelumnya kanannya 52px untuk memberi ruang tombol tutup, dan
     akibatnya seluruh isi panel — termasuk tombol yang selebar kolom —
     berhenti 30px lebih awal di kanan daripada di kiri. Ruang untuk tombol
     tutup sekarang diberikan ke baris pesan saja, satu-satunya baris yang
     memang bersebelahan dengannya. */
  padding: 18px 22px;
  border: 1px solid rgba(242, 240, 234, 0.14);
  border-radius: 14px;
  background: var(--ink-dark);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
  pointer-events: none;                  /* saat tersembunyi ia tidak boleh menghalangi apa pun */
}
.rw-mailtoast[data-tampil="1"] {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;                  /* baru di sini tombolnya hidup */
}
.rw-mailtoast:focus { outline: none; }    /* panelnya sendiri difokus demi papan ketik, bukan untuk dilihat */

/* Memakai ulang komponen `.rw-status` dari baris contact — kotak coral 8px
   berdenyut yang sama, bukan titik baru yang mirip-mirip. Ia menandai baris ini
   sebagai KEADAAN, bukan kalimat biasa, jadi mata menangkap apa yang terjadi
   sebelum membaca penjelasannya. */
.rw-mailtoast__status {
  margin: 0 0 7px;
  /* 46px, bukan 34: tombol tutup memakan 42px dari tepi kanan, jadi 34
     menyisakan jarak 14px di 375 — terukur tidak menabrak, tapi terbaca sesak.
     46 memberi ~26px, cukup untuk terlihat sengaja. */
  padding-right: 46px;
  font-size: 16px;                       /* dinaikkan dari 13px, 3 Sep 2026 */
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
}

/* ⚠️ TANPA `max-width`. Sempat dibatasi 46ch demi panjang baris ideal, dan
   akibatnya separuh lebar panel menganggur sementara kalimatnya pecah jadi tiga
   baris dengan satu kata menggantung sendirian di baris terakhir (ditandai
   Rezka 3 Sep 2026). Panelnya sendiri sudah dibatasi 800px, jadi barisnya tidak
   pernah lebih dari ~78ch — sedikit di atas rentang ideal 65–75ch, tapi ini dua
   baris teks pendek, bukan badan artikel. Ruang yang terpakai menang. */
.rw-mailtoast__msg {
  margin: 0 0 15px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--body-soft);
}
.rw-mailtoast__msg b { font-weight: 700; color: #FFF; }

/* Empat aksi sebaris. `nowrap`, BUKAN `wrap`: dibiarkan membungkus, aksi
   keempat jatuh sendirian ke baris kedua dan terbaca seperti kesalahan tata
   letak, bukan pilihan (terlihat 3 Sep 2026). Di bawah breakpoint, jumlah
   kolomnya yang berubah — bukan pembungkusannya — supaya barisnya selalu
   rata. Ini satu-satunya pemakaian media query yang diizinkan CLAUDE.md:
   jumlah kolom grid, dan memakai breakpoint yang sudah ada (900 · 560). */
.rw-mailtoast__acts {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;                              /* ritme 4/8 */
}

/* padding + line-height menghasilkan tinggi ~44px — ambang target sentuh
   Apple HIG, dan panel ini justru paling sering muncul di ponsel. */
.rw-mailtoast__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                              /* ikon ↔ label */
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
/* ⚠️ `color` WAJIB ditulis ulang di sini. `styles.css:83` memasang
   `a:hover { color: var(--a); }` sebagai selector ELEMEN — spesifisitasnya
   (0,0,1,1) mengalahkan class `.rw-mailtoast__btn` (0,0,1,0), jadi ketiga
   tombol <a> berubah jadi bone saat hover DI ATAS latar yang juga bone:
   terukur rgb(242,240,234) di atas rgb(237,230,216), kontras ~1,03:1 —
   teksnya lenyap. `Copy address` selamat hanya karena ia <button>.
   Ranjau yang sama tercatat di docs/brand.md §12. Jangan hapus baris color
   ini, dan jangan menggantinya dengan !important — spesifisitas class +
   pseudo-class (0,0,2,0) sudah cukup menang. */
.rw-mailtoast__btn:hover {
  transform: translateY(-2px);
  color: var(--ink-dark);
}
/* `flex: none` supaya ikon tidak ikut menyusut saat kolom grid menyempit.
   Logo brand dirender 18px — sedikit lebih besar dari glyph vektor, karena
   logo empat warna butuh ruang lebih untuk terbaca pada ukuran kecil. */
.rw-mailtoast__btn svg { width: 16px; height: 16px; flex: none; }
.rw-mailtoast__btn img { width: 18px; height: 18px; flex: none; }
.rw-mailtoast__btn:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 3px;
}
.rw-mailtoast__btn--ghost {
  background: transparent;
  border-color: rgba(242, 240, 234, 0.26);
  color: var(--ink);
}
.rw-mailtoast__btn--ghost:hover {
  background: rgba(242, 240, 234, 0.08);
  color: var(--ink);                     /* alasan sama seperti di atas */
}

.rw-mailtoast__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
/* Visualnya tetap 30px — lingkaran 44px di pojok panel akan terbaca berat.
   Yang dilebarkan area sentuhnya, lewat pseudo-element: 30 + 7×2 = 44, ambang
   Apple HIG. Terukur 30×30 pada audit 3 Sep 2026, satu-satunya aksi di dialog
   yang tidak lolos. */
.rw-mailtoast__close::after {
  content: '';
  position: absolute;
  inset: -7px;
}
.rw-mailtoast__close:hover { color: var(--ink); background: rgba(242, 240, 234, 0.08); }
.rw-mailtoast__close:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rw-mailtoast,
  .rw-mailtoast__scrim,
  .rw-mailtoast__btn,
  .rw-mailtoast__close { transition: none; }
  .rw-mailtoast__btn:hover { transform: none; }
}

/* Empat aksi berikon sebaris butuh ~760px. Di bawah 1024px ruangnya tidak
   cukup, jadi dua kolom sama lebar — dua baris rata, bukan 3+1 yang timpang. */
@media (max-width: 1024px) {
  .rw-mailtoast__acts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Grid tiga kolom: ikon · label · penyeimbang kosong selebar ikon.
     Hasilnya dua hal sekaligus, yang tidak bisa didapat dari flex mana pun:
     keempat ikon berdiri di satu garis tegak, DAN labelnya rata tengah
     sungguhan terhadap tombol — bukan sekadar tergeser ke kanan oleh ikon.

     Isi yang sekadar dipusatkan (flex `center`) membuat tiap ikon mendarat di
     tempat berbeda karena panjang labelnya berbeda: terukur x = 298 · 497 ·
     274 · 504 pada 3 Sep 2026, tanpa satu pun garis tegak untuk diikuti mata.
     Rata kiri memperbaiki ikonnya tapi membuat labelnya menggantung di kiri.
     Kolom ketiga yang kosong itulah yang mendamaikan keduanya.

     Di atas 1024px tombolnya selebar isinya sendiri dan berjajar mendatar,
     jadi di sana flex `center` yang benar dan blok ini tidak berlaku. */
  .rw-mailtoast__btn {
    display: grid;
    grid-template-columns: 18px 1fr 18px;
    align-items: center;
  }
  .rw-mailtoast__btn > span { text-align: center; }
}

/* Di ponsel dua kolom membuat label terpotong. Satu kolom penuh: tiap aksi
   jadi baris sendiri, targetnya selebar panel, urutan bacanya tetap sama. */
@media (max-width: 560px) {
  .rw-mailtoast {
    width: auto;
    left: 12px;
    right: 12px;
    max-width: none;
    transform: translate(0, calc(-50% + 12px));
  }
  .rw-mailtoast[data-tampil="1"] { transform: translate(0, -50%); }
  .rw-mailtoast__acts { grid-template-columns: 1fr; }
}


/* ==========================================================================
   SUBMENU CONTACT DI PANEL HAMBURGER
   Permintaan Rezka 3 Sep 2026: di menu, Contact membuka keempat aksi kontak
   di tempat alih-alih menggulir. Perilakunya di contactSubmenu() assets/app.js.

   ⚠️ Hanya ada di index.html — ketiga halaman deck tidak punya panel hamburger
   (nav-nya cuma "All work"). Jangan menyalin blok ini ke sana.
   ========================================================================== */

/* Tombolnya harus terbaca persis seperti item menu lain di sebelahnya, tapi ia
   <button> — selector `.rw-navpanel a` tidak menjangkaunya, jadi gayanya
   ditulis ulang di sini. Kalau tipografi item menu berubah, ubah keduanya. */
.rw-navpanel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(30px, 9.5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease;
}
.rw-navpanel__toggle:hover { color: var(--hero); }
.rw-navpanel__toggle:focus-visible { outline: 2px solid var(--hero); outline-offset: 4px; }

/* Panah kanan = ada tingkat berikutnya. Berputar 90° saat terbuka sehingga
   arahnya sendiri yang menyatakan keadaan — bukan hanya warna. */
.rw-navpanel__chev {
  width: clamp(20px, 5vw, 26px);
  height: clamp(20px, 5vw, 26px);
  flex: none;
  color: var(--mute);
  transition: transform .38s var(--ease), color .3s ease;
}
.rw-navpanel__group[data-buka="1"] .rw-navpanel__chev {
  transform: rotate(90deg);
  color: var(--hero);
}
/* Keadaan terbuka ditandai DUA hal — arah panah dan warna — supaya ia tetap
   terbaca kalau salah satunya tidak tertangkap (aturan color-not-only). */
.rw-navpanel__group[data-buka="1"] .rw-navpanel__toggle { color: var(--hero); }

/* ⚠️ Tinggi buka memakai nilai TETAP, bukan scrollHeight yang diukur JS.
   Versi pertama menyetel max-height dari sub.scrollHeight tepat setelah
   melepas `hidden` — dan terukur 0 pada 3 Sep 2026, karena panel hamburger
   belum selesai layout saat itu: itemnya sudah 44px masing-masing, tapi
   containernya masih terpotong nol. Nilai tetap menghapus seluruh
   ketergantungan pada waktu pengukuran. 420px menampung empat aksi (~180px)
   dengan lapang; kalau aksinya bertambah banyak, naikkan angka ini.

   `visibility` ikut beralih supaya isinya keluar dari urutan Tab saat
   tertutup — `overflow: hidden` saja menyembunyikannya secara visual tapi
   membiarkannya tetap bisa difokus papan ketik. Delaynya menunggu transisi
   tinggi selesai dulu saat menutup, dan nol saat membuka. */
.rw-navpanel__sub {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .42s var(--ease), visibility 0s linear .42s;
}
.rw-navpanel__group[data-buka="1"] .rw-navpanel__sub {
  max-height: 420px;
  visibility: visible;
  transition: max-height .42s var(--ease), visibility 0s;
}
/* ⚠️ `.rw-navpanel .rw-navpanel__sub > *`, bukan `.rw-navpanel__sub > *`.
   `.rw-navpanel a` (styles.css:303) memasang `padding: 11px 0` dengan
   spesifisitas (0,0,1,1) — lebih tinggi dari (0,0,1,0), jadi padding di sini
   hanya berlaku untuk <button> dan ketiga <a> tetap memakai 11px. Terukur pada
   audit 3 Sep 2026: <a> 43,6px, <button> 47,6px — tiga dari empat aksi jatuh di
   bawah ambang sentuh 44px, dan barisnya tidak rata tinggi.
   Ranjau spesifisitas yang sama dengan §12 dan dengan `a:hover` di panel. */
.rw-navpanel .rw-navpanel__sub > * {
  display: flex;
  align-items: center;
  gap: 12px;
  /* `width: 100%` — tanpa ini `Copy email address` menyusut mengikuti isinya
     karena ia <button>, sementara ketiga <a> di sekitarnya melebar penuh.
     Terukur 188px lawan 339px pada audit 3 Sep 2026: barisnya tidak rata dan
     target sentuhnya lebih kecil dari tetangganya tanpa alasan.
     Padding 13px, bukan 11: 11 menghasilkan tepat 44,0px — lolos di atas
     kertas, tapi tidak menyisakan margin untuk pembulatan subpiksel. */
  width: 100%;
  padding: 13px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
/* Spesifisitas (0,0,2,1) — sengaja di atas `.rw-navpanel a` (0,0,1,1), supaya
   item submenu tidak mewarisi ukuran display item menu induk. */
.rw-navpanel .rw-navpanel__sub a,
.rw-navpanel .rw-navpanel__sub button {
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--body-soft);
  padding-left: 4px;
  transition: color .3s ease;
}
.rw-navpanel .rw-navpanel__sub a:hover,
.rw-navpanel .rw-navpanel__sub button:hover { color: var(--ink); }
.rw-navpanel .rw-navpanel__sub a:focus-visible,
.rw-navpanel .rw-navpanel__sub button:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 3px;
}
.rw-navpanel__sub svg { width: 18px; height: 18px; flex: none; color: var(--mute); }
.rw-navpanel__sub img { width: 20px; height: 20px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .rw-navpanel__chev,
  .rw-navpanel__sub { transition: none; }
}