/* ==========================================================================
   Lelaki Budiman Negara — Landing Page
   Design language: see ../design-language.md
   ========================================================================== */

:root {
  /* Brand — LPPKN */
  --ungu-900: #1F0F38;
  --ungu-800: #2E1A4F;
  --ungu-700: #452470;
  --ungu-600: #5C2E91;   /* LPPKN primary purple */
  --ungu-500: #7442B0;
  --ungu-400: #9B6FD0;
  --ungu-200: #D9CCEB;
  --ungu-100: #EEE8F6;
  --ungu-50:  #F7F4FB;

  --hijau-700: #2F7A2B;
  --hijau-600: #3E9E3A;
  --hijau-500: #4DB848;  /* LPPKN green */
  --hijau-400: #7CCB78;
  --hijau-100: #E4F4E2;
  --hijau-50:  #F1FAF0;

  --emas-500: #E9B949;   /* accent: highlight, ribbon */
  --emas-100: #FBF1D3;

  /* Neutrals */
  --ink-900: #14101B;
  --ink-700: #3A3344;
  --ink-500: #6B6377;
  --ink-300: #B4ADBE;
  --line: #E7E2EF;
  --paper: #FBFAFD;
  --paper-2: #F4F1F9;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(31, 15, 56, .05), 0 8px 24px rgba(31, 15, 56, .05);
  --shadow-md: 0 2px 4px rgba(31, 15, 56, .06), 0 18px 48px rgba(31, 15, 56, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink-900); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--ungu-200); color: var(--ungu-900); }

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: clamp(72px, 10vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.section--dark { background: var(--ungu-900); color: rgba(255, 255, 255, .78); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--tint { background: var(--paper-2); }

/* Typography helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ungu-600);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--hijau-500); border-radius: 2px; }
.section--dark .eyebrow { color: var(--hijau-400); }
.display { font-family: var(--font-display); font-weight: 500; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }
.h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-500); line-height: 1.65; max-width: 62ch; }
.section--dark .lead { color: rgba(255, 255, 255, .7); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); display: grid; gap: 18px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.em { font-style: italic; color: var(--ungu-600); }
.section--dark .em { color: var(--hijau-400); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: var(--ungu-600); color: var(--white); box-shadow: 0 10px 30px rgba(92, 46, 145, .28); }
.btn--primary:hover { background: var(--ungu-700); box-shadow: 0 14px 36px rgba(92, 46, 145, .36); }
.btn--ghost { background: transparent; color: var(--ungu-700); border-color: var(--ungu-200); }
.btn--ghost:hover { background: var(--ungu-50); border-color: var(--ungu-400); }
.btn--light { background: var(--white); color: var(--ungu-700); }
.btn--light:hover { background: var(--ungu-50); }
.btn--green { background: var(--hijau-500); color: var(--white); box-shadow: 0 10px 30px rgba(77, 184, 72, .3); }
.btn--green:hover { background: var(--hijau-600); }

/* ---------------------------------------------------------------- Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent; border: 0; box-shadow: none;
  transition: background .3s;
}
.nav.is-scrolled { background: linear-gradient(rgba(251,250,253,.92), rgba(251,250,253,.7)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* A single row of plain links with the language switch at the far right.
   No pill, no shadow, no logo — the page identity is carried by the hero. */
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative;
  min-height: 68px;
}
/* The bar is deliberately wordmark-free on desktop — the LPPKN mark opens the
   hero. On mobile the hero lockup is pushed well down the page, so the mark
   moves up into the bar and shares the row with the hamburger instead. */
.nav__brand { display: none; }
.nav__brand img { height: 26px; display: block; }
.nav__links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: 6px 0;
  font-size: 15px; font-weight: 600; color: var(--ink-900);
  position: relative; transition: color .2s;
}
.nav__links a:hover { color: var(--ungu-600); }
/* The active page is named by colour and a short rule beneath it, so the
   current location survives at a glance without a filled chip. */
.nav__links a.is-active { color: var(--ungu-600); }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--ungu-600);
}
.nav__cta { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; align-items: center; gap: 9px; }
.lang button {
  border: 0; background: none; padding: 2px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--ink-300); cursor: pointer; transition: color .2s;
}
.lang button:hover { color: var(--ink-700); }
.lang button.is-active { color: var(--ungu-600); }
.lang__bar { width: 2px; height: 15px; background: var(--ungu-600); border-radius: 2px; }
.lang--dark button { color: rgba(255,255,255,.5); }
.lang--dark button.is-active { color: var(--white); }
.lang--dark .lang__bar { background: var(--white); }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink-900); align-items: center; justify-content: center; cursor: pointer; }
.nav__burger svg { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; margin-left: auto; z-index: 60; position: relative; }
  .nav__inner { justify-content: space-between; }
  .nav__cta { width: 100%; display: flex; justify-content: space-between; }
  /* The bar's language toggle is redundant once the row collapses: the drawer
     carries its own. Scoped with > so it only hides the one in the header —
     .nav__mobile .lang must keep working, since it becomes the only way to
     switch language on a phone. */
  .nav__cta > .lang { display: none; }
  .nav__brand { display: block; }
  /* width:100% would shove the brand out of the row; the burger is pushed
     right by margin instead. */
  .nav__cta { width: auto; margin-left: auto; }
}
.nav__mobile { z-index: 55; }
.nav__mobile a { color: var(--white); }
body.menu-open .nav__burger { background: var(--ungu-700); color: var(--white); border-color: transparent; }
.nav__mobile {
  position: fixed; inset: 0; z-index: 49; background: var(--ungu-900); color: var(--white);
  display: grid; place-content: center; gap: 8px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.nav__mobile.is-open { opacity: 1; pointer-events: auto; }
.nav__mobile a { font-family: var(--font-display); font-size: 34px; padding: 10px; }
.nav__mobile a.btn { font-family: var(--font-body); font-size: 15px; margin-top: 20px; justify-content: center; }
/* The drawer's language switch is unlabelled otherwise: two initialisms on
   their own read as a toggle only once you already know what they do. The
   caption names the action, and the group is tied to it with aria-labelledby
   so the label is announced rather than duplicated. */
.nav__lang { display: grid; justify-items: center; gap: 12px; margin-top: 28px; }
.nav__lang-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-top: 130px; padding-bottom: 60px; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(92, 46, 145, .10), transparent 60%),
    radial-gradient(900px 500px at 100% 20%, rgba(77, 184, 72, .12), transparent 60%),
    var(--paper);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__org { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-500); margin-bottom: 26px; }
