/* bundle-division-makeup.css — dibuat oleh build-css.py, JANGAN diedit langsung. Edit assets/css/src/ lalu jalankan ulang. */

/* >>> fonts.css */
/* ==========================================================================
   Font lokal (self-hosted, subset latin). Hanya 5 file yang benar-benar dipakai:
   - Schibsted Grotesk 400 / 500 / 700 -> teks isi, menu, tombol  (var(--font))
   - Space Grotesk 700                -> semua heading & angka besar (var(--font-head))
   - JetBrains Mono 500               -> label, tag, penomoran      (var(--font-mono))
   Permintaan bobot yang tidak ada otomatis jatuh ke bobot terdekat (mis. 800 -> 700);
   html { font-synthesis: none } di base.css mencegah faux-bold.
   font-display: block + semua font di-preload di <head> setiap halaman -> teks tampil langsung
   dengan font final (tidak ada kedipan ganti family). Jika menambah font baru, tambahkan juga
   <link rel="preload"> di semua halaman.
   ========================================================================== */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* >>> tokens.css */
/* ==========================================================================
   TOKEN DESAIN — satu-satunya tempat variabel global
   Warna, tipografi fluid, jarak, tinggi header, easing.
   Oranye brand #DD5326 (var --violet; nama lama dipertahankan) untuk bidang besar & dekorasi.
   Tombol utama memakai --cta (#AE3815) + teks putih = 6.2:1. Teks di atas oranye = ink.
   Tinggi header (--header-h) KONSTAN: jangan diubah saat scroll (memicu layout shift).
   ========================================================================== */
:root {
  /* Palet: oranye #DD5326 (var --violet, nama lama dipertahankan) + stage gelap #090B12.
     Teks di atas oranye = ink (kontras ±5:1); putih hanya di atas --violet-deep. */
  --paper: #FFFAF6;
  --ink: #090B12;
  --violet: #DD5326;
  --violet-deep: #B8401D;
  --lilac: #F6B9A2;
  --tint: #FDEDE5;
  --muted: #57534E;
  --rule: rgba(9, 11, 18, 0.16);
  --rule-on-ink: rgba(255, 250, 246, 0.2);
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Space Grotesk', 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --step-display: clamp(3rem, 7vw, 6.5rem);
  --step-hero: clamp(2.6rem, 5.4vw, 5rem);
  --step-title: clamp(2rem, 4.2vw, 3.75rem);
  --step-heading: clamp(1.35rem, 1.6vw + 0.6rem, 2rem);
  --step-lead: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 4.5rem;
  /* tinggi header: KONSTAN. Jangan diubah saat scroll (memicu layout shift → header bergetar) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Varian & hiasan */
  --violet-dark: #9A3416;
  --cta: #AE3815;
  --ghost: #F6C2AD; /* massa besar hiasan (1.4:1 di atas kertas) */
  --slate: #262E45;
}

/* HP kecil (<= 389px): judul tidak terpotong */
@media (max-width: 389px) {
  :root {
    --step-display: calc((100vw - 2.5rem) * 0.145);
    --step-hero: clamp(2.1rem, 11vw, 2.6rem);
    --step-title: clamp(1.75rem, 8.5vw, 2.2rem);
  }
}

/* >>> base.css */
/* ==========================================================================
   BASE — reset, aksesibilitas, grid 12 kolom, tipografi
   Dimuat di semua halaman, setelah tokens.css. Prefix komponen situs: sw-
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
body.sw {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.sw) img { display: block; max-width: 100%; }
:where(.sw) a { color: inherit; text-decoration: none; }
:where(.sw) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(.sw) :is(ul, ol) { list-style: none; }
.sw ::selection { background: var(--violet); color: var(--ink); }
.sw a:focus-visible, .sw button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.sw-on-ink a:focus-visible { outline-color: #fff; }
.sw-on-violet a:focus-visible { outline-color: var(--ink); }
.hidden { display: none !important; }

/* ---------- Skip link ---------- */
.sw-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  font-size: var(--step-small);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.sw-skip:focus { top: 0.75rem; }

