/* ==========================================================================
   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;

  /* navy: the dark bands, the footer and the page heroes (2026 refresh). Gold
     stays the one accent; navy replaces the near-black ink on large surfaces. */
  --navy-950: #050b20;
  --navy-900: #0b1530;
  --navy-800: #16213e;
  --navy-700: #26314f;
  --navy-050: #eef1fb;

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

  /* type: DM Sans throughout, as on the reference design (2026 refresh) */
  --font-display: "DM Sans", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "DM 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: 8px;
  --radius:    16px;
  --radius-lg: 24px;
  /* the white sheet that rises over the homepage hero and the footer's top edge */
  --radius-sheet: clamp(28px, 6vw, 80px);

  --shadow-sm: 0 1px 2px rgba(5, 11, 32, 0.06), 0 1px 3px rgba(5, 11, 32, 0.04);
  --shadow:    0 6px 18px -6px rgba(5, 11, 32, 0.10), 0 2px 4px -2px rgba(5, 11, 32, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(5, 11, 32, 0.22), 0 8px 16px -8px rgba(5, 11, 32, 0.10);

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

  --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.02em;
  color: var(--navy-950);
  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(--navy-950); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--navy-950); 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(--navy-950); 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); }

/* the refresh's section heading: a title on the left, "view all" on the right */
.sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-5);
}
.sec-head h2 { margin: 0; font-size: var(--step-2); }
.sec-head p { margin: var(--sp-2) 0 0; color: var(--ink-500); max-width: 60ch; }
.sec-head__more {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 24px;
  font-size: 0.9rem; font-weight: 600; color: var(--navy-950);
}
.sec-head__more svg { transition: transform 0.2s var(--ease); }
.sec-head__more:hover { color: var(--gold-700); }
.sec-head__more:hover svg { transform: translate(2px, -2px); }
.section--ink .sec-head h2, .section--ink .sec-head__more { color: #fff; }
.section--ink .sec-head__more:hover { color: var(--gold-400); }
.section--ink .sec-head p { color: var(--ink-300); }

/* underline tabs under a section heading (vehicles, makes, shop-by) */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0 0 var(--sp-5); padding: 0; list-style: none; border-bottom: 1px solid var(--ink-100); }
.tabs button {
  position: relative; min-height: 44px; padding: 0.4rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink-500);
}
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold-500); border-radius: 2px; transform: scaleX(0); transition: transform 0.2s var(--ease);
}
.tabs button:hover { color: var(--navy-950); }
.tabs button[aria-selected="true"] { color: var(--navy-950); font-weight: 600; }
.tabs button[aria-selected="true"]::after { transform: none; }
.section--ink .tabs { border-color: rgba(255, 255, 255, 0.14); }
.section--ink .tabs button { color: var(--ink-300); }
.section--ink .tabs button:hover, .section--ink .tabs button[aria-selected="true"] { color: #fff; }

/* --- 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; line-height: 1.25;
  border: 2px solid transparent; border-radius: 999px;
  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: var(--gold-500);
  color: var(--navy-950); border-color: var(--gold-500);
  box-shadow: 0 1px 2px rgba(160, 110, 0, 0.25);
}
.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(--navy-950); }

.btn--dark { background: var(--navy-950); color: #fff; border-color: var(--navy-950); box-shadow: var(--shadow-sm); }
.btn--dark:hover { background: var(--navy-800); border-color: var(--navy-800); box-shadow: var(--shadow); }

/* WhatsApp's own green — a third-party brand colour, not a site tone */
.btn--wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn--wa:hover { filter: brightness(0.94); }

.btn--ghost { border-color: var(--ink-200); color: var(--navy-950); background: transparent; }
.btn--ghost:hover { background: var(--navy-950); color: #fff; border-color: var(--navy-950); 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(--navy-950); 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);
}
/* once the page scrolls the bar turns to frosted glass: the content passes
   under it, blurred, instead of vanishing behind a solid white strip */
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.72); border-bottom-color: rgba(5, 11, 32, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 8px 24px -12px rgba(5, 11, 32, 0.18);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: rgba(255, 255, 255, 0.97); }
}