.hero__org img { height: 30px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(46px, 7.2vw, 96px); line-height: .98; letter-spacing: -0.03em;
  color: var(--ungu-900);
}
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; }
.hero h1 .word > span { display: inline-block; transform: translateY(110%); animation: rise 1s var(--ease-out) forwards; }
.hero h1 .word:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .word:nth-child(3) > span { animation-delay: .2s; }
.hero h1 .script { font-style: italic; font-weight: 400; color: var(--ungu-600); }
@keyframes rise { to { transform: translateY(0); } }
.hero__tag { font-size: clamp(20px, 2.3vw, 27px); font-weight: 500; color: var(--ink-900); margin-top: 26px; line-height: 1.35; max-width: 22ch; }
.hero__tag strong { color: var(--hijau-700); font-weight: 700; }
.hero__lead { margin-top: 18px; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-500); }
.hero__meta b { display: block; color: var(--ink-900); font-size: 15px; }
.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .9s var(--ease-out) forwards; }
.fade-up.d1 { animation-delay: .25s; } .fade-up.d2 { animation-delay: .4s; } .fade-up.d3 { animation-delay: .55s; } .fade-up.d4 { animation-delay: .7s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Hero visual */
.hero__visual { position: relative; aspect-ratio: 1 / 1.05; max-width: 520px; margin-inline: auto; width: 100%; }
.orb {
  position: absolute; inset: 8% 8% 8% 8%; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--ungu-600), var(--ungu-400), var(--hijau-400), var(--hijau-500), var(--ungu-600));
  filter: blur(0px); opacity: .95;
  animation: spin 24s linear infinite;
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.orb--2 { inset: 18% 18% 18% 18%; animation-direction: reverse; animation-duration: 32s; opacity: .55; mask: radial-gradient(circle, transparent 66%, #000 68%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); }
@keyframes spin { to { transform: rotate(360deg); } }
/* The hero carries a photograph of the people the study is about, rather
   than the brand roundel. The roundel is a dashboard asset; on a public page
   it says nothing a visitor needs and pushed the real subject off-screen. */
.hero__photo {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-md); background: transparent;
  opacity: 0; animation: fadeUp 1.1s var(--ease-out) .35s forwards;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A soft purple wash ties the photograph to the palette and keeps the white
   chips legible wherever they land on it. */
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(92,46,145,.20), transparent 45%, rgba(31,15,56,.28));
}
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-md); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; color: var(--ink-700); white-space: nowrap;
  opacity: 0; animation: fadeUp 1s var(--ease-out) forwards;
}
.chip i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ungu-100); color: var(--ungu-600); }
.chip i svg { width: 15px; height: 15px; }
.chip b { display: block; font-size: 15px; color: var(--ink-900); line-height: 1; }
.chip--1 { top: 6%; left: -4%; animation-delay: .9s; }
.chip--2 { top: 38%; right: -8%; animation-delay: 1.1s; }
.chip--3 { bottom: 10%; left: 2%; animation-delay: 1.3s; }
.chip--2 i { background: var(--hijau-100); color: var(--hijau-700); }
.chip--3 i { background: var(--emas-100); color: #9A6E0E; }
.float { animation: float 6s ease-in-out infinite; }
.float.f2 { animation-duration: 7.5s; animation-delay: -2s; }
.float.f3 { animation-duration: 8.5s; animation-delay: -4s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 960px) { .chip--1 { left: 0; } .chip--2 { right: 0; } .hero__visual { max-width: 420px; } }
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-300);
}
.hero__scroll span { width: 1px; height: 46px; background: linear-gradient(var(--ungu-400), transparent); animation: drop 2s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Ribbon / marquee */
.ribbon { background: var(--ungu-900); color: var(--white); overflow: hidden; padding: 14px 0; border-block: 3px solid var(--hijau-500); }
.ribbon__track { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; }
.ribbon__track span { display: inline-flex; align-items: center; gap: 48px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.ribbon__track span::after { content: "✦"; color: var(--hijau-400); font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- Stats strip */
/* The stat cards read as one set, so the row keeps every card on one line
   and never rewraps. Below the width where they all still fit, the row
   becomes a snap carousel instead. The scrollbar is hidden because the
   partially visible next card already shows there is more to swipe. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) {
  .stats {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    /* room for the cards' shadow, pulled back so spacing is unchanged */
    padding: 6px 0 12px; margin: -6px 0 -12px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat { flex: 0 0 clamp(240px, 58vw, 320px); scroll-snap-align: start; }
}
.stat {
  padding: 28px 28px 26px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--ungu-600), var(--hijau-500)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat:hover::after { transform: scaleX(1); }
.stat__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4.5vw, 56px); line-height: 1; color: var(--ungu-700); letter-spacing: -0.03em; }
.stat__n small { font-size: .5em; color: var(--hijau-600); margin-left: 2px; }
.stat__l { margin-top: 10px; font-weight: 600; color: var(--ink-900); }
.stat__s { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.stat__n + .stat__s { margin-top: 10px; }

/* ---------------------------------------------------------------- About */
.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .about { grid-template-columns: 1fr; } }
.about__body { display: grid; gap: 22px; }
.about__body p { font-size: 17px; color: var(--ink-700); }
/* Pull-quote.
   A uniformly rounded box with a border-left reads as a framework default —
   the rule tapers into the corner radii and looks like a gradient it never
   was. This is drawn instead as a bracketed quotation: a solid purple corner
   opening it at the top left, a green one closing it at the bottom right, and
   a panel whose corners answer them — square where a bracket lands, opened
   right up on the diagonal. Flat colour, no shadow, no taper. */
