/* ==========================================================================
   PEKEMA — Persatuan Pengimpot & Peniaga Kenderaan Melayu Malaysia
   Design system. Single stylesheet, no build step.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  /* brand */
  --gold-700: #a86f00;
  --gold-600: #c98600;
  --gold-500: #e09900;
  --gold-400: #ffb400;
  --gold-100: #fff2d6;
  --gold-050: #fffaf0;

  --ink-900: #16171a;
  --ink-800: #1f2024;
  --ink-700: #2a2a2e;
  --ink-600: #3d3f45;
  --ink-500: #5a5d66;
  --ink-400: #7c8089;
  --ink-300: #a8acb4;
  --ink-200: #d5d8dd;
  --ink-100: #e9ebef;
  --ink-050: #f5f6f8;
  --paper:   #ffffff;

  --ok:   #1f7a4d;
  --warn: #b7791f;

  /* type */
  /* 2026 refresh (the aha.com.au reference): a bookish serif for headings,
     a humanist sans for everything else */
  --font-display: "Newsreader", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --font-body: "Inclusive Sans", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --step-1:  clamp(1.13rem, 1.06rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.25rem + 0.75vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.45vw, 2.60rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.70vw, 3.75rem);

  /* space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.06), 0 1px 3px rgba(16, 18, 22, 0.04);
  --shadow:    0 4px 6px -1px rgba(16, 18, 22, 0.07), 0 2px 4px -2px rgba(16, 18, 22, 0.05);
  --shadow-lg: 0 18px 35px -12px rgba(16, 18, 22, 0.22), 0 6px 14px -6px rgba(16, 18, 22, 0.10);

  --container: 1200px;
  --container-wide: 1440px;
  --header-h: 80px;

  /* navy carries the page (AHA's blue); gold stays the accent */
  --navy-950: #050b20;
  --navy-900: #0b1530;
  --navy-800: #16213e;
  --navy-700: #26314f;
  --navy-050: #eef1fb;
  --wash: #f6f6f4;
  --font-header: var(--font-body);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* the off-canvas drawer parks itself past the right edge; clip (not hidden)
     so it never adds a horizontal scrollbar while keeping position:sticky working */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
sub, sup { font-size: max(0.75em, 0.75rem); } /* footnote marks keep the 12px floor */
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

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

::selection { background: var(--gold-100); color: var(--ink-900); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--ink-900); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

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

/* --- layout ------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2.5rem, var(--container-wide)); }
.container--narrow { width: min(100% - 2.5rem, 760px); }

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--ink { background: var(--ink-900); color: var(--ink-200); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--muted { background: var(--ink-050); }
.section--gold { background: linear-gradient(135deg, var(--gold-050), var(--gold-100)); }

.stack > * + * { margin-top: var(--sp-4); }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* asymmetric image + copy pair; stacks before the tracks would overflow */
.split { display: grid; gap: var(--sp-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .split { grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1.4fr); } }

/* --- section heading ---------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--gold-500); border-radius: 2px;
}
.section--ink .eyebrow { color: var(--gold-400); }

.section-head { max-width: 66ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { color: var(--ink-500); font-size: var(--step-1); }
.section--ink .section-head p { color: var(--ink-300); }

/* --- buttons ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.8em 1.7em;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.25;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.06s; }
.btn svg { flex: none; }

.btn--primary {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--ink-900); border-color: var(--gold-500);
  box-shadow: 0 1px 2px rgba(160, 110, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 16px -4px rgba(200, 134, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:active { box-shadow: 0 1px 2px rgba(160, 110, 0, 0.25); filter: none; }
/* the default gold focus ring vanishes on a gold button */
.btn--primary:focus-visible { outline-color: var(--ink-900); }

.btn--dark { background: var(--ink-900); color: #fff; border-color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); box-shadow: var(--shadow); }

.btn--ghost { border-color: var(--ink-300); color: var(--ink-900); background: transparent; }
.btn--ghost:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); box-shadow: var(--shadow-sm); }
.section--ink .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover { background: #fff; color: var(--ink-900); border-color: #fff; }
.cta-band .btn--ghost { border-color: rgba(22, 23, 26, 0.45); }

.btn--sm { padding: 0.55em 1.15em; font-size: var(--step--1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 480px) { .btn { white-space: normal; } }
/* prev/next article links carry long titles — always allow wrapping */
[data-article-more] .btn { white-space: normal; }

/* --- header / nav ------------------------------------------------------- */
/* One flat white row: brand left with the nav beside it, search + CTAs right.
   The dark contact strip that used to sit above this lives in the footer. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-100);
  transition: box-shadow 0.2s var(--ease);
}
/* The aha.com.au header: it floats over every page's navy hero with white,
   uppercase, letter-spaced links, and becomes a compact navy glass bar once
   the page scrolls (pekema.js sets .is-stuck). Every page opens on a navy
   hero, so white text always has a dark ground; the contact page, which
   opens on a photo and a light panel, keeps the navy bar from the start. */
.site-header {
  position: fixed; left: 0; right: 0; font-family: var(--font-header);
  background: transparent; border-bottom-color: transparent;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header.is-stuck,
body:has(main > .hero-split:first-child) .site-header {
  background: rgba(5, 11, 32, 0.9); border-bottom-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.site-header .brand__name { color: #fff; }
.site-header .brand__tag { color: rgba(255, 255, 255, 0.6); }
.site-header .nav__toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header .nav__toggle span,
.site-header .nav__toggle span::before,
.site-header .nav__toggle span::after { background: #fff; }
.site-header .nav__toggle[aria-expanded="true"] span { background: transparent; }
.site-header .nav__search { color: rgba(255, 255, 255, 0.85); }
.site-header .nav__search:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* seven top-level items plus search and two CTAs need more than the 1200px
   body container — the header gets the wide one */
.site-header > .container { width: min(100% - 2.5rem, var(--container-wide)); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--header-h); flex-wrap: nowrap;
}
/* shrinkable so the tagline ellipsises instead of shoving the search button
   and hamburger off the right edge on narrow screens */
.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 0 1 auto; }
.brand img { height: 56px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name { font-family: var(--font-header); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--ink-900); }
.brand__tag {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the tagline is a full sentence — it only earns its place on a wide row */
@media (max-width: 700px) { .brand__tag { display: none; } }
.nav__primary { min-width: 0; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  font-family: var(--font-header); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-950);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color 0.15s var(--ease);
}
/* colour-only states — no pill, no underline, matching the reference header */
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--gold-700); }
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link { color: var(--gold-600); }
.nav__link .chev { width: 11px; height: 11px; stroke-width: 1.7; transition: transform 0.2s var(--ease); }
.nav__item.is-open > .nav__link .chev { transform: rotate(180deg); }

/* Eight top-level items plus search, the language switch and two CTAs is more
   than one row can hold. Shed in order of least value: the tagline, then the
   wordmark (the mark alone still reads as PEKEMA), then the secondary CTA —
   so the row never wraps or collides.

   These rules have to sit after the ones they override, not before: a media
   query adds no specificity, so the earlier placement lost to the base
   .nav__link every time and the tightening never actually took effect.

   The header caps at 1440px and eight items at the full type scale want 1002px
   of it; add the wordmark and both CTAs and the row needs 1599px, which no
   screen can give. So the tighter scale is the inline nav's scale throughout.

   The BM/EN switch (~80px) joined a row that was already spent to the last
   pixel, so the budget moved with it: the inline nav starts at 1300px instead
   of 1240px, the wordmark's 107px pays for the switch permanently (logo-only
   branding on the inline row), and the secondary CTA returns at 1470px. The
   1240px figures in pekema.js (DESKTOP) and the drawer block below track the
   same 1300px line — change one, change all.

   Since then the row has given back more than it took: the switch and the
   CADB item both moved to the corner dock, leaving six top-level items and
   no switch. The 1300px line is kept anyway — it is now conservative rather
   than tight, and pekema.js and the drawer block are pinned to it. */
@media (min-width: 1300px) {
  .brand__tag { display: none; }
  .brand__text { display: none; }
  .nav__link { font-size: 0.78rem; padding-inline: 0.7rem; gap: 0.35em; }
  .nav__list { gap: 0; }
  .nav__list > .nav__item > .nav__link { color: #fff; }
  .nav__list > .nav__item > .nav__link:hover,
  .nav__list > .nav__item.is-open > .nav__link { color: var(--gold-400); }
  /* the menu sits beside the mark, not centred in the row: the auto margin
     takes the slack that space-between would otherwise split either side */
  .nav__primary { margin-right: auto; }
}
/* the secondary CTA costs 162px — it returns only once the row has that much
   to spare over the switch */
@media (min-width: 1300px) and (max-width: 1469px) { .nav__portal { display: none; } }

.nav__item { position: relative; }
/* The menu hangs from the header's bottom edge, not from the middle of the row,
   and lines its first entry up with the trigger's text. The trigger sits centred
   in the row, so the header edge is half the row below the trigger's middle. */
.nav__menu {
  position: absolute; top: calc(50% + var(--header-h) / 2 + 6px); left: 0; z-index: 60;
  min-width: 240px; padding: var(--sp-2);
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav__item.is-open > .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* the gap down to the menu is hover-closed by pekema.js on mouseleave, so the
   pointer needs a bridge across it */
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--header-h) / 2); }
/* With the row beside the mark, every menu opens under its own trigger. (The
   right anchor for the last two belonged to the centred row; beside the mark
   it would throw them back over the logo.) Only Media's month flyouts can
   still run past the right edge: at 1300px they end 85px beyond it, so the
   last item's flyouts open leftwards over its own menu's side. */
@media (min-width: 1300px) {
  .nav__item:last-child .nav__submenu { left: auto; right: calc(100% + var(--sp-3)); transform: translateX(6px); }
  .nav__item:last-child .nav__menu > li:has(.nav__submenu)::after { left: auto; right: 100%; }
}
.nav__menu a {
  display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-600); white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__menu a:hover { background: var(--gold-050); color: var(--gold-700); }
.nav__menu a[aria-current="page"] { color: var(--gold-700); background: var(--gold-050); }
.nav__menu .nav__menu-label {
  padding: 0.65rem 0.75rem 0.25rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600);
}
.nav__menu .nav__menu-label:not(:first-child) { border-top: 1px solid var(--ink-050); margin-top: 0.35rem; }

/* --- second-level flyout ------------------------------------------------- */
/* Mirrors the source menu, where "Senarai Pembekal PEKEMA" and each Media
   month are themselves openable rather than inert headings. */