/* The homepage header floats over the hero photo: transparent with white text
   at the top; once the page scrolls it is the same frosted glass as every
   other page (.is-stuck above), with dark text. The drawer below 1300px stays
   white, so only the inline row turns white. */
.site-header--overlay {
  position: fixed; left: 0; right: 0;
  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--overlay:not(.is-stuck) .brand__name { color: #fff; }
.site-header--overlay:not(.is-stuck) .brand__tag { color: rgba(255, 255, 255, 0.6); }
.site-header--overlay:not(.is-stuck) .nav__portal { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.site-header--overlay:not(.is-stuck) .nav__portal:hover { background: #fff; color: var(--navy-950); border-color: #fff; }
.site-header--overlay:not(.is-stuck) .nav__toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header--overlay:not(.is-stuck) .nav__toggle span,
.site-header--overlay:not(.is-stuck) .nav__toggle span::before,
.site-header--overlay:not(.is-stuck) .nav__toggle span::after { background: #fff; }
.site-header--overlay:not(.is-stuck) .nav__toggle[aria-expanded="true"] span { background: transparent; }
.site-header--overlay:not(.is-stuck) .nav__search { color: rgba(255, 255, 255, 0.8); }
.site-header--overlay:not(.is-stuck) .nav__search:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
@media (min-width: 1300px) {
  .site-header--overlay:not(.is-stuck) .nav__list > .nav__item > .nav__link { color: #fff; }
  .site-header--overlay:not(.is-stuck) .nav__list > .nav__item > .nav__link:hover,
  .site-header--overlay:not(.is-stuck) .nav__list > .nav__item.is-open > .nav__link { color: var(--gold-400); }
}
/* 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-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--navy-950); }
.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-display); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0; 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); }
/* the cross-site link to the corporate site carries an external-link glyph so the
   jump to a different header is announced before the click, not after */
.nav__link .ext { width: 11px; height: 11px; opacity: 0.75; transition: transform 0.2s var(--ease); }
.nav__link:hover .ext { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .nav__link .ext { transition: none; } }

/* 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.95rem; padding-inline: 0.8rem; gap: 0.3em; }
  .nav__list { gap: var(--sp-1); }
  /* 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); }
/* The row holds three items beside the mark, so no menu comes near the right
   edge: each opens under its own trigger. (The right anchor for the last two
   belonged to the eight-item row, and with three it threw Services back over
   the logo.) */
.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.25rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0;
}
.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(--navy-950); color: #fff; border-color: var(--navy-950);
  box-shadow: 0 6px 16px -6px rgba(16, 18, 22, 0.45);
}
.nav__portal:hover svg { transform: translate(2px, -2px); }

.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(--navy-950); 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(--navy-950); color: #fff; }
.nav__door--member:hover { background: var(--ink-050); }
.nav__door--member:hover .nav__door-icon { background: var(--navy-950); }
.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; } }
/* signed-in buyer: the button carries their initial and first name, the buyer
   door goes to /pembeli and the menu ends with "Log Keluar" */
.nav__login--buyer .nav__cta { gap: 0.45rem; padding-left: 0.4rem; }
.nav__avatar {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 999px; background: var(--navy-950); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0;
}
.nav__who { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__signout {
  display: block; width: 100%; margin-top: var(--sp-2); padding: 0.7rem 0.8rem;
  border: 0; border-top: 1px solid var(--ink-100); border-radius: 0 0 calc(var(--radius) - 4px) calc(var(--radius) - 4px);
  background: none; color: var(--ink-700); font: inherit; font-size: 0.9rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.nav__signout:hover, .nav__signout:focus-visible { background: var(--ink-050); color: var(--navy-950); }
.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(--navy-950); 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(--navy-950); }
.lang-switch button[aria-pressed="true"],
.lang-switch a[aria-pressed="true"] {
  background: var(--navy-950); 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(--navy-950);
}
.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(--navy-950); }

.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(--navy-950);
}
.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); }
/* --- homepage (2026 refresh) ---------------------------------------------
   The reference layout: a full-bleed photo hero with one search bar, then a
   white sheet with rounded top corners rising over it, carrying the sections.
   Every car on the page comes from the public listings reply (pekema.js). */
