/* ==========================================================================
   Accupro International — design system
   Brand: navy #2A3490 + gold #C09725 (sampled from the logo)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* Cross-document view transitions — native browser cross-fade between one
   full page load and the next (Chrome/Edge 126+, Safari 18.2+). No JS: the
   browser snapshots the outgoing page and the incoming page and cross-fades
   between them automatically. Unsupported browsers just ignore this rule
   and navigate as before — nothing to feature-detect or fall back on. */
@view-transition{navigation:auto}

:root{
  --navy:#2A3490; --navy-700:#212a76; --navy-900:#161c4f; --navy-050:#eef0fa;
  --gold:#C09725; --gold-700:#9a7a1d; --gold-050:#fbf7e9;
  --ink:#1B1B18; --body:#4E4E46; --muted:#73736A; --faint:#9A9A90;
  --line:#E4E4DC; --line-strong:#CFCFC5;
  --paper:#FFFFFF; --surface:#F8F8F4; --surface-2:#F1F1EB;
  --shadow-sm:0 1px 2px rgba(27,27,24,.05);
  --shadow:0 4px 16px rgba(27,27,24,.07);
  --shadow-lg:0 12px 32px rgba(27,27,24,.10);
  --r:4px; --r-lg:6px; --r-xl:20px;
  --sans:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Plus Jakarta Sans',var(--sans);
  --container:1200px; --gutter:24px;
  --header-h:76px;
}

/* Section Builder: dynamic sections retain the same rhythm as theme templates. */
.accupro-builder-page > .section + .section,
.accupro-builder-page > .pagehero + .section,
.accupro-builder-page > .hero + .section { margin-top: 0; }
.accupro-builder-section > .container > .accupro-builder-grid { margin-top: clamp(24px,3vw,40px); }
.accupro-content--left > .imgslot { order: -1; }
.section--navy .eyebrow { color: var(--gold); }
.section--navy .small,
.section--navy .prose { color: #c3c7e6; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--gold-700)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4,.display{font-family:var(--display);color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.3rem)}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);font-weight:700;letter-spacing:-.015em}
h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--body);line-height:1.6;text-wrap:pretty}
.eyebrow{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.eyebrow--gold{color:var(--gold)}
.small{font-size:.9375rem;line-height:1.6;color:var(--muted)}
.tiny{font-size:.8125rem;line-height:1.55;color:var(--faint)}
/* Irama vertikal untuk blok teks panjang. Sebelumnya hanya paragraf beruntun
   yang diberi jarak, sehingga judul menempel rapat ke teks di bawahnya — dan
   di WordPress, .prose membungkus keluaran editor yang isinya bisa judul,
   daftar, tabel, atau gambar, bukan hanya paragraf. */
.prose>*+*{margin-top:1em}
.prose p + p{margin-top:1em}
.prose h2{margin-top:1.7em;margin-bottom:.1em}
.prose h3{margin-top:1.4em;margin-bottom:.1em}
.prose h4{margin-top:1.2em;margin-bottom:.1em}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.4em}
.prose>.grid,.prose>.stack,.prose>figure,.prose>table{margin-top:1.7em}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,6vw,88px)}
.section--tight{padding-block:clamp(36px,4vw,56px)}
.section--surface{background:var(--surface)}
.section--navy{background:var(--navy);color:#D7DAEF}

/* ---------- sub-page banner — contained split, not a full-bleed band ----------
   Text and photo share one row instead of stacking (photo band on top, text
   block below), which is what made every one of these run 500-600px+ tall.
   Sharing a row means the section is only ever as tall as the taller side —
   usually the text, since the frame is capped. Same visual language as the
   homepage hero (framed photo, light surface) instead of a separate pattern. */
.pagehero{background:var(--surface-2)}
.pagehero__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(24px,4vw,48px);align-items:center;padding-block:clamp(28px,4vw,44px)}
.pagehero__content h1{margin-top:10px}
.pagehero__content .lede{margin-top:14px}
.pagehero__frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
/* width:100% is load-bearing — see the note on .hero__frame below: aspect-ratio
   + max-height on an auto-width block derives width from the clamped height
   instead of filling the container unless width is made explicit first. */
