/* =====================================================================
   HBAP — PT Huadian Bukit Asam Power
   Design system + homepage styles
   Direction: elegant / fluid / institutional · brand navy + electric blue
   Type: Hanken Grotesk (display+body) · Space Grotesk (technical figures)
   ===================================================================== */

/* ---------- Fonts (self-hosted, variable, latin subset) ---------- */
/* One variable woff2 per family covers the whole weight axis we use
   (Hanken 400–800, Space 500–700), so no faux-bold synthesis. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk.woff2") format("woff2");
}

/* The hidden attribute must win over any component display rule — without
   this, `.gate { display: grid }` kept the welcome layer on screen. */
[hidden] { display: none !important; }

/* ---------- Tokens ---------- */
:root {
  --navy:        #054585;
  --navy-700:    #0a5fae;
  --navy-900:    #04243F;
  --navy-950:    #021A30;
  --sky:         #00ACE8;
  --sky-300:     #5BC8F0;
  --leaf:        #3E8E5A;
  --leaf-300:    #7CC295;
  --leaf-700:    #2F7A4B;   /* AA on white for small text */

  --ink:         #0B1B2D;
  --slate:       #4A5B6E;   /* muted body on light — AA on white */
  --slate-300:   #8194A6;
  --paper:       #F4F8FC;
  --paper-2:     #EAF1F8;
  --line:        #DCE6F0;
  --white:       #ffffff;

  --grad-brand:  linear-gradient(120deg, var(--sky) 0%, var(--navy) 70%);
  --grad-hero:   linear-gradient(105deg, rgba(4,36,63,.86) 0%, rgba(4,36,63,.55) 42%, rgba(5,69,133,.22) 100%);
  --grad-dark:   linear-gradient(160deg, #06294a 0%, var(--navy-900) 60%, var(--navy-950) 100%);

  --wrap: 1200px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --sh-1: 0 1px 2px rgba(4,36,63,.06), 0 4px 14px rgba(4,36,63,.06);
  --sh-2: 0 10px 30px rgba(4,36,63,.10), 0 2px 8px rgba(4,36,63,.06);
  --sh-3: 0 24px 60px rgba(4,36,63,.18);
  --sh-blue: 0 16px 40px rgba(5,69,133,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;

  --nav-h: 80px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--soft { background: var(--paper); }
.section--dark { background: var(--grad-dark); color: #eaf2fb; }

.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); flex-wrap: wrap; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__head-note { max-width: 40ch; font-size: 1.02rem; }
.section__head--center .kicker { justify-content: center; }

/* ---------- Typography ---------- */
.kicker {
  font-family: var(--mono);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--sky); border-radius: 2px; }
.kicker--light { color: var(--sky-300); }
.kicker--light::before { background: var(--sky-300); }
.kicker--green { color: var(--leaf-700); }
.kicker--green::before { background: var(--leaf); }
.section--dark .kicker--green { color: var(--leaf-300); }
.section--dark .kicker--green::before { background: var(--leaf-300); }

.h2 {
  font-size: clamp(1.85rem, 3.4vw, 3.05rem);
  line-height: 1.08; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); max-width: 18ch;
}
.h2--light { color: #fff; }
.section__head--center .h2 { max-width: 22ch; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink); margin-top: 22px; max-width: 46ch; }
.muted { color: var(--slate); margin-top: 18px; max-width: 50ch; }
.muted-light { color: #b9cde2; }
.mono { font-family: var(--mono); }
.grad-text { background: linear-gradient(100deg, var(--sky-300), #bfe6f8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(5,69,133,.40); }
.btn--ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }
.btn .i-arrow { transition: transform .25s var(--ease); }
.btn:hover .i-arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--navy);
  padding-bottom: 3px; position: relative; width: fit-content;
}
.link-arrow::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--sky); transition: width .3s var(--ease); }
.link-arrow:hover::after { width: calc(100% - 28px); }
.link-arrow .i-arrow { transition: transform .25s var(--ease); }
.link-arrow:hover .i-arrow { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--sky-300); }

/* ---------- Glass ---------- */
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,.6); }
.glass-light { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.glass-dark { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
  view-transition-name: site-nav;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - 48px, 1320px); }
.nav.is-scrolled { background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--line), var(--sh-1); height: 68px; }

/* flex: none — the wordmark must never be squeezed by a crowded nav */
.brand { display: inline-flex; align-items: center; position: relative; flex: none; }
.brand__logo { height: 42px; width: auto; transition: opacity .35s var(--ease); }
.brand__logo--color { position: absolute; left: 0; top: 0; opacity: 0; }
.nav.is-scrolled .brand__logo--white { opacity: 0; }
.nav.is-scrolled .brand__logo--color { opacity: 1; }
/* keep white logo when the dark mobile menu is open, even if scrolled */
.nav.is-menu-open .brand__logo--white { opacity: 1; }
.nav.is-menu-open .brand__logo--color { opacity: 0; }
.nav.is-scrolled .brand__logo { height: 38px; }

.nav__menu { display: flex; gap: 6px; position: relative; }
/* sliding pill behind the active/hovered word (JS positions it) */
.nav__pill {
  position: absolute; top: 50%; left: 0; height: 34px;
  translate: 0 -50%; width: 0; opacity: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  transition: left .35s var(--ease-out), width .35s var(--ease-out), opacity .25s var(--ease);
  view-transition-name: nav-pill;
  pointer-events: none;
}
.nav.is-scrolled .nav__pill { background: var(--paper-2); }
.nav__menu a { font-weight: 500; font-size: .98rem; color: rgba(255,255,255,.92); position: relative; z-index: 1; padding: 6px 14px; transition: color .25s var(--ease); }
.nav.is-scrolled .nav__menu a { color: var(--ink); }
.nav.is-scrolled .nav__menu a:hover { color: var(--navy); }
.nav__menu a[aria-current="page"] { color: #fff; }
.nav.is-scrolled .nav__menu a[aria-current="page"] { color: var(--navy); }

/* reusable CTA band (inner pages) */
.cta-band { background: var(--grad-dark); color: #fff; text-align: center; }
.cta-band .kicker { justify-content: center; }
.cta-band .h2 { color: #fff; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; margin: 18px auto 0; font-size: 1.08rem; }
.cta-band__btns { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

.nav__actions { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.nav.is-scrolled .lang { border-color: var(--line); }
.lang__btn { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.85); padding: 5px 10px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
.lang__btn.is-active { background: var(--grad-brand); color: #fff; }
.nav.is-scrolled .lang__btn { color: var(--slate); }
.nav.is-scrolled .lang__btn.is-active { color: #fff; }

.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.nav__toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease), background .35s var(--ease); }
.nav.is-scrolled .nav__toggle span { background: var(--navy-900); }

/* mobile menu */
/* Eight nav items outgrow the tablet band, so hand over to the menu button
   well before the wordmark runs out of room. The 900px block further down
   repeats these for narrower screens. */
@media (max-width: 1023px) {
  .nav__menu { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
  .nav.is-menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }
}

.mobile-menu { position: fixed; inset: 0; z-index: 95; background: var(--grad-dark); display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 40px; transform: translateY(-100%); transition: transform .45s var(--ease); }
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__nav a { font-size: 1.7rem; font-weight: 700; color: #fff; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu__lang { display: flex; gap: 8px; }
.mobile-menu .btn { align-self: flex-start; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); background: var(--navy-900); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: kenburns 12s ease-out forwards; }
.hero__slide.is-active { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.0); } }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--grad-hero); }
.hero__scrim::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(4,36,63,.5), transparent 30%); }

.hero__content { position: relative; z-index: 2; padding: 40px 0 90px; }
.hero__title { font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; color: #fff; margin-top: 10px; max-width: 16ch; }
.hero__lede { color: rgba(255,255,255,.9); font-size: clamp(1.08rem, 1.6vw, 1.3rem); max-width: 52ch; margin-top: 26px; }
.hero__cta { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }

.hero__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3; display: flex; gap: 10px; }
.hero__dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: width .3s var(--ease), background .3s var(--ease); }
.hero__dots button.is-active { width: 28px; border-radius: 6px; background: var(--sky); }

/* =====================================================================
   FLOATING STAT BAND
   ===================================================================== */
.statband { position: relative; z-index: 5; margin-top: -68px; margin-bottom: 8px; }
.statband__card { border-radius: var(--r-lg); box-shadow: var(--sh-3); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; }
.stat { padding: 26px 28px; position: relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background: var(--line); }
.stat__num { display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--navy-900); letter-spacing: -.01em; line-height: 1; }
.stat__unit { font-size: .5em; color: var(--navy); font-weight: 600; }
.stat__label { display: block; margin-top: 10px; font-size: .92rem; color: var(--slate); }