/* ---------- Grid 12 kolom ---------- */
.sw-wrap { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.sw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sw-grid > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .at-5-8 { grid-column: 5 / span 8; }
  .r2 { grid-row: 2; }
  .at-6-7 { grid-column: 6 / span 7; }
  .col-3 { grid-column: span 3; }
  .col-9 { grid-column: span 9; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .at-4-9 { grid-column: 4 / span 9; }
  .at-8-5 { grid-column: 8 / span 5; }
  .at-9-4 { grid-column: 9 / span 4; }
  .at-7-6 { grid-column: 7 / span 6; }
}
.sw-section { padding-block: var(--section); }
.sw-ruled { border-top: 1px solid var(--rule); }
.sw-on-ink { background: var(--ink); color: var(--paper); }
.sw-on-ink .sw-ruled, .sw-on-ink.sw-ruled { border-color: var(--rule-on-ink); }

/* ---------- Tipografi ---------- */
.sw-display { font-size: var(--step-display); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
.sw-title { font-size: var(--step-title); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.sw-heading { font-size: var(--step-heading); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.sw-lead { font-size: var(--step-lead); line-height: 1.45; max-width: 34ch; }
.sw-body { max-width: 44ch; }
.sw-muted { color: var(--muted); }
.sw-label { font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.sw-on-ink .sw-muted, .sw-on-ink .sw-label { color: rgba(255, 250, 246, 0.72); }
.sw-on-violet .sw-label, .sw-on-violet .sw-muted { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-skip { transition: none; }
}

/* ---------- Font roles (lihat fonts.css) ---------- */
html { font-synthesis: none; }
/* Heading & angka besar -> Space Grotesk */
h1, h2, h3, h4, .sw-step b, .lm-stat-num,
.sw-pillar::before, .sw-quote blockquote, .sw-header .sw-mobile a:not(.sw-btn) { font-family: var(--font-head); }
/* Label, tag, penomoran -> JetBrains Mono (hanya aksen kecil, bukan paragraf) */
.sw-label, .lm-contact-label, .lm-stat-label, .sw-line .sw-aside span,
.lm-contact-no, .lm-contact-go, .sw-row::before, .sw-line::before,
.sw-header .sw-mobile a:not(.sw-btn)::before { font-family: var(--font-mono); font-weight: 500; }

/* >>> buttons.css */
/* ==========================================================================
   TOMBOL & LINK — persegi, datar (Swiss minimal)
   .sw-btn (outline), .sw-btn-solid (CTA utama, --cta), .sw-link (teks bergaris bawah).
   Tombol di band oranye ada di sections.css; tombol header & menu mobile ada di header.css.
   ========================================================================== */
.sw-link {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sw-link:hover { color: var(--cta); }
.sw-on-ink .sw-link:hover { color: var(--lilac); }
.sw-on-violet .sw-link:hover { color: var(--paper); }

/* ---------- Tombol ---------- */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  font: 700 var(--step-small)/1 var(--font);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sw-btn:hover { background: var(--ink); color: var(--paper); }
.sw-on-ink .sw-btn { border-color: var(--paper); color: var(--paper); }
.sw-on-ink .sw-btn:hover { background: var(--paper); color: var(--ink); }
.sw-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sw-btn-solid { background: var(--cta); border-color: var(--cta); color: #fff; }
.sw-btn-solid:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.sw-on-ink .sw-btn-solid { background: var(--cta); border-color: var(--cta); color: #fff; }
.sw-on-ink .sw-btn-solid:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.sw-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sw-on-ink .sw-btn:focus-visible { outline-color: #fff; }
@media (max-width: 899px) {
  /* area sentuh >= 44px */
  .sw-link { position: relative; }
  .sw-link::after { content: ""; position: absolute; inset: -0.85rem -0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-btn { transition: none; }
}

/* >>> header.css */
/* ==========================================================================
   HEADER, NAVIGASI & MENU MOBILE
   Tinggi header konstan (--header-h). Efek "compact" saat scroll hanya lewat logo mengecil + bayangan (.is-scrolled).
   Desktop >= 1024px: grid 3 kolom (logo | nav | CTA). Di bawahnya: tombol Menu + panel penuh (.sw-mobile).
   ========================================================================== */
.sw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 250, 246, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow 0.25s var(--ease);
}
.sw-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(9, 11, 18, 0.45); }
.sw-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--header-h); }
.sw-header-right { display: flex; align-items: center; gap: 0.75rem; }

/* ---------- Logo ---------- */
.sw-logo { display: inline-flex; align-items: center; }
.sw-logo img { width: auto; height: 2.6rem; transition: height 0.25s var(--ease); }
.sw-header.is-scrolled .sw-logo img { height: 2.25rem; }

/* ---------- Nav desktop ---------- */
.sw-nav { display: none; align-items: center; height: 100%; gap: 1.9rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; }
.sw-nav a { position: relative; display: flex; align-items: center; height: 100%; padding: 0; color: var(--ink); }
.sw-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.sw-nav a:hover::after, .sw-nav a:focus-visible::after { transform: scaleX(1); }
.sw-nav [aria-current="page"] { font-weight: 700; }
.sw-nav [aria-current="page"]::after { background: var(--cta); transform: scaleX(1); }

/* Separator samar antara About dan Batch */
.sw-nav-sep { display: block; width: 1px; height: 1.1rem; background: var(--rule); margin-inline: -0.35rem; }

/* Sub-menu Batch (desktop): muncul saat hover / fokus keyboard. Garis tipis, tanpa bayangan. */
.sw-nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.sw-nav-item > a { gap: 0.45rem; }
.sw-nav-item > a:not([href]), .sw-mobile a:not([href]) { cursor: default; } /* Batch & Division = pembuka submenu, bukan link */
.sw-nav-item > a::before {
  content: "";
  order: 2;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.1rem;
  transition: rotate 0.25s var(--ease);
}
.sw-nav-item:hover > a::before, .sw-nav-item:focus-within > a::before { rotate: 225deg; translate: 0 0.08rem; }
.sw-sub {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  min-width: 11.5rem;
  padding: 0.4rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.4rem;
  transition: opacity 0.2s var(--ease), translate 0.25s var(--ease), visibility 0s linear 0.25s;
}
.sw-nav-item:hover .sw-sub, .sw-nav-item:focus-within .sw-sub { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.sw-nav .sw-sub a { display: block; height: auto; padding: 0.7rem 1.1rem; font-weight: 500; transition: background-color 0.2s var(--ease), padding 0.25s var(--ease); }
.sw-nav .sw-sub a::after { display: none; }
.sw-nav .sw-sub a:hover, .sw-nav .sw-sub a:focus-visible { background: var(--tint); padding-left: 1.45rem; }

/* ---------- CTA & tombol menu ---------- */
.sw-header-cta { display: none; height: 2.75rem; padding: 0 1.4rem; }
.sw-menu-btn {
  height: 2.5rem;
  padding: 0 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--step-small)/1 var(--font);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sw-menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.sw-menu-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Menu mobile: panel penuh di bawah header ---------- */
.sw-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.sw-mobile-inner { padding-block: 0.5rem 1.5rem; }
.sw-mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sw-mobile a:not(.sw-btn)[aria-current]::after { content: ""; width: 0.6rem; height: 0.6rem; background: var(--cta); }
.sw-mobile a.is-current, .sw-mobile a[aria-current="page"]:not(.sw-btn) { color: var(--cta); }
/* Sub-menu Batch di panel mobile: selalu terbuka, menjorok, tanpa nomor */
.sw-mobile-sub { padding-left: 1rem; }
.sw-mobile .sw-mobile-sub a { padding: 0.7rem 0; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sw-mobile a.sw-btn {
  width: 100%;
  margin-top: 1.25rem;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  font-size: 0.95rem;
  letter-spacing: 0;
  background: var(--cta);
  border: 2px solid var(--cta);
  color: #fff;
}
.sw-mobile a.sw-btn:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- Desktop >= 1024px ---------- */
@media (min-width: 1024px) {
  .sw-header-bar { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; }
  .sw-logo { justify-self: start; }
  .sw-nav { display: flex; justify-self: center; }
  .sw-header-right { justify-self: end; }
  .sw-header-cta { display: inline-flex; }
  .sw-menu-btn, .sw-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-header, .sw-logo img, .sw-nav a::after, .sw-sub, .sw-nav-item > a::before { transition: none; }
}

/* >>> footer.css */
/* ==========================================================================
   FOOTER
   Gelap (--ink). Di mobile, ruang untuk dock bawah disediakan di dalam footer (lihat mobile-nav.css).
   ========================================================================== */
.sw-footer { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.sw-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule-on-ink);
}
@media (min-width: 900px) {
  .sw-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); }
}
.sw-footer img { height: 3rem; width: auto; margin-bottom: 1.25rem; }
.sw-footer h4 { margin: 0 0 1rem; font-size: var(--step-small); font-weight: 700; color: var(--lilac); }
.sw-footer li + li { margin-top: 0.6rem; }
.sw-footer li a { font-size: 0.95rem; color: rgba(255, 250, 246, 0.88); }
.sw-footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.sw-footer .sw-about { max-width: 36ch; color: rgba(255, 250, 246, 0.78); font-size: 0.95rem; }
.sw-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 250, 246, 0.68);
}
.sw-footer-bottom a:hover { color: #fff; }
@media (max-width: 899px) {
  /* area sentuh >= 44px */
  .sw-footer li + li { margin-top: 0; }
  .sw-footer li a { display: block; padding: 0.7rem 0; overflow-wrap: anywhere; }
  .sw-footer-bottom { gap: 0; }
  .sw-footer-bottom a { display: inline-block; padding: 0.7rem 0; }
}

/* Footer ramping: hanya baris copyright + back to top (dipakai semua halaman aktif; markup dari partials/footer.html) */
.sw-footer-slim { padding-top: 0; }
.sw-footer-slim .sw-footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--rule-on-ink); }

/* >>> decor.css */
/* ==========================================================================
   HIASAN GEOMETRIS (.sw-deco) & GRAFIK SAMPING (.sw-side-art)
   Prinsip: skala tidak sama (satu raksasa, satu kecil), posisi dipotong tepi section, sudut miring, tidak simetris. Selalu di belakang teks.
   Pakai: <div class="sw-deco" aria-hidden="true"><i class="circle c-l" style="--x:70%;--y:-14%;--s:30rem"></i></div>
   Variabel: --x --y (posisi %), --s (ukuran) atau --w/--h, --r (rotasi), --d (urutan masuk)
   Bentuk: circle quarter half ring dots slash tri plus blackhole wedge shard blade  |  Samar: --o (opacity akhir, 0-1)  |  Warna: c-v c-i c-l c-p c-d c-g c-s  |  .desk = hanya desktop
   ========================================================================== */
.sw-rel { position: relative; isolation: isolate; overflow: hidden; }
.sw-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* ---------- Posisi, masuk, goyang ---------- */
.sw-deco i {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w, var(--s));
  height: var(--h, var(--s));
  translate: var(--px, 0px) var(--py, 0px);   /* diisi parallax (swiss.js) */
  rotate: calc(var(--r, 0deg) + var(--sr, 0deg));
  /* masuk (drift) sekali + goyang halus (wiggle) terus-menerus */
  animation-name: sw-drift, sw-wiggle;
  animation-duration: 1s, var(--wd, 7s);
  animation-timing-function: var(--ease), ease-in-out;
  animation-delay: calc(var(--d, 0) * 90ms + 100ms), calc(var(--d, 0) * 90ms + 1200ms);
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: backwards, none;
  opacity: calc(var(--o, 1) * var(--oe, 0.5));
}
/* bentuk SOLID (bidang penuh) dibuat sangat samar; bentuk garis/titik/ring tetap lebih jelas */
/* pengaman: bentuk solid besar (segitiga, trapesium, kotak, setengah/seperempat lingkaran) tidak dipakai lagi */
.sw-deco i:is(.tri, .wedge, .shard, .blade, .half, .quarter, .sq) { display: none; }
.sw-deco i:not(.ring, .dots, .slash, .plus, .circle, .bar, .blackhole) { --oe: 0.16; }
.sw-deco i:is(.ring, .dots, .slash, .plus, .circle, .bar) { --oe: 0.2; }   /* hiasan kecil: X, titik, lingkaran, garis = 0.2 */
.sw-deco i.blackhole { --oe: 1; }
.sw-js .sw-deco i:not(.is-in) { animation-play-state: paused; } /* animasi masuk baru jalan saat bentuk terlihat (.is-in dari JS) */
.sw-deco i:nth-child(2n) { --wd: 9s; --wx: -7px; --wy: 12px; }
.sw-deco i:nth-child(3n) { --wd: 6s; --wx: 5px; --wy: -10px; }
.sw-deco i:nth-child(5n) { --wd: 11s; --wx: 9px; --wy: 16px; }
@keyframes sw-drift {
  from { opacity: 0; transform: translate(var(--dx, 3rem), var(--dy, -2rem)); }
  to { opacity: calc(var(--o, 1) * var(--oe, 0.5)); transform: none; }
}
@keyframes sw-wiggle {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--wx, -6px), var(--wy, -14px)); }
}