.nav__menu > li { position: relative; }
.nav__subtoggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 0.6rem 0.75rem; border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--ink-600);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__subtoggle .chev { width: 12px; height: 12px; flex: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.nav__menu > li:hover > .nav__subtoggle,
.nav__menu > li:focus-within > .nav__subtoggle,
.nav__menu > li.is-open > .nav__subtoggle { background: var(--gold-050); color: var(--gold-700); }

.nav__submenu {
  position: absolute; top: calc(-1 * var(--sp-3)); left: calc(100% + var(--sp-3));
  z-index: 70; min-width: 300px; padding: var(--sp-3);
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
/* bridge the gap so the pointer can travel into the flyout without it closing */
.nav__menu > li:has(.nav__submenu)::after {
  content: ""; position: absolute; top: 0; left: 100%; width: var(--sp-3); height: 100%;
}
.nav__menu > li:hover > .nav__submenu,
.nav__menu > li:focus-within > .nav__submenu,
.nav__menu > li.is-open > .nav__submenu { opacity: 1; visibility: visible; transform: none; }
.nav__menu--tall { max-height: min(66vh, 560px); overflow-y: auto; min-width: 340px; overscroll-behavior: contain; }

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
/* --- header action buttons ----------------------------------------------- */
/* Pill-shaped and uppercase so they read as deliberate controls next to the
   uppercase nav, rather than as generic body-copy buttons. */
.nav__actions .btn {
  padding: 0.6rem 1.2rem; border-radius: 999px;
  font-family: var(--font-header); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.site-header .btn--primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.site-header .btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.site-header .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy-950); }
.nav__actions .btn svg { transition: transform 0.2s var(--ease); }

.nav__portal {
  border-color: var(--ink-200); color: var(--ink-700); background: var(--paper);
}
.nav__portal:hover {
  background: var(--ink-900); color: #fff; border-color: var(--ink-900);
  box-shadow: 0 6px 16px -6px rgba(16, 18, 22, 0.45);
}
.nav__portal:hover svg { transform: translate(2px, -2px); }

/* a soft gold halo lifts the primary action off the white bar */
.nav__cta { box-shadow: none; }
.nav__cta:hover { box-shadow: 0 8px 20px -6px rgba(200, 134, 0, 0.55); }
.nav__cta:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nav__actions .btn svg { transition: none; } }

/* --- sign-in doors --------------------------------------------------------- */
/* One "Log Masuk" button, two doors: buyers track their purchase on
   /pembeli/log-masuk, members (importers, AP holders) use the Member Portal.
   Opens on hover or focus on desktop and on click (pekema.js); the drawer
   shows both doors as plain buttons instead. */
.nav__login { position: relative; }
.nav__login .nav__cta .chev { transition: transform 0.2s var(--ease); }
.nav__login:hover .nav__cta svg,
.nav__login .nav__cta:hover svg { transform: none; }
.nav__login.is-open .nav__cta .chev { transform: rotate(180deg); }
.nav__login-menu {
  position: absolute; top: 100%; right: 0; z-index: 60;
  width: 320px; padding: var(--sp-2);
  margin-top: 10px;
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
/* bridges the 10px gap so the pointer can travel from button to menu */
.nav__login-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__login:focus-within .nav__login-menu,
.nav__login.is-open .nav__login-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .nav__login:hover .nav__login-menu { opacity: 1; visibility: visible; transform: none; } }
.nav__door {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 0.75rem 0.8rem; border-radius: calc(var(--radius) - 4px);
  color: var(--ink-900); text-decoration: none;
}
.nav__door + .nav__door { margin-top: 2px; }
.nav__door:hover, .nav__door:focus-visible { background: var(--gold-050); }
.nav__door-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 999px; background: var(--gold-050); color: var(--gold-700);
}
.nav__door:hover .nav__door-icon { background: var(--paper); }
.nav__door--member .nav__door-icon { border-radius: 8px; background: var(--ink-900); color: #fff; }
.nav__door--member:hover { background: var(--ink-050); }
.nav__door--member:hover .nav__door-icon { background: var(--ink-900); }
.nav__door-text { display: grid; gap: 2px; text-align: left; }
.nav__door-text strong { font-size: 0.9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.nav__door-text small { font-size: 0.78rem; line-height: 1.35; color: var(--ink-500); }
@media (prefers-reduced-motion: reduce) { .nav__login-menu, .nav__login .nav__cta .chev { transition: none; } }
.nav__search {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--ink-500);
  cursor: pointer; flex: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.nav__search:hover { color: var(--ink-900); background: var(--ink-050); }

/* --- language switch ------------------------------------------------------ */
/* While a translated dictionary (EN, JA) loads, the page holds blank rather
   than flashing BM; i18n.js lifts the class as soon as the swap lands (1.5s
   failsafe). */
html.i18n-pending body { visibility: hidden; }

.lang-switch {
  display: flex; align-items: center; gap: 1px; flex: none;
  padding: 2px; border: 1px solid var(--ink-200); border-radius: 999px;
  background: var(--paper);
}
.lang-switch button,
.lang-switch a {
  appearance: none; border: 0; background: none; cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.2;
  padding: 0.26rem 0.5rem; border-radius: 999px;
  font-family: inherit; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-400);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.lang-switch button:hover,
.lang-switch a:hover { color: var(--ink-900); }
.lang-switch button[aria-pressed="true"],
.lang-switch a[aria-pressed="true"] {
  background: var(--ink-900); color: #fff; cursor: default;
}

/* --- corner dock ---------------------------------------------------------
   The Dongfeng link and the language switch both live in the bottom-right
   corner rather than in the header, so they stay reachable the whole way
   down a long page. A flex column stacks them — Dongfeng on top, switch
   below — so neither needs to know the other's height. The dock sits under
   the drawer scrim (z 80) so the mobile menu still covers it, and clears
   the iOS home indicator. */
.corner-dock {
  position: fixed; z-index: 75;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
}
.corner-dock__logo {
  display: grid; place-items: center; padding: 7px 11px;
  background: var(--paper); border: 1px solid var(--ink-200);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.corner-dock__logo:hover { transform: translateY(-2px); border-color: var(--ink-300); }
.corner-dock__logo img { display: block; height: 34px; width: auto; }

/* the switch keeps its pill styling; the dock owns where it sits */
.lang-switch--floating { padding: 3px; box-shadow: var(--shadow-lg); }
.lang-switch--floating button,
.lang-switch--floating a { padding: 0.4rem 0.7rem; font-size: 0.75rem; }

@media (max-width: 720px) {
  .corner-dock {
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .corner-dock__logo { padding: 6px 9px; }
  .corner-dock__logo img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .corner-dock__logo { transition: none; } }
@media print { .corner-dock { display: none; } }

.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  cursor: pointer; place-items: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink-800); border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.15s var(--ease);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1299px) {
  .nav__toggle { display: grid; }
  /* The drawer stays inside the viewport when closed and hides via opacity +
     a vertical nudge. Parking it at translateX(100%) would sit past the right
     edge, and a position:fixed box is laid out against the viewport — the root's
     overflow-x can't clip it, so it would add a horizontal scrollbar site-wide. */
  .nav__primary {
    position: fixed; inset: calc(var(--header-h)) 0 0 auto; z-index: 90;
    width: min(400px, 88vw); padding: var(--sp-5) var(--sp-5) var(--sp-8);
    background: var(--paper); border-left: 1px solid var(--ink-100);
    box-shadow: var(--shadow-lg); overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav__primary.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  /* action buttons live inside the drawer on small screens; search stays in
     the bar because it is the quickest way into the directories */
  .nav__drawer-cta {
    display: grid; gap: var(--sp-3); margin-top: var(--sp-5);
    padding-top: var(--sp-5); border-top: 1px solid var(--ink-100);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; flex-wrap: wrap; }
  /* the drawer is narrow — long labels wrap here rather than overflow */
  .nav__link { width: 100%; justify-content: space-between; padding: 0.85rem 0.75rem; font-size: 0.9rem; white-space: normal; text-align: left; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--gold-100);
    border-radius: 0; margin: 2px 0 var(--sp-3) var(--sp-4); padding: 0 0 0 var(--sp-3);
    min-width: 0; display: none;
  }
  .nav__item.is-open > .nav__menu { display: block; }
  .nav__menu::before { display: none; }
  .nav__menu a { white-space: normal; }
  .nav__actions .btn { display: none; }
  /* second level indents inline in the drawer rather than flying out */
  .nav__submenu {
    position: static; opacity: 1; visibility: hidden; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--ink-100);
    border-radius: 0; min-width: 0; padding: 0 0 0 var(--sp-3);
    margin: 2px 0 var(--sp-2) var(--sp-3); display: none;
  }
  .nav__menu > li.is-open > .nav__submenu { display: block; visibility: visible; }
  /* hover must not open anything on touch — the toggle button drives it */
  .nav__menu > li:hover > .nav__submenu,
  .nav__menu > li:focus-within > .nav__submenu { display: none; }
  /* 90deg, not 180: the glyph points right, so a half turn would point it left
     rather than down */
  .nav__menu > li.is-open > .nav__subtoggle .chev { transform: rotate(90deg); }
  .nav__menu > li:has(.nav__submenu)::after { display: none; }
}

/* drawer CTA only exists inside the drawer — hidden while nav is inline */
@media (min-width: 1300px) { .nav__drawer-cta { display: none; } }

.nav__scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(16, 18, 22, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }

/* --- site search overlay ------------------------------------------------ */
.search { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.search.is-open { visibility: visible; }
.search__scrim {
  position: absolute; inset: 0; background: rgba(16, 18, 22, 0.45);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.search.is-open .search__scrim { opacity: 1; }
.search__panel {
  position: relative; display: flex; flex-direction: column;
  width: min(720px, 94vw); max-height: min(76vh, 660px);
  margin: min(8vh, 80px) auto 0;
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; transform: translateY(-10px) scale(0.985);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.search.is-open .search__panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .search__scrim, .search__panel { transition: none; }
}

.search__field {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-100);
  flex: none;
}
.search__field svg { color: var(--ink-400); flex: none; }
.search__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-900);
}
.search__input::placeholder { color: var(--ink-300); }
/* the platform clear button duplicates the ESC button next to it */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--radius-sm); background: var(--ink-050);
  color: var(--ink-500); cursor: pointer; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 0 0.5rem; min-width: 32px;
}
.search__close:hover { background: var(--ink-100); color: var(--ink-900); }