.about__quote {
  position: relative;
  margin-top: 20px;
  padding: 30px 34px;
  background: var(--ungu-50);
  border-radius: 2px 26px 2px 26px;
  font-family: var(--font-display);
  font-size: 21px; line-height: 1.45; color: var(--ungu-900); font-weight: 400;
}
.about__quote::before,
.about__quote::after {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
}
.about__quote::before {
  left: -9px; top: -9px;
  border-left: 4px solid var(--ungu-600);
  border-top: 4px solid var(--ungu-600);
  border-top-left-radius: 2px;
}
.about__quote::after {
  right: -9px; bottom: -9px;
  border-right: 4px solid var(--hijau-500);
  border-bottom: 4px solid var(--hijau-500);
  border-bottom-right-radius: 2px;
}

.mandate { display: grid; gap: 14px; }
.mandate__card {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  padding: 22px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease-out), border-color .3s;
}
.mandate__card:hover { transform: translateX(6px); border-color: var(--ungu-200); }
.mandate__card i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ungu-100); color: var(--ungu-600); }
.mandate__card i svg { width: 24px; height: 24px; }
.mandate__card h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.mandate__card p { font-size: 14px; color: var(--ink-500); }
.mandate__card .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hijau-700); background: var(--hijau-100); padding: 4px 9px; border-radius: 999px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- Realiti (dark) */
.section--dark { overflow: hidden; }
.section--dark::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(600px 400px at 20% 30%, rgba(116, 66, 176, .45), transparent 60%),
              radial-gradient(500px 400px at 80% 10%, rgba(77, 184, 72, .25), transparent 60%);
  pointer-events: none;
}
.realiti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 960px) { .realiti { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .realiti { grid-template-columns: 1fr; } }
.realiti__item {
  padding: 34px 30px; background: rgba(255, 255, 255, .04);
  transition: background .35s;
  position: relative;
}
.realiti__item:hover { background: rgba(255, 255, 255, .08); }
.realiti__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--white); letter-spacing: -0.03em; }
.realiti__n .x { color: var(--hijau-400); }
.realiti__l { margin-top: 14px; font-weight: 700; color: var(--white); font-size: 16px; }
.realiti__s { margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.realiti__src { margin-top: 22px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 48px; }
@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar { padding: 18px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); display: flex; gap: 12px; align-items: flex-start; }
.pillar span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ungu-500); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--white); }

/* ---------------------------------------------------------------- KASIH */
/* Five cards over a grid whose column count drops with the viewport, so the
   last row is never full. The tracks are therefore laid out at twice the
   column count and each card spans two of them: that leaves a half-column to
   offset the trailing row by, which is what centres it instead of leaving it
   stranded against the left edge. */
.kasih { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }
.kasih__card { grid-column: span 2; }
/* 3 columns -> rows of 3 + 2; the pair starts half a column in. */
@media (max-width: 1100px) {
  .kasih { grid-template-columns: repeat(6, 1fr); }
  .kasih__card:nth-child(4) { grid-column: 2 / span 2; }
}
/* 2 columns -> rows of 2 + 2 + 1; the single card sits in the middle. */
@media (max-width: 720px) {
  .kasih { grid-template-columns: repeat(4, 1fr); }
  .kasih__card:nth-child(4) { grid-column: auto / span 2; }
  .kasih__card:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 480px) {
  .kasih { grid-template-columns: repeat(2, 1fr); }
  .kasih__card,
  .kasih__card:nth-child(4),
  .kasih__card:nth-child(5) { grid-column: auto / span 2; }
}
.kasih__card {
  position: relative; padding: 30px 24px 26px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.kasih__card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: linear-gradient(160deg, var(--ungu-600), var(--ungu-800));
}
.kasih__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.kasih__card:hover::before { opacity: 1; }
.kasih__card > * { position: relative; }
.kasih__letter {
  font-family: var(--font-display); font-weight: 500; font-size: 96px; line-height: .8; letter-spacing: -0.04em;
  color: var(--ungu-100); position: absolute; top: 18px; right: 18px;
  transition: color .5s, transform .6s var(--ease-out);
}
.kasih__card:hover .kasih__letter { color: rgba(255, 255, 255, .14); transform: translate(6px, -6px) scale(1.1); }
.kasih__card i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--hijau-100); color: var(--hijau-700); transition: background .4s, color .4s; }
.kasih__card i svg { width: 22px; height: 22px; }
.kasih__card:hover i { background: rgba(255, 255, 255, .15); color: var(--white); }
.kasih__card h3 { font-size: 20px; font-weight: 700; transition: color .4s; }
.kasih__card p { font-size: 14px; color: var(--ink-500); transition: color .4s; line-height: 1.55; }
.kasih__card:hover h3 { color: var(--white); }
.kasih__card:hover p { color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------------- Skop */
.skop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .skop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .skop { grid-template-columns: 1fr; } }
.skop__card {
  padding: 26px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
  display: grid; gap: 14px; align-content: start;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
  position: relative;
}
.skop__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--ungu-200); }
.skop__card i { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--ungu-100); color: var(--ungu-600); }
.skop__card i svg { width: 24px; height: 24px; }
.skop__card .num { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink-300); }
.skop__card h3 { font-size: 17px; font-weight: 700; }
.skop__card p { font-size: 14px; color: var(--ink-500); line-height: 1.55; }