.hl { color: var(--gold-700); }
.hero .hl, .section--ink .hl { color: var(--gold-400); }

/* the photo is bright (sky, glass, the cars): the wash is darkest behind the
   headline and the search, and lighter over the cars at the bottom */
.hero--home .hero__bg img { object-position: center 62%; }
.hero--home::after {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(5, 11, 32, 0.55), rgba(5, 11, 32, 0) 100%),
    linear-gradient(180deg, rgba(5, 11, 32, 0.78) 0%, rgba(5, 11, 32, 0.5) 50%, rgba(5, 11, 32, 0.35) 78%, rgba(5, 11, 32, 0.6) 100%);
}
/* the header floats over the photo, so the hero clears it; the bottom padding
   leaves room for the sheet that overlaps it */
.hero--home .hero__inner--center { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem)); padding-bottom: calc(var(--radius-sheet) + clamp(3rem, 7vw, 5.5rem)); }
.hero__inner--center {
  max-width: none; display: grid; justify-items: center; text-align: center;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(4rem, 9vw, 7rem);
}
.hero__kicker { margin: 0 0 var(--sp-3); font-size: var(--step--1); font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.hero__inner--center h1 { max-width: 22ch; margin-bottom: var(--sp-6); font-size: clamp(2rem, 1.3rem + 3vw, 4rem); letter-spacing: -0.03em; }

/* One white bar: keyword, then the four filters, then the gold button. Each
   field is a cell divided by a hairline; below 900px the cells stack in a card. */
.hero-find { width: min(100%, 1040px); }
.hero-find__bar {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: var(--sp-2); border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink-500); box-shadow: var(--shadow-lg);
}
.hero-find__field { position: relative; display: flex; align-items: center; min-width: 0; }
.hero-find__field > svg { position: absolute; left: 1rem; pointer-events: none; color: var(--ink-400); }
.hero-find__field input,
.hero-find__field select {
  width: 100%; min-width: 0; min-height: 48px; border: 0; border-radius: var(--radius-sm);
  background-color: transparent; font: inherit; font-size: 0.95rem; color: var(--navy-950);
}
.hero-find__field input { padding: 0.6rem 0.8rem 0.6rem 2.6rem; outline: 0; }
.hero-find__field input::placeholder { color: var(--ink-400); }
.hero-find__field input::-webkit-search-cancel-button { display: none; }
.hero-find__field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.hero-find__field select:disabled { color: var(--ink-400); cursor: not-allowed; }
.hero-find__field input:focus-visible,
.hero-find__field select:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.hero-find__field:hover select:not(:disabled) { background-color: var(--ink-050); }
.hero-find__submit { gap: var(--sp-2); min-height: 48px; padding-inline: 1.5rem; font-size: 0.95rem; }
.hero-find__submit:hover { transform: none; }
.hero-find__submit:focus-visible { outline: 3px solid var(--navy-950); outline-offset: 2px; }
@media (min-width: 900px) {
  .hero-find__bar {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto auto;
    align-items: center; gap: 0; padding: 0.4rem; border-radius: 999px;
  }
  .hero-find__field + .hero-find__field::before {
    content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--ink-100);
  }
  .hero-find__field input { border-radius: 999px; }
  .hero-find__field select { border-radius: 999px; }
}

/* State and price wait behind "More filters" (owner, 2026-09-28): the bar keeps
   keyword, brand and model. Without the script the panel simply shows. */
.hero-find__toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 48px; padding: 0.6rem 1rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--navy-950); white-space: nowrap;
}
.hero-find__toggle:hover, .hero-find__toggle[aria-expanded="true"] { background: var(--ink-050); }
.hero-find__toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.hero-find__badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--gold-500); color: var(--navy-950); font-size: 0.75rem; font-weight: 700;
}
.hero-find__badge[hidden] { display: none; }
/* inside the bar: on a phone it opens in the card, above the search button;
   from 900px it drops down under the bar */