.pagehero__frame .imgslot{width:100%;border:none;border-radius:0;padding:0;aspect-ratio:4/3;max-height:340px;background:var(--surface)}
.pagehero__frame .imgslot > img{top:0;left:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none}
/* Hide the placeholder brief only once the photo has actually painted — if the
   CDN request fails (network hiccup, ad blocker, a bot-mitigation challenge),
   the icon stays visible instead of leaving a blank frame with no fallback. */
.pagehero__frame .imgslot:has(>img[data-ok]) > svg,
.pagehero__frame .imgslot:has(>img[data-ok]) > .imgslot__label,
.pagehero__frame .imgslot:has(>img[data-ok]) > .imgslot__spec{display:none}
.pagehero__frame .imgslot .imgslot__spec{display:none}

/* ---------- homepage hero — light theme, framed photo, floating finder ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--surface) 100%);padding-block:clamp(20px,3vw,36px) clamp(28px,4vw,44px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
.hero__content{display:flex;flex-direction:column;gap:20px}
.hero__slides{display:grid;position:relative;min-height:190px}
/* Every slide occupies the same grid cell and remains in layout. The track is
   therefore sized by the tallest translation, so autoplay cannot move the CTA
   and the rest of the page up or down as headlines change. */
.hero__slide{grid-area:1/1;position:relative;width:100%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease, visibility .5s ease}
.hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero__slide h1{font-size:clamp(2.25rem,1.7rem + 2.4vw,3.375rem)}
.hero__slide .lede{margin-top:14px;max-width:52ch}
.hero__stats{gap:20px;margin-top:6px;padding-top:22px;border-top:1px solid var(--line)}
.hero__nav{display:flex;align-items:center;gap:10px;margin-top:4px}
.hero__dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);border:1px solid var(--line-strong)}
.hero__dot.is-active{background:var(--navy);border-color:var(--navy)}
.hero__arrow{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);color:var(--navy);background:var(--paper)}
.hero__arrow:hover{border-color:var(--navy);background:var(--navy-050)}
.hero__arrow--next svg{transform:rotate(180deg)}
.hero__media{position:relative}
.hero__frame{display:grid;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.hero__frame-slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease, visibility .5s ease}
.hero__frame-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero__frame .imgslot{border:none;border-radius:0;padding:0;background:var(--surface-2)}
.hero__frame .imgslot > img{top:0;left:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none}
.hero__frame .imgslot:has(>img[data-ok]) > svg,
.hero__frame .imgslot:has(>img[data-ok]) > .imgslot__label,
.hero__frame .imgslot:has(>img[data-ok]) > .imgslot__spec{display:none}
.hero__frame .imgslot .imgslot__spec{display:none}