/* ---------------------------------------------------------------- Sasaran */
.sasaran { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .sasaran { grid-template-columns: 1fr; } }
.sasaran__card {
  position: relative; padding: 34px 30px; border-radius: var(--radius); overflow: hidden;
  color: var(--white); min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  background: linear-gradient(160deg, var(--ungu-700), var(--ungu-900));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.sasaran__card:nth-child(2) { background: linear-gradient(160deg, var(--hijau-600), #1E5C1D); }
.sasaran__card:nth-child(3) { background: linear-gradient(160deg, #3B2A5C, var(--ink-900)); }
.sasaran__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.sasaran__card::after {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; right: -120px; top: -160px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); transition: transform .8s var(--ease-out);
}
.sasaran__card:hover::after { transform: scale(1.3); }
.sasaran__card .age { font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; opacity: .8; }
.sasaran__card h3 { color: var(--white); font-size: 26px; font-family: var(--font-display); font-weight: 500; }
.sasaran__card p { font-size: 14.5px; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.sasaran__card .k { position: absolute; top: 24px; left: 30px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

/* ---------------------------------------------------------------- Zon / SLU */
.zon-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.zon-wrap .sticky { position: sticky; top: 110px; }
/* Pre-existing bug, surfaced while restyling this section: .zon-wrap
   collapses to one column below 960px, stacking .sticky directly above
   .zones — but nothing turned its position:sticky off, so it stayed
   pinned near the top of the viewport while the zone cards scrolled
   underneath and through it. Static below the same breakpoint the
   columns collapse at, since a sticky sidebar only means something
   when there is a second column for it to stay level with. */
@media (max-width: 960px) { .zon-wrap { grid-template-columns: 1fr; } .zon-wrap .sticky { position: static; top: auto; } }
/* Extra vertical gap: the corner brackets on .method__row protrude 5px above
   and below each row, so consecutive rows need enough clearance not to touch. */
.method { display: grid; gap: 22px; margin-top: 28px; }
/* Same bracketed treatment as the .about__quote pull-quote: a solid purple
   corner opens the row at the top left, a solid green one closes it at the
   bottom right, in place of the plain bordered rectangle every card on the
   page defaults to. Flat colour, no shadow. */
.method__row {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: 2px 16px 2px 16px; background: var(--white);
}
.method__row::before,
.method__row::after { content: ""; position: absolute; width: 20px; height: 20px; }
.method__row::before {
  left: -5px; top: -5px;
  border-left: 3px solid var(--ungu-600); border-top: 3px solid var(--ungu-600);
  border-top-left-radius: 2px;
}
.method__row::after {
  right: -5px; bottom: -5px;
  border-right: 3px solid var(--hijau-500); border-bottom: 3px solid var(--hijau-500);
  border-bottom-right-radius: 2px;
}
.method__row i { width: 44px; height: 44px; border-radius: 12px; background: var(--hijau-100); color: var(--hijau-700); display: grid; place-items: center; }
.method__row i svg { width: 20px; height: 20px; }
.method__row b { display: block; font-size: 15px; color: var(--ink-900); }
.method__row span { font-size: 13.5px; color: var(--ink-500); }
.zones { display: grid; gap: 12px; }
.zone {
  /* Third column is a fixed width, not auto: a pill sized to its own text
     produced a ragged left edge, since a short date and a long one occupy
     different widths. A fixed column makes every date start at the same x
     position regardless of how long the text is — the "table" look asked
     for, achieved by layout rather than by a chip. */
  display: grid; grid-template-columns: 64px 1fr 220px; gap: 18px; align-items: center;
  padding: 18px 22px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.zone:hover { transform: translateX(8px); box-shadow: var(--shadow-sm); border-color: var(--ungu-200); }
.zone__n { font-family: var(--font-display); font-size: 30px; color: var(--ungu-600); font-weight: 500; }
.zone__n small { font-size: 11px; font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); display: block; line-height: 1; margin-bottom: 4px; }
.zone h4 { font-size: 17px; font-weight: 700; }
.zone p { font-size: 13.5px; color: var(--ink-500); margin-top: 2px; }
.zone__when { text-align: right; font-size: 13px; font-weight: 700; color: var(--hijau-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .zone { grid-template-columns: 1fr; gap: 8px; } .zone__when { justify-self: start; text-align: left; } }

/* ------------------------------------------------- Schedule tabs (jadual) */
/* Three fieldwork streams share one zone list, so their dates stay comparable
   without three stacked tables. Panels ship visible and the script hides the
   inactive ones, so with JavaScript off every stream is still readable. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tab {
  flex: 1 1 auto; text-align: left; padding: 12px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white); cursor: pointer;
  font-family: inherit; color: var(--ink-500);
  transition: border-color .3s, color .3s, box-shadow .3s, background .3s;
}
.tab b { display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); transition: color .3s; }
.tab span { font-size: 12.5px; }
.tab:hover { border-color: var(--ungu-400); }
.tab.is-active { background: var(--ungu-600); border-color: var(--ungu-600); color: rgba(255, 255, 255, .78); box-shadow: 0 10px 26px rgba(92, 46, 145, .22); }
.tab.is-active b { color: var(--white); }
.tab:focus-visible { outline: 2px solid var(--ungu-600); outline-offset: 2px; }
/* What the slides already state about each stream — sample sizes, who is
   asked, where — shown on the stream itself rather than left in the deck. */
.panel-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.panel-facts li { font-size: 13px; line-height: 1.55; color: var(--ink-500); padding-left: 14px; position: relative; }
.panel-facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--hijau-500); }
.panel-facts b { color: var(--ink-900); font-weight: 700; }

.tabpanel__lead { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin-bottom: 16px; }
@media (max-width: 560px) { .tab { flex: 1 1 100%; } }

/* Detailed zone card (jadual.html): each zone can now cover several states
   with different proposed dates, so the single .zone__when badge is replaced
   by a per-state list. The outer .zone component, its number badge and hover
   behaviour are unchanged — only the third column (a fixed date) is dropped
   in favour of a two-column layout with the list occupying the second column. */
.zone--detailed { grid-template-columns: 64px 1fr; align-items: start; padding-top: 20px; padding-bottom: 20px; }
/* Each engagement card names the session type and who attends it, so a card
   read on its own still says what the date is for. */
.zone__tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ungu-600); background: var(--ungu-100); padding: 3px 9px; border-radius: 999px;
}
.zone__peserta { margin-top: 8px; font-size: 12.5px; color: var(--ink-500); }
.zon-section .zone__tag { color: var(--white); background: rgba(255, 255, 255, .16); }
.zon-section .zone__peserta { color: rgba(255, 255, 255, .62); }
@media (max-width: 560px) { .zone__tag { margin: 6px 0 0; display: block; width: max-content; } }

.zone__rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
/* Same fixed-column logic as .zone__when: a states name of varying length
   must not push the date around, so the date sits in its own fixed track. */
.zone__rows li { display: grid; grid-template-columns: 1fr 220px; align-items: baseline; gap: 16px; }
.zone__state { font-size: 13.5px; color: var(--ink-700); }
.zone__date { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--hijau-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .zone--detailed { grid-template-columns: 1fr; gap: 6px; }
  .zone__rows li { grid-template-columns: 1fr; gap: 2px; }
  .zone__date { text-align: left; }
}
.note { margin-top: 18px; font-size: 13px; color: var(--ink-500); display: flex; gap: 10px; align-items: flex-start; }
.note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--ungu-400); }

/* ---------------------------------------------------------------- Jadual / timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr; } }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--line);
}
.timeline__bar { position: absolute; left: 0; top: 34px; height: 2px; background: linear-gradient(90deg, var(--ungu-600), var(--hijau-500)); width: 0; transition: width 1.6s var(--ease-out); }
.timeline.is-visible .timeline__bar { width: 100%; }
@media (max-width: 900px) { .timeline::before, .timeline__bar { display: none; } }
.phase { position: relative; padding-top: 62px; }
.phase__dot {
  position: absolute; top: 24px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--white);
  border: 3px solid var(--ungu-600); box-shadow: 0 0 0 6px var(--paper);
}
.phase:nth-child(3) .phase__dot { border-color: var(--ungu-500); }
.phase:nth-child(4) .phase__dot { border-color: var(--hijau-500); }
.phase__card { padding: 26px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 100%; display: grid; gap: 12px; align-content: start; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.phase__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.phase__k { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ungu-600); }
.phase__card h3 { font-size: 21px; font-weight: 700; }
.phase__when { font-size: 13.5px; font-weight: 700; color: var(--hijau-700); }
.phase__card ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.phase__card li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.phase__card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--hijau-500); }
.milestones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; justify-content: center; }
.milestones span { font-size: 13px; font-weight: 700; color: var(--ungu-700); background: var(--ungu-100); border: 1px solid var(--ungu-200); border-radius: 999px; padding: 8px 14px; }

/* ---------------------------------------------------------------- Soalan */
.soalan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .soalan { grid-template-columns: 1fr; } }
.soalan__card {
  padding: 30px 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
  display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.soalan__card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-md); }