/* C2 — instrumentation "live" strip (homepage only) */
.statband--live .statband__card { border-top: 2px solid var(--sky); }
.statband--live .stat__label { font-family: var(--mono); text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.statband--live .stat__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; }
.statband__caption { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 12px; padding-right: 4px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-300); }
.statband__caption .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(0,172,232,.5); animation: pulse-dot 2s var(--ease) infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,172,232,.5); } 50% { box-shadow: 0 0 0 5px rgba(0,172,232,0); } }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.values { margin-top: 30px; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.values__title { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.values__title .mono { color: var(--navy); letter-spacing: .12em; }
.values__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.values__list li { font-size: .9rem; font-weight: 600; color: var(--navy-900); background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; }
.link-arrow { margin-top: 28px; }

.strategy__note { color: var(--slate); max-width: 56ch; margin: 18px auto 0; font-size: 1.04rem; }

.about__media { position: relative; }
.framed { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); position: relative; }
.framed::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border-radius: inherit; }
.framed img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.framed--green { box-shadow: 0 24px 60px rgba(62,142,90,.20); }
.floating-chip { position: absolute; left: -18px; bottom: 28px; max-width: 260px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); box-shadow: var(--sh-2); }
.floating-chip__k { flex: none; font-size: .95rem; font-weight: 700; color: #fff; background: var(--navy); padding: 8px 12px; border-radius: 10px; letter-spacing: .08em; }
.floating-chip__v { font-size: .86rem; font-weight: 600; color: var(--navy-900); line-height: 1.35; }

/* =====================================================================
   OPERATIONS (dark)
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-bottom: clamp(40px, 6vw, 70px); border-bottom: 1px solid rgba(255,255,255,.12); }
.kpi { display: flex; flex-direction: column; }
.kpi__num { font-family: var(--mono); font-weight: 700; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; color: #fff; letter-spacing: -.02em; display: inline-flex; align-items: baseline; }
.kpi__num--accent { color: var(--sky-300); }
.kpi__pct { font-size: .5em; color: var(--sky-300); }
.kpi__unit { font-family: var(--mono); font-size: .9rem; color: var(--sky-300); margin-top: 8px; letter-spacing: .08em; }
.kpi__label { color: #b9cde2; font-size: .96rem; margin-top: 12px; max-width: 22ch; }

.tech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.tech__card { padding: 28px 24px; border-radius: var(--r); transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.tech__card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(91,200,240,.4); }
.tech__icon { width: 38px; height: 38px; color: var(--sky-300); margin-bottom: 18px; }
.tech__title { font-size: 1.16rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.tech__card p { color: #aac2da; font-size: .95rem; line-height: 1.55; }

/* =====================================================================
   STRATEGY / PILLARS
   ===================================================================== */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pillar { padding: 32px 26px 30px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.pillar::before { content:""; position:absolute; left:0; top:0; height:4px; width:100%; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.pillar:hover::before { transform: scaleX(1); }
.pillar__no { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--navy-700); letter-spacing: .1em; }
.pillar__title { font-size: 1.22rem; font-weight: 700; color: var(--navy-900); margin: 14px 0 10px; }
.pillar__title--green { color: var(--leaf); }
.pillar p { color: var(--slate); font-size: .96rem; }

/* =====================================================================
   SUSTAINABILITY
   ===================================================================== */
.sustain { background: linear-gradient(180deg, #fff 0%, #f3faf5 100%); }
.sustain__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.sustain__media .framed img { aspect-ratio: 5/4; }
.ticks { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding-left: 38px; font-size: 1.04rem; color: var(--ink); }
.ticks li::before {
  content:""; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  background: var(--leaf); box-shadow: 0 0 0 5px rgba(62,142,90,.14);
}
.ticks li::after { content:""; position:absolute; left:7px; top:8px; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(-45deg); }
.sustain .link-arrow { color: var(--leaf-700); margin-top: 30px; }
.sustain .link-arrow::after { background: var(--leaf); }

/* =====================================================================
   RECOGNITION
   ===================================================================== */
.awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.award { display: flex; align-items: center; gap: 18px; padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.award:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.award__yr { flex: none; min-width: 64px; height: 48px; display: grid; place-items: center; padding: 0 12px; font-size: .92rem; font-weight: 700; color: var(--navy); background: var(--paper-2); border-radius: 10px; letter-spacing: .04em; }
.award p { font-size: .98rem; font-weight: 600; color: var(--navy-900); line-height: 1.4; }

/* =====================================================================
   NEWS
   ===================================================================== */
.news__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.news-feature { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.news-feature:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.news-feature__media { aspect-ratio: 16/9; overflow: hidden; }
.news-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-feature:hover .news-feature__media img { transform: scale(1.05); }
.news-feature__body { padding: 26px 28px 28px; }
.news-feature__body h3 { font-size: 1.4rem; font-weight: 700; color: var(--navy-900); margin: 14px 0 10px; line-height: 1.2; }
.news-feature__body p { color: var(--slate); font-size: .98rem; }

.news-rail { display: flex; flex-direction: column; gap: 14px; }
.news-card { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); flex: 1; }
.news-card:hover { transform: translateX(4px); box-shadow: var(--sh-2); border-color: var(--sky-300); }
.news-card__thumb { flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; }
.news-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.news-card:hover .news-card__thumb img { transform: scale(1.07); }
.news-card__text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.news-card h4 { font-size: 1.02rem; font-weight: 700; color: var(--navy-900); line-height: 1.3; }

.tag { display: inline-block; width: fit-content; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--paper-2); padding: 5px 11px; border-radius: 999px; }
.tag--green { color: var(--leaf); background: rgba(62,142,90,.12); }
.news__date { display: block; margin-top: 8px; font-size: .82rem; color: var(--slate); font-weight: 600; }

/* =====================================================================
   PARTNER CTA
   ===================================================================== */
.partner { position: relative; padding: clamp(80px, 11vw, 150px) 0; overflow: hidden; background: var(--navy-900); }
.partner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.partner__scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(4,36,63,.92) 0%, rgba(5,69,133,.72) 60%, rgba(0,172,232,.35) 100%); }
.partner__content { position: relative; z-index: 2; text-align: center; }
.partner__content .kicker { justify-content: center; }
.partner__content .h2 { margin-inline: auto; }
.partner__lede { color: rgba(255,255,255,.9); font-size: 1.16rem; max-width: 52ch; margin: 22px auto 0; }
.partner__cta { display: flex; gap: 16px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--navy-950); color: #c5d6e8; position: relative; overflow: hidden; view-transition-name: site-footer; }
.footer__mascot { position: absolute; bottom: 64px; width: 84px; height: auto; z-index: 2; opacity: .96; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); pointer-events: none; }
.footer__mascot--left { left: clamp(8px, 3vw, 48px); }
.footer__mascot--right { right: clamp(8px, 3vw, 48px); width: 88px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr 1.2fr; gap: 48px; padding: clamp(60px, 8vw, 96px) 0 56px; }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: rgba(255,255,255,.6); }
.footer__tag { margin-top: 20px; font-size: .96rem; color: #93aac4; max-width: 34ch; }
.lang--footer { margin-top: 22px; border-color: rgba(255,255,255,.18); width: fit-content; }
.lang--footer .lang__btn { color: #93aac4; }
.footer__social { margin-top: 26px; }
.footer__social-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #6f8aa6; margin-bottom: 12px; }
.footer__social-links { display: flex; gap: 12px; }
.footer__social .footer__social-links a { box-sizing: border-box; width: 42px; height: 42px; min-width: 42px; flex: none; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #c5d6e8; border: 1px solid rgba(255,255,255,.16); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.footer__social .footer__social-links a:hover { color: #fff; background: var(--grad-brand); border-color: transparent; transform: translateY(-2px); }
.footer__h { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #6f8aa6; font-weight: 600; margin-bottom: 20px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col a { color: #c5d6e8; font-size: .98rem; transition: color .2s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--sky-300); }
.footer__addr { font-size: .92rem; line-height: 1.55; color: #93aac4; }
.footer__addr strong { color: #dfeaf6; font-weight: 600; }
.footer__wbs { font-size: .92rem; color: #93aac4; margin-top: 4px; }

.footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.footer__bar p { font-size: .86rem; color: #7c93ad; }
.footer__legal { display: flex; gap: 14px; align-items: center; }
.footer__legal a:hover { color: var(--sky-300); }

/* =====================================================================
   INNER PAGES — shared components
   ===================================================================== */
.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(54px,9vw,110px)) 0 clamp(52px,7vw,84px); background: var(--navy-900); overflow: hidden; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Only present when the admin has added more than one photo to this hero.
   A single photo keeps the plain markup above and never animates. */
.page-hero__bgs { position: absolute; inset: 0; z-index: -2; }
.page-hero__bgs .page-hero__bg { opacity: 0; transition: opacity 1.4s var(--ease); }
.page-hero__bgs .page-hero__bg.is-active { opacity: 1; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(4,36,63,.93) 0%, rgba(4,36,63,.72) 52%, rgba(5,69,133,.42) 100%); }
.breadcrumb { display: flex; gap: 9px; align-items: center; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--sky-300); }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.022em; color: #fff; line-height: 1.05; max-width: 20ch; }
.page-hero__lede { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 58ch; margin-top: 20px; }

.prose p { color: var(--slate); margin-top: 16px; max-width: 70ch; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--navy-900); font-weight: 600; }

/* numbered mission list / generic numbered cards */
.mission-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mission-item { display: flex; gap: 16px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.mission-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.mission-item__no { font-family: var(--mono); font-weight: 700; color: var(--navy-700); font-size: 1.1rem; flex: none; }
.mission-item__body h3 { color: var(--navy-900); font-size: 1.08rem; margin-bottom: 6px; }
.mission-item__body p { color: var(--slate); font-weight: 400; }
.mission-item p { color: var(--ink); font-weight: 500; font-size: .98rem; }

/* value grid (INTEGROUS) */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* A grid whose last row is not full (07 GCG: five principles) centres the
   remainder instead of leaving a hole on the right. */
.value-grid--center { display: flex; flex-wrap: wrap; justify-content: center; }
.value-grid--center > .value-card { flex: 1 1 280px; max-width: calc((100% - 36px) / 3); }
@media (max-width: 900px) { .value-grid--center > .value-card { max-width: calc((100% - 18px) / 2); } }
@media (max-width: 640px) { .value-grid--center > .value-card { max-width: 100%; } }
.value-card { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.value-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.value-card:hover::before { transform: scaleX(1); }
.value-card__k { font-family: var(--mono); font-weight: 700; color: var(--navy); font-size: 1.25rem; }
.value-card h3 { font-size: 1.1rem; color: var(--navy-900); margin: 10px 0 8px; }
.value-card p { color: var(--slate); font-size: .94rem; }

/* timeline */
.timeline { display: flex; flex-direction: column; margin-top: 8px; }
.tl-item { display: grid; grid-template-columns: 96px 1fr; gap: 28px; }
.tl-year { font-family: var(--mono); font-weight: 700; color: var(--navy); font-size: 1.1rem; text-align: right; padding-top: 1px; }
.tl-content { border-left: 2px solid var(--line); padding: 0 0 34px 28px; position: relative; }
.tl-content::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px #fff; }
.tl-item:last-child .tl-content { border-color: transparent; padding-bottom: 0; }
.tl-content h3 { font-size: 1.05rem; color: var(--navy-900); margin-bottom: 7px; }
.tl-content p { color: var(--slate); font-size: .96rem; }
.tl-content ul { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.tl-content li { color: var(--slate); font-size: .95rem; padding-left: 16px; position: relative; }
.tl-content li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--sky-300); }

/* org chart */
.orgchart { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px,3vw,28px); box-shadow: var(--sh-1); text-align: center; }
.orgchart img { width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 8px; }
.orgchart figcaption { margin-top: 16px; color: var(--slate); font-size: .9rem; }

/* mascots */
.mascots { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mascot { display: flex; gap: 22px; align-items: center; padding: 28px; background: linear-gradient(160deg, #fff, var(--paper)); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.mascot img { width: 116px; flex: none; filter: drop-shadow(0 10px 20px rgba(4,36,63,.18)); }
.mascot h3 { font-size: 1.3rem; color: var(--navy-900); margin-bottom: 8px; }
.mascot p { color: var(--slate); font-size: .95rem; line-height: 1.55; }

/* info cards (procurement / generic) */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card { padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.info-card__icon { width: 44px; height: 44px; color: var(--navy); margin-bottom: 16px; }
.info-card h3 { font-size: 1.15rem; color: var(--navy-900); margin-bottom: 10px; }
.info-card p { color: var(--slate); font-size: .96rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { padding: 32px 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.contact-card h3 { font-size: 1.2rem; color: var(--navy-900); margin-bottom: 6px; }
.contact-card .role { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 18px; display: block; }
.contact-card p { color: var(--slate); font-size: .98rem; line-height: 1.6; }
.contact-card a { color: var(--navy); font-weight: 600; }
.contact-card a:hover { color: var(--sky); }
.map-embed { margin-top: 8px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.map-embed iframe { width: 100%; height: 440px; border: 0; display: block; filter: grayscale(.2); }

/* tender / procurement announcements — premium cards */
.tenders { display: flex; flex-direction: column; gap: 16px; }
.tender { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 24px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden; }
.tender::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-brand); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.tender:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.tender:hover::before { transform: scaleY(1); }
.tender__icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; flex: none; color: var(--navy); background: linear-gradient(150deg, #eef4fb, #dfeaf6); }
.tender__body { min-width: 0; }
.tender__body h3 { font-size: 1.12rem; font-weight: 700; color: var(--navy-900); line-height: 1.35; margin-bottom: 12px; }
.tender__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tender__date { font-family: var(--mono); font-size: .82rem; color: var(--slate); display: inline-flex; align-items: center; gap: 7px; }
.tender__docs { display: flex; gap: 6px; }
.tender__doc { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .07em; color: var(--navy); background: var(--paper-2); padding: 4px 9px; border-radius: 6px; }
.tender__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
.tender__status { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.tender__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tender__status--open { color: var(--leaf); background: rgba(62,142,90,.12); }
.tender__status--closed { color: var(--slate); background: var(--paper-2); }
.tender__action { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--navy); white-space: nowrap; }
.tender__action svg { transition: transform .25s var(--ease); }
.tender:hover .tender__action svg { transform: translateX(4px); }
.tenders__note { margin-top: 26px; color: var(--slate); font-size: .92rem; }
.tenders__note a { color: var(--navy); font-weight: 600; }
@media (max-width: 760px) {
  .tender { grid-template-columns: auto 1fr; gap: 16px 18px; padding: 22px; }
  .tender__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px solid var(--line); }
}

/* news index grid */
.news-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.news-page-grid .news-feature h3 { font-size: 1.2rem; }
.news-filter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: clamp(32px,5vw,48px); }
.news-filter button { font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--slate); padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; transition: all .2s var(--ease); }
.news-filter button:hover { border-color: var(--sky-300); color: var(--navy); }
.news-filter button.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* two-column generic split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,6vw,80px); align-items: center; }
.split--reverse .split__media { order: -1; }

/* shareholders & group — structure diagram */
.ownerdiag { max-width: 820px; margin: 0 auto; }
.ownerdiag svg { width: 100%; height: auto; display: block; overflow: visible; }
.ownerprofiles { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; max-width: 820px; margin: 34px auto 0; }
.ownerprofile { padding-left: 18px; border-left: 3px solid var(--navy); }
.ownerprofile--b { border-left-color: var(--sky); }
.ownerprofile__tag { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 9px; }
.ownerprofile--b .ownerprofile__tag { color: var(--sky); }
.ownerprofile p { color: var(--slate); font-size: .96rem; line-height: 1.6; }
@media (max-width: 760px) { .ownerprofiles { grid-template-columns: 1fr; gap: 22px; } }

/* whistleblowing callout (GCG) */
.wbs-callout { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 40px; border-radius: var(--r-lg); background: var(--grad-dark); color: #fff; flex-wrap: wrap; }
.wbs-callout h3 { font-size: 1.3rem; color: #fff; margin-bottom: 8px; }
.wbs-callout p { color: rgba(255,255,255,.82); max-width: 52ch; }

/* ===== Strategic House infographic ===== */
.shouse { max-width: 960px; margin: 6px auto 0; filter: drop-shadow(0 24px 50px rgba(4,36,63,.12)); }
.shouse__roof { position: relative; background: var(--grad-dark); color: #fff; text-align: center; padding: 34px 18% 30px; clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%); }
.shouse__rooflabel { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky-300); margin-bottom: 10px; }
.shouse__vision { font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 700; line-height: 1.35; max-width: 42ch; margin: 0 auto; color: #fff; }
.shouse__beam { height: 9px; background: var(--grad-brand); }
.shouse__pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 16px; background: var(--paper); }
.shouse__pillar { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 4px 4px 0 0; padding: 30px 18px 26px; text-align: center; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.shouse__pillar::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 5px; background: var(--navy); border-radius: 0 0 3px 3px; }
.shouse__pillar:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.shouse__pnum { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--mono); font-weight: 700; font-size: .98rem; margin-bottom: 16px; }
.shouse__pillar h3 { font-size: 1.04rem; color: var(--navy-900); margin-bottom: 9px; line-height: 1.25; }
.shouse__pillar p { font-size: .85rem; color: var(--slate); line-height: 1.5; }
.shouse__pillar--green::before { background: var(--leaf); }
.shouse__pillar--green .shouse__pnum { background: var(--leaf); }
.shouse__pillar--green h3 { color: var(--leaf); }
.shouse__foundation { background: var(--grad-dark); color: #fff; padding: 22px 28px; display: flex; align-items: center; justify-content: center; gap: 8px 20px; flex-wrap: wrap; text-align: center; }
.shouse__foundation .shouse__rooflabel { margin: 0 6px 0 0; }
.shouse__enabler { font-weight: 600; font-size: 1.02rem; }
.shouse__enabler-sep { color: var(--sky-300); font-weight: 700; }
@media (max-width: 760px) {
  .shouse__pillars { grid-template-columns: 1fr 1fr; }
  .shouse__roof { clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); padding: 28px 9% 26px; }
}
@media (max-width: 440px) { .shouse__pillars { grid-template-columns: 1fr; } }

/* ===== Process flow: mine to grid ===== */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px; }
.flow__step { text-align: center; padding: 0 6px; position: relative; }
.flow__step::after { content: ""; position: absolute; top: 34px; left: calc(50% + 38px); width: calc(100% - 76px); height: 2px; background: linear-gradient(90deg, var(--sky), var(--navy)); }
.flow__step:last-child::after { display: none; }
/* From the transmission step on, the line belongs to PLN UIP3B Sumatera: yellow, dashed. */
.flow { --grid-line: #E8B10E; }
.flow__step--grid::after { background: repeating-linear-gradient(90deg, var(--grid-line) 0 9px, transparent 9px 16px); height: 3px; top: 33.5px; }
.flow-legend { list-style: none; margin: 34px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; font-size: .86rem; color: var(--slate); }
.flow-legend li { display: inline-flex; align-items: center; gap: 12px; }
.flow-legend__line { width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--navy)); }
.flow-legend__line--grid { border-radius: 0; background: repeating-linear-gradient(90deg, var(--grid-line, #E8B10E) 0 9px, transparent 9px 16px); }
.flow__icon { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; color: var(--navy); box-shadow: var(--sh-1); transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.flow__step:hover .flow__icon { transform: translateY(-4px); border-color: var(--sky); color: var(--sky); }
.flow__step h3 { font-size: .96rem; color: var(--navy-900); margin-bottom: 4px; line-height: 1.25; }
.flow__step p { font-size: .8rem; color: var(--slate); }
.flow-facts { display: flex; justify-content: center; margin-top: clamp(38px, 5vw, 56px); flex-wrap: wrap; }
.flow-fact { padding: 4px 38px; text-align: center; position: relative; }
.flow-fact + .flow-fact::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: var(--line); }
.flow-fact__n { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); letter-spacing: -.01em; line-height: 1.1; }
.flow-fact__l { font-size: .86rem; color: var(--slate); }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .flow__step { display: grid; grid-template-columns: 68px 1fr; column-gap: 18px; align-items: center; text-align: left; padding: 8px 0; }
  .flow__step::after { top: 68px; left: 33px; width: 2px; height: calc(100% - 68px); background: linear-gradient(180deg, var(--sky), var(--navy)); }
  .flow__step--grid::after { width: 3px; height: calc(100% - 68px); top: 68px; left: 32.5px; background: repeating-linear-gradient(180deg, var(--grid-line) 0 9px, transparent 9px 16px); }
  .flow__icon { margin: 0; grid-row: 1 / 3; align-self: center; }
  .flow__step h3 { grid-column: 2; align-self: end; margin-bottom: 2px; }
  .flow__step p { grid-column: 2; align-self: start; }
}
@media (max-width: 600px) {
  .flow-fact { padding: 14px 26px; }
  .flow-fact + .flow-fact::before { display: none; }
}

/* ===== Circular economy diagram (FABA) ===== */
.cycle { max-width: 560px; margin: 4px auto 0; }
.cycle svg { width: 100%; height: auto; display: block; }
.cycle__cap { text-align: center; color: var(--slate); max-width: 58ch; margin: 24px auto 0; font-size: 1rem; }

@media (max-width: 900px) {
  .mission-list, .value-grid, .mascots, .info-grid, .contact-grid, .split { grid-template-columns: 1fr; }
  .split__media { max-width: 520px; }
  .tl-item { grid-template-columns: 70px 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
  .mascot { flex-direction: column; text-align: center; align-items: center; }
}

/* =====================================================================
   C1 — NUMBERED SECTION RAILS  (control-room index in the kicker)
   ===================================================================== */
.kicker__no { font-family: var(--mono); font-weight: 700; color: var(--slate-300); letter-spacing: .06em; }
.kicker__no::after { content: "/"; margin: 0 -1px 0 8px; font-weight: 500; opacity: .8; }
.kicker--light .kicker__no { color: rgba(255,255,255,.5); }

/* =====================================================================
   C3 — ENERGY LINE MOTIF  (thin transmission line + spark node)
   ===================================================================== */
.energy-line { display: block; width: 100%; max-width: 340px; height: 18px; overflow: visible; color: var(--sky); opacity: .55; }
.energy-line .el-path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--el-len, 360); stroke-dashoffset: var(--el-len, 360); transition: stroke-dashoffset 1.1s var(--ease-out); }
.energy-line.is-in .el-path { stroke-dashoffset: 0; }
.energy-line .el-node { fill: var(--sky); opacity: 0; transition: opacity .3s var(--ease) .6s; }
.energy-line.is-in .el-node { opacity: 1; }
.energy-line--hero { margin-top: 26px; opacity: .8; }
.energy-line--divider { margin: 0 auto; max-width: 620px; }
.section-divider { padding: clamp(30px, 5vw, 52px) 0; display: flex; justify-content: center; background: var(--navy-950); }
/* Footer rule: one SVG, one stroke. The rules are drawn in percentages and the
   pulse in pixels, so the line is continuous and never stretched. */
.footer-pulse { display: block; width: 100%; height: 20px; margin-bottom: 4px; color: var(--sky); opacity: .5; overflow: visible; }
.footer-pulse line, .footer-pulse path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.footer-pulse circle { fill: currentColor; }

/* =====================================================================
   C4 — AWARDS MARQUEE  (single-row loop; static grid under reduced-motion)
   ===================================================================== */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 0; animation: marquee-scroll 46s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.award-chip { display: inline-flex; align-items: center; gap: 16px; padding: 0 30px; white-space: nowrap; }
.award-chip__yr { font-family: var(--mono); font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: var(--navy); background: var(--paper-2); padding: 6px 12px; border-radius: 999px; flex: none; }
.award-chip__t { font-size: 1rem; font-weight: 600; color: var(--navy-900); }
.award-chip__node { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; margin-left: 30px; }
.awards-static { display: none; }

/* =====================================================================
   C5 — KINETIC STATEMENT  (vision sentence, words light up on scroll)
   ===================================================================== */
.kinetic { padding: clamp(70px, 11vw, 150px) 0; }
.kinetic__label { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 10px; }
.kinetic__label::before { content: ""; width: 26px; height: 2px; background: var(--sky); border-radius: 2px; }
.kinetic__quote { font-size: clamp(1.8rem, 4.5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; max-width: 20ch; }
.kinetic__quote .w { color: var(--slate-300); transition: color .4s var(--ease); }
.kinetic__quote .w.on { color: var(--ink); }
.kinetic__quote .w--accent.on { color: var(--navy); }

/* =====================================================================
   A2 — CROSS-PAGE VIEW TRANSITIONS (MPA, progressive enhancement)
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in  .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }

/* =====================================================================
   A3 — PAGE-ENTER CHOREOGRAPHY  (staggered; JS adds .is-in)
   Initial-hidden states gated behind html.js so no-JS users see content.
   ===================================================================== */
.js [data-enter] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js [data-enter].is-in { opacity: 1; transform: none; }
.js .hero__title[data-enter], .js .page-hero h1[data-enter] { clip-path: inset(0 0 100% 0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), clip-path .7s var(--ease-out); }
/* Negative bottom inset so descenders survive the reveal — inset(0) clips to
   the border box, which cuts the tail off headings like "Penghargaan." or
   "Keberlanjutan". Over-revealing below the box is harmless. */
.js .hero__title[data-enter].is-in, .js .page-hero h1[data-enter].is-in { clip-path: inset(0 -0.06em -0.3em); }
.js .hero__media { opacity: .45; transition: opacity .8s var(--ease-out); }
.js .hero__media.is-ready { opacity: 1; }

/* =====================================================================
   A4 / REVEAL ANIMATION  (scroll-reveal; per-component transform variants)
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal[data-reveal="scale"] { transform: translateY(20px) scale(.96); }
.js .reveal[data-reveal="left"]  { transform: translateX(-14px); }
.reveal.is-in { opacity: 1; transform: none; }
/* tabular figures so counters don't jitter while animating */
.stat__num, .kpi__num, .flow-fact__n { font-variant-numeric: tabular-nums; }

/* B3 — below-the-fold rendering hint (never applied above the fold) */
.strategy, .recognition, .news, .partner, .footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Laptop band: tighten the nav just enough that eight items still fit at
   1024px rather than dropping to the menu button. */
@media (max-width: 1300px) {
  .nav__inner { gap: 14px; width: min(100% - 32px, 1320px); }
  .nav__menu { gap: 0; }
  .nav__menu a { padding: 6px 9px; font-size: .92rem; }
}

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__mascot { display: none; }
}

@media (max-width: 900px) {
  :root { --nav-h: 70px; }
  .nav__menu { display: none; }
  .nav__toggle { display: flex; }
  /* 44px touch floor for the language switch */
  .lang__btn { padding: 12px 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .nav.is-menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); background:#fff; }
  .nav.is-menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background:#fff; }

  .about__grid, .sustain__grid, .news__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; max-width: 460px; }
  .sustain__media { max-width: 520px; }
  .framed img { aspect-ratio: 16/10; }
  .sustain__media .framed img { aspect-ratio: 16/10; }

  .statband__card { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat + .stat::before { display: none; }
  .stat:nth-child(2)::before, .stat:nth-child(4)::before { content:""; display:block; position:absolute; left:0; top:22%; height:56%; width:1px; background: var(--line); }
  .stat:nth-child(3)::after, .stat:nth-child(4)::after { content:""; position:absolute; left:10%; top:0; width:80%; height:1px; background: var(--line); }

  .kpis { grid-template-columns: 1fr 1fr; gap: 32px 26px; }
  .tech { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .awards { grid-template-columns: 1fr 1fr; }
  .section__head { align-items: flex-start; }
  .footer__mascot { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 36px, var(--wrap)); }
  .brand__logo, .nav.is-scrolled .brand__logo { height: 32px; }
  .hero { min-height: 92svh; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .statband { margin-top: -40px; }
  .statband__card { grid-template-columns: 1fr; }
  .stat { padding: 20px 22px; }
  .stat + .stat { border-top: 1px solid var(--line); }
  .stat + .stat::before, .stat:nth-child(2)::before, .stat:nth-child(4)::before, .stat:nth-child(3)::after, .stat:nth-child(4)::after { display: none !important; }
  .kpis, .tech, .pillars, .awards { grid-template-columns: 1fr; }
  .floating-chip { left: 12px; right: 12px; max-width: none; bottom: 12px; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .section__head { flex-direction: column; }
}

/* small shared utilities (formerly inline styles) */
.wrap--gap { margin-top: clamp(40px, 6vw, 64px); }
.statband__card--flat { box-shadow: var(--sh-2); }
.split--stretch { align-items: stretch; }
.tech__card--pad { padding: 36px; }
.purpose-quote { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; color: #fff; line-height: 1.3; margin-top: 6px; }
.center-note { text-align: center; max-width: 60ch; margin: 28px auto 0; }
.tl-hl { color: var(--navy); }
.section--dark .ticks li { color: #dfeaf6; }
.info-grid .news-feature h3 { font-size: 1.2rem; }

/* simple legal / prose pages (privacy, terms) */
.legal-prose h2 { font-size: 1.3rem; color: var(--navy-900); margin: 34px 0 10px; }
.legal-prose p, .legal-prose li { color: var(--slate); max-width: 70ch; }
.legal-prose ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.legal-prose .updated { font-family: var(--mono); font-size: .8rem; color: var(--slate-300); margin-bottom: 8px; }

/* 404 */
.notfound { min-height: 72vh; display: flex; align-items: center; text-align: center; background: var(--grad-dark); color: #fff; padding: calc(var(--nav-h) + 40px) 0 60px; }
.notfound__code { font-family: var(--mono); font-weight: 700; font-size: clamp(4.5rem, 14vw, 9rem); line-height: 1; color: var(--sky-300); letter-spacing: -.03em; }
.notfound h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 14px 0 10px; color: #fff; }
.notfound p { color: rgba(255,255,255,.8); max-width: 46ch; margin: 0 auto 30px; }

/* =====================================================================
   AWARDS GALLERY  (recognition.php)
   Trophies are transparent cut-outs; the card supplies the studio sweep,
   so a mixed set of photos reads as one collection.
   ===================================================================== */
.recognition__more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

.awd-filter { margin-bottom: clamp(28px, 4vw, 44px); }
/* Second filter row: award category. Lighter than the year row so the two read
   as a hierarchy rather than as two competing sets of buttons. */
.awd-filter--cat { margin-top: -12px; margin-bottom: clamp(28px, 4vw, 44px); }
.awd-filter--cat button { font-family: var(--font); font-size: .84rem; letter-spacing: 0; text-transform: none; padding: 7px 14px; }
.awd-filter__n { margin-left: 7px; font-size: .72rem; opacity: .55; }
.awd-filter--cat button.is-active .awd-filter__n { opacity: .8; }
.awd-filter__empty { text-align: center; color: var(--slate); margin: -18px 0 clamp(28px,4vw,44px); }

.awd-grid {
  display: grid;
  /* never smaller than ~4cm on any screen, fluid above that */
  grid-template-columns: repeat(auto-fill, minmax(clamp(152px, 21vw, 252px), 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

.awd-card__btn {
  display: grid; gap: 16px; width: 100%; text-align: left; padding: 0;
  border-radius: var(--r);
}
.awd-card__btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }

.awd-card__stage {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(178deg, #fff 0%, #fff 52%, var(--paper) 100%);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}
/* Symmetric padding on both axes keeps the painted trophy centred in its box,
   which is what lets the flight into the information card land exactly. */
.awd-card__stage img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 9% 11%;
  transition: transform .5s var(--ease-out);
}
.awd-card__btn:hover .awd-card__stage,
.awd-card__btn:focus-visible .awd-card__stage { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--sky-300); }
.awd-card__btn:hover .awd-card__stage img { transform: scale(1.045); }

.awd-card__yr {
  position: absolute; top: 12px; right: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  color: var(--navy); background: rgba(234,241,248,.9);
  backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 999px;
}

.awd-card__cap { display: grid; gap: 5px; padding: 0 2px; }
.awd-card__org {
  font-size: .95rem; font-weight: 700; color: var(--navy-900); line-height: 1.3;
  transition: color .25s var(--ease);
}
.awd-card__btn:hover .awd-card__org { color: var(--navy-700); }
.awd-card__title { font-size: .88rem; color: var(--slate); line-height: 1.45; }

/* --- certifications strip --- */
.awd-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.awd-cert {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
}
.awd-cert__yr { flex: none; min-width: 58px; height: 42px; display: grid; place-items: center; padding: 0 12px; font-size: .84rem; font-weight: 700; color: var(--navy); background: var(--paper-2); border-radius: 9px; letter-spacing: .04em; }
.awd-cert p { font-size: .95rem; font-weight: 600; color: var(--navy-900); line-height: 1.4; }

/* =====================================================================
   INFORMATION CARD  (award lightbox)
   ===================================================================== */
.awd-modal {
  width: min(100% - 32px, 1060px); max-width: none;
  padding: 0; border: 0; background: none; overflow: visible;
  margin: auto;
}
.awd-modal::backdrop { background: rgba(4, 36, 63, .66); backdrop-filter: blur(10px) saturate(.85); -webkit-backdrop-filter: blur(10px) saturate(.85); }
/* JS drives the open/close animation; these are the resting states. */
.awd-modal[open]::backdrop { opacity: 1; }

.awd-modal__shell {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-3);
  max-height: min(88vh, 760px);
}

.awd-modal__stage {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(178deg, #fff 0%, #fff 48%, var(--paper) 100%);
  border-right: 1px solid var(--line);
  padding: clamp(20px, 3vw, 40px);
  min-height: 0;
}
.awd-modal__stage img { width: 100%; height: 100%; object-fit: contain; padding: 4% 6%; }

.awd-modal__info {
  padding: clamp(26px, 3.4vw, 46px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.awd-modal__info .kicker { margin-bottom: 14px; }
.awd-detail__title {
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; color: var(--navy-900);
}

.awd-meta { display: grid; gap: 14px; margin: 26px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.awd-meta > div { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: baseline; }
.awd-meta dt {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate-300);
}
.awd-meta dd { font-size: .98rem; font-weight: 600; color: var(--navy-900); line-height: 1.4; }

.awd-narrative { display: grid; gap: 14px; }
.awd-narrative p { color: var(--slate); font-size: 1rem; line-height: 1.68; }

.awd-modal__nav { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 28px; }
.awd-modal__nav button {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--navy);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.awd-modal__nav button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.awd-modal__nav button svg { width: 19px; height: 19px; }
.awd-modal__count { font-size: .78rem; letter-spacing: .1em; color: var(--slate-300); }

.awd-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--navy-900);
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px);
  box-shadow: var(--sh-1);
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.awd-modal__close:hover { background: var(--navy); color: #fff; transform: rotate(90deg); }
.awd-modal__close svg { width: 19px; height: 19px; }

/* the tile whose image is currently "flying" into the card */
.awd-card.is-source .awd-card__stage img { opacity: 0; }

@media (max-width: 860px) {
  .awd-modal { width: min(100% - 20px, 560px); }
  .awd-modal__shell { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .awd-modal__stage { border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 4 / 3.4; }
  .awd-modal__info { overflow: visible; }
  .awd-meta > div { grid-template-columns: 100px 1fr; gap: 12px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .reveal, .js .reveal, .js [data-enter] { opacity: 1; transform: none; clip-path: none; }
  .js .hero__media { opacity: 1; }
  .hero__slide img { animation: none; transform: none; }
  .energy-line .el-path { stroke-dashoffset: 0; }
  .energy-line .el-node { opacity: 1; }
  .kinetic__quote .w { color: var(--ink); }
  .kinetic__quote .w--accent { color: var(--navy); }
  .statband__caption .live-dot { animation: none; }
  /* marquee falls back to a static wrapped grid */
  .marquee { display: none; }
  .awards-static { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 900px) { .awards-static { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .awards-static { grid-template-columns: 1fr; } }
  /* the information card appears without the flight */
  .awd-card__btn:hover .awd-card__stage img { transform: none; }
  .awd-card.is-source .awd-card__stage img { opacity: 1; }
}

/* =====================================================================
   September 2026 — content review, heritage motifs, background video,
   company-identity figure, contact dialog and welcome layer.
   ===================================================================== */

/* ---------- Heritage motifs -------------------------------------------
   Palembang songket (pucuk rebung) carries "where we are"; the Chinese
   key fret (回纹) carries "who we are with". Songket is the dominant
   texture; the red stays an accent — a hairline, a seal, one border —
   so the page still reads as an Indonesian company with a Chinese
   partner rather than the other way round. About page only. */
:root {
  --songket:  #C9A227;   /* songket gold */
  --sealred:  #C8102E;   /* Chinese red — accent only, never a field */
  --motif-songket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32' viewBox='0 0 60 32'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.15'%3E%3Cpath d='M1 31 L15 5 L29 31'/%3E%3Cpath d='M8 31 L15 18 L22 31'/%3E%3Cpath d='M31 31 L45 5 L59 31'/%3E%3Cpath d='M38 31 L45 18 L52 31'/%3E%3C/g%3E%3Cg fill='%23C9A227'%3E%3Ccircle cx='15' cy='2' r='1.5'/%3E%3Ccircle cx='45' cy='2' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --motif-fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M2 12 V4 H18 V10 H8 V7' fill='none' stroke='%23C8102E' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* About hero: the aerial photograph of the station does not end at a straight
   edge — it dissolves across the width of the page into a real songket
   Palembang cloth. Two photographs, one gradient: where the company works on
   the left, where it stands on the right. The navy scrim above both is what
   keeps the headline readable. */
.page-hero__weave {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center right;
  opacity: .96;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.55) 48%, #000 72%);
          mask-image: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.55) 48%, #000 72%);
  pointer-events: none;
}
/* Narrow screens read top-to-bottom, so the cloth becomes the ground the
   headline sits on rather than a column beside it. */
@media (max-width: 900px) {
  .page-hero__weave {
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 34%, rgba(0,0,0,.5) 58%, #000 84%);
            mask-image: linear-gradient(to bottom, transparent 34%, rgba(0,0,0,.5) 58%, #000 84%);
  }
}
/* Let more of the weave through on the songket side of the scrim. */
.page-hero--songket::after {
  background: linear-gradient(104deg, rgba(4,36,63,.95) 0%, rgba(4,36,63,.88) 38%, rgba(4,36,63,.46) 64%, rgba(4,36,63,.24) 100%);
}
@media (max-width: 900px) {
  .page-hero--songket::after {
    background: linear-gradient(to bottom, rgba(4,36,63,.95) 0%, rgba(4,36,63,.90) 58%, rgba(4,36,63,.62) 82%, rgba(4,36,63,.42) 100%);
  }
}

/* A band of the same cloth introduces the mascot section, who wear it. */
.section--heritage { position: relative; }
.section--heritage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 54px;
  background-image: url("../img/songket-colour-900.webp");
  background-repeat: repeat-x; background-position: center top; background-size: auto 108px;
  opacity: .30; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}

/* The two shareholder cards carry one motif each — the only place the two
   heritages are set side by side. */
/* The songket keeps the Palembang side of the shareholder pair. */
.ownerprofile { position: relative; }
.ownerprofile--b::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  border-radius: 2px; background: var(--songket); opacity: .85;
}

/* ---------- Background video -----------------------------------------
   The clip sits behind a dark section and fades in and out on a slow
   cycle, so the section is navy most of the time and film some of the
   time. Nothing is downloaded until main.js decides it is worthwhile. */
.section--video { position: relative; isolation: isolate; overflow: hidden; }
.section--video > .wrap { position: relative; z-index: 2; }
.secvid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.secvid__v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease, ease);
}
.secvid__v.is-showing { opacity: 1; }
/* A navy veil keeps every heading above it comfortably past AA contrast. */
.secvid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(6,41,74,.74) 0%, rgba(4,36,63,.80) 55%, rgba(2,26,48,.86) 100%);
}
@media (prefers-reduced-motion: reduce) { .secvid__v { transition: none; } }

/* A clip used as a hero slide plays once, then the slideshow moves on. */
.page-hero__bg--video { object-fit: cover; }

/* ---------- Purpose & vision statements ---------- */
.pv__statement {
  font-size: clamp(1.22rem, 2.2vw, 1.72rem); font-weight: 700; color: #fff;
  line-height: 1.32; margin-top: 6px; text-wrap: balance;
}

/* ---------- Mission spine ---------------------------------------------
   Six official statements of very different length in three languages —
   a spine holds that variation far better than a card grid. */
.mission { list-style: none; max-width: 820px; margin: 8px auto 0; padding: 0; position: relative; }
/* The spine is drawn per item, so it always starts at the first circle's centre
   and stops at the last one's — whatever the text length or language. A circle
   centre is item padding (20px) + half the circle (28px) = 48px. */
.mission__item::before {
  content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px;
  background: rgba(5,69,133,.20);
}
.mission__item:first-child::before { top: 48px; }
.mission__item:last-child::before  { bottom: auto; height: 48px; }
.mission__item {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start; padding: 20px 0;
}
.mission__item + .mission__item { border-top: 1px solid var(--line); }
.mission__n {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  font-size: .92rem; font-weight: 700; color: var(--navy);
  transition: border-color .3s var(--ease, ease), color .3s var(--ease, ease);
}
.mission__item:hover .mission__n { border-color: var(--sky); color: var(--sky); }
.mission__t { font-size: 1.06rem; line-height: 1.62; color: var(--ink); padding-top: 12px; }
@media (max-width: 620px) {
  .mission__item::before { left: 21px; }                       /* 44px circles: 20 + 22 */
  .mission__item:first-child::before { top: 42px; }
  .mission__item:last-child::before  { height: 42px; }
  .mission__item { grid-template-columns: 44px 1fr; gap: 15px; }
  .mission__n { width: 44px; height: 44px; font-size: .82rem; }
  .mission__t { font-size: .99rem; padding-top: 8px; }
}

/* ---------- Company identity figure ------------------------------------
   Drawn the way a designer annotates artwork: the lockup at true
   proportion, extent brackets over each component, an arrow into it, and
   the reasoning in numbered notes underneath. */
.idfig {
  margin: 8px auto 0; max-width: 860px; padding: 26px clamp(10px, 3vw, 30px) 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.idfig__svg { display: block; width: 100%; height: auto; }
.idfig__lead { fill: none; stroke: var(--slate-300); stroke-width: 1.3; stroke-linecap: round; }
.idfig__arrow { fill: var(--sky); }
.idfig__num {
  font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700;
  fill: var(--sky); letter-spacing: .08em;
}
.idfig__lbl { font-family: "Hanken Grotesk", sans-serif; font-size: 15.5px; font-weight: 700; fill: var(--ink); }
/* Draw the leader lines in as the figure arrives. */
@media (prefers-reduced-motion: no-preference) {
  .idfig__lead { stroke-dasharray: 620; stroke-dashoffset: 620; }
  .idfig.is-in .idfig__lead { animation: idDraw 1.1s var(--ease, ease) forwards; }
  .idfig.is-in [data-ann="2"] .idfig__lead { animation-delay: .16s; }
  .idfig.is-in [data-ann="3"] .idfig__lead { animation-delay: .32s; }
  .idfig__arrow, .idfig__num, .idfig__lbl { opacity: 0; }
  .idfig.is-in .idfig__arrow,
  .idfig.is-in .idfig__num,
  .idfig.is-in .idfig__lbl { animation: idFade .5s ease forwards; animation-delay: .75s; }
  .idfig.is-in [data-ann="2"] .idfig__arrow,
  .idfig.is-in [data-ann="2"] .idfig__num,
  .idfig.is-in [data-ann="2"] .idfig__lbl { animation-delay: .91s; }
  .idfig.is-in [data-ann="3"] .idfig__arrow,
  .idfig.is-in [data-ann="3"] .idfig__num,
  .idfig.is-in [data-ann="3"] .idfig__lbl { animation-delay: 1.07s; }
}
@keyframes idDraw { to { stroke-dashoffset: 0; } }
@keyframes idFade { to { opacity: 1; } }

.idnotes {
  list-style: none; padding: 0; margin: 34px auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.idnote { position: relative; padding-top: 18px; border-top: 2px solid var(--line); }
.idnote__n { display: block; font-size: .78rem; font-weight: 700; color: var(--sky); letter-spacing: .1em; margin-bottom: 8px; }
.idnote h3 { font-size: 1.04rem; margin-bottom: 8px; color: var(--ink); }
.idnote p { font-size: .93rem; line-height: 1.65; color: var(--slate); }
@media (max-width: 860px) { .idnotes { grid-template-columns: 1fr; gap: 22px; } }

.idcolours, .idvariants { max-width: 1000px; margin: 46px auto 0; }
.idcolours__h { font-size: 1.06rem; color: var(--ink); margin-bottom: 18px; }
.idcolours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.idswatch { display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: start; }
.idswatch__chip { width: 62px; height: 62px; border-radius: 12px; box-shadow: var(--sh-1); }
.idswatch__name { font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.idswatch__meaning { font-size: .93rem; line-height: 1.6; color: var(--slate); }
.idswatch__code { font-size: .78rem; color: var(--slate-300); margin-top: 7px; letter-spacing: .03em; }
.idcolours__note { margin-top: 22px; font-size: .93rem; line-height: 1.68; color: var(--slate); max-width: 78ch; }
.idcolours__note--fine { font-size: .82rem; color: var(--slate-300); }
@media (max-width: 760px) { .idcolours__grid { grid-template-columns: 1fr; gap: 20px; } }

.idvariants__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.idvar { text-align: center; }
.idvar__box {
  display: grid; place-items: center; height: 92px; padding: 0 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.idvar__box--dark { background: var(--navy-900); border-color: var(--navy-900); }
.idvar__box img { max-width: 100%; height: auto; }
.idvar figcaption { margin-top: 10px; font-size: .82rem; color: var(--slate); }
@media (max-width: 700px) { .idvariants__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Contact dialog ---------- */
.footer__cta { margin-bottom: 16px; }
.cdlg {
  position: fixed; inset: 0; margin: auto;
  border: 0; padding: 0; background: transparent;
  width: min(92vw, 560px); max-width: 560px;
  max-height: min(88vh, 760px); height: fit-content;
  border-radius: var(--r-lg); color: var(--ink); overflow: visible;
}
.cdlg::backdrop { background: rgba(4,36,63,.62); backdrop-filter: blur(6px); }
.cdlg__panel { position: absolute; top: 12px; right: 12px; z-index: 2; }
.cdlg__x {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--slate); cursor: pointer;
}
.cdlg__x:hover { color: var(--navy); border-color: var(--sky); }
.cdlg__body { background: #fff; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--sh-3); max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.cdlg__title { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; margin: 6px 0 8px; }
.cdlg__lede { color: var(--slate); font-size: .95rem; margin-bottom: 22px; }
.cdlg__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cdlg__field { margin-bottom: 14px; }
.cdlg__field label { display: block; font-size: .82rem; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.cdlg__field label span { color: var(--sealred); }
.cdlg__field input, .cdlg__field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color .2s, background .2s;
}
.cdlg__field input:focus, .cdlg__field textarea:focus {
  outline: none; border-color: var(--sky); background: #fff; box-shadow: 0 0 0 3px rgba(0,172,232,.14);
}
.cdlg__field textarea { resize: vertical; min-height: 118px; }
.cdlg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cdlg__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.cdlg__note { font-size: .78rem; color: var(--slate-300); max-width: 26ch; line-height: 1.45; }
.cdlg__status { min-height: 0; font-size: .88rem; margin: 4px 0 0; }
.cdlg__status.is-error { color: #B4232F; min-height: 1.4em; }
.cdlg__done { text-align: center; padding: 22px 0 8px; }
.cdlg__tick {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 50%; background: rgba(62,142,90,.12); color: var(--leaf-700);
}
.cdlg__done h3 { font-size: 1.2rem; margin-bottom: 6px; }
.cdlg__done p { color: var(--slate); font-size: .95rem; }

/* ---------- Welcome layer ---------------------------------------------
   A frosted pane over the homepage on the first visit of a session. The
   page underneath is fully rendered — this is a layer, not a gate, so
   search engines and readers with JavaScript off never meet it. */
.gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; background: rgba(4,36,63,.34);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  animation: gateIn .7s var(--ease, ease) both;
}
.gate.is-closing { animation: gateOut .6s var(--ease, ease) both; }
.gate__panel {
  position: relative; max-width: 660px; width: 100%; text-align: center;
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 58px);
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 30px 90px rgba(2,20,38,.42), inset 0 1px 0 rgba(255,255,255,.34);
  animation: gatePanel .9s var(--ease, ease) .1s both;
}
/* The faint grain that keeps large frosted panes from banding. */
.gate__panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 108px; pointer-events: none;
  opacity: .16; background-image: var(--motif-songket);
  background-repeat: repeat-x; background-position: bottom center; background-size: 60px 32px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 78%);
          mask-image: linear-gradient(to bottom, transparent, #000 78%);
}
.gate__logo { width: 168px; height: auto; margin: 0 auto 30px; display: block; opacity: .96; }
.gate__lines { position: relative; z-index: 1; }
.gate__line {
  font-size: clamp(1.06rem, 2.5vw, 1.36rem); font-weight: 600; line-height: 1.55;
  color: #fff; text-wrap: balance; margin: 0 0 6px; text-shadow: 0 1px 14px rgba(2,20,38,.4);
  animation: gateLine .8s var(--ease, ease) both;
}
.gate__line:nth-child(1) { animation-delay: .34s; }
.gate__line:nth-child(2) { animation-delay: .46s; }
.gate__line:nth-child(3) { animation-delay: .58s; }
.gate__rule {
  width: 46px; height: 2px; margin: 26px auto 18px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), rgba(255,255,255,.35));
  animation: gateLine .8s var(--ease, ease) .68s both;
}
.gate__sign {
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.74); margin-bottom: 32px;
  animation: gateLine .8s var(--ease, ease) .76s both;
}
.gate__btn {
  position: relative; z-index: 1;
  font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  color: #fff; padding: 14px 38px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .25s var(--ease, ease), border-color .25s, transform .25s;
  animation: gateLine .8s var(--ease, ease) .86s both;
}
.gate__btn:hover { background: rgba(255,255,255,.24); border-color: #fff; transform: translateY(-2px); }
.gate__btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
body.gate-open { overflow: hidden; }
@keyframes gateIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateOut  { to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes gatePanel{ from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gateLine { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gate, .gate__panel, .gate__line, .gate__rule, .gate__sign, .gate__btn { animation: none; }
  .gate.is-closing { opacity: 0; }
}
/* Browsers without backdrop-filter get a solid navy pane rather than a
   transparent one that would leave the text unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gate { background: rgba(4,36,63,.94); }
}

.hero__slide--video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- QHSE policy sheet -----------------------------------------
   Presented as the document it is — a signed policy — rather than as
   eight cards: a navy masthead, numbered commitments in two columns, and
   the signature block that gives it its authority. */
.policy {
  position: relative; max-width: 1000px; margin: 10px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.policy__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px clamp(22px, 4vw, 40px); background: var(--grad-dark); color: #fff;
}
.policy__eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sky-300); margin-bottom: 6px; }
.policy__title { font-size: clamp(1.08rem, 2.2vw, 1.35rem); font-weight: 700; }
.policy__seal {
  flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.34); background: rgba(255,255,255,.08);
  font-family: "Space Grotesk", monospace; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--sky-300);
}
.policy__intro {
  padding: 26px clamp(22px, 4vw, 40px) 4px; font-weight: 700; color: var(--ink);
  font-size: 1rem; max-width: 62ch;
}
.policy__list {
  list-style: none; padding: 18px clamp(22px, 4vw, 40px) 6px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px;
}
.policy__list li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px solid var(--line);
}
.policy__list li:nth-child(1), .policy__list li:nth-child(2) { border-top: 0; }
.policy__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--paper-2); color: var(--navy); font-size: .82rem; font-weight: 700;
}
.policy__list p { font-size: .92rem; line-height: 1.62; color: var(--slate); }
.policy__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 24px clamp(22px, 4vw, 40px) 28px; margin-top: 12px;
  border-top: 1px solid var(--line); background: var(--paper);
}
.policy__note { font-size: .85rem; line-height: 1.6; color: var(--slate); max-width: 52ch; }
.policy__sign { text-align: right; }
.policy__place { font-size: .8rem; color: var(--slate); margin-bottom: 10px; }
.policy__who { font-weight: 700; color: var(--ink); border-top: 1px solid var(--slate-300); padding-top: 8px; display: inline-block; }
.policy__role { font-size: .8rem; color: var(--slate); }
.policy__dl { margin: 0 clamp(22px, 4vw, 40px) 30px; display: inline-flex; gap: 9px; align-items: center; }
@media (max-width: 820px) {
  .policy__list { grid-template-columns: 1fr; gap: 0; }
  .policy__list li:nth-child(2) { border-top: 1px solid var(--line); }
  .policy__foot { flex-direction: column; align-items: flex-start; }
  .policy__sign { text-align: left; }
}

/* The contact card that carries the dialog rather than an address. */
.contact-card--action { display: flex; flex-direction: column; align-items: flex-start; }
.contact-card--action .btn { margin-top: auto; align-self: flex-start; }
.contact-card--action p { margin-bottom: 18px; }

.idfig__dim { font-family: "Space Grotesk", monospace; font-size: 10.5px; fill: var(--slate-300); letter-spacing: .06em; }

/* An award whose trophy photo we do not have yet: a typographic plate rather
   than an empty frame, so the grid reads as designed instead of unfinished. */
.awd-card--noimg .awd-card__stage {
  background: linear-gradient(165deg, #fff 0%, var(--paper) 100%);
}
.awd-card__plate {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 14px;
  justify-items: center; pointer-events: none;
}
.awd-card__plate-yr {
  font-family: "Space Grotesk", monospace; font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--navy);
  opacity: .13; line-height: 1;
}
.awd-card__plate-rule {
  width: 42px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), rgba(5,69,133,.25));
  opacity: .7;
}

/* An inline button that reads as a link, used where a sentence used to end in
   an email address and now opens the contact dialog instead. */
.linklike {
  font: inherit; color: var(--navy); font-weight: 700; cursor: pointer;
  background: none; border: 0; padding: 0;
  border-bottom: 1px solid rgba(5,69,133,.35); transition: border-color .2s, color .2s;
}
.linklike:hover { color: var(--sky); border-bottom-color: var(--sky); }
.section--dark .linklike, .footer .linklike { color: var(--sky-300); border-bottom-color: rgba(91,200,240,.4); }

/* ---------- Procurement: tabs, filter, pager --------------------------------
   Several hundred rows migrated from the previous site, so the list is split
   by kind, searchable, and paged on the server. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.proc__ghost { color: var(--navy); border-color: rgba(5,69,133,.3); background: #fff; }
.proc__ghost:hover { color: var(--navy); border-color: var(--navy); background: var(--paper); }
.proc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 22px; padding: 5px; background: var(--paper-2); border-radius: 999px; width: fit-content; max-width: 100%; }
.proc-tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--slate); transition: background .2s var(--ease), color .2s var(--ease); }
.proc-tab:hover { color: var(--navy); }
.proc-tab.is-active { background: #fff; color: var(--navy-900); box-shadow: var(--sh-1); }
.proc-tab__n { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(5,69,133,.08); color: var(--navy); }
.proc-tab.is-active .proc-tab__n { background: var(--navy); color: #fff; }
.proc-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.proc-filter__search { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.proc-filter__search svg { position: absolute; left: 14px; color: var(--slate-300); pointer-events: none; }
.proc-filter input[type=search], .proc-filter select {
  font: inherit; font-size: .94rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; height: 46px;
}
.proc-filter input[type=search] { width: 100%; padding-left: 42px; }
.proc-filter input:focus, .proc-filter select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0,172,232,.14); }
.proc-filter .btn { height: 46px; }
.proc-filter__reset { font-size: .88rem; font-weight: 600; color: var(--navy); border-bottom: 1px solid rgba(5,69,133,.3); }
.proc-count { font-size: .8rem; color: var(--slate); margin: 4px 0 16px; letter-spacing: .02em; }
.proc-empty { padding: 36px; text-align: center; color: var(--slate); background: var(--paper); border-radius: var(--r-lg); }
.tender__count { font-size: .74rem; color: var(--slate); }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 30px; }
.pager__n, .pager__btn { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--slate); border: 1px solid var(--line); background: #fff; transition: border-color .2s, color .2s; }
.pager__n:hover, .pager__btn:hover { border-color: var(--sky); color: var(--navy); }
.pager__n.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager__gap { color: var(--slate-300); padding: 0 4px; }
@media (max-width: 640px) {
  .proc-tabs { border-radius: var(--r); width: 100%; }
  .proc-tab { flex: 1 1 auto; justify-content: center; padding: 9px 12px; font-size: .86rem; }
}

/* Procurement detail: every document attached to a tender, one row each. */
.docs__h { font-size: 1.05rem; margin-bottom: 12px; color: var(--ink); }
.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.doc:hover { border-color: var(--sky); box-shadow: var(--sh-1); }
.doc__ext { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--navy); background: var(--paper-2); padding: 5px 9px; border-radius: 6px; }
.doc__label { font-weight: 600; font-size: .95rem; line-height: 1.45; }
.doc__dl { color: var(--sky); }
.news-more { text-align: center; margin-top: 34px; }

/* ---------- Gallery ---------- */
.news-gallery-link { margin: -6px 0 18px; }
.gal { columns: 3 280px; column-gap: 16px; }
.gal__item {
  position: relative; display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0;
  border-radius: var(--r); overflow: hidden; cursor: zoom-in; background: var(--paper-2);
  break-inside: avoid; box-shadow: var(--sh-1);
}
.gal__item img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.gal__item:hover img { transform: scale(1.035); }
.gal__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; text-align: left;
  font-size: .82rem; font-weight: 600; line-height: 1.4; color: #fff;
  background: linear-gradient(to top, rgba(2,20,38,.82), transparent);
}
.lbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lbox::backdrop { background: rgba(2,14,28,.92); }
.lbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lbox__fig { margin: 0; text-align: center; }
.lbox__fig img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.lbox__fig figcaption { color: #dce8f4; font-size: .92rem; margin-top: 12px; min-height: 1.2em; }
.lbox__nav, .lbox__x { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; cursor: pointer; justify-self: center; }
.lbox__nav:hover, .lbox__x:hover { background: rgba(255,255,255,.2); }
.lbox__x { position: fixed; top: 18px; right: 18px; font-size: 1.5rem; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.vid__frame, .vid__iframe {
  display: grid; place-items: center; position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--r); overflow: hidden; cursor: pointer; padding: 0;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 100%);
}
.vid__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.vid__play {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--navy); background: #fff; box-shadow: 0 10px 30px rgba(2,20,38,.35); transition: transform .25s var(--ease);
}
.vid__play svg { margin-left: 4px; }
.vid__frame:hover .vid__play { transform: scale(1.08); }
.vid__title { font-size: 1rem; margin-top: 12px; color: var(--ink); line-height: 1.4; }
.vids__note { margin-top: 22px; font-size: .84rem; color: var(--slate); }
@media (max-width: 640px) { .lbox[open] { grid-template-columns: 44px 1fr 44px; } .lbox__nav { width: 38px; height: 38px; } }