.hero-find__more {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: var(--sp-1) 0; border-block: 1px solid var(--ink-100);
}
.js .hero-find__more:not(.is-open) { display: none; }
@media (min-width: 900px) {
  .hero-find__bar { position: relative; }
  .hero-find__more {
    position: absolute; z-index: 5; top: calc(100% + var(--sp-2)); left: 50%; transform: translateX(-50%);
    width: min(100%, 520px); padding: 0.4rem; border: 0; border-radius: 999px;
    background: var(--paper); box-shadow: var(--shadow-lg);
  }
  .hero-find__field + .hero-find__toggle::before {
    content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--ink-100);
  }
}
@media (max-width: 480px) { .hero-find__more { grid-template-columns: minmax(0, 1fr); } }

/* "or browse by type": pills with a small car outline each */
.hero-types__label { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--step--1); color: rgba(255, 255, 255, 0.82); }
.hero-types { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.hero-types a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 1rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.9rem; font-weight: 500;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.hero-types a:hover { background: #fff; color: var(--navy-950); border-color: #fff; }
.hero-types svg { width: 26px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* the white sheet: the first section after the hero rises over its bottom edge */
.section--sheet {
  position: relative; z-index: 1; margin-top: calc(-1 * var(--radius-sheet));
  background: var(--paper); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}

/* --- brand tiles ---------------------------------------------------------- */
.brand-tiles { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.brand-tile {
  display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper);
  color: var(--navy-950); text-align: center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.brand-tile:hover { border-color: var(--gold-500); box-shadow: var(--shadow); transform: translateY(-2px); }
/* one file per make in assets/img/makes/ (scripts/brand/write-site-make-logos.ts);
   a wide mark (Land Rover, BYD, Isuzu) gets the box's width, a round one its height */
.brand-tile__logo { width: 88px; height: 56px; object-fit: contain; }
.brand-tile__name { font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.brand-tile__count { margin-top: -0.5rem; font-size: 0.8rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .brand-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .brand-tile { gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); }
  .brand-tile__logo { width: 64px; height: 40px; }
  .brand-tile__name { font-size: 0.85rem; overflow-wrap: anywhere; }
}

/* --- car cards and the rails that carry them ------------------------------- */
.car-rail { position: relative; }
.car-rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 3 * var(--sp-5)) / 4));
  gap: var(--sp-5); margin: 0; padding: 4px 4px var(--sp-4); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.car-rail__track::-webkit-scrollbar { display: none; }
.car-rail__track > li { scroll-snap-align: start; min-width: 0; }
@media (max-width: 640px) { .car-rail__track { grid-auto-columns: 82%; gap: var(--sp-4); } }
@media (prefers-reduced-motion: reduce) { .car-rail__track { scroll-behavior: auto; } }
.car-rail__nav { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.car-rail__nav[hidden] { display: none; }
.car-rail__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ink-200); border-radius: 999px; background: var(--paper); color: var(--navy-950); cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.car-rail__btn:hover:not(:disabled) { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.car-rail__btn:disabled { opacity: 0.4; cursor: default; }
.car-rail__pos { font-size: 0.85rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.section--ink .car-rail__btn { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.section--ink .car-rail__btn:hover:not(:disabled) { background: #fff; color: var(--navy-950); border-color: #fff; }
.section--ink .car-rail__pos { color: var(--ink-300); }
.car-rail__empty { margin: 0; padding: var(--sp-6); border: 1px dashed var(--ink-200); border-radius: var(--radius); text-align: center; color: var(--ink-500); }
.section--ink .car-rail__empty { border-color: rgba(255, 255, 255, 0.2); color: var(--ink-300); }
.car-rail[aria-busy="true"] .car-rail__track { opacity: 0.5; transition: opacity 0.2s var(--ease); }

.car-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--ink-100); border-radius: var(--radius); overflow: hidden; background: var(--paper);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.car-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.car-card__media { position: relative; flex: none; aspect-ratio: 4 / 3; background: var(--ink-100); overflow: hidden; }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.car-card:hover .car-card__media img { transform: scale(1.04); }
.car-card__badge {
  position: absolute; left: var(--sp-3); top: var(--sp-3); padding: 0.25rem 0.7rem; border-radius: 999px;
  background: var(--gold-400); color: var(--navy-950); font-size: 0.75rem; font-weight: 600;
}
.car-card__badge--verified { background: #e3f3ea; color: #145235; }
.car-card__badge--hot { background: #fde8dd; color: #8a2c0a; }
.car-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.car-card__title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.car-card__title a { color: inherit; padding-block: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the whole card is the link; the title's anchor stretches over it */
.car-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.car-card__sub { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-card__specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
  margin: var(--sp-4) 0; padding: var(--sp-3) 0; list-style: none;
  border-block: 1px solid var(--ink-100); font-size: 0.8rem; color: var(--navy-950); text-align: center;
}
.car-card__specs li { display: grid; justify-items: center; gap: 0.3rem; min-width: 0; }
.car-card__specs svg { width: 18px; height: 18px; color: var(--ink-500); }
.car-card__specs span { max-width: 100%; line-height: 1.3; overflow-wrap: anywhere; }
.car-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin-top: auto; }
.car-card__price { margin: 0; display: grid; line-height: 1.25; }
.car-card__price strong { white-space: nowrap; font-size: 1.2rem; font-weight: 700; color: var(--navy-950); font-variant-numeric: tabular-nums; }
.car-card__price span { font-size: 0.8rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.car-card__more { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--gold-700); white-space: nowrap; }

/* on the navy band: the photo left, the details right, on a lighter navy card */
.section--ink .car-card { border-color: rgba(255, 255, 255, 0.08); background: var(--navy-900); color: var(--ink-200); }
.section--ink .car-card__title { color: #fff; }
.section--ink .car-card__sub, .section--ink .car-card__price span { color: var(--ink-300); }
.section--ink .car-card__specs { border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.section--ink .car-card__specs svg { color: var(--ink-300); }
.section--ink .car-card__price strong { color: #fff; }
.section--ink .car-card__more { color: var(--gold-400); }
@media (min-width: 700px) {
  .car-rail--wide .car-rail__track { grid-auto-columns: minmax(520px, calc((100% - var(--sp-5)) / 2)); }
  .car-card--row { flex-direction: row; }
  .car-card--row .car-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 250px; }
  .car-card--row .car-card__specs { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; border-block: 0; padding: 0; margin: var(--sp-3) 0 var(--sp-4); }
  .car-card--row .car-card__specs li { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--sp-2); }
}

/* --- report check: photo left, the chassis form on a soft navy panel ------- */
.report-split { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-050); }
.report-split__media { position: relative; min-height: 260px; background: var(--navy-950); }
.report-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.report-split__body { padding: clamp(1.75rem, 4vw, 4rem); }
.report-split__body h2 { font-size: var(--step-3); margin-bottom: var(--sp-4); }
.report-split__body > p { color: var(--ink-600); }
@media (min-width: 900px) { .report-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .report-split__media { min-height: 100%; } }
.ticks { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--navy-950); font-size: 0.95rem; }
.ticks li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 999px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a86f00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--gold-100);
}
.report-split .report-find__label { color: var(--navy-950); }
.report-split .report-find__hint, .report-split .cta-band__member { color: var(--ink-600); }
.report-split .cta-band__member a { color: var(--navy-950); }

/* --- the four real numbers, as a ruled row --------------------------------- */
.stats.stats--line {
  gap: var(--sp-5); background: none; border: 0; border-bottom: 1px solid var(--ink-100);
  border-radius: 0; padding-bottom: var(--sp-7); overflow: visible;
}
.stats--line .stat { background: none; padding: 0; }
.stats--line .stat__num { color: var(--navy-950); font-size: var(--step-4); font-weight: 700; }
.stats--line .stat__label { font-size: 0.85rem; letter-spacing: 0; text-transform: none; font-weight: 500; }

/* --- why PEKEMA: four icon columns ------------------------------------------ */
.why { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.why__icon { display: block; width: 52px; height: 52px; margin-bottom: var(--sp-4); color: var(--gold-600); }
.why h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.why p { margin: 0; color: var(--ink-500); font-size: 0.95rem; }

/* --- calculators: three linked cards with an icon each ---------------------- */
.tool-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tool-card {
  display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-6);
  border: 1px solid var(--ink-100); border-radius: var(--radius); background: var(--paper);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.tool-card:hover { border-color: var(--gold-500); box-shadow: var(--shadow); transform: translateY(-2px); }
.tool-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-2); border-radius: 999px; background: var(--gold-100); color: var(--gold-700); }
.tool-card h3 { margin: 0; font-size: var(--step-1); }
.tool-card p { margin: 0; color: var(--ink-500); font-size: 0.95rem; }
.tool-card__go { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--sp-2); font-size: 0.9rem; font-weight: 600; color: var(--gold-700); }

/* --- shop by: link columns under tabs --------------------------------------- */
.link-cols { columns: 5 160px; column-gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.link-cols li { break-inside: avoid; }
.link-cols a { display: inline-block; padding: 0.35rem 0; font-size: 0.92rem; color: var(--ink-600); }
.link-cols a:hover { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; }
/* without the script every panel shows, each under its own heading */
.shop-panel + .shop-panel { margin-top: var(--sp-5); }
.shop-panel__h { margin: 0 0 var(--sp-2); font-size: 1rem; }
.js .shop-panel__h { display: none; }
.js .shop-panel + .shop-panel { margin-top: 0; }
.shop-tabs[hidden] { display: none; }

/* --- the two service cards ---------------------------------------------------- */
.duo { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.duo__card {
  position: relative; display: grid; gap: var(--sp-3); align-content: start;
  padding: clamp(1.75rem, 3.5vw, 3rem); padding-right: clamp(1.75rem, 12vw, 9rem);
  border-radius: var(--radius-lg); background: var(--navy-050); overflow: hidden;
}
.duo__card--gold { background: var(--gold-050); box-shadow: inset 0 0 0 1px var(--gold-100); }
.duo__card h3 { margin: 0; font-size: var(--step-2); }
.duo__card p { margin: 0; color: var(--ink-600); }
.duo__card .btn { justify-self: start; margin-top: var(--sp-3); }
.duo__art { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); width: clamp(56px, 8vw, 96px); height: auto; color: var(--gold-600); }
.duo__card:not(.duo__card--gold) .duo__art { color: var(--navy-700); }
@media (max-width: 560px) { .duo__art { display: none; } }

/* compact page hero for interior pages */
.pagehero { position: relative; isolation: isolate; color: #fff; background: var(--navy-950); overflow: hidden; }
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.30;
  background-image: url("../img/hero-showroom.webp");
  background-size: cover; background-position: center;
}
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(5,11,32,0.95) 35%, rgba(5,11,32,0.66));
}
.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; }
/* the car page's summary line: condition, price, where it is and how far it's
   run. Each item keeps its icon and text on one line; the line wraps between
   items, not inside them. */