.soalan__q { font-family: var(--font-display); font-size: 62px; line-height: .8; color: var(--ungu-200); font-weight: 500; }
.soalan__card p { font-size: 19px; font-weight: 600; color: var(--ink-900); line-height: 1.4; }
.soalan__card small { font-size: 13px; color: var(--ink-500); }

/* ---------------------------------------------------------------- CTA */
.cta {
  position: relative; overflow: hidden; border-radius: 32px; padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 80px);
  background: linear-gradient(135deg, var(--ungu-700), var(--ungu-900) 60%, #1B3D1A);
  color: var(--white); text-align: center; display: grid; gap: 22px; justify-items: center;
}
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.cta::before { width: 420px; height: 420px; background: var(--ungu-500); left: -120px; top: -160px; animation: float 9s ease-in-out infinite; }
.cta::after { width: 380px; height: 380px; background: var(--hijau-500); right: -120px; bottom: -180px; animation: float 11s ease-in-out infinite reverse; }
.cta > * { position: relative; }
.cta .eyebrow { color: var(--hijau-400); }
.cta h2 { color: var(--white); font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.4vw, 52px); max-width: 18ch; line-height: 1.08; }
.cta p { color: rgba(255, 255, 255, .78); max-width: 58ch; font-size: 17px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* ---------------------------------------------------------------- Info / footer */
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .info { grid-template-columns: 1fr; } }
.info__card { padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.info__card i { width: 44px; height: 44px; border-radius: 14px; background: var(--ungu-100); color: var(--ungu-600); display: grid; place-items: center; margin-bottom: 6px; }
.info__card i svg { width: 20px; height: 20px; }
.info__card h3 { font-size: 17px; font-weight: 700; }
.info__card p, .info__card a { font-size: 14.5px; color: var(--ink-500); line-height: 1.6; }
.info__card a.link { color: var(--ungu-600); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.info__card a.link svg { width: 14px; height: 14px; }
.info__card .tel { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); letter-spacing: .01em; }

.footer { background: var(--ungu-900); color: rgba(255, 255, 255, .7); padding: 56px 0 28px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand img { height: 56px; }
.footer__brand p { margin-top: 18px; font-size: 14px; max-width: 44ch; line-height: 1.6; }
.footer__lppkn { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); }
.footer__lppkn img { height: 38px; }
.footer h4 { color: var(--white); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.footer ul a:hover { color: var(--white); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------------- i18n (BM / EN) */
t-ms, t-en { display: contents; }
html[lang="en"] t-ms { display: none; }
html:not([lang="en"]) t-en { display: none; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ungu-100); border: 1px solid var(--ungu-200); }
.lang button { border: 0; background: transparent; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ungu-600); transition: background .25s, color .25s; }
.lang button.is-active { background: var(--ungu-600); color: var(--white); }
.lang--dark { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); margin-top: 16px; justify-self: center; }
.lang--dark button { color: rgba(255, 255, 255, .8); }
.lang--dark button.is-active { background: var(--white); color: var(--ungu-700); }