.search__results { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) 0 var(--sp-3); }
.search__group-label {
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600);
}
.search__hit {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 0.55rem var(--sp-5); color: var(--ink-700);
  border-left: 2px solid transparent;
}
.search__hit:hover, .search__hit.is-cursor {
  background: var(--gold-050); border-left-color: var(--gold-500); color: var(--ink-900);
}
.search__hit-title { font-weight: 600; font-size: 0.92rem; }
.search__hit-title mark { background: var(--gold-100); color: inherit; border-radius: 2px; padding: 0 1px; }
.search__hit-meta {
  font-size: 0.76rem; color: var(--ink-400); margin-left: auto; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.search__empty, .search__hint {
  padding: var(--sp-6) var(--sp-5); text-align: center;
  color: var(--ink-400); font-size: 0.9rem;
}
.search__foot {
  flex: none; display: flex; gap: var(--sp-4); justify-content: flex-end;
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--ink-100);
  background: var(--ink-050); font-size: 0.75rem; color: var(--ink-400);
}
.search__foot kbd {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  background: var(--paper); border: 1px solid var(--ink-200); border-bottom-width: 2px;
  border-radius: 4px; padding: 0.1rem 0.35rem; color: var(--ink-600);
}
@media (max-width: 640px) {
  .search__panel { margin-top: 0; width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .search__foot { display: none; }
  .search__hit { flex-direction: column; gap: 0.1rem; }
  .search__hit-meta { margin-left: 0; max-width: 100%; text-align: left; }
}

/* --- hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(16,18,22,0.72), rgba(16,18,22,0.90) 60%),
    linear-gradient(180deg, rgba(16,18,22,0.55), rgba(16,18,22,0.92));
}
.hero__inner { padding-block: clamp(4.5rem, 11vw, 9rem); max-width: 62ch; }
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero__lede { font-size: var(--step-1); color: rgba(255,255,255,0.86); margin-bottom: var(--sp-6); }
.hero__reg {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.4rem 0.9rem; margin-bottom: var(--sp-5);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-400); background: rgba(255,255,255,0.05);
}

/* compact page hero for interior pages */
.pagehero { position: relative; isolation: isolate; color: #fff; background: var(--ink-900); overflow: hidden; }
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.30;
  background-image: url("../img/hero-showroom.jpg");
  background-size: cover; background-position: center;
}
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(16,18,22,0.94) 35%, rgba(16,18,22,0.62));
}
.pagehero__inner { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.pagehero h1 { color: #fff; margin-bottom: var(--sp-3); }
.pagehero h1::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: var(--sp-4);
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: 2px;
}
.pagehero p { color: rgba(255,255,255,0.80); max-width: 62ch; font-size: var(--step-1); margin: 0; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  font-size: var(--step--1); color: rgba(255,255,255,0.62);
}
.breadcrumb a { color: rgba(255,255,255,0.82); padding-block: 5px; } /* a 24px tap area without moving the line */
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: rgba(255,255,255,0.35); }

/* --- stats -------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px; background: var(--ink-100); border: 1px solid var(--ink-100);
  border-radius: var(--radius); overflow: hidden;
}
.section--ink .stats { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.10); }
.stat { background: var(--paper); padding: var(--sp-6) var(--sp-5); text-align: center; }
.section--ink .stat { background: var(--ink-900); }
.stat__num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  color: var(--gold-600); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.section--ink .stat__num { color: var(--gold-400); }
.stat__label {
  margin-top: var(--sp-2); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
}
.section--ink .stat__label { color: var(--ink-300); }

/* --- cards -------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ink-200); }
.card__media { aspect-ratio: 16 / 10; background: var(--ink-050); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.04); }
.card__media--placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-600));
}
.card__media--placeholder img { width: 46%; height: auto; object-fit: contain; opacity: 0.55; }
.card__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center;
  font-size: var(--step--1); color: var(--ink-400); font-weight: 500;
}
.card__title { font-size: var(--step-1); margin: 0; }
.card--link:hover .card__title { color: var(--gold-700); }
.card__text { color: var(--ink-500); font-size: 0.95rem; margin: 0; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

.tag {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--gold-050); border: 1px solid var(--gold-100);
  color: var(--gold-700); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tag--ink { background: var(--ink-050); border-color: var(--ink-100); color: var(--ink-500); }

/* compact spec grid used on vehicle cards */
.spec-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--ink-100);
}
.spec-row div { display: grid; gap: 2px; }
.spec-row dt {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400);
}
.spec-row dd {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  color: var(--ink-800); font-size: 0.95rem; font-variant-numeric: tabular-nums;
}

/* feature card with icon */
.feature { padding: var(--sp-6); border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper); height: 100%; }
.feature__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--sp-4);
  border-radius: var(--radius-sm); background: var(--gold-050); color: var(--gold-600);
  border: 1px solid var(--gold-100);
}
.feature h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.feature p { color: var(--ink-500); font-size: 0.95rem; margin: 0; }

/* --- people ------------------------------------------------------------- */
.person { text-align: center; display: block; }
.person__photo {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--ink-050); border: 1px solid var(--ink-100); margin-bottom: var(--sp-4);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.35s var(--ease);
}
a.person:hover .person__photo { border-color: var(--gold-400); box-shadow: var(--shadow); }
a.person:hover .person__photo img { transform: scale(1.04); }
a.person:hover .person__name { color: var(--gold-700); }
.person__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink-900); line-height: 1.3; margin-bottom: var(--sp-1); }
.person__role { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-600); margin-bottom: var(--sp-1); }
.person__org { font-size: 0.85rem; color: var(--ink-400); font-style: italic; }

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ink-100); border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; }
.roster li {
  background: var(--paper); padding: var(--sp-4) var(--sp-5);
  display: grid; gap: var(--sp-1); grid-template-columns: 2.5rem 1fr; align-items: baseline;
  transition: background-color 0.15s var(--ease);
}
.roster li:hover { background: var(--gold-050); }
.roster__no { font-family: var(--font-display); font-weight: 700; color: var(--gold-500); font-variant-numeric: tabular-nums; }
.roster__name { font-weight: 600; color: var(--ink-900); }
.roster__role { grid-column: 2; font-size: var(--step--1); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.roster__org { grid-column: 2; font-size: 0.85rem; color: var(--ink-400); font-style: italic; }

/* department block */
.dept { margin-bottom: var(--sp-6); }
.dept__title {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--gold-100);
}
.dept ol { margin: 0; padding-left: 1.5rem; columns: 2; column-gap: var(--sp-6); }
.dept li { margin-bottom: var(--sp-2); break-inside: avoid; color: var(--ink-600); }
.dept li::marker { color: var(--gold-600); font-weight: 700; }
@media (max-width: 640px) { .dept ol { columns: 1; } }

/* --- timeline ----------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: var(--sp-7); }
.timeline::before {
  content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-100));
}
.tl-item { position: relative; padding-left: clamp(2rem, 5vw, 3.5rem); }
.tl-item::before {
  content: ""; position: absolute; left: -7px; top: 0.55rem; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gold-500); border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--gold-100);
}
.tl-year {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  color: var(--ink-900); line-height: 1; margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.tl-item p { color: var(--ink-600); }

.pullquote {
  margin: 0; padding: var(--sp-7) clamp(1.5rem, 5vw, 3.5rem);
  border-left: 4px solid var(--gold-500); background: var(--ink-050);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pullquote::before {
  content: "\201C"; display: block; font-family: var(--font-display);
  font-size: 4.5rem; font-weight: 800; line-height: 0.6;
  color: var(--gold-400); margin-bottom: var(--sp-4);
}
.pullquote p {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.45;
  color: var(--ink-800); font-weight: 500; margin: 0;
}

/* --- media strip / logo grid -------------------------------------------- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-4); }
.logo-card {
  display: grid; place-items: center; gap: var(--sp-3);
  padding: var(--sp-5); text-align: center; min-height: 170px;
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.logo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.logo-card img { max-height: 74px; width: auto; object-fit: contain; }
.logo-card span { font-size: var(--step--1); font-weight: 600; color: var(--ink-500); }

/* --- gallery ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); }
.gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--ink-050); border: 1px solid var(--ink-100); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }

/* --- directory (members / suppliers) ------------------------------------ */
.toolbar {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: end; margin-bottom: var(--sp-5);
}
@media (min-width: 760px) {
  .toolbar { grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr)); }
}
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: 0.75rem; font-weight: 700; color: var(--ink-500);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.field input, .field select {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-800);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100);
}
.field input::placeholder { color: var(--ink-300); }

.result-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between;
  padding: var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--ink-100); margin-bottom: var(--sp-4);
  font-size: var(--step--1); color: var(--ink-500);
}
.result-bar strong { color: var(--ink-900); font-variant-numeric: tabular-nums; }
/* sort orders results rather than narrowing them, so it sits with the count
   instead of in the filter toolbar — label inline, control compact */
.result-bar__sort { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.result-bar__sort label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400); white-space: nowrap;
}
.result-bar__sort select {
  padding: 0.4rem 0.6rem; border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  background: var(--paper); font-family: inherit; font-size: var(--step--1); color: var(--ink-800);
}
.result-bar__sort select:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; }

.dir-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.dir-item {
  padding: var(--sp-5); background: var(--paper);
  border: 1px solid var(--ink-100); border-radius: var(--radius);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.dir-item:hover { border-color: var(--gold-100); box-shadow: inset 3px 0 0 var(--gold-500), var(--shadow-sm); }
.dir-item__head { display: flex; flex-wrap: nowrap; gap: var(--sp-2) var(--sp-4); align-items: center; margin-bottom: var(--sp-3); }
/* the membership number reads as its own column, ruled off from the name */
.dir-item__no {
  flex: none; align-self: stretch; display: flex; align-items: center;
  min-width: 3.5rem; padding-right: var(--sp-4);
  border-right: 1px solid var(--ink-100);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  color: var(--gold-600); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.dir-item__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); min-width: 0; flex: 1 1 auto; }
/* --- directory disclosure ------------------------------------------------ */
/* Rows collapse to the company name and open on tap. Native <details> keeps
   it keyboard-operable and announced correctly without any JS. */
.dir-disc > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.dir-disc > summary::-webkit-details-marker { display: none; }
.dir-disc > summary::marker { content: ""; }
.dir-disc[open] > summary { margin-bottom: var(--sp-4); }
.dir-disc > summary:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 3px; }
.dir-disc__chev { margin-left: auto; flex: none; color: var(--ink-400); align-self: center; transition: transform 0.2s var(--ease), color 0.15s var(--ease); }
.dir-disc[open] .dir-disc__chev { transform: rotate(180deg); }
.dir-item:hover .dir-disc__chev { color: var(--gold-600); }
@media (prefers-reduced-motion: reduce) { .dir-disc__chev { transition: none; } }
.dir-item__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink-900); margin: 0; overflow-wrap: anywhere; }
/* --- directory detail panel ---------------------------------------------- */
/* Facts to read on top, contacts to act on below the rule. */
.dir-body { display: grid; gap: var(--sp-5); }
/* two columns, not auto-fit: with only a couple of facts per record auto-fit
   squeezed them into narrow columns and left half the row empty */
.dir-facts { display: grid; gap: var(--sp-4) var(--sp-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .dir-facts { grid-template-columns: minmax(0, 1fr); } }
.dir-fact { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.dir-fact--wide { grid-column: 1 / -1; }
.dir-fact__icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-sm); background: var(--gold-050);
  color: var(--gold-600); border: 1px solid var(--gold-100);
}
.dir-fact__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dir-fact__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-400); }
.dir-fact__value { color: var(--ink-800); line-height: 1.5; overflow-wrap: anywhere; }

.dir-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--ink-100); }
.dir-action {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--ink-200); background: var(--paper);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-700);
  overflow-wrap: anywhere;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.dir-action svg { flex: none; color: var(--ink-400); }