.pagehero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0; color: rgba(255, 255, 255, 0.72); font-size: var(--step--1);
}
.pagehero__meta > span { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.pagehero__meta svg { flex: none; opacity: 0.6; }
.pagehero__price {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  color: #fff; font-variant-numeric: tabular-nums;
}

.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(--navy-950); }
.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;
  min-width: 0; overflow-wrap: anywhere;
}

/* 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(--navy-950); 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(--navy-950); }
.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(--navy-950); 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, .field textarea {
  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, .field textarea:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }
.field textarea { font: inherit; resize: vertical; min-height: 5.5rem; }

.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(--navy-950); 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(--navy-950); 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(--navy-950); border-color: var(--navy-950); 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(--navy-950); border-color: var(--navy-950); 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);
}
/* lower on the page the band sits in the flow */
.stats-band--flat { padding-block: 0 clamp(2.5rem, 4vw, 4rem); }
.stats-band--flat .stats { margin-top: 0; box-shadow: var(--shadow); border: 1px solid var(--ink-100); }

/* --- 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(--navy-950);
  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(--navy-950); }
.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(--navy-950);
  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(--navy-950); }
.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(--navy-950); 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(--navy-950); }
.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(--navy-950); 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(--navy-950); }

@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(--navy-950);
}
.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(--navy-950); 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(--navy-950); color: #fff; border-color: var(--navy-950); 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(--navy-950);
}
.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(--navy-950); }
.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(--navy-950); display: block; margin-bottom: var(--sp-4);
}
.cta-band .cta-band__member { margin-top: var(--sp-4); font-size: var(--step--1); }
.cta-band__member a { color: var(--navy-950); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta-band__member a:hover { text-decoration-thickness: 2px; }

/* The homepage chassis box (Track RS): a plain GET form to /laporan-lelongan. */
.report-find { display: grid; gap: var(--sp-2); min-width: 0; }
.report-find__label { font-weight: 600; color: var(--navy-950); }
.report-find__bar {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  padding: 0.4rem; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-lg);
}
.report-find__bar:focus-within { box-shadow: var(--shadow-lg), 0 0 0 4px rgba(22, 23, 26, 0.35); }
.report-find__bar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0.55rem 0.25rem 0.55rem 0.9rem;
  font: inherit; font-size: 1rem; letter-spacing: 0.02em; color: var(--navy-950); text-transform: uppercase;
}
.report-find__bar input::placeholder { color: var(--ink-400); text-transform: none; letter-spacing: 0; }
.report-find__submit { flex: none; border-radius: 999px; padding-inline: 1.25rem; }
.cta-band .report-find__hint { font-size: var(--step--1); }
@media (max-width: 380px) {
  .report-find__bar { flex-wrap: wrap; border-radius: var(--radius); }
  .report-find__submit { width: 100%; justify-content: center; }
}