/* ---------- Bentuk ---------- */
.sw-deco .circle { border-radius: 50%; }
.sw-deco .quarter { border-radius: 100% 0 0 0; }
.sw-deco .half { border-radius: 999px 999px 0 0; }
.sw-deco .ring { border-radius: 50%; border: 2px solid currentColor; background-color: transparent !important; }
.sw-deco .dots {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.8px);
  background-size: 16px 16px;
  background-color: transparent !important;
}
.sw-deco .slash {
  background-image: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 11px);
  background-color: transparent !important;
}
.sw-deco .tri { clip-path: polygon(0 100%, 100% 100%, 0 0); }
.sw-deco .plus {
  background-color: transparent !important;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 100% 12%, 12% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Bentuk tambahan: black hole + globe wireframe + geometri asimetris (dipakai seksi "Ready to ...") ---------- */
.sw-deco .globe {
  background-color: currentColor !important;   /* garis tipis (stroke 0.26/100): cocok untuk ukuran raksasa */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.26%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cpath%20d=%22M50%202V98%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244.35%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2233.94%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2218.37%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2291.57%22%20rx=%2224%22%20ry=%224.08%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2280.85%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2266.42%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%228.16%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2233.58%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2219.15%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%228.43%22%20rx=%2224%22%20ry=%224.08%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.26%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cpath%20d=%22M50%202V98%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244.35%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2233.94%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2218.37%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2291.57%22%20rx=%2224%22%20ry=%224.08%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2280.85%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2266.42%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%228.16%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2233.58%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2219.15%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%228.43%22%20rx=%2224%22%20ry=%224.08%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* "Blackhole" = garis orbit tipis yang saling silang (elips berbagai kemiringan), mengikuti referensi desain PT. Warna ikut c-*. Tanpa bidang solid. */
.sw-deco .blackhole {
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.16%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2240%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2230%22%20transform=%22rotate%2822%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2222%22%20transform=%22rotate%28-35%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2236%22%20transform=%22rotate%2858%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2216%22%20transform=%22rotate%2880%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2226%22%20transform=%22rotate%28-62%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2212%22%20transform=%22rotate%2812%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2246%22%20ry=%2233%22%20transform=%22rotate%28-14%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2220%22%20transform=%22rotate%2840%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244%22%20ry=%2244%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Ccircle%20cx=%2240%22%20cy=%2258%22%20r=%2236%22/%3E%3Ccircle%20cx=%2260%22%20cy=%2244%22%20r=%2230%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.16%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2240%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2230%22%20transform=%22rotate%2822%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2222%22%20transform=%22rotate%28-35%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2236%22%20transform=%22rotate%2858%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2216%22%20transform=%22rotate%2880%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2226%22%20transform=%22rotate%28-62%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2212%22%20transform=%22rotate%2812%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2246%22%20ry=%2233%22%20transform=%22rotate%28-14%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2220%22%20transform=%22rotate%2840%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244%22%20ry=%2244%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Ccircle%20cx=%2240%22%20cy=%2258%22%20r=%2236%22/%3E%3Ccircle%20cx=%2260%22%20cy=%2244%22%20r=%2230%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.sw-deco .wedge { clip-path: polygon(0 100%, 100% 100%, 100% 28%, 36% 0); }
.sw-deco .shard { clip-path: polygon(0 58%, 74% 0, 100% 100%, 14% 100%); }
.sw-deco .blade { clip-path: polygon(0 0, 100% 16%, 62% 100%); }

/* ---------- Warna ---------- */
.sw-deco .c-v { background-color: var(--violet); color: var(--violet); }
.sw-deco .c-i { background-color: var(--ink); color: var(--ink); }
.sw-deco .c-l { background-color: var(--lilac); color: var(--lilac); }
.sw-deco .c-p { background-color: var(--paper); color: var(--paper); }
.sw-deco .c-d { background-color: var(--violet-dark); color: var(--violet-dark); }
.sw-deco .c-g { background-color: var(--ghost); color: var(--ghost); }
.sw-deco .c-s { background-color: var(--slate); color: var(--slate); }

/* ---------- Konteks ---------- */
/* di dalam ubin galeri: tanpa parallax, hanya animasi masuk */
.sw-tile-art .sw-deco i {
  translate: none;
  rotate: var(--r, 0deg);
  animation: sw-drift 1s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 90ms + 100ms);
}
/* teks di atas hiasan tidak boleh meluap */
.sw-deco ~ .sw-wrap :is(h1, h2, h3, p, li, dt, dd, address) { overflow-wrap: break-word; }
@media (max-width: 899px) {
  .sw-deco .desk { display: none; }
  /* hiasan di belakang teks lebih samar */
}
@media (prefers-reduced-motion: reduce) {
  .sw-deco i { animation: none; translate: none; }
}

/* ---------- Grafik samping: berputar mengikuti scroll, +90deg tiap klik FAQ ---------- */
.sw-side-art { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 10rem); margin-top: 2rem; }
.sw-side-art.is-big { width: min(100%, 18rem); margin-top: 2.5rem; }
.sw-side-art b {
  position: relative;
  display: block;
  aspect-ratio: 1;
  rotate: calc(var(--prog, 0) * var(--k, 1) * 180deg);
}
.sw-side-art i {
  position: absolute;
  inset: 0;
  display: block;
  rotate: calc(var(--n, 0) * 90deg);
  transition: rotate 0.7s var(--ease), transform 0.5s var(--ease);
}
.sw-side-art b:hover i { transform: scale(0.8); }
.sw-side-art i.q { border-radius: 100% 0 0 0; }
.sw-side-art i.c { border-radius: 50%; }
.sw-side-art i.h { inset: 0 0 50% 0; border-radius: 999px 999px 0 0; transform-origin: 50% 100%; }
.sw-side-art i.v { background: var(--violet); }
.sw-side-art i.k { background: var(--ink); }
.sw-side-art i.l { background: var(--lilac); }
@media (max-width: 899px) {
  .sw-side-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-side-art i { transition: none; }
}

/* ORBIT 3D (.sw-orb) — komponen bersama untuk hero (career, division/finance). CSS 3D sungguhan, tanpa JS, di kanan hero.
   Bola = 6 meridian + 5 paralel yang berputar pelan; tiap cincin orbit = satu divisi / satu tugas, membawa satu titik yang mengorbit
   (career: 6 cincin = 6 divisi; finance: 4 cincin = Process, Plan & track, Record, Report). Markup: lihat career.html / division/finance.html. Kekuatan garis disamakan dengan globe footer "Ready to ..." (±0.1).
   Warna: tema terang = oranye brand (lilac hilang di atas krem), tema gelap = lilac seperti footer. Atur ukuran/posisi/opacity di variabel .sw-orb. */
.sw-orb {
  --S: min(70vw, 64rem);          /* diameter bola */
  --W: calc(var(--S) * 1.75);     /* kanvas lebih besar dari bola supaya cincin luar tidak terpotong mask */
  --orb: var(--violet);
  --a-line: 0.3;                 /* kekuatan garis (tema terang) */
  --a-node: 0.5;                  /* titik divisi */
  position: absolute;
  right: calc(var(--S) * -0.675);
  top: 54%;
  width: var(--W);
  height: var(--W);
  translate: 0 -50%;
  color: var(--orb);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 38%);
  mask-image: linear-gradient(to right, transparent 4%, #000 38%);   /* memudar ke arah teks agar judul tetap bersih */
}
.sw-js .sw-orb {
  opacity: 0;
  scale: 0.94;
  transition: opacity 1.2s var(--ease), scale 1.2s var(--ease);
}
.sw-js .sw-orb.is-in {
  opacity: 1;
  scale: 1;
}
:root[data-theme^="dark"] .sw-orb { --orb: var(--lilac); --a-line: 0.24; --a-node: 0.5; }
.sw-orb-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; }
.sw-orb-scene { position: absolute; left: 50%; top: 50%; width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2); transform-style: preserve-3d; transform: rotateX(-16deg) rotateZ(-12deg); --R: calc(var(--S) / 2); }
.sw-orb-globe { position: absolute; inset: 0; transform-style: preserve-3d; }
.sw-orb-globe .m, .sw-orb-globe .l, .sw-orb .r {
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: var(--a-line);
}
.sw-orb-globe .m { inset: 0; transform: rotateY(var(--a)); }
.sw-orb-globe .l {
  left: calc(50% - var(--c) * var(--R));
  top: calc(50% - var(--c) * var(--R));
  width: calc(var(--c) * var(--S));
  height: calc(var(--c) * var(--S));
  transform: translateY(calc(var(--sn) * var(--R) * -1)) rotateX(90deg);
}
.sw-orb .r {
  left: calc(50% - var(--k) * var(--R));
  top: calc(50% - var(--k) * var(--R));
  width: calc(var(--k) * var(--S));
  height: calc(var(--k) * var(--S));
  transform: rotateY(var(--y)) rotateX(var(--x));
}
.sw-orb .o { position: absolute; inset: -1px; border-radius: 50%; }
.sw-orb .n { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: currentColor; opacity: var(--a-node); }
@media (max-width: 899px) {
  .sw-orb { --S: 125vw; --W: calc(var(--S) * 1.75); right: -88vw; top: 58%; --a-line: 0.16; --a-node: 0.34; }
  :root[data-theme^="dark"] .sw-orb { --a-line: 0.12; --a-node: 0.28; }
  .sw-orb { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .sw-orb, .sw-orb-globe, .sw-orb .o { animation: none; } }

/* Varian .sw-orb--flow: globe tidak terpotong garis bawah hero, melintas ke seksi di bawahnya.
   Syarat: hero memakai overflow: visible, dan wadah halaman memotong sisi horizontal (overflow-x: clip) supaya tidak muncul scroll samping.
   Pusat globe di sekitar garis batas hero; bagian bawah memudar agar tidak mengalir sampai dasar halaman. */
.sw-orb--flow {
  top: 106%;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 38%), linear-gradient(to bottom, #000 58%, transparent 90%);
  mask-image: linear-gradient(to right, transparent 4%, #000 38%), linear-gradient(to bottom, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 899px) {
  .sw-orb--flow { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%); mask-image: linear-gradient(to bottom, #000 58%, transparent 90%); top: 100%; }
}

/* >>> sections.css */
/* ==========================================================================
   SECTION UMUM — dipakai di banyak halaman
   Label+isi, pilar, hero halaman dalam, daftar baris, langkah, kutipan, band CTA, seksi tint.
   Komponen khusus satu halaman ada di file masing-masing (home-blocks, gallery, career, forms, faq, modal).
   ========================================================================== */

/* ---------- Section: label kiri + isi kanan ---------- */
.sw-label-col { padding-bottom: 1.5rem; }
.sw-label-col .sw-label { color: var(--ink); font-weight: 700; }
.sw-label-col p + p, .sw-label-col a { margin-top: 0.5rem; display: inline-block; }
.sw-pillars { display: grid; gap: 2.5rem var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sw-pillars { grid-template-columns: 1fr 1fr; }
}
.sw-pillar { padding-top: 1rem; border-top: 2px solid var(--ink); }
.sw-pillar h3 { margin-bottom: 0.75rem; }
.sw-pillar p { color: var(--muted); max-width: 36ch; }
@media (max-width: 899px) {
  .sw-label-col .sw-link { margin-top: 0.75rem; }
}

/* ---------- Seksi tint & kolom kiri lengket ---------- */
.sw-tint { background: var(--tint); }
@media (min-width: 900px) {
  .sticky-col { position: sticky; top: 7rem; align-self: start; }
  .sticky-col.span2 { grid-row: 1 / span 2; }
}

/* ---------- Hero halaman dalam ---------- */
.sw-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--rule);
}
.sw-page-hero h1 {
  font-size: var(--step-hero);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin-left: -0.04em;
}
.sw-page-hero .sw-label { color: var(--ink); font-weight: 700; margin-bottom: 1.5rem; }
.sw-page-hero .sw-lead { margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 40ch; }

/* ---------- Daftar baris (non-link) ---------- */
.sw-list-rows { border-bottom: 1px solid var(--rule); }
.sw-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.sw-line p { color: var(--muted); max-width: 42ch; }
/* Key specifications: label kecil (mono, kapital, abu) vs nilai spesifikasi (tebal, ink, garis aksen oranye) */
.sw-line .sw-aside { font-size: 0.95rem; font-weight: 700; line-height: 1.55; color: var(--ink); max-width: none; padding-left: 0.9rem; border-left: 3px solid var(--violet); }
.sw-line .sw-aside span { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
@media (min-width: 900px) {
  .sw-line { grid-template-columns: 1.1fr 1.3fr 1fr; gap: var(--gap); align-items: baseline; }
  .sw-line-2 { grid-template-columns: 1fr 1.6fr; }
}
.sw-on-ink .sw-list-rows, .sw-on-ink .sw-line { border-color: var(--rule-on-ink); }
.sw-on-ink .sw-line p { color: rgba(255, 250, 246, 0.78); }

/* ---------- Langkah bertingkat (asimetri) ---------- */
.sw-steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.sw-step { border-top: 2px solid var(--ink); padding-top: 1rem; }
.sw-step b {
  display: block;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--cta);
  margin-bottom: 1.25rem;
}
.sw-step h3 { margin-bottom: 0.6rem; }
.sw-step p { color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) {
  .sw-steps { grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
  .sw-step:nth-child(2) { margin-top: 2.5rem; }
  .sw-step:nth-child(3) { margin-top: 5rem; }
  .sw-step:nth-child(4) { margin-top: 7.5rem; }
}
.sw-on-ink .sw-step { border-color: var(--paper); }
.sw-on-ink .sw-step b { color: var(--lilac); }
.sw-on-ink .sw-step p { color: rgba(255, 250, 246, 0.78); }
.sw-on-ink .sw-step h3 { color: var(--paper); }

/* ---------- Kutipan visi ---------- */
.sw-quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--violet);
  color: var(--ink);
  padding-block: var(--section);
}
.sw-quote blockquote {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 26ch;
}
.sw-quote .sw-label { color: var(--ink); }
.sw-quote cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Band CTA penutup ---------- */
.sw-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 34vw, 32rem); /* hiasan tidak menyentuh tombol saat teks pendek */
  padding-block: var(--section);
  background: var(--violet);             /* oranye: tidak menyatu dengan seksi gelap di atas / footer */
  color: var(--ink);
}
.sw-band > .sw-wrap { width: 100%; }
.sw-band .sw-grid { align-items: end; row-gap: 2.5rem; }
.sw-band h2 { max-width: 16ch; }
.sw-band p { margin-top: 1.5rem; max-width: 38ch; color: var(--ink); }
.sw-band .sw-btn-row { justify-content: flex-start; }
.sw-band .sw-btn { border-color: var(--ink); color: var(--ink); }
.sw-band .sw-btn:hover { background: var(--ink); color: var(--paper); }
.sw-band .sw-btn-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sw-band .sw-btn-solid:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.sw-band a:focus-visible { outline-color: var(--ink); }