a.dir-action:hover { border-color: var(--gold-500); background: var(--gold-050); color: var(--gold-700); }
a.dir-action:hover svg { color: var(--gold-600); }
/* a fax number can't be actioned by the browser — flag it as reference only */
.dir-action--static { background: var(--ink-050); border-style: dashed; color: var(--ink-500); font-weight: 500; }


.pager { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-6); }
.pager button {
  min-width: 42px; min-height: 42px; padding: 0.5rem 0.85rem;
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; cursor: pointer; color: var(--ink-600);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease),
              background-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pager button:hover:not(:disabled):not([aria-current="true"]) {
  border-color: var(--gold-500); color: var(--gold-700); box-shadow: var(--shadow-sm);
}
.pager button[aria-current="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; cursor: default; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager__gap { color: var(--ink-300); padding-inline: var(--sp-1); }

.empty-state { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--ink-400); border: 1px dashed var(--ink-200); border-radius: var(--radius); }

/* chips (filter by category) */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip {
  padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink-200); background: var(--paper);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-600);
  transition: all 0.15s var(--ease);
}
.chip:hover { border-color: var(--gold-400); color: var(--gold-700); }
.chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; box-shadow: var(--shadow-sm); }

/* clamp long titles/excerpts on media cards so rows line up */
[data-list] .card__title, [data-highlights] .card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-list] .card__text, [data-highlights] .card__text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* utilities */
@media (min-width: 880px) { .order-last { order: 2; } }

/* homepage stat band overlapping the hero */
.stats-band { padding-block: 0 clamp(2.5rem, 4vw, 4rem); }
.stats-band .stats {
  position: relative; z-index: 5;
  margin-top: clamp(-4rem, -5vw, -2.25rem);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--paper);
}

/* --- steps -------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step { position: relative; padding-left: 4.25rem; counter-increment: step; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--gold-500); color: var(--ink-900);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { color: var(--ink-500); margin: 0; }

/* --- checklist ---------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.checklist li { position: relative; padding-left: 2rem; color: var(--ink-600); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 1.1rem; height: 0.6rem; border-left: 2.5px solid var(--gold-500);
  border-bottom: 2.5px solid var(--gold-500); transform: rotate(-45deg);
}

/* --- contact ------------------------------------------------------------ */
.contact-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.contact-card {
  padding: var(--sp-5); border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-100); }
.contact-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--gold-050); color: var(--gold-600); margin-bottom: var(--sp-4); border: 1px solid var(--gold-100); }
.contact-card h3 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); margin-bottom: var(--sp-2); }
.contact-card p, .contact-card address { font-style: normal; color: var(--ink-700); margin: 0; line-height: 1.6; }
.contact-card a { color: var(--gold-700); }
.contact-card a:hover { text-decoration: underline; }

.form-grid { display: grid; gap: var(--sp-4); }
.form-grid textarea { min-height: 150px; resize: vertical; }
.form-grid input, .form-grid textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--paper);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100); }
.form-note { font-size: var(--step--1); color: var(--ink-400); }

.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-100); aspect-ratio: 16 / 9; background: var(--ink-050); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* six cards read better as 3+3 than as the auto-fit 4+2 */
@media (min-width: 900px) { .contact-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- membership tiers ---------------------------------------------------- */
.tiers { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 780px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* the accent bar is what separates the two categories at a glance */
.tier::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--tier-accent, var(--gold-500)); }
.tier--biasa    { --tier-accent: var(--gold-500); }
.tier--bersekutu { --tier-accent: var(--ink-800); }
.tier__head { display: flex; align-items: center; gap: var(--sp-4); }
.tier__icon {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--radius-sm); color: var(--tier-accent);
  background: color-mix(in srgb, var(--tier-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-accent) 25%, transparent);
}
.tier__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: 0.15rem; }
.tier__name { margin: 0; font-size: var(--step-2); color: var(--ink-900); }
.tier__text { margin: 0; color: var(--ink-600); }
.tier__foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--ink-100); }
.tier__chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-800);
  background: color-mix(in srgb, var(--tier-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-accent) 28%, transparent);
}
.tier__chip svg { color: var(--tier-accent); flex: none; }

/* two-column checklist for longer requirement lists */
@media (min-width: 760px) { .checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); } }

/* --- numbered aims list -------------------------------------------------- */
/* These nine clauses vary from one line to six. As equal-height cards the
   short ones left large voids, so they run as a two-column ruled list where
   each item takes only the height it needs. */
/* multi-column, not grid: grid rows align to the tallest item and leave a gap
   under every short one. Columns let each item take only its own height, and
   the numbering reads naturally down one column then the next. */
.aims {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem);
}
.aims__item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--ink-100);
}
.aims__no {
  flex: none; width: 2.75rem;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  line-height: 1.05; color: var(--gold-500); font-variant-numeric: tabular-nums;
}
.aims__text { margin: 0; color: var(--ink-700); line-height: 1.65; }
@media (max-width: 780px) {
  .aims { columns: 1; }
  .aims__no { width: 2.25rem; font-size: 1.35rem; }
}

/* --- callout ------------------------------------------------------------- */
.callout {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper); border: 1px solid var(--ink-100);
  border-left: 4px solid var(--gold-500); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.callout__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-050); color: var(--gold-600); border: 1px solid var(--gold-100); }
.callout__body { min-width: 0; }
.callout__body > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .callout { flex-direction: column; gap: var(--sp-4); } }

/* --- split hero (photo + contact panel) ---------------------------------- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 30%); align-items: stretch; }
.hero-split__media { position: relative; isolation: isolate; display: grid; min-height: clamp(360px, 46vw, 560px); }
/* direct child only — the logo also lives inside this box */
.hero-split__media > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* darkened so the white wordmark holds against the glass facade */
.hero-split__media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(16, 18, 22, 0.88) 20%, rgba(16, 18, 22, 0.58));
}
.hero-split__inner {
  align-self: center; color: #fff; text-align: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  width: min(100%, 680px); margin-inline: auto;
}
.hero-split__brand { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); margin-top: var(--sp-5); }
/* the full-colour emblem: the flat mono mark flattens to a featureless disc
   if it is inverted to white */
.hero-split__logo { width: clamp(64px, 8vw, 96px); height: auto; flex: none; }
.hero-split .breadcrumb { justify-content: center; }
/* gold rule between mark and title, as on the reference */
.hero-split__brand h1 {
  margin: 0; color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  padding-left: clamp(1rem, 2.5vw, 1.75rem); border-left: 5px solid var(--gold-500);
}
.hero-split .breadcrumb { color: rgba(255, 255, 255, 0.72); }
.hero-split .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.hero-split .breadcrumb a:hover { color: #fff; }

.hero-split__panel {
  background: var(--gold-500); color: var(--ink-900);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.hero-split__panel h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink-900); }
.hc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.hc__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hc__icon { flex: none; color: var(--ink-900); opacity: 0.75; margin-top: 2px; }
.hc__body { min-width: 0; }
.hc__body h3 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.hc__body p, .hc__body address {
  margin: 0; font-style: normal; line-height: 1.55;
  color: rgba(22, 23, 26, 0.82); overflow-wrap: anywhere;
}
.hc__body a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.hc__body a:hover { text-decoration-thickness: 2px; }
.hero-split__panel :focus-visible { outline-color: var(--ink-900); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .hero-split__media { min-height: 300px; }
  .hero-split__inner { margin-left: 0; width: 100%; }
  .hc { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}

/* --- category list card -------------------------------------------------- */
/* Bordered card with a gold-ruled heading and label/count rows. */
.cat-list {
  width: min(100%, 560px); margin-inline: auto;
  border: 1px solid var(--ink-100); border-radius: var(--radius);
  background: var(--paper); padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.cat-list__title {
  position: relative; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--ink-900);
}
.cat-list__title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 3px; background: var(--gold-500);
}
.cat-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cat-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 0.65rem 0.6rem; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 500; color: var(--ink-600);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.cat-list a:hover { background: var(--gold-050); color: var(--gold-700); }
.cat-list__n {
  flex: none; min-width: 2.25rem; text-align: center;
  font-size: 0.78rem; font-weight: 700; color: var(--ink-500);
  background: var(--ink-050); border-radius: 999px; padding: 0.15rem 0.5rem;
}
.cat-list a:hover .cat-list__n { background: var(--gold-100); color: var(--gold-700); }
.cat-list__note { margin: var(--sp-4) 0 0; font-size: var(--step--1); color: var(--ink-400); }

/* --- branch cards -------------------------------------------------------- */
/* The branch details used to live inside a graphic, so the address, phone and
   e-mail could not be selected, searched, tapped or read by a screen reader.
   They are real text here; the coloured spine keeps each branch's identity. */
.branch {
  position: relative; overflow: hidden;
  display: grid; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 10px);
  border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper);
}
.branch::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--branch-accent, var(--gold-500)); }
.branch--sabah   { --branch-accent: #f0c419; }
.branch--sarawak { --branch-accent: #8fd4e8; }
.branch__head { display: flex; align-items: center; gap: var(--sp-3); }
.branch__head img { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.branch__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--ink-900); margin: 0; }
.branch__list { display: grid; gap: var(--sp-3); margin: 0; }
.branch__row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.branch__row svg { flex: none; color: var(--gold-600); margin-top: 3px; }
.branch__row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.15rem; }
.branch__row dd { margin: 0; color: var(--ink-700); line-height: 1.55; }
.branch__row a { color: var(--gold-700); }
.branch__row a:hover { text-decoration: underline; }
.branch__foot { margin-top: auto; }

/* --- social row ---------------------------------------------------------- */
.social-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: center; }
.social-row__link {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink-200); color: var(--ink-600); background: var(--paper);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.social-row__link:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); transform: translateY(-2px); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--sp-6); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--gold-500), var(--gold-400));
  color: var(--ink-900);
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
}
.cta-band::before { width: 340px; height: 340px; right: -100px; top: -140px; background: rgba(255, 255, 255, 0.22); }
.cta-band::after { width: 220px; height: 220px; left: -70px; bottom: -110px; background: rgba(22, 23, 26, 0.07); }
.cta-band h2 { margin-bottom: var(--sp-3); color: var(--ink-900); }
.cta-band p { color: rgba(22, 23, 26, 0.78); margin: 0; }
.cta-band__phone {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  color: var(--ink-900); display: block; margin-bottom: var(--sp-4);
}

/* --- article ------------------------------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--ink-600); }
.prose ul, .prose ol { color: var(--ink-600); padding-left: 1.4rem; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 2px; }

.clipping { padding: var(--sp-5); border: 1px solid var(--ink-100); border-left: 3px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); }
.clipping h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.clipping__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--step--1); color: var(--ink-400); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* --- footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900); color: var(--ink-300);
  padding-block: var(--sp-8) var(--sp-5);
  border-top: 4px solid var(--gold-500);
}
.site-footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* min(100%, N) keeps the track from forcing the grid wider than its container
   on narrow screens — a bare minmax(N, 1fr) overflows below N */