/* ---------- service finder bar — its own section, not stacked into the hero ---------- */
.finder-bar__grid{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:18px;align-items:end}
.finder-bar__label h3{font-size:1.0625rem}
.finder-bar .field{min-width:0}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy .small,.section--navy .tiny{color:#A8AEDB}
.stack>*+*{margin-top:var(--s,16px)}
.split>*,.grid>*,.stack>*,.cluster>*{min-width:0}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Lencana ikon menonjol 22px ke atas dari kartu. Tanpa tambahan jarak
   baris, lencana kartu baris kedua nyaris menempel kartu di atasnya. */
.grid--badged{row-gap:calc(clamp(16px,2vw,24px) + 26px)}
/* Grid kategori dimulai cukup jauh dari judul agar lencana baris pertama
   tidak masuk ke area heading. Jarak ini mengikuti lencana, bukan isi kartu. */
.grid--floating-badges{margin-top:clamp(44px,4vw,60px)}
.split{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.split--wide{grid-template-columns:1.15fr 1fr}
.split--narrow{grid-template-columns:1fr 1.3fr}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip-path:none;color:#fff;border-radius:var(--r)}

/* ---------- utility bar (real content — see src/layout.mjs) ---------- */
.utility-bar{background:var(--navy-900,#161c4f);color:#A8AEDB;font-size:.8125rem}
.utility-bar__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.utility-bar__row a{color:#A8AEDB;display:inline-flex;align-items:center;gap:6px}
.utility-bar__row a:hover{color:#fff}
.utility-bar__hours{display:flex;align-items:center;gap:6px}
.utility-bar__socials{display:flex;align-items:center;gap:10px}
.utility-bar__socials a{color:#A8AEDB}
.utility-bar__socials a:hover{color:var(--gold,#C09725)}
@media (max-width:640px){.utility-bar__hours{display:none}}

/* ---------- header ---------- */
/* No backdrop-filter here: it would create a new containing block for the
   fixed-position mobile nav nested inside, capping it to the header's own
   box instead of the full viewport. */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__mark{width:44px;height:41px;flex:none}
.brand__name{font-family:var(--display);font-weight:800;font-size:1.0625rem;letter-spacing:.03em;color:var(--navy)}
.brand__sub{display:block;font-family:var(--sans);font-weight:400;font-size:.625rem;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:4px}
/* Hanya dipakai di dalam drawer mobile; di desktop CTA-nya ada di .header__end.
   Diberi dua class supaya menang atas .btn{display:inline-flex} di bawah —
   dengan satu class saja spesifisitasnya seri dan aturan .btn yang menang
   karena berada lebih akhir, sehingga tombolnya muncul dua kali di desktop. */
.nav .nav__cta{display:none}
.nav__link{display:flex;align-items:center;gap:5px;padding:10px 12px;font-size:.9375rem;font-weight:600;color:var(--ink);white-space:nowrap;border-radius:var(--r)}
.nav__link:hover{color:var(--navy);background:var(--navy-050)}
.nav__link[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.header__end{display:flex;align-items:center;gap:12px;flex:none}
.langs{display:flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r)}
.nav>.langs{display:none}
.langs a{padding:5px 9px;font-size:.75rem;font-weight:600;color:var(--muted);border-radius:var(--r);white-space:nowrap}
.langs a[aria-current="true"]{background:var(--navy);color:#fff}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;font-family:var(--display);font-size:.9375rem;font-weight:700;letter-spacing:-.01em;border-radius:var(--r);white-space:nowrap;text-align:center;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-700);color:#fff}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-700);color:#fff}
.btn--ghost{border:1.5px solid var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--onnavy{border:1.5px solid #7C86CE;color:#fff}
.btn--onnavy:hover{background:#fff;color:var(--navy)}
.btn--quiet{min-height:42px;padding:0 16px;font-size:.875rem;border:1px solid var(--line-strong);color:var(--ink)}
.btn--quiet:hover{border-color:var(--navy);color:var(--navy)}
.btn--sm{min-height:42px;padding:0 16px;font-size:.875rem}
.btn--block{width:100%}
.btn svg{flex:none}

/* ---------- image slots (replace with real photos) ---------- */
.imgslot{--pad:16px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:var(--pad);text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r);
  background-color:var(--surface);
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.014) 0 10px,transparent 10px 20px);
  aspect-ratio:var(--ratio,16/9);overflow:hidden}
.imgslot svg{color:#B9B9AE}
.imgslot__label{font-size:.8125rem;line-height:1.45;color:var(--muted);max-width:34ch}
.imgslot__spec{font-size:.6875rem;letter-spacing:.05em;color:var(--faint);text-transform:uppercase}
.imgslot--fill{aspect-ratio:auto;height:100%;min-height:180px}
.imgslot--avatar{--pad:6px;aspect-ratio:1/1;width:48px;flex:none;border-radius:var(--r)}
.imgslot--avatar .imgslot__label,.imgslot--avatar .imgslot__spec{display:none}

/* A slot carrying a photo. The <img> is laid over the placeholder and bleeds
   past the padding so it sits flush; if it fails to load it is hidden and the
   placeholder underneath becomes visible again. */
.imgslot--photo{border-style:solid;border-color:var(--line);background-image:none}
/* sized explicitly, not via `inset` + width:auto — a replaced element resolves
   width:auto to its intrinsic width and ignores the opposite offset, which
   leaves the photo short of the slot edge by exactly one --pad */
.imgslot--photo>img{position:absolute;top:calc(-1 * var(--pad));left:calc(-1 * var(--pad));
  width:calc(100% + 2 * var(--pad));height:calc(100% + 2 * var(--pad));
  max-width:none;  /* the global img reset above would clamp the bleed away */
  object-fit:cover;display:block;background:var(--surface)}
.imgslot--photo>img[hidden]{display:none}
/* The brief stays visible until the photo has actually painted (onload sets
   data-ok), so a slot is never blank: brief while loading, photo once loaded,
   brief again if the load fails. */
.imgslot--photo:has(>img[data-ok])>svg,
.imgslot--photo:has(>img[data-ok])>.imgslot__label,
.imgslot--photo:has(>img[data-ok])>.imgslot__spec{visibility:hidden}

/* ---------- cards ---------- */
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:box-shadow .18s,border-color .18s,transform .18s}
.card--link:hover{box-shadow:var(--shadow);border-color:var(--line-strong);transform:translateY(-2px)}
.card__body{padding:22px}
.card--pad{padding:22px}
.card--surface{background:var(--surface);box-shadow:none}
.card--gold{border-color:#E6DCB6;background:var(--gold-050)}
.card--navy{border-color:var(--navy);border-width:1.5px}
.card__media{border-radius:var(--r-lg) var(--r-lg) 0 0;border:0;border-bottom:1px dashed var(--line-strong)}
.card__badge{position:absolute;top:-22px;left:22px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;border-radius:var(--r);box-shadow:var(--shadow)}
.card__badge--gold{background:var(--gold)}
.card__body--badged{padding-top:44px}
.rowcard{display:grid;grid-template-columns:var(--thumb,180px) 1fr auto;gap:0;align-items:center}
.rowcard__media{min-width:0}
.rowcard__body{padding:18px 22px;min-width:0}
.rowcard__end{padding:18px 22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.card__meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:.8125rem;color:var(--muted)}
.card__meta span{display:inline-flex;align-items:center;gap:5px}
.card__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--display);font-size:.875rem;font-weight:700;color:var(--navy)}
/* Kartu dalam satu baris grid tingginya sudah disamakan; tautan penutup
   didorong ke dasar kartu supaya sejajar antar kartu, tidak menggantung
   di tengah ketika deskripsinya lebih pendek. */
.card--link{display:flex;flex-direction:column}
.card--link>.card__body{flex:1;display:flex;flex-direction:column}
.card--link .card__more{margin-top:auto;padding-top:16px}
.card--link:hover .card__more{color:var(--gold-700)}
.icon-lead{color:var(--navy);margin-bottom:12px}
.icon-lead--gold{color:var(--gold)}

/* ---------- misc components ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:.75rem;font-weight:600;color:var(--gold-700);background:var(--gold-050);border:1px solid #E8DFBE;border-radius:100px}
.tag{display:inline-flex;align-items:center;padding:4px 9px;font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--navy);border-radius:var(--r)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;font-size:.875rem;font-weight:600;color:var(--body);background:var(--paper);border:1px solid var(--line-strong);border-radius:100px}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip--gold[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.crumbs{padding-block:18px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem;color:var(--faint)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fact{background:var(--paper);padding:18px}
.fact__k{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:10px 0 4px}
.fact__v{font-family:var(--display);font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.3}
.stat__v{font-family:var(--display);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.ph-tag{display:inline-block;padding:2px 7px;font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold-700);background:var(--gold-050);border:1px dashed #DFD3A6;border-radius:var(--r)}
.checklist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.checklist svg{flex:none;margin-top:3px;color:var(--navy)}
.tick-list li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:1rem}
.tick-list svg{flex:none;margin-top:5px;color:var(--gold)}
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dtable{min-width:520px}
.dtable th,.dtable td{border:1px solid var(--line);padding:12px 14px;text-align:left;font-size:.9375rem;vertical-align:top}
.dtable th{background:var(--surface);font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dtable tr:nth-child(even) td{background:#FCFCFA}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.acc__item + .acc__item{border-top:1px solid var(--line)}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:17px 20px;text-align:left;font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink)}
.acc__btn:hover{background:var(--surface);color:var(--navy)}
.acc__btn svg{flex:none;transition:transform .2s;color:var(--navy)}
.acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc__panel{padding:0 20px 20px;font-size:.9375rem;color:var(--body)}
.acc__panel[hidden]{display:none}

/* forms */
.field{display:block}
.field__label{display:block;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field__input,.field__select,.field__area{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:.9375rem;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r)}
.field__area{min-height:120px;resize:vertical}
.field__input:focus,.field__select:focus,.field__area:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.875rem;color:var(--muted)}
.consent{min-height:44px;align-items:center}
.consent input{width:22px;height:22px;flex:none;accent-color:var(--navy)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r)}

/* footer + floating whatsapp */
.footer{background:var(--navy-900);color:#B7BCE0;padding-block:56px 28px;font-size:.9375rem}
.footer a{color:#B7BCE0}
.footer a:hover{color:var(--gold)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.footer h4{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer li{padding:5px 0}
.footer__socials{display:flex;gap:9px;margin-top:18px}
.footer__socials a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #3E489F;border-radius:var(--r);color:#B7BCE0}
.footer__socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.footer__base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:36px;padding-top:20px;border-top:1px solid #313B87;font-size:.8125rem}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px;background:#1FA855;color:#fff;font-family:var(--display);font-weight:700;font-size:.9375rem;border-radius:100px;box-shadow:var(--shadow-lg)}
.wa-float:hover{background:#178a45;color:#fff}

/* ---------- responsive ---------- */
.team-grid{margin-top:clamp(24px,3vw,36px)}
.team-avatar{aspect-ratio:3/4;display:grid;place-items:center;background:var(--navy);color:var(--paper)}
.team-avatar span{display:grid;place-items:center;width:58%;aspect-ratio:1;border:2px solid var(--gold);border-radius:50%;font-family:var(--display);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;letter-spacing:.04em}
/* Foto tim harus terlihat utuh. Area media tetap 3:4 agar tinggi kartu sejajar,
   sementara contain mempertahankan seluruh sisi foto tanpa crop. */
.team-media.imgslot--photo{background:var(--surface)}
.team-media.imgslot--photo>img{top:0;left:0;width:100%;height:100%;max-width:100%;object-fit:contain}

/* Pada tablet, pusatkan kartu terakhir tanpa mengubah lebar kartu lain. */
@media (min-width:641px) and (max-width:1024px){
  .g3.grid--balanced{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--balanced > .card{grid-column:span 2}
  .grid--balanced > .card:last-child:nth-child(odd){grid-column:2 / span 2}
}
@media (max-width:1024px){
  :root{--gutter:20px}
  .nav,.langs{display:none}
  .burger{display:flex}
  .nav--open{display:flex;position:fixed;inset:var(--header-h) 0 0;flex-direction:column;align-items:stretch;gap:0;
    padding:16px var(--gutter) 32px;background:var(--paper);border-top:1px solid var(--line);overflow-y:auto;z-index:99}
  .nav--open .nav__link{padding:15px 4px;font-size:1.0625rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav--open .nav__link[aria-current="page"]{box-shadow:none;background:var(--navy-050)}
  .nav--open .langs{display:flex;margin-top:20px;align-self:flex-start}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--wide,.split--narrow{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr}
  .hero__frame{max-width:480px;margin-inline:auto}
  .pagehero__grid{grid-template-columns:1fr}
  /* width:100% is load-bearing: margin-inline:auto disables this grid item's
     default stretch-fill, and without an explicit width the imgslot child's
     own width:100% has nothing definite to resolve against — that circular
     reference collapsed the whole frame to 0×0 on narrow viewports. */
  .pagehero__frame{width:100%;max-width:480px;margin-inline:auto;order:-1}
  .finder-bar__grid{grid-template-columns:1fr 1fr;row-gap:16px}
  .finder-bar__label{grid-column:1/-1}
  .finder-bar .btn{grid-column:1/-1}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rowcard{grid-template-columns:1fr}
  .rowcard__media{--ratio:16/9!important}
  .rowcard__end{padding-top:0}
}
@media (max-width:640px){
  body{font-size:16px}
  :root{--gutter:16px;--header-h:66px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .finder-bar__grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:1fr}
  /* Di ponsel, kartu tim berubah menjadi baris ringkas. Foto tetap utuh di
     kiri dan informasi mendapat lebar yang cukup di kanan. */
  .team-grid{gap:12px;margin-top:24px}
  .team-card{display:grid;grid-template-columns:clamp(104px,32vw,124px) minmax(0,1fr);min-height:156px;overflow:hidden}
  .team-card>.card__media{width:100%;height:100%;min-height:156px;aspect-ratio:auto;border:0;border-right:1px dashed var(--line-strong);border-radius:0}
  .team-card>.team-avatar span{width:64%;font-size:clamp(1.75rem,8vw,2.25rem)}
  .team-card__body{display:flex;flex-direction:column;justify-content:center;padding:18px 16px}
  .team-card__body h3{font-size:1.0625rem;line-height:1.3;overflow-wrap:anywhere}
  /* Localized CTA labels can be substantially longer than their English
     equivalents. Let them wrap instead of forcing the flex item beyond the
     viewport and clipping the final words. */
  .btn{width:100%;height:auto;padding-block:12px;line-height:1.3;white-space:normal}
  .cluster .btn{flex:1 1 auto}
  .header__end .btn{display:none}
  /* …dan digantikan di dalam drawer, supaya CTA utama tidak hilang di mobile. */
  .nav--open .nav__cta{display:inline-flex;margin-top:20px}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .wa-float{right:12px;bottom:12px;min-height:48px;padding:0 16px}
}
/* The View Transitions API doesn't watch prefers-reduced-motion on its own —
   without this, the cross-fade above would still run its default animation
   for users who've explicitly asked to reduce motion. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{.header,.wa-float,.footer__socials{display:none}}

/* ---------- scroll reveal ----------------------------------------------
   .reveal is only ever added by JS, and only when the user hasn't asked for
   reduced motion — this media guard is a second line of defence so the
   hidden starting state can never apply for those users even if it were. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.is-visible{opacity:1;transform:translateY(0)}
/* .reveal dipasang oleh JS, jadi tanpa JS elemen tetap terlihat. Dua penjaga
   di bawah menutup dua kasus yang tidak tertangani itu: pengguna yang meminta
   gerak dikurangi setelah kelasnya terlanjur terpasang, dan pencetakan —
   opacity:0 membuat kartu yang belum sempat tergulir tercetak kosong. */
@media (prefers-reduced-motion: reduce){.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}}
@media print{.reveal,.reveal.is-visible{opacity:1 !important;transform:none !important}}
}

/* ---------- target sentuh di layar sentuh -------------------------------
   Tautan teks sebaris tingginya hanya setinggi barisnya — 21–25px. Cukup
   dengan mouse, tidak cukup dengan jempol. Di bawah 1024px tautan yang
   berdiri sendiri (daftar di kartu, judul rowcard, nomor telepon dan email)
   dijadikan blok dengan padding sungguhan, bukan diperluas lewat ::after:
   area tak terlihat yang saling menimpa membuat tautan tetangga yang
   tertekan. Kartu jadi sedikit lebih tinggi, dan itu memang harganya. */
@media (max-width:1024px){
  /* Tanpa margin negatif: padding di sini memang menambah tinggi, dan itu
     yang diinginkan. Versi sebelumnya memakai margin-block:-9px untuk menahan
     tingginya, tapi itu menarik elemen berikutnya sampai jaraknya jadi -1px —
     tautan bertetangga saling bertindihan, persis yang mau dihindari. */
  .card .stack>li>a,
  .card p.small>a:only-child{display:block;padding-block:9px}
  /* Jarak antar-baris kini datang dari padding tautannya sendiri. */
  .card ul.stack>li+li{margin-top:0}
  .rowcard__body h3 a{display:inline-block;padding-block:7px}
  .finder-bar p.tiny a{display:inline-block;padding-block:7px}
  /* Titik slider hanya 9px. Area sentuhnya diperluas lewat ::after supaya
     tampilannya tidak berubah, dan jarak antar-titik dilebarkan lebih dulu
     agar dua area sentuh yang bersebelahan tidak saling menimpa — kalau
     menimpa, yang tertekan jadi tidak bisa ditebak. */
  .hero__nav{gap:22px}
  .hero__dot{position:relative}
  .hero__dot::after{content:"";position:absolute;inset:-11px;border-radius:50%}
}