/* >>> division.css */
/* [division-*.html] Halaman divisi: pindah-divisi, foto/video placeholder, galeri hasil */
.dv-ph { position: relative; display: grid; place-items: end start; aspect-ratio: 4 / 5; background: var(--tint); border: 1.5px solid var(--rule); overflow: hidden; }
.dv-ph > span { position: relative; margin: 0.75rem; padding: 0.25rem 0.55rem; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
.dv-ph > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-ph.is-wide { aspect-ratio: 16 / 9; background-size: auto 78%; }
.dv-ph.is-video { aspect-ratio: 16 / 9; background-image: none; place-items: center; }
.dv-ph.is-video::before { position: relative; z-index: 1; content: ""; width: 4.5rem; height: 4.5rem; background: var(--ink); clip-path: circle(50%); }
.dv-ph.is-video::after { z-index: 1; content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-left: 1.2rem solid var(--paper); border-block: 0.75rem solid transparent; }
.dv-ph.is-video > span { position: absolute; left: 0; bottom: 0; }
.dv-split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.dv-split .dv-ph { max-width: 28rem; }
.dv-split .dv-ph.is-video { max-width: none; }
.dv-role { font-family: var(--font-mono); font-size: var(--step-small); color: var(--muted); margin-bottom: 0.4rem; }
.dv-name { font-family: var(--font-head); font-weight: 700; font-size: var(--step-heading); letter-spacing: -0.02em; margin-bottom: 1rem; }
.dv-copy p { max-width: 52ch; }
.dv-copy p + p { margin-top: 1rem; }
.dv-block { margin-top: clamp(3rem, 6vw, 5rem); }
.dv-block > h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--step-heading); letter-spacing: -0.02em; margin-bottom: 1.25rem; }
.dv-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.dv-gal .dv-ph { aspect-ratio: 3 / 4; background-size: 80% auto; }
.dv-gal.is-3 { grid-template-columns: 1fr; }
.dv-gal.is-3 .dv-ph { aspect-ratio: 16 / 10; background-size: auto 78%; }
.dv-steps { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 640px) { .dv-gal { grid-template-columns: repeat(3, 1fr); } .dv-gal.is-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .dv-split { grid-template-columns: 5fr 7fr; }
  .dv-gal { grid-template-columns: repeat(5, 1fr); }
}

/* Video training vertikal 9:16: hanya play/pause (tanpa progress bar) */
.dv-vids { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.dv-vid { margin: 0; flex: 0 0 min(68vw, 17rem); scroll-snap-align: start; }
.dv-vid-frame { position: relative; aspect-ratio: 9 / 16; background: var(--tint); border: 1.5px solid var(--rule); overflow: hidden; }
.dv-vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.dv-vid-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.dv-vid-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
@media (min-width: 900px) {
  .dv-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 18rem)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .dv-vid { flex: none; }
}

/* Kata-kata mutiara (Finance) */
.dv-quote { margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2.5rem); border-left: 0.5rem solid var(--violet); max-width: 40rem; }
.dv-quote p { font-family: var(--font-head); font-weight: 700; font-size: var(--step-title); line-height: 1.08; letter-spacing: -0.03em; }
.dv-quote p::before { content: "\201C"; }
.dv-quote p::after { content: "\201D"; }
.dv-quote footer { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--step-small); color: var(--muted); }

/* Tombol mute + varian video lebar (16:9) */
.dv-vid-mute { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; opacity: 0; transition: opacity 0.2s var(--ease); }
.dv-vid-mute svg { width: 1rem; height: 1rem; }
.dv-vid:hover .dv-vid-mute, .dv-vid-mute:focus-visible { opacity: var(--dv-mute-o, 0.3); }
@media (hover: none) { .dv-vid-mute { opacity: 0.3; } } /* layar sentuh tidak punya hover: tetap tampil samar supaya bisa unmute */
.dv-vid-mute .x { display: none; }
.dv-vid.is-muted .dv-vid-mute .w { display: none; }
.dv-vid.is-muted .dv-vid-mute .x { display: inline; }
.dv-vid-mute:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.dv-vid.is-wide { max-width: 64rem; flex: none; }
.dv-vid.is-wide .dv-vid-frame { aspect-ratio: 16 / 9; }