/* ---------------------------------------------------------------- Sub-page hero */
.page-hero {
  position: relative; padding: 170px 0 70px; overflow: hidden;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(92, 46, 145, .12), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(77, 184, 72, .12), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-hero::after {
  content: ""; position: absolute; right: -8%; top: -30%; width: 520px; height: 520px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--ungu-600), var(--ungu-400), var(--hijau-400), var(--hijau-500), var(--ungu-600));
  mask: radial-gradient(circle, transparent 62%, #000 64%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  opacity: .55; animation: spin 30s linear infinite; pointer-events: none;
}
.page-hero .container { position: relative; display: grid; gap: 18px; max-width: 820px; margin-inline: auto; text-align: center; justify-items: center; }
.page-hero .eyebrow::before { display: none; }
.page-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ungu-900); }
.page-hero .lead { margin-inline: auto; }

/* Panel + numbered list (Latar Belakang) */
.panel { padding: 30px; border-radius: var(--radius); background: var(--ungu-900); color: var(--white); display: grid; gap: 18px; }
.panel .eyebrow { color: var(--hijau-400); }
.numlist { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 12px; }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.numlist li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-size: 22px; color: var(--hijau-400); line-height: 1; }
.mandate--grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .mandate--grid { grid-template-columns: 1fr; } }

/* Dimension list */
.dim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .dim { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dim { grid-template-columns: 1fr; } }
.dim__item { padding: 26px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.dim__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--hijau-400); }
.dim__item b { font-family: var(--font-display); font-size: 28px; color: var(--hijau-600); font-weight: 500; line-height: 1; }
.dim__item h3 { font-size: 17px; font-weight: 700; }
.dim__item p { font-size: 14px; color: var(--ink-500); line-height: 1.55; }

/* Framework cards (dark) */
.frame { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .frame { grid-template-columns: 1fr; } }
.frame__card { padding: 30px 28px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 14px; align-content: start; transition: background .35s, transform .45s var(--ease-out); }
.frame__card:hover { background: rgba(255, 255, 255, .09); transform: translateY(-5px); }
.frame__k { font-family: var(--font-display); font-size: 34px; color: var(--hijau-400); line-height: 1; }
.frame__card h3 { font-size: 20px; }
.frame__card p, .frame__card li { font-size: 14.5px; color: rgba(255, 255, 255, .72); line-height: 1.55; }
.frame__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.frame__card li b { color: var(--white); margin-right: 6px; }

/* ---------------------------------------------------------------- Reveal system */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-32px); }
.reveal--scale { transform: scale(.94); }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .13s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .21s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .29s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .37s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .45s; }
.stagger.is-visible > *:nth-child(7) { transition-delay: .53s; }
.stagger.is-visible > *:nth-child(8) { transition-delay: .61s; }

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--ungu-600), var(--hijau-500)); z-index: 60; }

/* Back to top */
.totop {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--ungu-600); color: var(--white); display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .35s, translate .35s var(--ease-out), background .3s; z-index: 40;
}
.totop svg { width: 18px; height: 18px; }
.totop.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop:hover { background: var(--ungu-700); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .stagger > *, .fade-up, .chip, .hero__photo, .hero h1 .word > span { opacity: 1; transform: none; }
}

/* Figure */
.figure { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid rgba(255,255,255,.15); }
.figure img { width: 100%; height: auto; }
.figure figcaption { padding: 12px 18px; font-size: 13px; color: var(--ink-500); background: var(--paper-2); }


/* ---------------------------------------------------------------- Photos */
/* A full-width band used to break long stretches of text. Fixed aspect so
   the page never reflows as the image loads. */
.band { position: relative; overflow: hidden; }
.band__media { position: relative; aspect-ratio: 21 / 7; min-height: 220px; }
.band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,15,56,.92), rgba(31,15,56,.78) 32%, rgba(31,15,56,.35) 62%, rgba(31,15,56,.12)); }
.band__copy { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; color: var(--white); }
.band__copy p { max-width: 34ch; margin: 10px 0 0; color: #fff; font-size: 17px; text-shadow: 0 1px 12px rgba(31,15,56,.55); }
.band__copy h2 { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); text-shadow: 0 2px 16px rgba(31,15,56,.6); }
@media (max-width: 700px) { .band__media { aspect-ratio: 4 / 3; } .band__media::after { background: linear-gradient(0deg, rgba(31,15,56,.9), rgba(31,15,56,.55)); } }

/* Inline picture inside a content column */
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
/* Tall photos cropped to 4:3 lose the faces to a centred crop; bias upward. */
.photo--faces img { object-position: 50% 20%; }
/* The strip's photographs are wide frames of a whole room, so a 4:3 crop
   cut half the people out of them. 16:9 is close to the frames' own shape
   and keeps the room, and everyone in it, inside the card. */
/* height:auto matters: .photo img sets height:100%, which wins over
   aspect-ratio and stretches the image back to the card's height. */
.photo-grid .photo img { aspect-ratio: 16 / 9; height: auto; }
/* This one reads as a father and mother folding laundry together, so the
   crop holds both of them rather than centring on him. */
.photo--lipat img { object-position: 45% 60%; }
/* The photographs read as one spread of Malaysian households, so the row
   keeps them on a single line rather than letting one drop below. Below the
   width where they all still fit it turns into a snap carousel, the same
   treatment as the stat row. */
.photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1100px) {
  .photo-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 0 12px; margin: -6px 0 -12px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .photo-grid::-webkit-scrollbar { display: none; }
  .photo-grid > .photo { flex: 0 0 clamp(240px, 62vw, 340px); scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- Media */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.card-news {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card-news:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ungu-200); }
.card-news__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card-news__src { color: var(--ungu-600); }
.card-news__date { color: var(--ink-300); font-weight: 600; letter-spacing: 0; text-transform: none; }
.card-news h3 { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.card-news p { margin: 0; font-size: 15px; color: var(--ink-500); }
.card-news__go { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ungu-600); }
.card-news__go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.card-news:hover .card-news__go svg { transform: translateX(3px); }
.card-news__lang { font-size: 11px; font-weight: 700; color: var(--ink-300); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

/* Footer wordmark set in the display face, replacing the roundel image. */
.footer__wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--white); margin: 0 0 14px;
}
.footer__wordmark em { font-style: italic; font-weight: 400; color: var(--hijau-400); }