.footer-grid { display: grid; gap: var(--sp-6) var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: var(--sp-7); }
/* minmax(0, …): bare fr tracks never shrink below their content, which pushed
   the contact column 5px past a 1024px screen */
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
.site-footer h4 { color: #fff; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer a { color: var(--ink-300); transition: color 0.15s var(--ease); }
.site-footer a:hover { color: var(--gold-400); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: 0.92rem; }
.site-footer ul a { padding-block: 3px; } /* a 24px tap area without moving the list */
.footer-brand img { height: 56px; width: auto; margin-bottom: var(--sp-4); }
.footer-brand p { font-size: 0.92rem; color: var(--ink-400); max-width: 40ch; }
.footer-contact { display: grid; gap: var(--sp-3); font-size: 0.92rem; font-style: normal; overflow-wrap: anywhere; }
.footer-contact div { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; }
.footer-contact svg { margin-top: 0.3em; color: var(--gold-500); }
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.footer-social a:hover { background: var(--gold-500); color: var(--ink-900); transform: translateY(-2px); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.10);
  font-size: var(--step--1); color: var(--ink-400);
}

/* --- reveal on scroll --------------------------------------------------- */
/* Scoped to .js (set by an inline script in <head>) so that without JavaScript
   every section stays visible instead of being stranded at opacity 0. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card--link:hover, .logo-card:hover { transform: none; }
}

/* --- print -------------------------------------------------------------- */
/* --- numbered group photos (AJK, staf) ---------------------------------------------------------- */
/* Each committee portrait carries gold numbered badges; the names below repeat
   those numbers, so the pairing has to stay visually tight. */
.pgroups { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.pgroup { display: grid; gap: var(--sp-5); justify-items: center; }
.pgroup__photo { margin: 0; width: min(100%, 680px); }
.pgroup__photo img {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow); background: var(--ink-050);
}
.pgroup__people {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pgroup__people--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; justify-self: center; }
.pgroup__people--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.pgroup__people--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* department / unit heading above each group photo */
.pgroup__dept {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-700);
}
.pgroup__dept::after {
  content: ""; display: block; width: 48px; height: 3px; border-radius: 3px;
  background: var(--gold-500); margin: var(--sp-3) auto 0;
}
.pgroup__person { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.pgroup__no {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--gold-500); color: var(--ink-900);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
}
.pgroup__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pgroup__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink-900); line-height: 1.3; }
.pgroup__role { font-size: 0.84rem; color: var(--gold-700); font-weight: 600; }
.pgroup__org { font-size: 0.82rem; color: var(--ink-500); }

@media (max-width: 900px) {
  .pgroup__people, .pgroup__people--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pgroup__people, .pgroup__people--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- buletin landing ----------------------------------------------------- */
/* Mirrors the layout of buletin.pekema.org.my: a three-part banner (lead
   carousel, thumb column, Latest/Popular tabs), category blocks with a
   sidebar, then related posts and the about/contact pair. */
.bul-heading {
  position: relative; margin: 0 0 var(--sp-5);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  letter-spacing: 0.01em; color: var(--ink-900);
  padding-bottom: var(--sp-3);
}
.bul-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 3px; background: var(--gold-500);
}

.bul-banner { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.bul-banner__main { display: grid; gap: var(--sp-4); min-width: 0; }
/* 2x2 under the lead — four across here would squeeze titles to a word a line */
.bul-banner__main .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
/* the main column is ~830px, so auto-fit falls to 2 and leaves ragged rows —
   pin every block to 3 across, which also keeps these long uppercase titles
   readable */
.bul-main .grid--3, .bul-main .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* equal-height rows: clamp so one long headline can't stretch its whole row */
.bul-main .card__title,
.bul-related .card__title,
.bul-banner__main .grid--4 .card__title,
.bul-banner__thumbs .card__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bul-banner__thumbs { display: grid; gap: var(--sp-4); min-width: 0; }

/* the lead story reads as the page's entry point */
.bul-lead .card__media { aspect-ratio: 16 / 9; }
.bul-lead .card__title { font-size: var(--step-2); }

.bul-banner__main .grid--4 .card__title,
.bul-banner__thumbs .card__title { font-size: 0.92rem; }

.bul-tabs { border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; background: var(--paper); min-width: 0; }
.bul-tabs__head { display: flex; border-bottom: 1px solid var(--ink-100); background: var(--ink-050); }
.bul-tab {
  flex: 1 1 0; padding: 0.8rem 0.5rem; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.bul-tab:hover { color: var(--ink-900); }
.bul-tab[aria-selected="true"] { color: var(--gold-700); background: var(--paper); border-bottom-color: var(--gold-500); }

.bul-list { list-style: none; margin: 0; padding: var(--sp-3); display: grid; gap: 2px; }
.bul-list[hidden] { display: none; }
.bul-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--radius-sm);
  transition: background-color 0.15s var(--ease);
}
.bul-item:hover { background: var(--gold-050); }
.bul-item__thumb { flex: none; width: 72px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-100); }
.bul-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bul-item__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bul-item__title {
  font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; line-height: 1.35;
  color: var(--ink-800);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bul-item:hover .bul-item__title { color: var(--gold-700); }
.bul-item__date { font-size: 0.75rem; color: var(--ink-400); }

.bul-layout {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.bul-main { display: grid; gap: clamp(2rem, 3.5vw, 3.25rem); min-width: 0; }
.bul-block { min-width: 0; }
.bul-side { display: grid; gap: var(--sp-5); position: sticky; top: calc(var(--header-h) + 1rem); }
.bul-widget { border: 1px solid var(--ink-100); border-radius: var(--radius); padding: var(--sp-5); background: var(--paper); }
.bul-widget .bul-heading { font-size: var(--step-0); margin-bottom: var(--sp-4); }
.bul-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.bul-cats a {
  display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--ink-600);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.bul-cats a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.bul-cats a:hover { background: var(--gold-050); color: var(--gold-700); }
.bul-cats__n {
  flex: none; min-width: 1.75rem; text-align: center;
  font-size: 0.75rem; font-weight: 700; color: var(--ink-400);
  background: var(--ink-050); border-radius: 999px; padding: 0.1rem 0.4rem;
}
.bul-cats a:hover .bul-cats__n { background: var(--gold-100); color: var(--gold-700); }
.bul-ad { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.bul-ad + .bul-ad { margin-top: var(--sp-4); }
.bul-ad img { width: 100%; height: auto; }
.bul-more { margin-top: var(--sp-6); text-align: center; }

@media (max-width: 1100px) {
  .bul-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bul-banner__main { grid-column: 1 / -1; }
  .bul-layout { grid-template-columns: minmax(0, 1fr); }
  .bul-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bul-main .grid--3, .bul-main .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .bul-banner { grid-template-columns: minmax(0, 1fr); }
  .bul-banner__main .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bul-banner__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bul-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .bul-banner__main .grid--4, .bul-banner__thumbs,
  .bul-main .grid--3, .bul-main .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- insurans: sebut harga + pelan ---------------------------------------
   The quotation plans reuse the membership .tier card: same accent bar, same
   proportions, so the two comparison surfaces on the site read as one idea. */
.quote__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .quote__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote__grid-full { grid-column: 1 / -1; }

.quote__check {
  display: flex; gap: var(--sp-3); align-items: flex-start; min-height: 24px;
  color: var(--ink-600); font-size: 0.95rem; line-height: 1.5; cursor: pointer;
}
.quote__check input { flex: none; margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--gold-600); }

.form-error {
  margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, #c0392b 8%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 30%, transparent);
  color: #8c2a1f; font-size: var(--step--1);
}
.form-done {
  margin: 0; padding: var(--sp-5); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
  color: var(--ink-800);
}

@media (min-width: 900px) { .tiers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier--popular { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold-500) 45%, var(--ink-100)); }
.tier__badge {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  padding: 0.25rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold-500); color: var(--ink-900);
}
.tier__price { font-size: var(--step-3); font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.tier__price span { display: block; font-size: var(--step--1); font-weight: 500; color: var(--ink-400); margin-top: 0.25rem; }

.quote-result { display: grid; gap: var(--sp-6); }
.quote-result__head { display: grid; gap: var(--sp-2); }
.quote-result__head h3 { margin: 0; font-size: var(--step-2); }
.quote-result__head p { margin: 0; color: var(--ink-500); }
/* Says "sample" on the panel itself, not only in the small print below it. */
.quote-result__tag {
  justify-self: start; padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  background: var(--ink-900); color: var(--gold-400);
}
.quote-result__note {
  margin: 0; padding: var(--sp-5); border-radius: var(--radius);
  background: var(--ink-050); border: 1px solid var(--ink-100);
  color: var(--ink-600); font-size: var(--step--1); line-height: 1.6;
}
.quote-result .btn { justify-self: start; }

/* --- kalkulator: cukai jalan, insurans, pinjaman -------------------------
   One layout behind all three. The figure sits in a dark panel of its own so
   it reads at a glance, and the working is spelled out underneath the inputs
   — a quoted number here is meant to be checked, not taken on trust. */
.calc { display: grid; gap: var(--sp-5); align-items: start; }
/* a grid item's automatic minimum is its content, and the loan schedule's rows
   are nowrap — without this the table's full width becomes the column's floor
   and pushes the whole page sideways on a phone */
.calc > * { min-width: 0; }
@media (min-width: 1000px) { .calc { grid-template-columns: minmax(0, 1fr) 340px; } }

.calc__panel {
  order: 1; background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.calc__panel h2 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.calc__panel > p { color: var(--ink-500); font-size: var(--step--1); margin-bottom: var(--sp-5); }

.calc__fields { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc__fields > .calc__full { grid-column: 1 / -1; }
/* a field the current fuel type ignores stays visible but reads as inert */
.calc__fields .field:has(select:disabled) label { color: var(--ink-400); }
.calc__fields select:disabled { background: var(--ink-050); color: var(--ink-400); cursor: not-allowed; }

/* The result panel comes first in the source so it is the first thing read on
   a phone; on a wide row it moves to the right and follows the scroll. */
.calc__out {
  order: 0; background: var(--ink-900); color: #fff;
  border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-lg);
}
@media (min-width: 1000px) {
  .calc__out { order: 2; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.calc__out-label {
  margin: 0; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400);
}
.calc__out-value {
  margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1.1; color: #fff;
  /* the figure grows with the inputs — let it wrap rather than overflow */
  overflow-wrap: anywhere;
}
.calc__out-note {
  margin: var(--sp-4) 0 0; font-size: var(--step--1);
  line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}
.calc__out-sub {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--step--1); color: rgba(255, 255, 255, 0.72);
}
.calc__out-sub strong { color: #fff; font-weight: 600; }

.calc__break {
  margin: var(--sp-5) 0 0; padding: var(--sp-5); border-radius: var(--radius-sm);
  background: var(--ink-050); border: 1px solid var(--ink-100);
  display: grid; gap: var(--sp-3);
}
.calc__break h3 {
  margin: 0; font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400);
}
.calc__rows { margin: 0; display: grid; gap: var(--sp-2); }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.calc__row dt { color: var(--ink-500); font-size: 0.95rem; }
.calc__row dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--ink-900);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.calc__row--sum {
  padding-top: var(--sp-3); margin-top: var(--sp-1);
  border-top: 1px solid var(--ink-200);
}
.calc__row--sum dt { color: var(--ink-800); font-weight: 600; }

/* the loan schedule is 12 short rows — a table, scrolled if the row is narrow */
.calc__sched { margin-top: var(--sp-5); overflow-x: auto; }
.calc__sched table { font-size: 0.92rem; }
.calc__sched caption {
  text-align: left; padding-bottom: var(--sp-3);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400);
}
.calc__sched th, .calc__sched td {
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--ink-100);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc__sched thead th {
  color: var(--ink-400); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.calc__sched th:first-child, .calc__sched thead th:first-child {
  text-align: left; color: var(--ink-500); font-weight: 500;
}
.calc__sched tbody tr:last-child th, .calc__sched tbody tr:last-child td { border-bottom: 0; }

.calc__note {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  background: var(--gold-050); border: 1px solid var(--gold-100);
  color: var(--ink-600); font-size: var(--step--1); line-height: 1.6;
}

/* --- kereta: listing card ------------------------------------------------
   Three bands — photo, headline, seller panel. As a row they sit side by
   side; in grid view they stack and the panel becomes the tile's foot. The
   markup is identical either way, so switching view is a class on the list. */
.car-list { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.car-card {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px;
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.car-card:hover { box-shadow: var(--shadow); border-color: var(--ink-200); }

/* photo */
.car-card__media { position: relative; background: var(--ink-050); overflow: hidden; }
.car-card__media a { display: block; height: 100%; }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-card__media .car-card__ph {
  width: 46%; height: auto; margin: auto; object-fit: contain; opacity: 0.45;
}
/* the mark needs a ground to sit on; a photo does not */
.car-card__media:has(.car-card__ph) {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-600));
}
.car-card__shots {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-sm);
  background: rgba(16, 18, 22, 0.66); color: #fff;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.car-card__shots svg { width: 14px; height: 14px; }
.car-card__stock {
  position: absolute; right: 0; bottom: var(--sp-3);
  padding: 0.22rem 0.6rem; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--ink-800); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.car-card__stock.is-ready { background: var(--ok); }

/* headline */
.car-card__main {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5); min-width: 0;
}
.car-card__title { font-size: var(--step-1); margin: 0; line-height: 1.3; }
.car-card__title a { color: var(--ink-900); text-decoration: none; }
.car-card__title a:hover { color: var(--gold-700); }
.car-card__desc {
  margin: 0; color: var(--ink-400); font-size: var(--step--1); line-height: 1.6;
}
.car-card__price { display: grid; gap: 1px; margin-top: auto; padding-top: var(--sp-3); }
.car-card__price-k {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400);
}
.car-card__price-v {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-2);
  color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.car-card__price-full { font-size: var(--step--1); color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* seller panel */
.car-card__side {
  display: flex; flex-direction: column;
  background: var(--ink-050); border-left: 1px solid var(--ink-100);
}
.car-card__side-head {
  padding: 0.55rem var(--sp-4); background: var(--gold-500); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center;
}
.car-card__specs {
  display: grid; gap: var(--sp-2); list-style: none; margin: 0;
  padding: var(--sp-4); flex: 1;
}
.car-card__specs li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); color: var(--ink-600); min-width: 0;
}
.car-card__specs svg { flex: none; color: var(--ink-400); }
.car-card__specs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-card__actions { display: grid; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.car-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.55rem 0.8rem; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
  text-decoration: none; transition: filter 0.15s var(--ease);
}
.car-card__btn:hover { filter: brightness(0.94); }
.car-card__btn--call { background: var(--gold-500); color: var(--ink-900); }
.car-card__btn--wa { background: #25d366; color: #fff; }
.car-card__btn svg { width: 16px; height: 16px; }

/* --- grid view ----------------------------------------------------------
   Same three bands, stacked: the panel loses its rule and sits under the
   price as the tile's foot. */
.car-list--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.car-list--grid .car-card { grid-template-columns: minmax(0, 1fr); }
.car-list--grid .car-card__media { aspect-ratio: 16 / 10; }
.car-list--grid .car-card__main { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.car-list--grid .car-card__title { font-size: 1rem; }
.car-list--grid .car-card__price-v { font-size: var(--step-1); }
.car-list--grid .car-card__side { border-left: 0; border-top: 1px solid var(--ink-100); }
.car-list--grid .car-card__side-head { display: none; }
.car-list--grid .car-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-3) var(--sp-4); }
.car-list--grid .car-card__specs li:nth-child(n+3) { display: none; }
.car-list--grid .car-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--sp-4) var(--sp-4); }