/* --- 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 ------------------------------------------------------------- */
/* navy with rounded top corners, as on the reference; the page behind the
   corners is the body's own background, so every page ends the same way */
.site-footer {
  position: relative; background: var(--navy-950); color: var(--ink-300);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--sp-5);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}
.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: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: var(--sp-4); }
.site-footer a { color: var(--ink-200); 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-300); 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(--navy-950); 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-300);
}

/* --- 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(--navy-950);
  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(--navy-950); 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(--navy-950);
  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(--navy-950); }
.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(--navy-950);
}
.tier__price { font-size: var(--step-3); font-weight: 700; color: var(--navy-950); 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(--navy-950); 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(--navy-950); 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;
}
/* the API is being asked: the figure stays but reads as provisional */
.calc__out--busy .calc__out-value { opacity: 0.55; transition: opacity 0.15s ease; }
/* the API could not be reached: one line, no figure */
.calc__error {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: rgba(255, 180, 0, 0.14); border: 1px solid rgba(255, 180, 0, 0.45);
  color: #fff; font-size: var(--step--1); line-height: 1.5;
}
.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; flex: 0 1 auto; }
.calc__row dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--navy-950);
  font-variant-numeric: tabular-nums; flex: 1 1 auto;
}
.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; }

@media (max-width: 640px) {
  .calc__panel, .calc__out { padding: var(--sp-4); }
  .calc__break { padding: var(--sp-4); }
  .calc__sched table { font-size: 0.85rem; width: 100%; }
  .calc__sched th, .calc__sched td { padding: 0.5rem 0.4rem; }
  .calc__sched th:first-child, .calc__sched td:first-child { padding-left: 0; }
  .calc__sched th:last-child, .calc__sched td:last-child { padding-right: 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;
}

/* --- semak laporan: by code, or by PDF -----------------------------------
   Two equal panels, side by side on a wide row and stacked on a phone; each
   answer lands in the panel that asked, under its form. The verdict carries
   its meaning in words first and colour second. */
.verify { display: grid; gap: var(--sp-5); align-items: start; }
.verify > * { min-width: 0; }
@media (min-width: 900px) { .verify { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.verify__card {
  display: grid; gap: var(--sp-4); align-content: start;
  background: var(--paper); border: 1px solid var(--ink-100);
  border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.verify__card > h2 { font-size: var(--step-2); margin: 0; }
.verify__card > p { margin: 0; color: var(--ink-500); font-size: var(--step--1); line-height: 1.6; }
.verify__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold-050); color: var(--gold-700); border: 1px solid var(--gold-100);
}
.verify__form { display: grid; gap: var(--sp-4); }
.verify__form > .btn { justify-self: start; }
.verify__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.verify__row .verify__code { flex: 1 1 12rem; width: auto; min-width: 0; }
.verify__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.verify__code::placeholder { letter-spacing: 0.04em; text-transform: none; }
.verify .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

.verify__drop {
  position: relative; display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4); text-align: center; cursor: pointer;
  border: 2px dashed var(--ink-200); border-radius: var(--radius);
  background: var(--ink-050); color: var(--ink-400);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.verify__drop:hover, .verify__drop.is-over { border-color: var(--gold-500); background: var(--gold-050); }
.verify__drop:focus-within { outline: 3px solid var(--gold-400); outline-offset: 2px; }
/* the input covers the zone, so a tap anywhere on it opens the file picker */
.verify__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.verify__drop-text { color: var(--ink-700); font-weight: 500; overflow-wrap: anywhere; }
.verify__drop-hint { font-size: var(--step--1); }

.verify__result { display: grid; gap: var(--sp-4); }
.verify__result:empty { display: none; }
.verify__verdict {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  border: 1px solid var(--ink-100); border-left-width: 4px;
}
.verify__verdict p { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-600); }
.verify__verdict .verify__verdict-title {
  margin-bottom: var(--sp-1); font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 700; line-height: 1.3; color: var(--navy-950);
}
.verify__verdict--ok {
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok);
}
.verify__verdict--ok .verify__verdict-title { color: var(--ok); }
.verify__verdict--warn { background: var(--gold-050); border-color: var(--gold-100); border-left-color: var(--warn); }
.verify__verdict--bad {
  background: color-mix(in srgb, #c0392b 8%, transparent);
  border-color: color-mix(in srgb, #c0392b 30%, transparent); border-left-color: #c0392b;
}
.verify__verdict--bad .verify__verdict-title { color: #8c2a1f; }
.verify__verdict--none { background: var(--ink-050); border-left-color: var(--ink-400); }

.verify__rows { margin: 0; display: grid; gap: var(--sp-2); }
.verify__line {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--ink-100);
}
.verify__line:last-child { padding-bottom: 0; border-bottom: 0; }
.verify__line dt { flex: none; max-width: 50%; color: var(--ink-500); font-size: var(--step--1); }
.verify__line dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; color: var(--navy-950); overflow-wrap: anywhere; }
.verify__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
/* a button label here can carry a code, so it may wrap */
.verify__action { justify-self: start; white-space: normal; }

@media (max-width: 640px) {
  .verify__card { padding: var(--sp-4); }
  .verify__row .btn { flex: 1 1 100%; }
  .verify__form > .btn, .verify__action { justify-self: stretch; }
}

/* --- 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(--navy-950); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.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(--navy-950); 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(--navy-950); 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); }

/* pertanyaan: the last block in the buy panel, so the panel reads top to
   bottom as price, contact, calculators, seller, ask */
.car-enquiry {
  display: grid; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--ink-100);
}
.car-enquiry form { display: grid; gap: var(--sp-3); }
.car-enquiry .btn { width: 100%; justify-content: center; }
.car-enquiry .form-note { font-size: 0.75rem; }
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* user-uploaded listings withhold seller contact until SmartRecon-synced */
.car-card__nocontact {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--ink-050); border: 1px solid var(--ink-100);
  color: var(--ink-400); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.02em; text-align: center;
}
.car-buy__note { color: var(--ink-400); font-size: var(--step--1); font-style: italic; margin: 0; }

.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(--navy-950); }
.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(--navy-950); }
.cmodal__tabs button.is-current { background: var(--paper); color: var(--navy-950); 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(--navy-950);
}
.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(--navy-950); 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(--navy-950); }

@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; }
}

/* --- 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; }
}