/* Hallmark · shape: Spec sheet · genre: modern-minimal · theme: brand · redesign: full
 * paper: light · accent: chromatic-orange · display: display-condensed · body: grotesk-sans · hero: Measured band · nav: edge-aligned · footer: mast · signature: the GSM ladder, every catalogue range drawn from 80 to 450 GSM
 * axes: light/display-condensed/chromatic-orange · posture: measured · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P_ H_ E_ S_ R_ V_ · weakest: the fold, seven ladder rows could push the action under 800px · ladder capped to seven rows, 26px each, title clamp cut to 4.4rem so head, sentence and both actions clear 1280x800 */
/* ---------- shared ---------- */
.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

.act {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-card);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.act:hover { background: var(--color-accent-deep); }
.act:active { transform: translateY(1px); }
.act:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.act[aria-disabled="true"], .act:disabled { background: var(--color-paper-2); border-color: var(--color-rule-strong); color: var(--color-muted); cursor: not-allowed; }

.act--quiet {
  background: transparent;
  border-color: var(--color-rule-strong);
  color: var(--color-ink-2);
}
.act--quiet:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
.act--quiet:focus-visible { outline-color: var(--color-focus); }

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* ---------- top strip ---------- */
.strip {
  background: var(--color-deep);
  color: var(--color-on-deep-muted);
  font-size: var(--text-xs);
  line-height: 1;
}
.strip__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 36px;
  flex-wrap: wrap;
}
.strip a {
  color: var(--color-on-deep);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.strip a:hover { color: var(--color-accent); }
.strip a:focus-visible { outline: 2px solid var(--color-focus-deep); outline-offset: 3px; }
.strip__note { display: flex; align-items: center; gap: var(--space-2xs); }

/* ---------- masthead ---------- */
.masthead {
  background: var(--color-paper-3);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
}
.masthead__in {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 72px;
}

.mark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  margin-inline-end: auto;
  min-width: 0;
}
.mark img {
  width: 44px;
  height: 34px;
  object-fit: contain;
  flex: none;
}
.mark__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}
.mark__text strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.mark__text span {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
.mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink-2);
}

.navlist {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.navlist__item { position: relative; }
.navlist__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0 var(--space-2xs);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.navlist__link:hover { color: var(--color-focus); }
.navlist__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.navlist__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-start: calc(var(--space-md) * -1);
  min-width: 248px;
  padding: var(--space-xs);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -24px var(--color-deep);
  display: none;
  flex-direction: column;
  z-index: var(--z-dropdown);
}
.navlist__item:hover .navlist__panel,
.navlist__item:focus-within .navlist__panel { display: flex; }
.navlist__panel a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-card);
  white-space: nowrap;
}
.navlist__panel a:hover { background: var(--color-paper-2); color: var(--color-focus); }
.navlist__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.navlist__panel .navlist__all {
  border-top: var(--rule-hair) solid var(--color-rule);
  margin-top: var(--space-2xs);
  font-weight: 600;
}

.langpair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
}
.langpair a {
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
}
.langpair a[aria-current="true"] {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: var(--color-on-deep);
}
.langpair a:not([aria-current="true"]):hover { border-color: var(--color-focus); color: var(--color-focus); }
.langpair a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.socs { display: flex; align-items: center; gap: var(--space-2xs); }
.socs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-card);
  color: var(--color-muted);
}
.socs a:hover { color: var(--color-focus); background: var(--color-paper-2); }
.socs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- opening ---------- */
.opening {
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl);
  min-height: min(86svh, 820px);
  display: grid;
  align-content: center;
}
.opening__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}
.opening__title {
  font-size: clamp(2.5rem, 3.6vw + 1rem, 4.4rem);
  line-height: 0.98;
  max-width: 22ch;
  margin: 0;
  color: var(--color-deep);
}
.opening__line {
  margin-block: var(--space-lg) 0;
  max-width: 44ch;
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--color-ink);
}
.opening__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-xl) 0;
}
.opening__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block: var(--space-lg) 0;
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.opening__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