/* the row cannot hold three bands on a narrow screen — stack it there too */
@media (max-width: 900px) {
  .car-card { grid-template-columns: minmax(0, 1fr); }
  .car-card__media { aspect-ratio: 16 / 10; }
  .car-card__side { border-left: 0; border-top: 1px solid var(--ink-100); }
  .car-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .car-card__specs, .car-card__actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .car-card, .car-card__btn { transition: none; } }

/* view switch, beside the sort control */
.viewswitch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ink-200); border-radius: 999px; }
.viewswitch button {
  display: grid; place-items: center; width: 32px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--ink-400); cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.viewswitch button:hover { color: var(--ink-900); }
.viewswitch button[aria-pressed="true"] { background: var(--ink-900); color: #fff; cursor: default; }

/* Stock status carries a colour because it answers the first question a recon
   buyer asks: can I drive it away, or am I waiting for a ship. Ready is green,
   incoming stays neutral-warm — the contrast is the point. */
.tag--stock { background: var(--gold-050); border-color: var(--gold-100); color: var(--gold-700); }
.tag--stock.tag--ready { background: #e8f5ee; border-color: #c6e6d5; color: var(--ok); }

/* --- kereta: detail gallery ---------------------------------------------
   Stage plus thumbnail rail. Arrows sit inside the stage and only appear on
   hover/focus at desktop width; on touch the thumbs are the primary control,
   so the arrows stay put there rather than hiding behind a hover state. */
.car-gal { display: grid; gap: var(--sp-3); }
.car-gal:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: var(--radius); }
.car-gal__stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius); background: var(--ink-050); border: 1px solid var(--ink-100);
}
.car-gal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-gal__stage--empty {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-600));
}
.car-gal__stage--empty img { width: 22%; height: auto; object-fit: contain; opacity: 0.5; }
.car-gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink-800);
  box-shadow: var(--shadow); opacity: 0; transition: opacity 0.15s var(--ease), background-color 0.15s var(--ease);
}
.car-gal__nav:hover { background: #fff; }
.car-gal__nav--prev { left: var(--sp-3); }
.car-gal__nav--next { right: var(--sp-3); }
.car-gal__stage:hover .car-gal__nav, .car-gal__nav:focus-visible { opacity: 1; }
@media (hover: none) { .car-gal__nav { opacity: 1; } }
.car-gal__count {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: rgba(16, 18, 22, 0.62); color: #fff;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.car-gal__thumbs {
  display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 2px;
  overflow-x: auto; scrollbar-width: thin;
}
.car-gal__thumb {
  display: block; width: 96px; aspect-ratio: 16 / 10; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--ink-050); transition: border-color 0.15s var(--ease), opacity 0.15s var(--ease);
  opacity: 0.65;
}
.car-gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-gal__thumb:hover { opacity: 1; }
.car-gal__thumb.is-current { border-color: var(--gold-500); opacity: 1; }

/* --- kereta: detail body ------------------------------------------------- */
.car-detail { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); align-items: start; }
@media (min-width: 900px) { .car-detail { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr); } }

/* the four figures a buyer checks before reading anything else */
.car-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--sp-3); list-style: none; margin: 0 0 var(--sp-6); padding: 0;
}
.car-fact {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--ink-100);
  border-radius: var(--radius); background: var(--paper);
}
.car-fact__icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm); background: var(--gold-050); color: var(--gold-600);
}
.car-fact__text { display: grid; gap: 1px; min-width: 0; }
.car-fact__k {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400);
}
.car-fact__v {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}

.car-block + .car-block { margin-top: var(--sp-6); }
.car-block__h {
  font-size: var(--step-0); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink-100); color: var(--ink-800);
  letter-spacing: 0.02em;
}
/* borrows .spec-row's dt/dd type; the container drops its card-footer rule */
.car-specs { border-top: 0; margin: 0; padding: 0; gap: var(--sp-4) var(--sp-3); }

/* buy panel: follows the spec list down on a tall page */
.car-buy {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-5); border: 1px solid var(--ink-100);
  border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm);
}
.car-buy .tag { justify-self: start; }
@media (min-width: 900px) { .car-buy { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } }
.car-price { display: grid; gap: 2px; }
.car-price__now {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-3);
  color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.car-price__month { color: var(--ink-600); font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.car-price__basis { color: var(--ink-400); font-size: 0.75rem; }
.car-buy__actions { display: grid; gap: var(--sp-2); }
.car-buy__actions .btn { width: 100%; justify-content: center; }
.car-buy__seller {
  display: grid; gap: var(--sp-1); padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-100); font-size: var(--step--1); color: var(--ink-500);
}
.car-buy__label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-400);
}
.car-buy__seller strong { color: var(--ink-900); font-size: 0.95rem; }
.car-buy__loc { display: flex; align-items: center; gap: var(--sp-2); }
.car-buy__loc svg { flex: none; color: var(--ink-300); }
.car-buy__eta {
  justify-self: start; font-size: var(--step--1); color: var(--gold-700);
  font-weight: 600; margin-top: calc(var(--sp-2) * -1);
}

.car-desc { color: var(--ink-600); line-height: 1.7; }
.car-desc p { margin: 0 0 var(--sp-3); }
.car-desc p:last-child { margin-bottom: 0; }
.car-desc--empty { color: var(--ink-400); font-style: italic; }

.car-buy__calc { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--ink-100); }
.car-buy__calcbtns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.car-buy__calcbtns button {
  flex: 1 1 auto; padding: 0.4rem 0.6rem; cursor: pointer;
  border: 1px solid var(--ink-200); border-radius: var(--radius-sm); background: var(--paper);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--ink-600);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.car-buy__calcbtns button:hover { border-color: var(--gold-500); color: var(--gold-700); }

.car-more { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-7); }

/* --- quick-calculator modal ---------------------------------------------
   Same overlay idiom as the site search: hidden by visibility so it stays out
   of the tab order, scrim fades, Escape and the scrim both close it. */