/* Preview "video": slideshow foto crossfade + zoom pelan (sementara sebelum file video asli ada).
   Saat <video> sudah punya sumber, JS menambah .has-video dan slideshow disembunyikan. 4 foto per frame (--i = 0..3). */
.dv-vid-slides { position: absolute; inset: 0; overflow: hidden; }
.dv-vid-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); animation: dv-slide 12s linear infinite; animation-delay: calc(var(--i) * 3s - var(--off, 0s)); animation-play-state: paused; will-change: opacity, transform; }
.dv-vid.is-seen:not(.is-held) .dv-vid-slides img { animation-play-state: running; }
.dv-vid:nth-child(2) { --off: 1s; } .dv-vid:nth-child(3) { --off: 2s; }
.dv-vid.has-video .dv-vid-slides { display: none; }
@keyframes dv-slide { /* foto baru fade-in DI ATAS foto lama (z-index 2), foto lama baru hilang saat foto baru sudah penuh -> latar tidak pernah tembus */
  0% { opacity: 0; z-index: 2; transform: scale(1); }
  8% { opacity: 1; z-index: 2; }
  8.01% { opacity: 1; z-index: 1; }
  33% { opacity: 1; z-index: 1; transform: scale(1.08); }
  33.01% { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dv-vid-slides img { animation: none; }
  .dv-vid-slides img:first-child { opacity: 1; }
}

/* Tombol play/pause custom (bukan bawaan browser): satu lingkaran + ikon SVG (mask), hanya muncul saat hover.
   Opacity diatur di sini: --dv-play-o (play/pause) dan --dv-mute-o (volume, lihat .dv-vid:hover .dv-vid-mute). */
:root { --dv-play-o: 0.55; --dv-ico-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); --dv-ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E"); }
.dv-vid-btn { opacity: 0; transition: opacity 0.2s var(--ease); }
.dv-vid:hover .dv-vid-btn, .dv-vid-btn:focus-visible { opacity: var(--dv-play-o); }
.dv-vid-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; translate: -50% -50%; border-radius: 50%; background: var(--ink); pointer-events: none; }
.dv-vid-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 1.15rem; translate: -50% -50%; background: var(--paper); pointer-events: none; -webkit-mask: var(--dv-ico-pause) center / contain no-repeat; mask: var(--dv-ico-pause) center / contain no-repeat; }
.dv-vid.is-paused .dv-vid-btn::after { translate: -43% -50%; -webkit-mask-image: var(--dv-ico-play); mask-image: var(--dv-ico-play); }
@media (hover: none) { .dv-vid.is-paused .dv-vid-btn { opacity: var(--dv-play-o); } } /* layar sentuh: ikon play tampil samar hanya saat berhenti */

/* >>> dvp/base.css */
/* [division/*.html] POLA SEAMLESS (garis saja) — DIBUAT oleh tools/gen-dv-patterns.py, jangan diedit langsung.
   Pakai:  <div class="dvp dvp-trace" aria-hidden="true" style="--dvp-c:var(--violet);--dvp-o:.5"></div> di dalam section .sw-rel / .sw-page-hero.
   Warna = --dvp-c, kekuatan = --dvp-o, skala = --dvp-k, melaju pelan = tambah .dvp-drift. Pola dipakai sebagai CSS mask. */
.dvp { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--dvp-c, var(--ink)); opacity: var(--dvp-o, 0.4);
  -webkit-mask-image: var(--dvp-img); mask-image: var(--dvp-img);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: calc(var(--dvp-t, 320px) * var(--dvp-k, 1)); mask-size: calc(var(--dvp-t, 320px) * var(--dvp-k, 1)); }
.dvp-drift { animation: dvp-drift var(--dvp-dur, 90s) linear infinite; }
.dvp-drift-y { animation-name: dvp-drift-y; }
@keyframes dvp-drift { to { -webkit-mask-position: calc(var(--dvp-t, 320px) * var(--dvp-k, 1)) 0; mask-position: calc(var(--dvp-t, 320px) * var(--dvp-k, 1)) 0; } }
@keyframes dvp-drift-y { to { -webkit-mask-position: 0 calc(var(--dvp-t, 320px) * var(--dvp-k, 1)); mask-position: 0 calc(var(--dvp-t, 320px) * var(--dvp-k, 1)); } }
@media (prefers-reduced-motion: reduce) { .dvp-drift { animation: none; } }

/* >>> dv/common.css */
/* ==========================================================================
   [division/*.html] 6 halaman divisi, 6 gaya berbeda (dibatasi lewat class di <body>):
   dp-hr  Human Resource   — dossier: slab oranye + jalur sirkuit, pipeline bersiku
   dp-mu  Make-up Artist   — kolase: coretan kuas, polaroid miring, stiker
   dp-tm  Talent Manager   — gelap: glitch aberasi, pita trapesium bertangga
   dp-cd  Coach Dance      — gerak: garis kecepatan, equalizer hidup, video miring
   dp-vg  Videographer     — viewfinder: scanline, braket bidik, filmstrip
   dp-fn  Finance          — buku besar: grafik naik belum selesai, stempel, baris ledger
   Pola garis = dvp/*.css (dibuat tools/gen-dv-patterns.py). Pakai properti `rotate`/`translate` (bukan transform)
   supaya animasi muncul (.dp-reveal) tidak bentrok dengan kemiringan. Tanpa kata di hiasan: hanya garis & bentuk.
   ========================================================================== */
.dp { --dp-gap: clamp(1rem, 2.4vw, 2.2rem); }