/* Procurement results: the winning bidder, on the list and on the detail page. */
.tender__winner { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.tender__winner span { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf-700); background: rgba(62,142,90,.12); padding: 4px 9px; border-radius: 999px; margin-right: 8px; }
.winner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 26px; padding: 20px 22px; border: 1px solid rgba(62,142,90,.3); border-radius: var(--r); background: rgba(62,142,90,.06); }
.winner dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf-700); margin-bottom: 4px; }
.winner dd { font-size: 1.08rem; font-weight: 700; color: var(--ink); }

/* ===== In-section slideshow (media_img) =====
   The first photo stays in the flow and gives the place its size; the rest
   are stacked over it and crossfade. A band's slides fill it like its photo did. */
.mslides { position: relative; }
.mslides--fill { position: absolute; inset: 0; }
.news-feature__media .mslides { height: 100%; }
.mslides > .mslides__i { transition: opacity 1.1s var(--ease); }
.mslides > .mslides__i:not(:first-child) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mslides > .mslides__i:not(.is-active) { opacity: 0; }
.mslides video.mslides__i { background: var(--navy-900); }
@media (prefers-reduced-motion: reduce) { .mslides > .mslides__i { transition: none; } }

/* ===== 06 Company values =====
   The six values came from the review as a word plus an explanation. They were
   rendered with no styling at all; this gives each one the same card language
   the rest of the page uses, with the value word carrying the weight. */
.vbig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.vbig__item {
  position: relative; overflow: hidden; padding: 26px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vbig__item::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.vbig__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.vbig__item:hover::before { transform: scaleX(1); }
.vbig__word { font-size: 1.18rem; color: var(--navy-900); margin: 0 0 8px; line-height: 1.25; }
.vbig__item p { color: var(--slate); font-size: .93rem; line-height: 1.68; }
@media (max-width: 900px) { .vbig { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .vbig { grid-template-columns: 1fr; } }