.cmodal { position: fixed; inset: 0; z-index: 210; visibility: hidden; }
.cmodal.is-open { visibility: visible; }
.cmodal__scrim {
  position: absolute; inset: 0; background: rgba(16, 18, 22, 0.5);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.cmodal.is-open .cmodal__scrim { opacity: 1; }
.cmodal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%);
  width: min(520px, calc(100% - 2rem)); max-height: min(88vh, 720px); overflow-y: auto;
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-5); opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.cmodal.is-open .cmodal__panel { opacity: 1; transform: translate(-50%, -50%); }
.cmodal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cmodal__head h2 { font-size: var(--step-1); margin: 0; }
.cmodal__x {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%; background: var(--ink-050); color: var(--ink-600);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cmodal__x:hover { background: var(--ink-100); color: var(--ink-900); }
.cmodal__tabs {
  display: flex; gap: 2px; margin: var(--sp-4) 0; padding: 3px;
  background: var(--ink-050); border-radius: 999px;
}
.cmodal__tabs button {
  flex: 1; padding: 0.42rem 0.5rem; border: 0; border-radius: 999px; cursor: pointer;
  background: none; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  color: var(--ink-500); transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.cmodal__tabs button:hover { color: var(--ink-900); }
.cmodal__tabs button.is-current { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.cmodal__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.cmodal__field { display: grid; gap: var(--sp-2); }
.cmodal__field > span {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-400);
}
.cmodal__field input, .cmodal__field select {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm); background: var(--paper);
  font-family: inherit; font-size: 0.92rem; color: var(--ink-900);
}
.cmodal__field input:focus, .cmodal__field select:focus {
  outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: transparent;
}
.cmodal__check {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-size: var(--step--1); color: var(--ink-600); cursor: pointer;
}
.cmodal__result {
  display: grid; gap: 2px; margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--radius); background: var(--ink-050); border: 1px solid var(--ink-100);
}
.cmodal__result-k {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-400);
}
.cmodal__result-v {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-2);
  color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cmodal__result-n { font-size: 0.75rem; color: var(--ink-400); }
.cmodal__note { margin: var(--sp-4) 0 0; font-size: 0.75rem; color: var(--ink-400); }
.cmodal__note a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .cmodal__scrim, .cmodal__panel { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .car-gal__nav, .car-gal__thumb { transition: none; }
}

/* Sample-data notice. It is deliberately loud: these listings are placeholders
   and must not read as real stock while the real inventory is pending. */
.sample-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--warn); border-radius: var(--radius);
  background: var(--gold-050); color: var(--ink-600);
  font-size: var(--step--1); line-height: 1.6;
}
.sample-note strong { color: var(--ink-900); }

@media print {
  .site-header, .site-footer, .nav__scrim, .toolbar, .pager, .btn { display: none !important; }
  body { color: #000; }
  .dir-item { break-inside: avoid; border-color: #999; }
  .car-card { break-inside: avoid; }
  /* a printed listing keeps the lead photo and the specs, not the controls */
  .car-gal__nav, .car-gal__thumbs, .car-gal__count { display: none !important; }
  .car-block, .car-buy { break-inside: avoid; }
}

/* ==========================================================================
   2026 refresh — the aha.com.au reference in PEKEMA navy and gold
   (owner, 2026-09-29). One block, after everything it restyles, so the
   earlier rules keep their layout and only the look changes here: serif
   headings, uppercase pill buttons, navy heroes under the floating header,
   organic photo shapes, ruled link lists and a gold-tinted footer.
   ========================================================================== */

/* --- type ------------------------------------------------------------------ */
body { color: var(--navy-800); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; color: var(--navy-900); }
h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.eyebrow {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-700);
}
.eyebrow::before { display: none; }
.section--ink .eyebrow { color: var(--gold-400); }
.section-head p { color: var(--navy-700); }
.hl { color: var(--gold-600); }

/* --- buttons: AHA's uppercase, letter-spaced pills ---------------------------- */
.btn {
  border-radius: 999px; padding: 0.85em 1.5em;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.btn--sm { padding: 0.7em 1.2em; font-size: 0.75rem; }
.btn--primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); box-shadow: none; }
.btn--primary:hover { background: var(--gold-400); border-color: var(--gold-400); filter: none; box-shadow: 0 10px 24px -10px rgba(200, 134, 0, 0.6); }
.btn--dark { background: var(--navy-900); border-color: var(--navy-900); }
.btn--dark:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn--ghost { border-color: var(--navy-900); color: var(--navy-900); }
.btn--ghost:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.section--ink .btn--ghost, .hero .btn--ghost, .pagehero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover, .pagehero .btn--ghost:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

/* --- surfaces ------------------------------------------------------------------ */
.section--muted { background: var(--wash); }
.section--ink { background: var(--navy-900); color: rgba(255, 255, 255, 0.82); }

/* --- the homepage hero: navy, soft curves, the statement top right and the
       name large at the bottom left ------------------------------------------- */
.hero--aha {
  min-height: min(100svh, 920px); display: flex;
  background: radial-gradient(120% 90% at 85% 10%, #13235a 0%, var(--navy-900) 55%, var(--navy-950) 100%);
}
/* Wisma Yayasan PEKEMA behind a navy wash: darkest on the left, where the name
   sits, lighter on the right so the building and its gold sign still read */
.hero--aha .hero__bg img { object-position: 70% 40%; }
.hero--aha::after {
  display: block;
  background:
    linear-gradient(90deg, rgba(5, 11, 32, 0.94) 0%, rgba(5, 11, 32, 0.78) 45%, rgba(11, 21, 48, 0.45) 100%),
    linear-gradient(180deg, rgba(5, 11, 32, 0.55) 0%, rgba(5, 11, 32, 0) 30%, rgba(5, 11, 32, 0) 70%, rgba(5, 11, 32, 0.7) 100%);
}
@media (max-width: 959.98px) {
  .hero--aha::after { background: linear-gradient(180deg, rgba(5, 11, 32, 0.7) 0%, rgba(5, 11, 32, 0.82) 55%, rgba(5, 11, 32, 0.94) 100%); }
}
.hero__curves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--sp-7);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: clamp(3rem, 7vw, 6rem);
}
.hero__aside { max-width: 30rem; }
/* on a phone the name leads and the statement follows it */
@media (max-width: 959.98px) { .hero__aside { order: 2; } }
.hero--aha .hero__reg {
  margin-bottom: var(--sp-4); padding: 0; border: 0; background: none;
  font-size: 0.78rem; letter-spacing: 0.16em; color: var(--gold-400);
}
.hero--aha .hero__lede { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.45; color: #fff; }
.hero--aha h1 { max-width: 13ch; margin-bottom: var(--sp-6); font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: 1.02; letter-spacing: -0.02em; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(2rem, 6vw, 6rem); }
  .hero__aside {
    grid-column: 2; grid-row: 1; align-self: start; margin-top: clamp(1rem, 8vh, 6rem);
    padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid rgba(255, 255, 255, 0.35);
  }
  .hero__main { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
}

/* the four numbers continue the navy hero, as ruled columns */
.stats-band { padding-block: 0; background: var(--navy-950); }
.stats-band .stats {
  margin-top: 0; padding-block: clamp(2rem, 4vw, 3rem); border-radius: 0; box-shadow: none;
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); gap: 0;
}
.stats-band .stat { background: none; text-align: left; padding: 0 var(--sp-5); border-left: 1px solid rgba(255, 255, 255, 0.14); }
.stats-band .stat:first-child { border-left: 0; padding-left: 0; }
.stats-band .stat__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.75rem); color: var(--gold-400); }
.stats-band .stat__label { color: rgba(255, 255, 255, 0.72); letter-spacing: 0.12em; }
@media (max-width: 720px) {
  .stats-band .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .stats-band .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --- inner page heroes: navy, clear of the floating header ------------------- */
.pagehero { background: radial-gradient(110% 120% at 90% 0%, #13235a 0%, var(--navy-900) 50%, var(--navy-950) 100%); }
.pagehero::before {
  opacity: 1; background: none;
  background-image:
    radial-gradient(60% 90% at 100% 100%, rgba(59, 85, 184, 0.28), transparent 60%),
    radial-gradient(40% 70% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}
.pagehero::after { display: none; }
.pagehero__inner { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pagehero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.5rem); line-height: 1.05; max-width: 20ch; }
.pagehero h1::after { display: none; }
.pagehero p { color: rgba(255, 255, 255, 0.85); }
.breadcrumb { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.breadcrumb a { color: rgba(255, 255, 255, 0.85); }
/* the contact page opens on a photo and a light panel: its header is solid from
   the start, so the content starts below it */
body:has(main > .hero-split:first-child) main { padding-top: var(--header-h); }

/* --- organic photo shapes -------------------------------------------------------- */
.blob { border-radius: 46% 54% 38% 62% / 52% 40% 60% 48%; box-shadow: none; }
.split .reveal > img.blob { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* --- membership: heading left, a ruled list with arrows right ------------------- */
.list-split { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .list-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 7rem); } }
.list-split__head h2 { margin-bottom: var(--sp-4); }
.list-split__head p { color: var(--navy-700); margin-bottom: var(--sp-5); }
.cat-list { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cat-list__title { margin-bottom: var(--sp-3); padding: 0; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); }
.cat-list__title::after { display: none; }
.cat-list ul { gap: 0; border-top: 1px solid rgba(11, 21, 48, 0.14); }
.cat-list li { border-bottom: 1px solid rgba(11, 21, 48, 0.14); }
.cat-list a {
  position: relative; padding: clamp(1rem, 2vw, 1.5rem) 2.5rem clamp(1rem, 2vw, 1.5rem) 0; border-radius: 0;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); font-weight: 400; color: var(--navy-900);
}
.cat-list a::after {
  content: ""; position: absolute; right: 0.25rem; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}
.cat-list a:hover { background: none; color: var(--gold-700); }
.cat-list a:hover::after { transform: translate(2px, -2px); }
.cat-list__n { margin-left: auto; background: none; font-size: 0.9rem; color: var(--navy-700); }
.cat-list a:hover .cat-list__n { background: none; color: var(--gold-700); }
.cat-list__note { color: var(--navy-700); }

/* --- cards: quieter edges, rounder photos, serif titles ------------------------- */
.card { border-color: rgba(11, 21, 48, 0.08); border-radius: var(--radius-lg); }
.card--link:hover { border-color: rgba(11, 21, 48, 0.12); }
.card__title { font-weight: 500; line-height: 1.2; }
.card--link:hover .card__title { color: var(--gold-700); }
.tag { border-radius: 999px; }
/* the homepage's latest coverage reads as AHA's project tiles: photo, then title */
[data-highlights] .card { border: 0; background: none; overflow: visible; }
[data-highlights] .card:hover { transform: none; box-shadow: none; }
[data-highlights] .card__media { border-radius: var(--radius-lg); overflow: hidden; }
[data-highlights] .card__body { padding: var(--sp-4) 0 0; }
[data-highlights] .card__title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); }
.logo-card { border-radius: var(--radius-lg); }