/* Hero background photograph, washed to paper so the dark type and the
   transparent nav still read. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); animation: kenburns 24s ease-in-out infinite alternate; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(251,250,253,.97) 0%, rgba(251,250,253,.92) 45%, rgba(251,250,253,.62) 100%),
              linear-gradient(0deg, var(--paper) 0%, transparent 30%); }
.hero > .container, .hero__scroll { position: relative; z-index: 1; }
@keyframes kenburns { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* Auto-rotating photo frame */
.hero__slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease), transform 6s linear; transform: scale(1.04); }
.hero__slides img.is-active { opacity: 1; transform: scale(1); }

.hero__dots { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 6px; z-index: 3; }
.hero__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .3s, background .3s; }
.hero__dots span.is-active { width: 20px; border-radius: 4px; background: var(--white); }
@media (prefers-reduced-motion: reduce) { .hero__bg img { animation: none; } }

/* Nav: links centred, language switch pinned right */
.nav__cta { position: static; translate: none; }
@media (max-width: 960px) { .nav__inner { justify-content: flex-start; } }
/* The LPPKN mark sits in the bar on mobile, so the hero lockup would repeat
   it. Hidden here rather than in the nav block above, which came earlier in
   the file than `.hero__org { display: flex }` and so lost on source order. */
@media (max-width: 960px) { .hero__org { display: none; } }

/* News thumbnails */
.card-news { overflow: hidden; }
.card-news__thumb { margin: -1px -1px 14px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border-radius: var(--radius) var(--radius) 0 0; }
.card-news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card-news:hover .card-news__thumb img { transform: scale(1.05); }

/* Methodology bullets */
.metod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .metod { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .metod { grid-template-columns: 1fr; } }
.metod__item { position: relative; padding: 16px 18px 16px 44px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.9); font-weight: 600; font-size: 15px; }
.metod__item::before { content: ""; position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 12px; height: 12px; border-radius: 50%; background: var(--hijau-500); box-shadow: 0 0 0 4px rgba(77,184,72,.2); }

/* Zone section: Malaysia map backdrop */
.zon-section { overflow: hidden; }
.zon-map { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ungu-600); opacity: .08; pointer-events: none; }
.zon-map circle { animation: pulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.zon-map circle:nth-child(2) { animation-delay: .5s } .zon-map circle:nth-child(3) { animation-delay: 1s } .zon-map circle:nth-child(4) { animation-delay: 1.5s } .zon-map circle:nth-child(5) { animation-delay: 2s } .zon-map circle:nth-child(6) { animation-delay: 2.5s }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.8); } }
.zon-section > .container { position: relative; z-index: 1; }

/* Zone section: landmark photo with dark purple glass */
.zon-section { color: rgba(255,255,255,.85); }
.zon-bg { position: absolute; inset: 0; }
.zon-bg img { width: 100%; height: 100%; object-fit: cover; }
.zon-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,15,56,.88), rgba(46,26,79,.82) 50%, rgba(31,15,56,.9)); backdrop-filter: blur(1px); }
.zon-section .h2, .zon-section h2 { color: var(--white); }
.zon-section .em { color: var(--hijau-400); }
.zon-section .lead { color: rgba(255,255,255,.72); }
.zon-section .eyebrow { color: var(--hijau-400); }
.zon-section .zone { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
/* .method__row carries no border of its own now (the corner brackets replace
   it), so only its background needs the dark-surface treatment. */
.zon-section .method__row { background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.zon-section .method__row b, .zon-section .zone h4 { color: var(--white); }
.zon-section .method__row span, .zon-section .zone p { color: rgba(255,255,255,.65); }
.zon-section .zone__n { color: var(--hijau-400); }
.zon-section .zone__n small { color: rgba(255,255,255,.4); }
.zon-section .zone__when { color: var(--hijau-400); }
.zon-section .zone:hover { border-color: rgba(255,255,255,.35); box-shadow: none; }
.zon-section .note { color: rgba(255,255,255,.6); }
.zon-section .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.35); }
.zon-section .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.zon-section .method__row i { background: rgba(77,184,72,.18); color: var(--hijau-400); }

/* BPSS diagram */
.bpss-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .bpss-wrap { grid-template-columns: 1fr; } }
.bpss-wrap .frame { grid-template-columns: 1fr; }
.bpss-fig { padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.bpss-fig svg { width: 100%; height: auto; display: block; font-family: var(--font-body); }

/* KASIH cards: align icon / title / description across all five cards.
   The cards are bottom-anchored (justify-content:flex-end), so a card whose
   description wraps to an extra line pushed its icon and heading upward.
   Subgrid puts every card's icon, heading and text on shared rows, so they
   line up whatever the text length. The leading 1fr row absorbs the slack,
   keeping the bottom-anchored look. */
@supports (grid-template-rows: subgrid) {
  /* grid-auto-rows takes a repeating pattern, so the four-track band (spacer,
     icon, heading, text) recurs for however many rows the cards wrap into.
     That keeps the cards aligned at the 5-, 3-, 2- and 1-column breakpoints
     alike, not just on a wide desktop. */
  .kasih {
    grid-template-rows: minmax(64px, 1fr) auto auto auto;
    grid-auto-rows: minmax(64px, 1fr) auto auto auto;
  }
  .kasih__card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    justify-content: stretch;
    row-gap: 10px;
    min-height: 0;
  }
  .kasih__card i  { grid-row: 2; }
  .kasih__card h3 { grid-row: 3; }
  .kasih__card p  { grid-row: 4; }
}