/* the ladder - signature: a spec table, the bar drawn from each catalogue range */
.ladder {
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-3);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.ladder__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ladder__table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ladder__table thead th {
  padding: 0 0 var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
  text-align: left;
}
.ladder__table thead th:last-child { text-align: right; }
.ladder__table tbody th {
  padding: var(--space-lg) var(--space-sm) var(--space-lg) 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  text-align: left;
  width: 44%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ladder__cell {
  padding: var(--space-lg) var(--space-sm);
  vertical-align: middle;
}
.ladder__track {
  position: relative;
  display: block;
  height: 24px;
  background: var(--color-paper-2);
  border-radius: 1px;
}
.ladder__bar {
  position: absolute;
  inset-block: 0;
  border-radius: 1px;
}
.ladder__table tbody td:last-child {
  padding: var(--space-lg) 0;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 76px;
}
.ladder__table tr[data-colour="biru-muda"] .ladder__bar { background: var(--prod-biru-muda); }
.ladder__table tr[data-colour="hijau"] .ladder__bar { background: var(--prod-hijau); }
.ladder__table tr[data-colour="kuning"] .ladder__bar { background: var(--prod-kuning); }
.ladder__table tr[data-colour="biru"] .ladder__bar { background: var(--prod-biru); }
.ladder__table tr[data-colour="oranye"] .ladder__bar { background: var(--prod-oranye); }
.ladder__table tr[data-colour="navy"] .ladder__bar { background: var(--prod-navy); }
.ladder__table tr[data-colour="pvc"] .ladder__bar {
  background: var(--prod-pvc);
  border: var(--rule-hair) solid var(--color-rule-strong);
}
.ladder__scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- colophon ---------- */
.colophon {
  background: var(--color-deep);
  color: var(--color-on-deep-muted);
  padding-block: var(--space-2xl) var(--space-lg);
  font-size: var(--text-sm);
}
.colophon a { color: var(--color-on-deep); text-decoration: none; }
.colophon a:hover { color: var(--color-accent); }
.colophon :focus-visible { outline: 2px solid var(--color-focus-deep); outline-offset: 3px; }
.colophon__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-xl) var(--space-2xl);
}
.colophon__brand img { width: 56px; height: 43px; object-fit: contain; }
.colophon__brand p {
  margin-block: var(--space-md) 0;
  max-width: 52ch;
  color: var(--color-on-deep-muted);
  line-height: 1.6;
}
.colophon h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-on-deep);
  margin: 0 0 var(--space-sm);
  max-width: none;
}
.colophon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.colophon__contact li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  color: var(--color-on-deep-muted);
}
.colophon__contact .ico { color: var(--color-accent); margin-block-start: 2px; }
.colophon .socs { margin-block-start: var(--space-md); }
.colophon .socs a { color: var(--color-on-deep-muted); }
.colophon .socs a:hover { color: var(--color-accent); background: var(--color-deep-2); }
.colophon__pay {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-deep);
}
.colophon__pay img { max-width: 640px; width: 100%; height: auto; }
.colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-deep);
  font-size: var(--text-xs);
  color: var(--color-on-deep-muted);
}

/* ---------- wa float ---------- */
.wa {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 14px 30px -12px var(--color-deep);
  transition: transform var(--dur-micro) var(--ease-out);
}
.wa:hover { transform: scale(1.06); }
.wa .ico { width: 26px; height: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 68rem) {
  .opening__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .opening__title { max-width: 20ch; }
  .colophon__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 60rem) {
  .masthead__in { min-height: 64px; }
  .nav-burger { display: flex; }
  .navlist {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm);
    background: var(--color-paper-3);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    box-shadow: 0 24px 40px -30px var(--color-deep);
    z-index: var(--z-dropdown);
  }
  .nav-toggle:checked ~ .navlist { display: flex; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .navlist__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .navlist__panel {
    display: flex;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-xs);
  }
  .navlist__panel a { white-space: normal; }
  .masthead__in { position: relative; }
  .masthead .act { min-height: 44px; padding: 0 var(--space-md); }
}

@media (max-width: 40rem) {
  .opening { padding-block: var(--space-xl) var(--space-lg); }
  .opening__acts .act { flex: 1 1 100%; justify-content: center; }
  .colophon__cols { grid-template-columns: minmax(0, 1fr); }
  .wa { inset-block-end: var(--space-md); inset-inline-end: var(--space-md); }
}