/* --- the membership call: navy, a large serif line, gold accents ----------------- */
.cta-band { background: var(--navy-900); color: rgba(255, 255, 255, 0.85); border-radius: clamp(24px, 4vw, 40px); }
.cta-band::before { background: rgba(224, 153, 0, 0.16); }
.cta-band::after { background: rgba(255, 255, 255, 0.05); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.8); }
.cta-band__phone { font-weight: 500; color: var(--gold-400); }
.cta-band .btn--dark { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--navy-900); }

/* --- forms and contact cards ------------------------------------------------------ */
.field input, .field select, .field textarea { border-radius: 12px; }
.contact-card { border-radius: var(--radius-lg); }

/* --- footer: AHA's tinted ground, here a soft gold, with navy text --------------- */
.site-footer { background: var(--gold-100); color: var(--navy-800); border-top: 0; }
.site-footer h4 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--navy-900); }
.site-footer a { color: var(--navy-900); }
.site-footer a:hover { color: var(--gold-700); }
.site-footer ul { font-size: 1rem; }
.footer-brand p { color: var(--navy-700); }
.footer-brand p[style] { color: var(--navy-700) !important; }
.footer-contact svg { color: var(--gold-700); }
.footer-social a { background: transparent; border-color: rgba(11, 21, 48, 0.25); color: var(--navy-900); }
.footer-social a:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.footer-bottom { border-top-color: rgba(11, 21, 48, 0.14); color: var(--navy-700); }

/* --- the About emblem: the PEKEMA logo as a slowly turning 3D coin -------------
   Two faces carry the logo; sixteen thin gold discs stacked between them are
   the coin's edge, which shows as the coin turns side-on. Pure CSS, no script.
   A visitor who asks for reduced motion sees it still, turned a little. */
.coin {
  --coin-size: min(78%, 400px);
  --coin-depth: 16px;
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto;
  perspective: 1600px;
}
.coin__body {
  position: relative; width: var(--coin-size); aspect-ratio: 1;
  transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-24deg);
  animation: coin-spin 12s linear infinite;
}
@keyframes coin-spin {
  from { transform: rotateX(10deg) rotateY(0deg); }
  to   { transform: rotateX(10deg) rotateY(360deg); }
}
.coin__face, .coin__edge { position: absolute; inset: 0; border-radius: 50%; }
.coin__face {
  background: #fff url("../img/logo-pekema-720.webp") center / 100% no-repeat;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: inset 0 0 0 2px rgba(134, 117, 79, 0.35);
  overflow: hidden;
}
/* the light slides across the face as it turns */
.coin__face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
}
.coin__face--front { transform: translateZ(calc(var(--coin-depth) / 2)); }
.coin__face--back { transform: rotateY(180deg) translateZ(calc(var(--coin-depth) / 2)); }
.coin__edge {
  background: linear-gradient(90deg, #6f6040, #b39c63 40%, #d9c48b 50%, #b39c63 60%, #6f6040);
  transform: translateZ(calc((var(--i) - 7.5) * var(--coin-depth) / 16));
}
.coin__shadow {
  position: absolute; bottom: 6%; left: 50%; width: 46%; height: 7%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 11, 32, 0.28), transparent);
  filter: blur(4px); animation: coin-shadow 6s ease-in-out infinite;
}
@keyframes coin-shadow { 0%, 100% { width: 46%; opacity: 1; } 25%, 75% { width: 30%; opacity: 0.7; } 50% { width: 46%; } }
@media (prefers-reduced-motion: reduce) {
  .coin__body, .coin__shadow { animation: none; }
}


/* --- corner dock (owner, 2026-09-29) ---------------------------------------
   The language switch folds to a globe and the language in use; the other two
   open while the pointer is over it or focus is inside it (a tap on a phone).
   Without the script no language is marked current, so nothing folds. */
.js .lang-switch--floating { gap: 0; cursor: default; }
.js .lang-switch--floating::before {
  content: ""; flex: none; align-self: center; width: 16px; height: 16px; margin: 0 0.15rem 0 0.55rem;
  background: var(--ink-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.js .lang-switch--floating:has([aria-pressed="true"], [aria-current="true"]) > a:not([aria-pressed="true"]):not([aria-current="true"]) { display: none; }
.js .lang-switch--floating:hover > a,
.js .lang-switch--floating:focus-within > a { display: inline-block !important; }

/* the Dongfeng link is a round badge */
.corner-dock__logo { width: 64px; height: 64px; padding: 0; border-radius: 50%; }
.corner-dock__logo img { width: 46px; height: auto; }
@media (max-width: 720px) {
  .corner-dock__logo { width: 54px; height: 54px; padding: 0; }
  .corner-dock__logo img { width: 38px; height: auto; }
}

/* --- leadership (owner, 2026-09-29) ------------------------------------------
   The photo of the President, the Adviser and the Deputy President on the left
   with a name plate joined to its foot, each name under its person; the heading
   and a ruled list of links on the right, like the membership list. On a phone
   the heading leads. */
.leaders { position: relative; overflow: hidden; }
/* a low warm light behind the photo */
.leaders::before {
  content: ""; position: absolute; left: -10%; top: 10%; width: 70%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 153, 0, 0.14), transparent);
}
.leaders > .container { position: relative; display: grid; gap: var(--sp-7); }
.leaders__head { display: grid; justify-items: start; gap: var(--sp-4); }
.leaders__head h2 { margin: 0; }
.leaders__head h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: var(--sp-5); background: var(--gold-400); }

.leaders__nav { width: 100%; margin: var(--sp-3) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.leaders__nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.leaders__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(1rem, 2vw, 1.4rem) 0.25rem;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem); color: #fff;
  transition: color 0.2s var(--ease), padding 0.2s var(--ease);
}
.leaders__link svg { flex: none; color: var(--gold-400); transition: transform 0.2s var(--ease); }
.leaders__link:hover { color: var(--gold-400); padding-left: 0.75rem; }
.leaders__link:hover svg { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { .leaders__link, .leaders__link svg { transition: none; } }

.leaders__figure { width: min(100%, 640px); margin: 0 auto; }
/* a thin gold frame set off the photo's corner */
.leaders__photo { position: relative; }
.leaders__photo::before {
  content: ""; position: absolute; inset: -14px 14px 14px -14px; z-index: 0;
  border: 1px solid rgba(255, 180, 0, 0.45); border-radius: 28px 28px 0 0; pointer-events: none;
}
.leaders__photo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 24px 24px 0 0; }

/* the name plate: joined to the photo, a gold top edge, a gold tick above each
   name. The columns put each name's centre under its person (a quarter, a half
   and three quarters of the photo's width). */
.leaders__names {
  position: relative; z-index: 1; display: grid; gap: var(--sp-4);
  margin: 0; padding: var(--sp-5); border-top: 2px solid var(--gold-400); border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.leader { position: relative; display: grid; gap: 0.3rem; justify-items: center; text-align: center; color: #fff; }
.leader__role { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.leader__name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.leader:hover .leader__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-400); }
@media (min-width: 640px) {
  .leaders__names { grid-template-columns: 11% 28% 22% 28% 11%; align-items: start; gap: 0; padding: var(--sp-5) 0; }
  .leaders__names .leader:nth-child(1) { grid-column: 2; }
  .leaders__names .leader:nth-child(2) { grid-column: 3; }
  .leaders__names .leader:nth-child(3) { grid-column: 4; }
  .leader { padding: 0 var(--sp-2); }
  .leader::before {
    content: ""; position: absolute; top: calc(-1 * var(--sp-5) - 7px); left: 50%; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px var(--navy-800);
  }
}
@media (min-width: 960px) {
  .leaders > .container { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
  .leaders__figure { grid-column: 1; grid-row: 1; width: 100%; margin: 14px 0 0 14px; }
  .leaders__head { grid-column: 2; grid-row: 1; }
}

/* --- the scroll layer (owner, 2026-09-29) ------------------------------------
   pekema.js tags elements with data-motion and adds .is-in when they reach the
   screen; html.motion is set only when the layer runs, so without the script
   (or with reduced motion) nothing here hides anything. */
.motion [data-motion] { transition-delay: var(--motion-delay, 0ms); }
.motion [data-motion="rise"] {
  opacity: 0; transform: translateY(0.7em); clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s var(--ease), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion [data-motion="item"] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion [data-motion="unveil"] {
  clip-path: inset(100% 0 0 0 round 24px);
  transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}
.motion [data-motion="unveil"] img, .motion img[data-motion="unveil"] { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.motion [data-motion].is-in { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
.motion [data-motion="unveil"].is-in { clip-path: inset(0 0 0 0 round 0); }
.motion [data-motion="unveil"].is-in img, .motion img[data-motion="unveil"].is-in { transform: none; }
.motion [data-motion].is-instant, .motion [data-motion].is-instant img { transition: none; }
/* the old hand-placed fade gives way to the layer */
.motion .reveal { opacity: 1; transform: none; }

/* the heroes' own entrance, once, on load */
@keyframes hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js .hero__main, .js .hero__aside, .js .pagehero__inner > * { animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .hero__aside { animation-delay: 0.25s; }
.js .pagehero__inner > :nth-child(2) { animation-delay: 0.08s; }
.js .pagehero__inner > :nth-child(3) { animation-delay: 0.16s; }
.js .pagehero__inner > :nth-child(n+4) { animation-delay: 0.24s; }
.hero__bg img, .hero__curves { will-change: transform; }
.leaders__photo { overflow: hidden; border-radius: 24px 24px 0 0; }
.leaders__photo::before { z-index: 2; }

/* how far down the page: a thin gold line under the header */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); transform: scaleX(0); transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__main, .js .hero__aside, .js .pagehero__inner > * { animation: none; }
  .scroll-progress { display: none; }
}

/* --- AJK (owner, 2026-09-29): each group photo on the left, its numbered
   names on the right as a ruled list; stacked on a phone ------------------- */
@media (min-width: 900px) {
  .pgroups--side .pgroup {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; justify-items: stretch;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .pgroups--side .pgroup__photo { width: 100%; }
  .pgroups--side .pgroup__people,
  .pgroups--side .pgroup__people--1, .pgroups--side .pgroup__people--2,
  .pgroups--side .pgroup__people--3, .pgroups--side .pgroup__people--4 {
    grid-template-columns: minmax(0, 1fr); max-width: none; gap: 0; justify-self: stretch;
    border-top: 1px solid rgba(11, 21, 48, 0.14);
  }
}
.pgroups--side .pgroup__person { padding: var(--sp-4) 0; border-bottom: 1px solid rgba(11, 21, 48, 0.14); gap: var(--sp-4); align-items: center; }
.pgroups--side .pgroup__no {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-950); font-weight: 700; font-size: 0.9rem;
}
.pgroups--side .pgroup__name { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 500; color: var(--navy-900); }
.pgroups--side .pgroup__role { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; color: var(--gold-700); }
.pgroups--side .pgroup__org { font-size: 0.85rem; color: var(--navy-700); }
.pgroups--side .pgroup__photo img { border-radius: 24px; }