/* Kumpulan Sasaran cards: align age, title and description across all three.
   Like the KASIH cards these are bottom-anchored, so card 3 — whose title
   wraps to two lines — pushed its age label and title above the other two.
   Subgrid puts the three rows on shared tracks, so the title row takes the
   height of the tallest title and every card's text starts on the same line.
   The leading 1fr row absorbs the slack, keeping the bottom-anchored look. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .sasaran { grid-template-rows: 1fr auto auto auto; min-height: 320px; }
    .sasaran__card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      justify-content: stretch;
      row-gap: 12px;
    }
    .sasaran__card .age { grid-row: 2; }
    .sasaran__card h3   { grid-row: 3; align-self: end; }
    .sasaran__card p    { grid-row: 4; }
  }
}

/* Spacing utilities — replace inline style="" so the CSP can forbid inline styles. */
.mt-14 { margin-top: 14px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.text-center { text-align: center; }

/* Card spotlight — enabled by main.js on fine pointers without reduced motion. */
.spotlight :is(.kasih__card, .skop__card, .stat, .phase__card, .soalan__card) { --mx: 50%; --my: 50%; }
.spotlight .skop__card::after, .spotlight .stat::before, .spotlight .phase__card::after, .spotlight .soalan__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(92, 46, 145, .08), transparent 60%);
}
.spotlight .skop__card:hover::after, .spotlight .stat:hover::before, .spotlight .phase__card:hover::after, .spotlight .soalan__card:hover::after { opacity: 1; }
.spotlight :is(.stat, .phase__card, .soalan__card, .skop__card) { position: relative; overflow: hidden; }

/* ---------------------------------------------------------------- E-banner */
/* Banners are artwork with text on them, so they are shown whole (contain)
   at their own 2400×960 shape rather than cropped to fit. */
.banner-slides {
  position: relative; aspect-ratio: 2400 / 960; margin-bottom: clamp(28px, 4vw, 44px);
  border-radius: var(--radius); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-md);
}
.banner-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 1s var(--ease); }
.banner-slides img.is-active { opacity: 1; }
.banner-dots {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 2;
  display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(20, 16, 27, .45);
}
.banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s, background .3s; }
.banner-dots button.is-active { width: 22px; border-radius: 4px; background: var(--white); }
.banner-dots button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 560px) { .banner-slides { border-radius: var(--radius-sm); } }

/* ---------------------------------------------------------------- SLU mosaic */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mosaic__item {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in;
  border-radius: var(--radius-sm); background: var(--paper-2); box-shadow: var(--shadow-sm);
}
.mosaic__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.mosaic__item:hover img { transform: scale(1.04); }
.mosaic__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--white);
  background: linear-gradient(0deg, rgba(31, 15, 56, .82), transparent);
}
@media (max-width: 760px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mosaic__item:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
  .mosaic__cap { font-size: 12px; padding: 22px 10px 8px; }
}

/* ---------------------------------------------------------------- Jadual photo row */
.slu-strip { margin-top: clamp(48px, 6vw, 72px); }
.slu-strip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.slu-strip__link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ungu-600); }
.slu-strip__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.slu-strip__link:hover svg { transform: translateX(3px); }
a.photo { display: block; cursor: zoom-in; }
a.photo img { transition: transform .8s var(--ease-out); }
a.photo:hover img { transform: scale(1.04); }
.photo__cap { display: none; }

/* ---------------------------------------------------------------- Gallery (media) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-700);
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  transition: border-color .3s, background .3s, color .3s, box-shadow .3s;
}
.filter:hover { border-color: var(--ungu-400); }
.filter.is-active { background: var(--ungu-600); border-color: var(--ungu-600); color: var(--white); box-shadow: 0 10px 26px rgba(92, 46, 145, .22); }
.filter:focus-visible { outline: 2px solid var(--ungu-600); outline-offset: 2px; }
.filter__n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; text-align: center; background: var(--ungu-50); color: var(--ungu-600); }
.filter__n:empty { display: none; }
.filter.is-active .filter__n { background: rgba(255, 255, 255, .2); color: var(--white); }

.gal-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* .card-news is display:flex, which would otherwise override [hidden]. */
.card-news[hidden] { display: none; }
.card-news__thumb { position: relative; }
.card-album__n {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--white); background: rgba(20, 16, 27, .62);
}
.card-album__n svg { width: 14px; height: 14px; }
.card-gal__type { padding: 2px 9px; border-radius: 999px; font-size: 11px; background: var(--hijau-100); color: var(--hijau-700); }
.gal-empty {
  padding: 48px 20px; text-align: center; color: var(--ink-500);
  border: 1px dashed var(--ungu-200); border-radius: var(--radius); background: var(--white);
}

/* ---------------------------------------------------------------- Photo viewer */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1100px, 100vw - 32px); max-height: calc(100vh - 32px); overflow: visible; }
.lightbox::backdrop { background: rgba(20, 16, 27, .9); }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: var(--radius-sm); }
.lightbox figcaption:empty { display: none; }
.lightbox figcaption { color: var(--white); font-size: 15px; text-align: center; max-width: 60ch; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--white); transition: background .25s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.lightbox__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 16px; top: 50%; translate: 0 -50%; }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next { display: none; }
@media (max-width: 700px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; translate: none; } }
html:has(.lightbox[open]) { overflow: hidden; }

/* ---------------------------------------------------------------- Album page */
/* Photos keep their own shape (portrait and landscape mixed), so they flow
   in columns rather than being cropped to one grid cell. */
.album__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.album__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ungu-600); }
.album__back svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.album__back:hover svg { transform: translateX(-3px); }
.album__count { font-size: 13px; font-weight: 700; color: var(--ink-500); }
.album { columns: 3 300px; column-gap: 18px; }
.album__item { break-inside: avoid; margin: 0 0 18px; }
.album__item a { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.album__item img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease-out); }
.album__item a:hover img { transform: scale(1.03); }