/* ---------- Umum ---------- */
.dp-hero { border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: grid; align-content: center; min-height: clamp(16rem, 28vw, 22rem); padding-block: clamp(3rem, 6vw, 5rem); background: var(--violet); color: #fff; --lead-bg: var(--ink); --lead-fg: var(--paper); }
.dp-hero h1 { font-family: var(--font-head); font-weight: 700; font-style: normal; transform: none; rotate: 0deg; text-shadow: none; font-size: clamp(2.6rem, 11.5vw, 4.6rem); line-height: 0.92; max-width: 12ch; letter-spacing: -0.055em; color: #fff; }
@media (min-width: 900px) { .dp-hero h1 { font-size: min(8.4vw, 8rem); } }
.dp-hero .sw-grid { row-gap: 0; }
.dp-hero .sw-lead { justify-self: start; margin-top: clamp(1.4rem, 2.5vw, 2.2rem); margin-left: 0; padding: clamp(1.2rem, 2.2vw, 1.8rem) 0 0 0; background: none; color: rgba(255, 255, 255, 0.92); border-top: 1px solid rgba(255, 255, 255, 0.25); max-width: 44ch; font-style: normal; clip-path: none; font-size: var(--step-lead); line-height: 1.5; }
.dp-hero .sw-label { color: inherit; }

/* Spacing proporsional untuk konten divisi & footer/star */
.dp .dp-hero + .sw-section { padding-top: clamp(3rem, 6vw, 5rem); }
.dp .sw-section:last-of-type { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.dp .lm-star { padding-top: clamp(3rem, 6vw, 5rem); }
.dp-kicker { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.dp-kicker::before { content: ""; width: 2.6rem; height: 3px; background: currentColor; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.dp-big { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.45rem, 2.4vw + 0.5rem, 2.6rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 26ch; text-wrap: balance; }
.dp-n { display: block; font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.08em; }
.dv-block > h2.dp-squig, .dp-squig { display: inline-block; position: relative; padding-bottom: 1rem; }
.dp-squig::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.7rem; background: var(--violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11' viewBox='0 0 38 11'%3E%3Cpath d='M0 6Q4.75 0 9.5 6T19 6T28.5 6T38 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 2.4rem 0.7rem;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='11' viewBox='0 0 38 11'%3E%3Cpath d='M0 6Q4.75 0 9.5 6T19 6T28.5 6T38 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0 / 2.4rem 0.7rem; }

/* muncul saat discroll */
.sw-js .dp-reveal { opacity: 0; translate: 0 1.6rem; transition: opacity 0.8s var(--ease) var(--rd, 0ms), translate 0.9s var(--ease) var(--rd, 0ms), transform 0.25s var(--ease); }
.sw-js .dp-reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .sw-js .dp-reveal { opacity: 1; translate: 0 0; transition: none; } }

/* pita pembatas pola sebelum seksi "Ready to be a star?" */
.dp .lm-star { border-top: 1px solid #fff; }

/* >>> dv/wire.css */
/* ========== Hiasan 3D Wireframe Tematik Divisi ==========
   Tiap divisi memiliki objek 3D wireframe unik:
   - Videographer: Cinema Camera Body & Multi-axis Optical Lens Aperture
   - Make-up Artist: Vanity Studio Mirror & Floating Brushstroke Ribbons
   - Coach Dance: Kinetic Stage Floor Grid & Dynamic Choreography Waveform
   - Talent Manager: 3D Navigational Astrolabe & Guiding Stellar Spotlight
   - Human Resource: 3D Geodesic Icosahedron & Synergistic Network Mesh
   - Finance: 3D Isometric Growth Matrix & Faceted Crystal Polyhedron
   Garis sangat tipis (stroke-width: 0.22/100) dan artistik.
   Scroll-triggered Entry Animation (tanpa loop terus-menerus, 60fps tanpa lag). */
.dp-hero { position: relative; overflow: clip; }
.dp-hero .sw-wrap, .dp-hr-body .sw-wrap, .dp-mu-body .sw-wrap, .dp-tm-body .sw-wrap, .dp-cd-body .sw-wrap, .dp-vg-body .sw-wrap, .dp-fn-body .sw-wrap { position: relative; z-index: 1; }
.dw { position: absolute; z-index: 0; pointer-events: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 0.22; stroke-linecap: round; stroke-linejoin: round; aspect-ratio: 1; height: auto; }
.dw .v { stroke: var(--violet); }
.dp-hero .dw .v { stroke: #fff; }
.dw-hero { right: -14%; top: 50%; translate: 0 -50%; width: min(72vw, 56rem); }
.dw-body { left: -18%; top: 4%; width: min(60vw, 46rem); }
@media (max-width: 899px) { .dw-hero { right: -55%; width: 135vw; } .dw-body { left: -45%; top: 0; width: 120vw; } }
.dp-hr-hero .sw-wrap { padding-bottom: 0; }

/* Scroll-triggered Entry Animation (Smooth, hardware accelerated, zero lag) */
.sw-js .dw {
  opacity: 0;
  scale: 0.88;
  rotate: -6deg;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), scale 1.4s cubic-bezier(0.16, 1, 0.3, 1), rotate 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-js .dw-hero.is-in {
  opacity: 0.1;
  scale: 1;
  rotate: 0deg;
}
.sw-js .dw-body.is-in {
  opacity: 0.1;
  scale: 1;
  rotate: 0deg;
}
@media (max-width: 899px) {
  .sw-js .dw-hero.is-in { opacity: 0.1; }
  .sw-js .dw-body.is-in { opacity: 0.1; }
}

/* Fallback tanpa JS / prefers-reduced-motion */
html:not(.sw-js) .dw-hero { opacity: 0.1; }
html:not(.sw-js) .dw-body { opacity: 0.1; }
@media (prefers-reduced-motion: reduce) {
  .dw {
    opacity: 0.1 !important;
    scale: 1 !important;
    rotate: 0deg !important;
    transition: none !important;
  }
  .dw-body {
    opacity: 0.1 !important;
  }
}

/* >>> dv/mu.css */
/* ========== 02 MAKE-UP ARTIST — kolase ========== */
.dp-mu-hero { background: var(--violet); color: var(--ink); }
.dp-mu-hero h1 { max-width: 8ch; }
.dp-mu-hero .sw-lead { border-top: 1px solid var(--ink); }
.dp-mu-body { background: var(--tint); }
.dp-mu-intro { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; padding-inline: 0.9rem; }
.dp-mu-polaroid { position: relative; margin: 0 0 2.4rem; max-width: 22rem; }
.dp-mu-polaroid::before { content: ""; position: absolute; z-index: -1; inset: -0.9rem -0.9rem -3.2rem; translate: 0.8rem 0.8rem; border: 2px dashed var(--ink); }
.dp-mu-polaroid::after { content: ""; position: absolute; z-index: -1; inset: -0.9rem -0.9rem -3.2rem; background: #fff; border: 1.5px solid var(--ink); }
.dp-mu-polaroid .dv-ph { aspect-ratio: 1 / 1.05; background-size: 90% auto; }
.dp-mu-card { position: relative; background: var(--paper); border: 1.5px solid var(--ink); padding: clamp(1.4rem, 3vw, 2.4rem); }
.dp-mu-card::before { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 6rem; height: 3.4rem; background: repeating-linear-gradient(-45deg, var(--violet) 0 2px, transparent 2px 8px); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.dp-mu-card h2 { margin-bottom: 1.1rem; }
.dp-mu-card p { max-width: 46ch; font-size: 1.08rem; }
.dp-stickers { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.dp-stickers a, .dp-stickers li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  font: 700 0.9rem/1 var(--font-head);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dp-stickers a::after {
  content: "↓";
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.dp-stickers a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.dp-stickers a:hover::after {
  transform: translateY(2px);
  opacity: 1;
}
.dp-stickers a:nth-child(2), .dp-stickers li:nth-child(2) { border-style: dashed; }
.dp-stickers a:nth-child(3), .dp-stickers li:nth-child(3) { border-color: var(--violet); }
.dp-stickers a:nth-child(3):hover { background: var(--violet); border-color: var(--violet); color: var(--paper); }
.dp-mu-block { margin-top: clamp(3.5rem, 7vw, 6rem); }
.dp-mu-block > h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); margin-bottom: 1.8rem; }
.dp-mu-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; padding: 0.6rem 0.8rem 2.5rem 0.2rem; }
.dp-mu-f { position: relative; margin: 0; }
.dp-mu-f::after { content: ""; position: absolute; z-index: -1; inset: 0; translate: 0.55rem 0.55rem; border: 2px solid var(--violet); }
.dp-mu-f .dv-ph { aspect-ratio: 4 / 5; background-size: 76% auto; }
.dp-mu-f:nth-child(1) { grid-column: 1 / -1; } .dp-mu-f:nth-child(1) .dv-ph { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .dp-mu-intro { grid-template-columns: 5fr 7fr; padding-inline: 1.4rem 0; }
  /* Grid simetris: baris 1 = 3 kartu sama besar, baris 2 = 2 kartu sama besar. Tanpa miring/offset. */
  .dp-mu-collage { grid-template-columns: repeat(6, 1fr); gap: 2rem 1.6rem; padding-bottom: 3.5rem; align-items: start; }
  .dp-mu-f:nth-child(n) { grid-column: span 2; }
  .dp-mu-f:nth-child(n) .dv-ph { aspect-ratio: 4 / 5; background-size: 76% auto; }
  .dp-mu-f:nth-child(4), .dp-mu-f:nth-child(5) { grid-column: span 3; }
  .dp-mu-f:nth-child(4) .dv-ph, .dp-mu-f:nth-child(5) .dv-ph { aspect-ratio: 16 / 10; background-size: auto 86%; }
  .is-flip .dp-mu-f:nth-child(1), .is-flip .dp-mu-f:nth-child(2) { grid-column: span 3; }
  .is-flip .dp-mu-f:nth-child(1) .dv-ph, .is-flip .dp-mu-f:nth-child(2) .dv-ph { aspect-ratio: 16 / 10; background-size: auto 86%; }
  .is-flip .dp-mu-f:nth-child(3), .is-flip .dp-mu-f:nth-child(4), .is-flip .dp-mu-f:nth-child(5) { grid-column: span 2; }
  .is-flip .dp-mu-f:nth-child(n+3) .dv-ph { aspect-ratio: 4 / 5; background-size: 76% auto; }
}

/* Wardrobe: rak baju — foto "tergantung" di satu rel. Mobile/tablet: geser samping (tidak memanjang ke bawah); desktop: 6 sejajar 1 baris */
.dp-mu-wd-lead { max-width: 52ch; margin: -0.6rem 0 1.4rem; font-size: 1.05rem; }
.dp-mu-wardrobe { --wg: 1.1rem; display: flex; gap: var(--wg); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2.6rem var(--gutter) 1.6rem; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.dp-mu-w { position: relative; flex: 0 0 min(52vw, 13rem); margin: 0; scroll-snap-align: start; }
.dp-mu-w::before { content: ""; position: absolute; z-index: 1; top: -1.35rem; left: calc(var(--wg) / -2 - 1px); right: calc(var(--wg) / -2 - 1px); height: 3px; background: var(--ink); }
.dp-mu-w::after { content: ""; position: absolute; z-index: 2; top: -1.15rem; left: 50%; width: 2.4rem; height: 1.2rem; translate: -50% 0; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M16 1v4M3 15L16 5l13 10z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16'%3E%3Cpath d='M16 1v4M3 15L16 5l13 10z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.dp-mu-w .dv-ph { aspect-ratio: 3 / 4; margin-top: 0.6rem; background-size: 70% auto; border: 1.5px solid var(--ink); box-shadow: 0.45rem 0.45rem 0 var(--violet); }
@media (min-width: 1000px) {
  .dp-mu-wardrobe { --wg: 2rem; display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-inline: 0; padding: 2.6rem 0.5rem 1.8rem 0; }
  .dp-mu-w { flex: none; }
}

/* >>> star.css */
/* ==========================================================================
   SEKSI PENUTUP "READY TO ..." (footer besar) — dipakai index, career, division/*, batch/*
   Pasangannya: footer ramping (.sw-footer-slim) di footer.css. Markup-nya DIBUAT oleh build-html.py (partials/star.html).
   Hiasan sengaja minim supaya konten tetap terbaca: 1 globe wireframe raksasa yang tipis & samar + 2 geometri asimetris.
   ========================================================================== */
.lm-star { padding-block: var(--section) clamp(3rem, 6vw, 5rem); }
.lm-star-grid { row-gap: 3rem; align-items: end; }
.lm-star-title { margin-top: 1.25rem; text-transform: uppercase; text-wrap: balance; max-width: 10ch; }
.lm-star-title span { color: var(--violet); }
.lm-star-lead { margin-top: 1.75rem; color: rgba(255, 250, 246, 0.82); max-width: 36ch; }
.lm-star-btns { margin-top: 2rem; }
.lm-star-side { display: flex; flex-direction: column; gap: 1.5rem; }
.lm-star-logo img { height: 3rem; width: auto; }
.lm-star-contact div { padding: 1rem 0; border-top: 1px solid var(--rule-on-ink); }
.lm-star-contact div:last-child { border-bottom: 1px solid var(--rule-on-ink); }
.lm-star-contact dt { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.lm-star-contact dd { margin-top: 0.25rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.lm-star-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .lm-star-main { grid-column: 1 / span 7; }
  .lm-star-side { grid-column: 9 / span 4; }
}
@media (max-width: 899px) {
  .lm-star-contact a { display: inline-block; padding: 0.4rem 0; }   /* area sentuh */
}

.lm-star-title.is-wide { max-width: none; }

/* ---------- Hiasan seksi (di belakang konten; posisi & kekuatan diatur di sini, bukan inline) ---------- */
.lm-star .deco-hole { --x: -14%; --y: -62%; --s: min(120vw, 76rem); --r: -10deg; --o: 0.1; --d: 1; }
.lm-star .deco-plus { --x: 46%; --y: 78%; --s: 1.6rem; --d: 2; }
.lm-star .deco-dots { --x: 40%; --y: 12%; --w: 6rem; --h: 3.5rem; --d: 3; }
.lm-star .deco-ring { --x: 3%; --y: 8%; --s: 2.2rem; --d: 4; }
@media (max-width: 899px) {
  .lm-star .deco-hole { --x: -40%; --y: -10%; --s: 160vw; --o: 0.1; }
}

/* >>> mobile-nav.css */
/* ==========================================================================
   MOBILE (<900px) — NAVIGASI: dock bawah, progress bar, menu layar penuh
   Desktop tidak tersentuh. Elemen .m-* dibuat oleh assets/js/mobile.js.
   Dimuat setelah semua file komponen; mobile.css (layout & kartu) dimuat setelah file ini.
   ========================================================================== */
.m-dock, .m-progress { display: none; }

@media (max-width: 899px) {
  :root { --dock-h: 3.75rem; }
  /* Ruang untuk dock ada DI DALAM footer (warna gelap menyatu), bukan padding body
     yang menampilkan area kosong berwarna kertas di bawah footer. */
  .sw-footer { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 1.5rem); }

  /* ---------- Progress bar ---------- */
  .m-progress { display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--violet); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

  /* ---------- Dock bawah: bilah rata tepi (bukan pill melayang) ----------
     Swiss: tanpa radius & bayangan; pemisah cukup garis tipis. Penanda aktif dan CTA
     memakai trapesium siku (satu sisi miring) supaya bentuknya tetap asimetris. */
  .m-dock {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; z-index: 45; inset: auto 0 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink); box-shadow: 0 -1px 0 rgba(255, 250, 246, 0.16);
    transition: transform 0.45s var(--ease);
  }
  .m-dock.is-hidden { transform: translateY(calc(100% + 2px)); }
  .m-dock a {
    position: relative; height: var(--dock-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    color: rgba(255, 250, 246, 0.68);
    font: 700 0.7rem/1 var(--font); letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease);
  }
  .m-dock a:active { color: var(--paper); }
  .m-dock svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
  .m-dock a[aria-current="page"] { color: var(--paper); }
  .m-dock a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 0.28rem; background: var(--violet); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
  .m-dock a.m-cta { background: var(--violet); color: var(--ink); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .m-dock a.m-cta[aria-current="page"]::before { background: var(--ink); }

  /* ---------- Menu layar penuh ---------- */
  .sw-header .sw-mobile { background: var(--ink); color: var(--paper); border: 0; min-height: calc(100dvh - var(--header-h)); }
  .sw-header .sw-mobile-inner { counter-reset: mm; padding-block: 0.75rem 2.5rem; }
  .sw-header .sw-mobile a:not(.sw-btn) {
    counter-increment: mm; justify-content: flex-start; color: var(--paper);
    font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule-on-ink);
  }
  .sw-header .sw-mobile a:not(.sw-btn)::before { content: counter(mm, decimal-leading-zero); font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--lilac); width: 2.4rem; flex: none; align-self: center; }
  .sw-header .sw-mobile a:not(.sw-btn)[aria-current]::after { margin-left: auto; }
  .sw-header .sw-mobile a.is-current, .sw-header .sw-mobile a[aria-current="page"]:not(.sw-btn) { color: var(--violet); }
  .sw-header .sw-mobile a.sw-btn { margin-top: 1.75rem; }
  .sw-header .sw-mobile .sw-mobile-sub { padding-left: 2.4rem; }
  .sw-header .sw-mobile .sw-mobile-sub a:not(.sw-btn) { counter-increment: none; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.6rem 0; color: rgba(255, 250, 246, 0.72); border-bottom: 1px solid var(--rule-on-ink); }
  .sw-header .sw-mobile .sw-mobile-sub a:not(.sw-btn)::before { content: none; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .m-dock { transition: none; }
}

/* >>> mobile.css */
/* ==========================================================================
   MOBILE (<900px) — LAYOUT: hero, kartu geser, kartu numpuk, galeri, panel, reveal
   Mengubah tampilan komponen desktop menjadi blok warna bersudut satu sisi (gaya Swiss). Desktop tidak tersentuh.
   ========================================================================== */
@media (max-width: 899px) {
  /* sticky butuh overflow: clip (hidden membuat sticky mati) */
  .sw-rel, .sw-band, .sw-quote { overflow: clip; }

  /* ---------- Hero ---------- */
  .sw-btn-row .sw-btn { flex: 1 1 auto; }

  /* label dengan penanda geometris */
  .sw-label-col .sw-label::before, .sw-page-hero .sw-label::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; background: var(--violet); margin-right: 0.55rem; border-radius: 100% 0 0 0; }

  /* ---------- Kartu geser: pilar & langkah ---------- */
  .sw-pillars, .sw-steps {
    display: flex; gap: 0.9rem; counter-reset: pc;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 1.25rem; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; min-width: 0;
  }
  .sw-pillars::-webkit-scrollbar, .sw-steps::-webkit-scrollbar { display: none; }
  .sw-pillar, .sw-step {
    flex: 0 0 76%; scroll-snap-align: start; position: relative; counter-increment: pc;
    min-height: 19rem; padding: 6rem 1.4rem 1.6rem; margin: 0 !important; border: 0; border-radius: 0 3.6rem 0 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem;
  }
  .sw-pillar::before { content: counter(pc, decimal-leading-zero); position: absolute; top: 1.1rem; left: 1.3rem; font-size: 4.6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
  .sw-step b { position: absolute; top: 1.1rem; left: 1.3rem; margin: 0; font-size: 4.6rem; letter-spacing: -0.06em; color: inherit; }
  .sw-pillar p, .sw-step p { color: inherit; opacity: 0.86; max-width: none; }
  .sw-pillar h3, .sw-step h3 { font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.05; }
  .sw-pillar:nth-child(4n+1), .sw-step:nth-child(4n+1) { background: var(--ink); color: var(--paper); }
  .sw-pillar:nth-child(4n+1)::before, .sw-step:nth-child(4n+1) b { color: var(--violet); }
  .sw-pillar:nth-child(4n+2), .sw-step:nth-child(4n+2) { background: var(--violet); color: var(--ink); }
  .sw-pillar:nth-child(4n+3), .sw-step:nth-child(4n+3) { background: var(--lilac); color: var(--ink); }
  .sw-pillar:nth-child(4n), .sw-step:nth-child(4n) { background: var(--tint); color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
  .sw-on-ink .sw-step:nth-child(4n+1) { box-shadow: inset 0 3px 0 rgba(255, 250, 246, 0.4); }

  /* ---------- Kartu numpuk: daftar layanan ---------- */
  .sw-rows, .sw-list-rows { counter-reset: sc; border: 0; display: block; padding-bottom: 0.5rem; }
  .sw-row, .sw-line {
    position: sticky; top: calc(var(--header-h) + 0.35rem + var(--k, 0) * 2.35rem);
    display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem;
    min-height: 13.5rem; margin: 0 0 1rem; padding: 1.15rem 1.25rem 1.5rem;
    border: 0; border-radius: 0 3rem 0 0; counter-increment: sc;
    background-image: none; transform: none;
    box-shadow: 0 -10px 24px rgba(9, 11, 18, 0.12);
  }
  .sw-row, .sw-line { --tag-bg: var(--ink); --tag-fg: var(--paper); }
  .sw-row::before, .sw-line::before {
    content: counter(sc, decimal-leading-zero); align-self: flex-start; margin-bottom: 0.35rem;
    font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.04em;
    padding: 0.4rem 1.15rem 0.4rem 0.7rem; background: var(--tag-bg); color: var(--tag-fg);
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
  }
  .sw-row:hover, .sw-row:focus-visible { padding-inline: 1.25rem; background-size: auto; }
  .sw-row h3, .sw-line h3, .sw-row:hover h3 { font-size: 1.7rem; letter-spacing: -0.035em; line-height: 1.05; transform: none; }
  .sw-row p, .sw-line p, .sw-row:hover p { color: inherit; opacity: 0.86; max-width: none; }
  .sw-line .sw-aside { margin-top: auto; padding: 0.7rem 0 0; border-left: 0; border-top: 1px dashed currentColor; opacity: 1; color: inherit; }
  .sw-line .sw-aside span { color: inherit; opacity: 0.8; }
  .sw-row-arrow { opacity: 1; transform: none; margin-top: auto; align-self: flex-end; width: 3.5rem; height: 2.5rem; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%); }
  .sw-row-arrow svg { stroke: var(--paper); }
  .sw-row:nth-child(4n+2) .sw-row-arrow svg, .sw-row:nth-child(4n+3) .sw-row-arrow svg { stroke: var(--violet); }
  .sw-row:nth-child(4n+1), .sw-line:nth-child(4n+1) { background-color: var(--ink); color: var(--paper); --tag-bg: var(--violet); --tag-fg: var(--ink); }
  .sw-row:nth-child(4n+2), .sw-line:nth-child(4n+2) { background-color: var(--violet); color: var(--ink); }
  .sw-pillar:nth-child(4n+2) p, .sw-step:nth-child(4n+2) p, .sw-row:nth-child(4n+2) p, .sw-line:nth-child(4n+2) p,
  .sw-line:nth-child(4n+2) .sw-aside span { opacity: 1; } /* teks di atas oranye: kontras penuh */
  .sw-row:nth-child(4n+3), .sw-line:nth-child(4n+3) { background-color: var(--lilac); color: var(--ink); }
  .sw-row:nth-child(4n), .sw-line:nth-child(4n) { background-color: var(--tint); color: var(--ink); box-shadow: inset 0 3px 0 var(--ink), 0 -10px 24px rgba(9, 11, 18, 0.12); }
  .sw-row:nth-child(4n+1) .sw-row-arrow svg { stroke: var(--ink); }
  .sw-row:nth-child(4n+1) .sw-row-arrow { background: var(--violet); }
  .sw-row:nth-child(2),.sw-line:nth-child(2){--k:1}
  .sw-row:nth-child(3),.sw-line:nth-child(3){--k:2}
  .sw-row:nth-child(4),.sw-line:nth-child(4){--k:3}
  .sw-row:nth-child(5),.sw-line:nth-child(5){--k:4}
  .sw-row:nth-child(6),.sw-line:nth-child(6){--k:5}
  .sw-row:nth-child(7),.sw-line:nth-child(7){--k:6}
  .sw-row:nth-child(8),.sw-line:nth-child(8){--k:7}
  .sw-row:nth-child(9),.sw-line:nth-child(9){--k:8}
  .sw-row:nth-child(10),.sw-line:nth-child(10){--k:9}
  .sw-row:nth-child(11),.sw-line:nth-child(11){--k:10}
  .sw-row:nth-child(12),.sw-line:nth-child(12){--k:11}

  /* ---------- Galeri ---------- */
  .sw-chips { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--header-h); z-index: 5; margin: 0 calc(var(--gutter) * -1) 1.25rem; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .sw-chips::-webkit-scrollbar { display: none; }
  .sw-chip { flex: none; height: 3rem; padding: 0 1.1rem; border: 0; border-radius: 0; background: transparent; }
  .sw-chip:hover { background: transparent; }
  .sw-chip.is-active { padding-right: 1.6rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%); }
  .sw-tiles { grid-template-columns: 1fr 1fr; gap: 1.25rem 0.8rem; }
  .sw-tiles .sw-tile:first-of-type { grid-column: 1 / -1; }
  .sw-tile-art { aspect-ratio: 1; border-radius: 0 2.2rem 0 0; }
  .sw-tiles .sw-tile:first-of-type .sw-tile-art { aspect-ratio: 4 / 3; border-radius: 0 3.5rem 0 0; }
  .sw-tile h4 { font-size: 1rem; margin-top: 0.7rem; }
  .sw-tile p { font-size: 0.85rem; }

  .sw-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .sw-footer-grid > div:first-child, .sw-footer-grid > div:last-child { grid-column: 1 / -1; }
  .sw-footer li a { font-size: 0.9rem; }

  /* ---------- Reveal & feedback sentuh ---------- */
  .m-js .m-reveal { opacity: 0; transform: translateY(1.75rem) scale(0.97); }
  .m-js .m-reveal.m-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--md, 0) * 70ms); }
  .sw-btn:active, .sw-chip:active, .sw-pillar:active, .sw-tile:active { transform: scale(0.97); }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .m-js .m-reveal { opacity: 1; transform: none; }
}

/* >>> theme.css */
/* ==========================================================================
   [semua halaman] TEMA WARNA — 2 pilihan: light (bawaan) · dark-orange
   Cara kerja: di tema gelap, --paper (permukaan) dan --ink (teks) ditukar di :root, jadi seksi terang otomatis jadi gelap.
   Seksi yang memang sudah gelap / berlatar oranye (daftar di bawah) dikembalikan ke pasangan --deep (gelap) + --cream (terang).
   Ganti isi warna tema di blok :root[data-theme="dark-orange"] di bawah. Tombol dibuat oleh assets/js/theme.js.
   ========================================================================== */

/* ---------- Tombol pilih tema (di header) ---------- */
.th-switch { display: flex; align-items: center; gap: 0.45rem; }
.th-dot { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; background: var(--g); }
.th-dot[data-theme-set="light"] { --g: linear-gradient(135deg, #FFFAF6 50%, #DD5326 50%); }
.th-dot[data-theme-set="dark-orange"] { --g: linear-gradient(135deg, #0F0F13 50%, #DD5326 50%); }
.th-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.th-dot:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }
@media (max-width: 899px) { .th-switch { gap: 0.4rem; } .th-dot { width: 1.45rem; height: 1.45rem; } }

/* ---------- Palet tema gelap ---------- */

:root[data-theme="dark-orange"] {
  /* dasar gelap #0F0F13, aksen oranye logo PT (#DD5326) */
  color-scheme: dark;
  --paper: #0F0F13; --ink: #EFE9DF; --tint: #18171D; --muted: #A8A296;
  --rule: rgba(239, 233, 223, 0.16); --rule-on-ink: rgba(239, 233, 223, 0.18);
  --violet: #DD5326; --violet-deep: #EE6A3E; --violet-dark: #B8401D; --lilac: #F2A184; --ghost: #2E1A12; --slate: #1C1B22; --cta: #AE3815;
  --deep: #060608; --cream: #EFE9DF;
}

/* ---------- Bagian yang tetap gelap / berlatar oranye: kembalikan pasangan warnanya ---------- */
:root[data-theme^="dark"] :is(
  .sw-on-ink, .sw-footer, .sw-band, .m-dock, .sw-header .sw-mobile,
  .dp-hero, .dp-tm-hero, .dp-tm-body, .dp-vg-hero, .dp-vg-body, .dp-hr-stop, .dp-cd-hero, .dp-mu-hero, .dp-fn-quote, .dp-fn-body, .bt-mc-quote,
  .dp-tm-bars li, .dp-stickers li, .dp-cd-beats li
) { --ink: var(--deep); --paper: var(--cream); }
@media (max-width: 899px) {
  :root[data-theme^="dark"] :is(.sw-pillar, .sw-step, .sw-row, .sw-line):is(:nth-child(4n+1), :nth-child(4n+2), :nth-child(4n+3)) { --ink: var(--deep); --paper: var(--cream); }
}

/* ---------- Penyesuaian lain ---------- */
:root[data-theme^="dark"] .sw-header { background: color-mix(in srgb, var(--paper) 94%, transparent); }
:root[data-theme^="dark"] .sw-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.8); }
:root[data-theme^="dark"] .dp-hr-stop { box-shadow: inset 0 0 0 1px var(--rule); }
:root[data-theme^="dark"] .sw ::selection { background: var(--violet); color: var(--deep); }
:root[data-theme^="dark"] :is(.dp-mu-hero, .sw-band) { color: var(--ink); }
:root[data-theme^="dark"] :is(.bt-video .dv-vid.is-wide .dv-vid-frame, .lm-hero) { background-image: linear-gradient(135deg, var(--deep) 0%, var(--slate) 55%, var(--violet) 130%); }