/* =========================================================
   ClearFlow Public Portal — Design System
   PPID PAM JAYA · Mockup by CV Webina Naramedia
   ========================================================= */
:root {
  --navy:      #0A2540;
  --navy-700:  #123258;
  --blue:      #0B6BCB;   /* aksen utama PAM */
  --blue-700:  #0954A5;
  --blue-300:  #7FB4E6;
  --aqua:      #17B0C4;   /* aksen segar */
  --aqua-700:  #0E8494;
  --cyan-50:   #E8F6FB;   /* bg section */
  --cyan-100:  #D2ECF5;
  --ink-900:   #0C1B2A;
  --ink-700:   #26414F;
  --ink-500:   #5A727F;
  --ink-300:   #93A7B1;
  --ink-100:   #E4EBEF;
  --line:      #E2EAEF;
  --white:     #FFFFFF;
  --bg-soft:   #F6FAFC;
  --amber:     #E8A33D;
  --green:     #1E9E63;
  --radius:    14px;
  --shadow:    0 8px 30px rgba(10, 37, 64, 0.07);
  --shadow-lg: 0 18px 50px rgba(10, 37, 64, 0.12);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--navy); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* LAYOUT */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container { padding-inline: 2rem; } }
.section { padding-block: 3.5rem; }
@media (min-width: 1024px) { .section { padding-block: 4.5rem; } }
.section.tight { padding-block: 2.5rem; }
.bg-soft { background: var(--bg-soft); }
.bg-cyan { background: var(--cyan-50); }
.bg-navy { background: var(--navy); color: rgba(255,255,255,.85); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aqua-700); margin-bottom: .7rem; }
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--aqua); border-radius: 2px; }
.section-lead { color: var(--ink-500); max-width: 62ch; font-size: 1.02rem; margin-top: .5rem; }
.center { text-align: center; }
.center .section-lead { margin-inline: auto; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .92rem; cursor: pointer; border: 1.5px solid transparent; transition: all .2s ease; font-family: inherit; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(11,107,203,.28); }
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); }
.btn-aqua { background: var(--aqua); color: #fff; }
.btn-aqua:hover { background: var(--aqua-700); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--ink-100); }
.btn-ghost:hover { border-color: var(--blue-300); color: var(--blue-700); }
.btn-white { background: #fff; color: var(--blue-700); }
.btn-white:hover { transform: translateY(-2px); color: var(--blue-700); }
.btn-sm { padding: .5rem 1rem; font-size: .82rem; }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-blue { background: var(--cyan-50); color: var(--blue-700); }
.badge-aqua { background: #E1F6F3; color: var(--aqua-700); }
.badge-amber { background: #FBF1E1; color: #B9822B; }
.badge-green { background: #E4F5EC; color: var(--green); }
.badge-gray { background: var(--ink-100); color: var(--ink-500); }

/* =============== HEADER (injected) =============== */
.topbar { background: var(--navy); color: rgba(255,255,255,.72); font-size: .8rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 1rem; }
.topbar a { color: rgba(255,255,255,.72); }
.topbar a:hover { color: #fff; }
.topbar-left { display: flex; gap: 1.2rem; align-items: center; }
.topbar-left .ti { display: inline-flex; gap: .4rem; align-items: center; }
.topbar-left svg { width: 14px; height: 14px; }
.topbar-right { display: flex; gap: .8rem; align-items: center; }
.lang-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.lang-toggle button { background: transparent; color: rgba(255,255,255,.6); border: 0; padding: .18rem .6rem; font-size: .72rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.lang-toggle button.active { background: var(--aqua); color: #fff; }
@media (max-width: 720px) { .topbar-left .ti.hide-sm { display: none; } }

.nav { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand .logo-mark { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, var(--blue), var(--aqua)); display: grid; place-items: center; color: #fff; font-weight: 800; font-family: 'Plus Jakarta Sans'; box-shadow: 0 6px 16px rgba(11,107,203,.3); flex-shrink: 0; }
.brand .logo-mark svg { width: 22px; height: 22px; }
.brand .bt { line-height: 1.05; }
.brand .bt .b1 { font-family: 'Plus Jakarta Sans'; font-weight: 800; color: var(--navy); font-size: 1.02rem; }
.brand .bt .b2 { font-size: .68rem; color: var(--ink-500); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; gap: .3rem; align-items: center; }
.nav-links a { padding: .55rem .8rem; border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--ink-700); transition: all .18s; }
.nav-links a:hover { background: var(--cyan-50); color: var(--blue-700); }
.nav-links a.active { color: var(--blue-700); background: var(--cyan-50); }
.nav-actions { display: flex; gap: .6rem; align-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--navy); transition: all .18s; }
.icon-btn:hover { border-color: var(--blue-300); color: var(--blue); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-toggle { display: none; }
@media (max-width: 1024px) {
  .nav-links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; background: #fff; padding: 1rem; gap: .2rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .3s ease; align-items: stretch; }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .8rem 1rem; }
  .nav-toggle { display: grid; }
  .nav-actions .btn { display: none; }
}

/* GLOBAL SEARCH OVERLAY */
.search-overlay { position: fixed; inset: 0; background: rgba(10,37,64,.5); backdrop-filter: blur(4px); z-index: 80; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; }
.search-overlay.open { display: flex; }
.search-box { width: min(640px, 92vw); background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.search-box .sb-input { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.search-box input { border: 0; outline: 0; font-size: 1.05rem; width: 100%; font-family: inherit; color: var(--navy); }
.search-box .sb-hint { padding: .9rem 1.3rem; font-size: .82rem; color: var(--ink-500); }
.search-box .sb-hint b { color: var(--navy); }

/* HERO */
.hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue-700) 55%, var(--aqua-700) 130%); color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -8%; top: -20%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(23,176,196,.5), transparent 65%); filter: blur(20px); }
.hero .container { position: relative; z-index: 2; padding-block: 4rem 6rem; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero h1 .hl { color: #7EE3EF; }
.hero p.lead { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 54ch; margin-top: 1.1rem; }
.hero-search { margin-top: 1.8rem; background: #fff; border-radius: 14px; padding: .5rem .5rem .5rem 1.1rem; display: flex; align-items: center; gap: .6rem; max-width: 560px; box-shadow: var(--shadow-lg); flex-wrap: wrap; }
.hero-search input { min-width: 140px; }
.hero-search svg { width: 20px; height: 20px; color: var(--ink-300); flex-shrink: 0; }
.hero-search input { flex: 1; border: 0; outline: 0; font-size: 1rem; font-family: inherit; color: var(--navy); }
.hero-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.hero-chips a { background: rgba(255,255,255,.13); color: #fff; padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.hero-chips a:hover { background: rgba(255,255,255,.24); color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; }
.hero-stat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 1rem 1.1rem; }
.hero-stat .n { font-family: 'Plus Jakarta Sans'; font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-stat .l { font-size: .78rem; color: rgba(255,255,255,.7); margin-top: .3rem; }
@media (max-width: 720px) { .hero-stats { grid-template-columns: 1fr 1fr; } }

/* WAVE divider */
.wave { display: block; width: 100%; height: 48px; }
.wave path { fill: var(--white); }
.wave.to-soft path { fill: var(--bg-soft); }
.wave.to-cyan path { fill: var(--cyan-50); }

/* =============== AQUATIC IMAGERY =============== */
.hero-decor { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-decor .drop-motif { position: absolute; right: 5%; top: 6%; width: min(360px, 36vw); color: #7EE3EF; opacity: .18; }
.hero-decor .ring { position: absolute; border: 2px solid rgba(126,227,239,.25); border-radius: 50%; }
.hero-decor .ring.r1 { width: 200px; height: 200px; right: 12%; top: 14%; }
.hero-decor .ring.r2 { width: 320px; height: 320px; right: 6%; top: 4%; opacity: .6; }
.bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(126,227,239,.12) 70%); border: 1px solid rgba(255,255,255,.22); animation: floatUp linear infinite; }
.bubble.b1 { width: 54px; height: 54px; left: 8%;  bottom: 6%;  animation-duration: 11s; }
.bubble.b2 { width: 26px; height: 26px; left: 20%; bottom: 2%;  animation-duration: 8s;  animation-delay: 1.5s; }
.bubble.b3 { width: 38px; height: 38px; left: 34%; bottom: 8%;  animation-duration: 13s; animation-delay: .8s; }
.bubble.b4 { width: 18px; height: 18px; left: 46%; bottom: 3%;  animation-duration: 9s;  animation-delay: 2.4s; }
.bubble.b5 { width: 30px; height: 30px; right: 30%; bottom: 5%; animation-duration: 12s; animation-delay: 1s; }
@keyframes floatUp {
  0%   { transform: translateY(20px) scale(.9); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: translateY(-160px) scale(1.15); opacity: 0; }
}
.hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero-waves svg { width: 100%; height: 72px; display: block; }
.hero-waves .w-slow { animation: waveDrift 14s ease-in-out infinite alternate; }
.hero-waves .w-fast { animation: waveDrift 9s ease-in-out infinite alternate-reverse; }
@keyframes waveDrift { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .bubble, .hero-waves .w-slow, .hero-waves .w-fast { animation: none; } }

/* wave under interior page headers (injected) */
.ph-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; }
.ph-wave svg { width: 100%; height: 46px; display: block; }

/* QUICK SERVICES */
.qs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .qs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .qs-grid { grid-template-columns: 1fr; } }
.qs-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: all .22s; display: block; }
.qs-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow); transform: translateY(-4px); }
.qs-card .qi { width: 46px; height: 46px; border-radius: 12px; background: var(--cyan-50); color: var(--blue); display: grid; place-items: center; margin-bottom: .9rem; }
.qs-card .qi svg { width: 23px; height: 23px; }
.qs-card h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.qs-card p { font-size: .86rem; color: var(--ink-500); }
.qs-card .more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem; font-size: .82rem; font-weight: 700; color: var(--blue); }

/* GENERIC CARD GRID */
.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Responsive split (asymmetric two-column) */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.6rem; align-items: start; }
.split.stretch { align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: all .22s; }
.card:hover { border-color: var(--blue-300); box-shadow: var(--shadow); }
.card .ci { width: 44px; height: 44px; border-radius: 11px; background: var(--cyan-50); color: var(--blue); display: grid; place-items: center; margin-bottom: .9rem; }
.card .ci svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.card p { font-size: .88rem; color: var(--ink-500); }

/* PAGE HEADER (interior pages) */
.page-head { background: linear-gradient(140deg, var(--navy), var(--blue-700)); color: #fff; position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: -6%; bottom: -60%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(23,176,196,.4), transparent 65%); }
.page-head .container { position: relative; z-index: 2; padding-block: 2.6rem 3.2rem; }
.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: .7rem; display: flex; gap: .4rem; }
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: #fff; }
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255,255,255,.82); max-width: 60ch; margin-top: .5rem; }

/* FORMS */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.field .req { color: #D14343; }
.input, textarea.input, select.input { width: 100%; border: 1.5px solid var(--ink-100); border-radius: 10px; padding: .7rem .9rem; font-size: .92rem; font-family: inherit; color: var(--navy); background: #fff; transition: border-color .18s; }
.input:focus, textarea.input:focus, select.input:focus { outline: 0; border-color: var(--blue); box-shadow: none; }
.input::placeholder { color: var(--ink-300); }
textarea.input { min-height: 110px; resize: vertical; }
.field .hint { font-size: .76rem; color: var(--ink-500); margin-top: .3rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.upload { border: 1.5px dashed var(--ink-100); border-radius: 10px; padding: 1.2rem; text-align: center; color: var(--ink-500); font-size: .86rem; cursor: pointer; }
.upload:hover { border-color: var(--blue-300); background: var(--bg-soft); }

/* TABLE / DIP */
.dip-toolbar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.chip-filter { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.chip { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .82rem; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: all .18s; }
.chip:hover { border-color: var(--blue-300); }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tbl thead th { background: var(--bg-soft); text-align: left; padding: .9rem 1.1rem; font-family: 'Plus Jakarta Sans'; font-weight: 700; color: var(--navy); font-size: .82rem; border-bottom: 1px solid var(--line); }
table.tbl tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--cyan-50); }
.doc-name { font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: .6rem; }
.doc-name .fi { width: 30px; height: 30px; border-radius: 7px; background: #FDECEC; color: #D14343; display: grid; place-items: center; flex-shrink: 0; font-size: .62rem; font-weight: 800; }
.dl { display: inline-flex; align-items: center; gap: .35rem; color: var(--blue); font-weight: 700; font-size: .82rem; }

/* ACCORDION / FAQ */
.acc { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; overflow: hidden; }
.acc-q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; font-weight: 700; color: var(--navy); font-size: .96rem; }
.acc-q .pm { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan-50); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; transition: transform .25s; font-size: 1.1rem; }
.acc.open .acc-q .pm { transform: rotate(45deg); background: var(--blue); color: #fff; }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a .inner { padding: 0 1.3rem 1.2rem; color: var(--ink-500); font-size: .9rem; }
.acc.open .acc-a { max-height: 400px; }

/* TIMELINE (tracking) */
.track-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow); }
.track-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.track-meta .tm .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-300); font-weight: 700; }
.track-meta .tm .v { font-weight: 700; color: var(--navy); font-size: .95rem; }
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--ink-100); }
.tl-step { position: relative; padding-bottom: 1.6rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step .dot { position: absolute; left: -2rem; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-100); display: grid; place-items: center; }
.tl-step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.tl-step.active .dot { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px rgba(11,107,203,.15); }
.tl-step .dot svg { width: 13px; height: 13px; }
.tl-step h4 { font-size: .96rem; color: var(--navy); }
.tl-step .when { font-size: .8rem; color: var(--ink-500); }
.tl-step.pending h4, .tl-step.pending .when { color: var(--ink-300); }

/* CHART (bars) */
.chart { display: flex; align-items: flex-end; gap: 1rem; height: 220px; padding: 1rem 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 54px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--aqua), var(--blue)); position: relative; transition: height .6s ease; }
.bar .val { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: .78rem; font-weight: 800; color: var(--navy); font-family: 'Plus Jakarta Sans'; }
.bar-col .lab { font-size: .76rem; color: var(--ink-500); text-align: center; }
.donut { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--green) 0 82%, var(--ink-100) 82% 100%); display: grid; place-items: center; }
.donut .hole { width: 104px; height: 104px; background: #fff; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.donut .hole .p { font-family: 'Plus Jakarta Sans'; font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.donut .hole .t { font-size: .7rem; color: var(--ink-500); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px){ .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; text-align: center; }
.stat-box .n { font-family: 'Plus Jakarta Sans'; font-size: 1.9rem; font-weight: 800; color: var(--blue); line-height: 1; }
.stat-box .l { font-size: .8rem; color: var(--ink-500); margin-top: .3rem; }

/* PDF READER */
.pdf-reader { display: grid; grid-template-columns: 220px 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.pdf-toc { background: var(--bg-soft); border-right: 1px solid var(--line); padding: 1.2rem; }
.pdf-toc .tt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-300); font-weight: 800; margin-bottom: .7rem; }
.pdf-toc a { display: block; padding: .5rem .6rem; border-radius: 8px; font-size: .84rem; color: var(--ink-700); font-weight: 600; }
.pdf-toc a.active, .pdf-toc a:hover { background: var(--cyan-50); color: var(--blue-700); }
.pdf-view { padding: 1.5rem; }
.pdf-page { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 380px; padding: 2rem; box-shadow: 0 2px 10px rgba(10,37,64,.05); }
.pdf-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: .84rem; color: var(--ink-500); }
@media (max-width: 720px){ .pdf-reader { grid-template-columns: 1fr; } .pdf-toc { border-right: 0; border-bottom: 1px solid var(--line); } }

/* PROFILE STRUCTURE (org) */
.org { display: grid; gap: 1rem; }
.org-node { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; text-align: center; }
.org-node.top { background: var(--navy); color: #fff; }
.org-node.top .role { color: rgba(255,255,255,.7); }
.org-node .name { font-weight: 800; color: var(--navy); font-family: 'Plus Jakarta Sans'; }
.org-node.top .name { color: #fff; }
.org-node .role { font-size: .8rem; color: var(--ink-500); }

/* FOOTER (injected) */
.footer { background: var(--navy); color: rgba(255,255,255,.6); padding-block: 3rem 1.5rem; }
.footer .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; }
@media (max-width: 900px){ .footer .fgrid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
@media (max-width: 520px){ .footer .fgrid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.footer a { color: rgba(255,255,255,.6); font-size: .86rem; display: block; padding: .22rem 0; }
.footer a:hover { color: var(--aqua); }
.footer .fbrand p { font-size: .86rem; color: rgba(255,255,255,.55); margin-top: .8rem; max-width: 34ch; }
.footer .fbot { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .8rem; }

/* =============== ACCESSIBILITY WIDGET =============== */
.a11y-fab { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 54px; height: 54px; border-radius: 50%; background: var(--blue); color: #fff; border: 0; cursor: pointer; box-shadow: var(--shadow-lg); display: grid; place-items: center; transition: transform .2s; }
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-panel { position: fixed; right: 18px; bottom: 84px; z-index: 70; width: 300px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 1.1rem; display: none; }
.a11y-panel.open { display: block; }
.a11y-panel h4 { font-size: .95rem; margin-bottom: .2rem; }
.a11y-panel .sub { font-size: .76rem; color: var(--ink-500); margin-bottom: .9rem; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-opt { border: 1px solid var(--line); border-radius: 10px; padding: .6rem; font-size: .76rem; font-weight: 600; color: var(--ink-700); cursor: pointer; text-align: center; background: #fff; display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: all .16s; font-family: inherit; }
.a11y-opt svg { width: 18px; height: 18px; color: var(--blue); }
.a11y-opt:hover { border-color: var(--blue-300); }
.a11y-opt.active { background: var(--cyan-50); border-color: var(--blue); color: var(--blue-700); }
.a11y-reset { width: 100%; margin-top: .6rem; border: 0; background: var(--bg-soft); border-radius: 10px; padding: .55rem; font-weight: 700; color: var(--ink-700); font-size: .8rem; cursor: pointer; font-family: inherit; }
.a11y-reset:hover { background: var(--ink-100); }

/* Accessibility body states */
body.a11y-contrast { background: #000; }
body.a11y-contrast, body.a11y-contrast p, body.a11y-contrast td, body.a11y-contrast li, body.a11y-contrast .section-lead { color: #fff !important; }
body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3, body.a11y-contrast h4 { color: #FFEB3B !important; }
body.a11y-contrast .card, body.a11y-contrast .qs-card, body.a11y-contrast .form-card, body.a11y-contrast .table-wrap, body.a11y-contrast .acc, body.a11y-contrast .nav, body.a11y-contrast .track-card { background: #0a0a0a !important; border-color: #FFEB3B !important; }
body.a11y-contrast a { color: #7EE3EF !important; }
body.a11y-bigtext { font-size: 118%; }
body.a11y-bigtext .hero p.lead, body.a11y-bigtext .input { font-size: 1.15rem; }
body.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 700; }
body.a11y-readable, body.a11y-readable p, body.a11y-readable li, body.a11y-readable td { font-family: Georgia, 'Times New Roman', serif !important; letter-spacing: .01em; word-spacing: .1em; }

/* =============== CHATBOT =============== */
.chat-fab { position: fixed; left: 18px; bottom: 18px; z-index: 70; height: 50px; padding: 0 1.1rem 0 .5rem; border-radius: 999px; background: var(--aqua); color: #fff; border: 0; cursor: pointer; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .5rem; font-weight: 700; font-family: inherit; font-size: .88rem; transition: transform .2s; }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab .cav { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.chat-fab svg { width: 20px; height: 20px; }
.chat-panel { position: fixed; left: 18px; bottom: 78px; z-index: 70; width: 330px; max-width: 92vw; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; display: none; }
.chat-panel.open { display: block; }
.chat-head { background: linear-gradient(135deg, var(--blue), var(--aqua)); color: #fff; padding: .9rem 1.1rem; display: flex; align-items: center; gap: .6rem; }
.chat-head .st { font-size: .72rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .3rem; }
.chat-head .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6EE7A8; }
.chat-body { padding: 1rem; height: 260px; overflow-y: auto; background: var(--bg-soft); display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 82%; padding: .6rem .8rem; border-radius: 12px; font-size: .84rem; line-height: 1.45; }
.msg.bot { background: #fff; border: 1px solid var(--line); color: var(--ink-700); border-bottom-left-radius: 3px; align-self: flex-start; }
.msg.me { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.chat-quick { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem 1rem; border-top: 1px solid var(--line); }
.chat-quick button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .7rem; font-size: .74rem; font-weight: 600; color: var(--blue-700); cursor: pointer; font-family: inherit; }
.chat-quick button:hover { background: var(--cyan-50); }

/* util */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.gap{gap:.8rem}.wrap{flex-wrap:wrap}.items-center{align-items:center}.between{justify-content:space-between}
.muted{color:var(--ink-500)}.small{font-size:.85rem}
[data-en]{display:none}
body.lang-en [data-id]{display:none}
body.lang-en [data-en]{display:inline}
body.lang-en [data-en].block{display:block}

/* =========================================================
   Reference-led redesign · August 2026
   Premium hero from reference 2 + information density from reference 1
   ========================================================= */
:root {
  --navy: #002B66;
  --navy-700: #003477;
  --blue: #0868D7;
  --blue-700: #004FAE;
  --blue-300: #8FC1EF;
  --aqua: #10A6B8;
  --aqua-700: #087E8E;
  --cyan-50: #EEF8FF;
  --cyan-100: #DDF1FB;
  --ink-900: #071D3F;
  --ink-700: #334A62;
  --ink-500: #667B90;
  --ink-300: #9AAEC0;
  --ink-100: #E5EEF5;
  --line: #D9E8F4;
  --bg-soft: #F7FBFE;
  --radius: 15px;
  --shadow: 0 10px 32px rgba(0, 43, 102, .08);
  --shadow-lg: 0 20px 55px rgba(0, 43, 102, .16);
  --maxw: 1240px;
}

body { background: #fff; color: var(--ink-700); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
section[id], h2[id], .tab-panel[id], #kontak { scroll-margin-top: 72px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 200; background: #fff; color: var(--navy); border: 2px solid var(--blue); border-radius: 8px; padding: .65rem 1rem; font-weight: 800; box-shadow: var(--shadow); transition: top .2s; }
.skip-link:focus { top: 16px; }

/* Header: utility, identity, then task navigation */
.topbar { background: #fff; color: var(--ink-500); border-bottom: 1px solid var(--line); }
.topbar .container { height: 34px; }
.topbar a { color: var(--ink-700); }
.topbar a:hover { color: var(--blue); }
.topbar-left, .topbar-right { gap: 0; }
.topbar-left .welcome { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue-700); font-weight: 600; }
.topbar-left .welcome svg { width: 15px; height: 15px; }
.utility-link, .font-control { border-left: 1px solid var(--line); padding: 0 .72rem; white-space: nowrap; }
.font-controls { display: inline-flex; align-items: center; }
.font-control { border: 0; border-left: 1px solid var(--line); background: transparent; height: 34px; min-width: 34px; cursor: pointer; font-weight: 700; color: var(--ink-700); }
.font-control:hover, .font-control.active { color: var(--blue); background: var(--cyan-50); }
.lang-toggle { border-color: var(--line); margin-left: .65rem; }
.lang-toggle button { color: var(--ink-500); }
.lang-toggle button.active { background: var(--blue); color: #fff; }

.masthead { background: #fff; }
.masthead .container { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { color: var(--navy); }
.masthead .brand { gap: .8rem; }
.brand .logo-mark { width: 48px; height: 52px; border-radius: 0; background: transparent; color: var(--blue); box-shadow: none; }
.brand .logo-mark svg { width: 42px; height: 42px; stroke-width: 1.65; }
.brand .bt { display: flex; flex-direction: column; gap: .22rem; }
.brand .bt .b1 { color: var(--navy); font-size: 1.34rem; letter-spacing: -.025em; }
.brand .bt .b2 { color: var(--ink-500); font-size: .66rem; letter-spacing: .035em; text-transform: none; }
.masthead-contact { display: flex; align-items: center; gap: 1.75rem; }
.contact-unit { display: grid; grid-template-columns: 34px auto; column-gap: .65rem; align-items: center; color: var(--navy); }
.contact-unit svg { grid-row: 1 / 3; width: 25px; height: 25px; color: var(--blue); }
.contact-unit strong { font-size: .9rem; line-height: 1.2; }
.contact-unit small { color: var(--ink-500); font-size: .7rem; }

.nav { background: var(--navy); border: 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 7px 20px rgba(0, 43, 102, .13); }
.nav .container { height: 54px; }
.nav-links { gap: 0; height: 100%; }
.nav-links a { color: rgba(255,255,255,.82); border-radius: 0; padding: 0 1.15rem; height: 100%; display: inline-flex; align-items: center; font-size: .84rem; }
.nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-links a.active { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 0 -3px 0 #58C8FF; }
.nav-group { position: relative; height: 100%; display: flex; align-items: stretch; }
.nav-group-trigger {
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 1.05rem;
  color: rgba(255,255,255,.82);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-group-trigger svg { width: 15px; height: 15px; transition: transform .18s ease; }
.nav-group:hover .nav-group-trigger,
.nav-group.open .nav-group-trigger,
.nav-group.active .nav-group-trigger { color: #fff; background: rgba(255,255,255,.1); }
.nav-group.active .nav-group-trigger { box-shadow: inset 0 -3px 0 #58C8FF; }
.nav-group.open .nav-group-trigger svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  z-index: 90;
  top: calc(100% + 1px);
  left: 0;
  width: 248px;
  display: none;
  gap: 2px;
  padding: 6px;
  background: #fff;
  border: 1px solid #cbdfea;
  border-radius: 0 0 10px 10px;
}
.nav-group.open .nav-dropdown { display: grid; }
.nav-dropdown a,
.nav-links .nav-dropdown a {
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: .62rem .7rem;
  color: var(--ink-700);
  border-radius: 7px;
  font-size: .78rem;
}
.nav-dropdown a:hover,
.nav-dropdown a.active { color: var(--blue-700); background: #edf8ff; box-shadow: none; }
@media (min-width: 1025px) {
  .nav-group:hover .nav-dropdown,
  .nav-group:focus-within .nav-dropdown { display: grid; }
}
.nav-mobile-brand { display: none; color: #fff; font-family: 'Plus Jakarta Sans'; font-weight: 800; }
.nav-mobile-mark {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
}
.nav-mobile-mark svg { width: 20px; height: 20px; }
.nav-mobile-copy { min-width: 0; display: flex; flex-direction: column; gap: .08rem; line-height: 1.1; }
.nav-mobile-copy strong,
.nav-mobile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile-copy strong { color: #fff; font-size: .82rem; font-weight: 800; }
.nav-mobile-copy small { color: rgba(255,255,255,.68); font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 600; letter-spacing: .025em; }
.nav-mobile-tools,
.nav-a11y { display: none; }
.nav-actions { margin-left: auto; }
.nav-search { height: 38px; min-width: 96px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 0 .9rem; cursor: pointer; font-size: .8rem; font-weight: 700; }
.nav-search:hover { background: rgba(255,255,255,.13); }
.nav-search svg, .nav-toggle svg { width: 18px; height: 18px; }
.nav .nav-toggle { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }

/* Search overlay */
.search-overlay { background: rgba(0, 26, 65, .58); }
.search-box { border: 1px solid rgba(255,255,255,.7); }

/* Interior page treatment */
.page-head { background: linear-gradient(120deg, #EDF8FF 0%, #F8FCFF 56%, #DDF2FF 100%); color: var(--navy); border-bottom: 1px solid var(--line); }
.page-head::after { right: -4%; bottom: -135%; width: 36%; background: radial-gradient(circle, rgba(16,166,184,.22), transparent 66%); }
.page-head .container { padding-block: 2.8rem 3rem; }
.page-head h1 { color: var(--navy); }
.page-head p { color: var(--ink-500); }
.breadcrumb, .breadcrumb a { color: var(--blue-700); }
.breadcrumb a:hover { color: var(--navy); }
.ph-wave { display: none; }
.card, .qs-card, .form-card, .table-wrap, .track-card, .pdf-reader, .acc { border-color: var(--line); }
.btn { border-radius: 10px; }
.btn-primary { box-shadow: 0 8px 20px rgba(8, 104, 215, .2); }

/* Homepage hero */
.reference-hero { min-height: 535px; color: var(--ink-700); background-color: #eff9ff; background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 33%, rgba(255,255,255,.56) 49%, rgba(255,255,255,.05) 71%), url('hero-jakarta-clearflow.webp'); background-size: cover; background-position: center; overflow: visible; }
.reference-hero::after { display: none; }
.reference-hero .container { padding-block: 58px 120px; }
.hero-copy { max-width: 640px; }
.trust-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.86); color: var(--blue-700); border: 1px solid #BFDDF4; border-radius: 999px; padding: .42rem .8rem; box-shadow: 0 6px 18px rgba(0,43,102,.08); font-size: .72rem; font-weight: 800; }
.trust-pill i { width: 4px; height: 4px; border-radius: 50%; background: var(--aqua); }
.reference-hero h1 { color: var(--navy); max-width: 16ch; font-size: clamp(2.35rem, 4.25vw, 4rem); line-height: 1.06; margin-top: 1.2rem; }
.reference-hero h1 strong { color: var(--blue-700); font-weight: 800; }
.reference-hero p.lead { color: var(--ink-700); max-width: 54ch; font-size: 1rem; margin-top: 1rem; }
.reference-hero .hero-search { margin-top: 1.65rem; max-width: 610px; border: 1px solid #C8DFF0; border-radius: 11px; padding: .38rem .38rem .38rem 1rem; box-shadow: 0 12px 34px rgba(0,43,102,.13); flex-wrap: nowrap; }
.reference-hero .hero-search input { height: 42px; color: var(--navy); font-size: .9rem; }
.voice-search { width: 36px; height: 36px; border: 0; background: transparent; color: var(--aqua); display: grid; place-items: center; cursor: pointer; }
.voice-search span[aria-hidden] { width: 11px; height: 15px; border-radius: 8px; color: transparent; background: currentColor; position: relative; }
.voice-search span[aria-hidden]::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -5px; height: 8px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 10px 10px; }
.hero-search-submit { width: 46px; height: 46px; border-radius: 9px; border: 0; background: var(--blue-700); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.hero-search-submit:hover { background: var(--navy); transform: translateY(-1px); }
.hero-search-submit svg { color: #fff; }
.hero-shortcuts { display: flex; align-items: center; gap: 1.5rem; margin-top: .95rem; }
.hero-shortcuts a { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue-700); font-weight: 700; font-size: .78rem; }
.hero-shortcuts a + a { padding-left: 1.5rem; border-left: 1px solid #BFD4E4; }
.mini-icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--blue-300); display: grid; place-items: center; font-size: .75rem; }

/* Primary service cards */
.primary-services { position: relative; z-index: 4; margin-top: -75px; }
.primary-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.primary-service-card { min-height: 155px; background: #fff; border: 1px solid #C9DDED; border-radius: 16px; box-shadow: 0 13px 34px rgba(0,43,102,.11); padding: 1.25rem 1.2rem; display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 1rem; color: var(--ink-700); transition: transform .2s, border-color .2s, box-shadow .2s; }
.primary-service-card:hover { transform: translateY(-5px); border-color: var(--blue-300); box-shadow: 0 18px 40px rgba(0,43,102,.15); color: var(--ink-700); }
.service-icon { width: 58px; height: 58px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #1692EF, #0053B7); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(8,104,215,.22); }
.service-icon.teal { background: linear-gradient(145deg, #21BCCC, #087D8D); }
.service-icon.navy { background: linear-gradient(145deg, #1768D8, #001E70); }
.service-icon svg { width: 30px; height: 30px; }
.service-copy { display: flex; flex-direction: column; }
.service-copy small { color: var(--blue); font-weight: 700; font-size: .7rem; }
.service-copy strong { color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: 1rem; margin: .08rem 0 .32rem; }
.service-copy > span { color: var(--ink-500); font-size: .76rem; line-height: 1.55; }
.circle-arrow { width: 27px; height: 27px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; align-self: end; }
.circle-arrow.teal { background: var(--aqua-700); }
.circle-arrow.navy { background: var(--navy); }

/* Homepage section rhythm */
.home-section { padding-block: 3.8rem; }
.home-section.compact-section { padding-block: 3rem; }
.section-heading { margin-bottom: 1.55rem; }
.inline-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.section-kicker { color: var(--aqua-700); font-size: .69rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; display: inline-block; margin-bottom: .55rem; }
.section-heading h2, .flow-heading h2, .survey-panel h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.text-link { color: var(--blue-700); font-size: .8rem; font-weight: 800; white-space: nowrap; }

/* Quick access */
.quick-access-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem; }
.quick-access-card { min-height: 128px; background: #fff; border: 1px solid var(--line); border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; text-align: center; color: var(--navy); padding: 1rem .7rem; box-shadow: 0 5px 18px rgba(0,43,102,.04); transition: transform .2s, border-color .2s, box-shadow .2s; }
.quick-access-card:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: var(--shadow); color: var(--blue-700); }
.quick-icon { width: 42px; height: 42px; color: var(--blue); display: grid; place-items: center; }
.quick-icon svg { width: 35px; height: 35px; }
.quick-access-card strong { font-family: 'Plus Jakarta Sans'; font-size: .76rem; line-height: 1.4; }

/* Documents */
.documents-section { background: linear-gradient(180deg, #fff 0%, #F7FBFF 100%); }
.featured-documents-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.42fr); gap: 1rem; }
.featured-document { min-height: 345px; position: relative; overflow: hidden; color: #fff; border-radius: 15px; padding: 1.35rem; background-image: linear-gradient(120deg, rgba(0,43,102,.97) 5%, rgba(0,79,174,.84) 58%, rgba(16,166,184,.35) 100%), url('hero-jakarta-clearflow.webp'); background-size: cover; background-position: 74% center; box-shadow: var(--shadow); }
.featured-document::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,43,102,.35), transparent 62%); pointer-events: none; }
.featured-tag { position: relative; z-index: 2; display: inline-flex; border-radius: 999px; background: #0E7DE2; color: #fff; padding: .32rem .7rem; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; }
.featured-document-copy { position: relative; z-index: 2; max-width: 58%; margin-top: 2.5rem; }
.document-type { color: #8EEAF1; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.featured-document h3 { color: #fff; font-size: 1.55rem; margin: .35rem 0 .7rem; }
.featured-document p { color: rgba(255,255,255,.82); font-size: .78rem; line-height: 1.55; }
.document-meta { display: flex; gap: .8rem; color: var(--ink-500); font-size: .66rem; margin-top: .65rem; }
.light-meta { color: rgba(255,255,255,.74); }
.featured-download { margin-top: 1.15rem; display: inline-flex; align-items: center; gap: .55rem; padding: .57rem .85rem; border-radius: 8px; background: #fff; color: var(--blue-700); font-size: .75rem; font-weight: 800; }
.featured-download:hover { color: var(--navy); }
.report-cover { position: absolute; z-index: 2; right: 1.25rem; bottom: -1.1rem; width: 135px; height: 186px; border-radius: 5px; background: linear-gradient(145deg, #F8FCFF 0 44%, #B8E5FA 100%); color: var(--blue-700); padding: .8rem; transform: rotate(5deg); box-shadow: 0 18px 36px rgba(0,20,60,.35); overflow: hidden; }
.report-cover small { font-size: .46rem; letter-spacing: .05em; }
.report-cover strong { display: block; font-family: 'Plus Jakarta Sans'; font-size: 1rem; line-height: 1.25; margin-top: .65rem; }
.report-cover span { position: absolute; left: -12%; right: -18%; bottom: -18%; height: 65%; background: linear-gradient(140deg, transparent 0 18%, rgba(8,104,215,.2) 18% 35%, rgba(0,43,102,.78) 35% 52%, rgba(16,166,184,.78) 52% 67%, rgba(255,255,255,.4) 67%); transform: skewY(-17deg); }
.document-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.document-list-card { min-height: 164px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr auto; column-gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 1rem; color: var(--ink-700); transition: transform .2s, border-color .2s, box-shadow .2s; }
.document-list-card:hover { transform: translateY(-3px); border-color: var(--blue-300); box-shadow: var(--shadow); color: var(--ink-700); }
.doc-line-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; background: var(--cyan-50); border: 1px solid #CDE7F7; color: var(--blue); display: grid; place-items: center; font-size: .62rem; font-weight: 800; }
.doc-copy { display: flex; flex-direction: column; }
.doc-copy small { color: var(--blue); font-size: .61rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.doc-copy strong { color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: .82rem; line-height: 1.35; margin-top: .28rem; }
.doc-action { align-self: end; color: var(--blue-700); font-size: .68rem; font-weight: 800; }

/* Service flow */
.service-flow-panel { overflow: hidden; border: 1px solid #C9E7F5; border-radius: 17px; background: linear-gradient(115deg, #F3FBFF 0%, #E4F5FC 100%); padding: 1.6rem 1.75rem 1.4rem; box-shadow: inset 0 0 0 4px rgba(255,255,255,.55); }
.flow-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.sla-badge { max-width: 310px; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #B8DDF1; background: rgba(255,255,255,.72); color: var(--blue-700); border-radius: 999px; padding: .45rem .75rem; font-size: .66rem; font-weight: 700; }
.sla-badge b { background: var(--blue); color: #fff; border-radius: 999px; padding: .18rem .4rem; font-size: .6rem; }
.service-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; }
.service-flow::before { content: ''; position: absolute; left: 9%; right: 9%; top: 18px; height: 2px; background: repeating-linear-gradient(90deg, #67A9E8 0 6px, transparent 6px 12px); }
.service-flow li { position: relative; z-index: 1; text-align: center; }
.step-number { width: 38px; height: 38px; margin: 0 auto .85rem; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1686EC, #0055B7); box-shadow: 0 0 0 7px rgba(244,251,255,.92); display: grid; place-items: center; font-family: 'Plus Jakarta Sans'; font-weight: 800; }
.step-number.alt { background: linear-gradient(145deg, #1AB8C7, #078292); }
.service-flow strong { display: block; color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: .78rem; }
.service-flow p { color: var(--ink-500); font-size: .67rem; line-height: 1.5; margin: .35rem auto 0; max-width: 18ch; }

/* Regulations */
.regulation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.regulation-card { min-height: 110px; display: grid; grid-template-columns: 48px 1fr 18px; gap: .75rem; align-items: center; color: var(--ink-700); background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 1rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.regulation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-300); color: var(--ink-700); }
.regulation-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--cyan-50); border-radius: 12px; color: var(--blue); font-family: 'Plus Jakarta Sans'; font-size: .85rem; font-weight: 800; }
.regulation-card strong { display: block; color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: .76rem; line-height: 1.35; }
.regulation-card small { display: block; color: var(--ink-500); font-size: .63rem; line-height: 1.4; margin-top: .25rem; }
.regulation-card > b { color: var(--blue); }

/* API-first ecosystem */
.ecosystem-section { padding-top: 1rem; }
.ecosystem-panel { display: grid; grid-template-columns: .8fr 1.6fr; gap: 1.5rem; align-items: center; padding: 1.5rem; border-radius: 17px; color: #fff; background: linear-gradient(115deg, #002B66 0%, #004EAB 58%, #087E8E 120%); box-shadow: var(--shadow); }
.ecosystem-intro { padding: .35rem .5rem; }
.ecosystem-intro .section-kicker { color: #86E7F0; }
.ecosystem-intro h2 { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.85rem); }
.ecosystem-intro p { color: rgba(255,255,255,.76); font-size: .76rem; line-height: 1.6; margin-top: .55rem; }
.ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.ecosystem-card { appearance: none; min-height: 118px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; padding: .9rem .7rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.ecosystem-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.46); color: #fff; }
.ecosystem-card > span { min-width: 37px; height: 37px; padding-inline: .4rem; border-radius: 10px; background: #fff; color: var(--blue-700); display: grid; place-items: center; font-family: 'Plus Jakarta Sans'; font-size: .62rem; font-weight: 800; }
.ecosystem-card strong { font-family: 'Plus Jakarta Sans'; font-size: .7rem; line-height: 1.35; margin-top: .55rem; }
.ecosystem-card small { color: rgba(255,255,255,.64); font-size: .57rem; margin-top: .2rem; }

/* Homepage FAQ */
.faq-home { background: var(--bg-soft); }
.faq-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-items: start; }
.faq-home .acc { margin: 0 0 .65rem; border-radius: 11px; }
.faq-home .acc-q { width: 100%; border: 0; background: #fff; text-align: left; font-size: .8rem; padding: .9rem 1rem; }
.faq-home .acc-q .pm { background: transparent; }
.faq-home .acc-a .inner { padding: 0 1rem 1rem; font-size: .74rem; line-height: 1.55; }
.help-strip { width: min(920px, 100%); margin: 1.4rem auto 0; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .9rem; padding: .8rem 1rem; background: linear-gradient(90deg, #E9F7FF, #F7FCFF); border: 1px solid #CBE4F3; border-radius: 13px; }
.help-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: 'Plus Jakarta Sans'; font-weight: 800; }
.help-strip > span:nth-child(2) { display: flex; flex-direction: column; }
.help-strip strong { color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: .82rem; }
.help-strip small { color: var(--ink-500); font-size: .7rem; }
.help-strip .btn { padding: .65rem 1rem; font-size: .74rem; }

/* Survey */
.survey-home { padding-top: 0; }
.survey-panel { display: grid; grid-template-columns: 1.2fr .7fr .7fr 1.15fr; gap: .8rem; background: #fff; border: 1px solid #CFE2EF; border-radius: 17px; padding: 1.2rem; box-shadow: 0 8px 25px rgba(0,43,102,.06); }
.survey-intro { padding: .45rem .4rem; }
.survey-intro p { color: var(--ink-500); font-size: .75rem; max-width: 36ch; margin-top: .55rem; }
.survey-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.survey-actions .btn { font-size: .7rem; padding: .58rem .75rem; }
.survey-metric { min-height: 172px; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
.survey-metric > small:first-child { color: var(--ink-500); font-weight: 700; font-size: .67rem; }
.survey-metric > strong { color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: 2rem; line-height: 1.1; margin: .45rem 0; }
.survey-metric > strong span { color: var(--ink-500); font-size: .9rem; }
.survey-metric p, .survey-metric > small:last-child { color: var(--ink-500); font-size: .66rem; }
.stars { color: #F4B731; letter-spacing: .08em; font-size: .8rem; margin-bottom: .55rem; }
.survey-rating b { color: var(--blue-700); display: block; font-size: .82rem; margin-top: .15rem; }
.survey-breakdown { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.survey-breakdown .donut { width: 112px; height: 112px; background: conic-gradient(#0757B5 0 62%, #0DA1AE 62% 90%, #F4B64A 90% 97%, #EF4B55 97% 100%); position: relative; }
.survey-breakdown .donut::after { content: ''; width: 63px; height: 63px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.survey-breakdown ul { display: grid; gap: .4rem; }
.survey-breakdown li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: .35rem; color: var(--ink-500); font-size: .63rem; }
.survey-breakdown li i { width: 7px; height: 7px; border-radius: 50%; background: #0757B5; }
.survey-breakdown li i.v2 { background: #0DA1AE; }
.survey-breakdown li i.v3 { background: #F4B64A; }
.survey-breakdown li i.v4 { background: #EF4B55; }
.survey-breakdown li b { color: var(--navy); }

/* Footer */
.footer { background: linear-gradient(110deg, #00265B 0%, #00377A 100%); padding-block: 2.5rem 1.2rem; }
.footer .fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.35fr; gap: 1.5rem; }
.footer .brand .logo-mark { color: #fff; }
.footer .fbrand p { font-size: .72rem; }
.footer h4 { font-size: .78rem; }
.footer a { font-size: .72rem; }
.footer .fbot { font-size: .69rem; }

/* New components in accessibility states */
body.a11y-contrast .masthead,
body.a11y-contrast .topbar,
body.a11y-contrast .primary-service-card,
body.a11y-contrast .quick-access-card,
body.a11y-contrast .document-list-card,
body.a11y-contrast .regulation-card,
body.a11y-contrast .survey-panel,
body.a11y-contrast .survey-metric,
body.a11y-contrast .survey-breakdown,
body.a11y-contrast .service-flow-panel,
body.a11y-contrast .help-strip,
body.a11y-contrast .ecosystem-panel,
body.a11y-contrast .ecosystem-card { background: #0a0a0a !important; border-color: #FFEB3B !important; }
body.a11y-contrast .reference-hero { background-image: none !important; background-color: #000 !important; }

@media (max-width: 1120px) {
  .nav-links a { padding-inline: .75rem; }
  .quick-access-grid { grid-template-columns: repeat(3, 1fr); }
  .survey-panel { grid-template-columns: 1.2fr .8fr .8fr; }
  .survey-breakdown { grid-column: 1 / -1; grid-template-columns: 116px 1fr; }
  .ecosystem-panel { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .nav .container { position: relative; }
  .nav-mobile-brand { display: inline-flex; }
  .nav-links { position: absolute; inset: 100% 0 auto 0; height: auto; flex-direction: column; background: #fff; padding: .7rem; gap: .15rem; border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow-lg); transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .22s ease, opacity .22s ease, visibility .22s; align-items: stretch; z-index: 80; }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { color: var(--ink-700); height: auto; padding: .75rem 1rem; border-radius: 8px; }
  .nav-links a:hover, .nav-links a.active { background: var(--cyan-50); color: var(--blue-700); box-shadow: none; }
  .nav-group { height: auto; display: block; }
  .nav-group-trigger {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
    padding: .7rem 1rem;
    color: var(--ink-700);
    border-radius: 8px;
  }
  .nav-group:hover .nav-group-trigger,
  .nav-group.open .nav-group-trigger,
  .nav-group.active .nav-group-trigger { color: var(--blue-700); background: var(--cyan-50); box-shadow: none; }
  .nav-dropdown {
    position: static;
    width: auto;
    margin: 2px 0 4px 12px;
    padding: 4px;
    border: 0;
    border-left: 1px solid #cbdfea;
    border-radius: 0;
  }
  .nav-links .nav-dropdown a { min-height: 38px; padding: .55rem .75rem; }
  .nav-toggle { display: grid; }
  .primary-service-grid { grid-template-columns: 1fr; }
  .primary-service-card { min-height: 132px; }
  .featured-documents-layout { grid-template-columns: 1fr; }
  .featured-document { min-height: 330px; }
  .regulation-grid { grid-template-columns: 1fr 1fr; }
  .footer .fgrid { grid-template-columns: 1.3fr 1fr 1fr; }
}

@media (max-width: 820px) {
  .topbar-left .welcome span { display: none; }
  .utility-link.hide-tablet, .font-controls { display: none; }
  .masthead .container { min-height: 72px; }
  .masthead-contact { gap: .8rem; }
  .contact-unit { grid-template-columns: 28px auto; }
  .contact-unit svg { width: 21px; height: 21px; }
  .contact-unit small { display: none; }
  .reference-hero { min-height: 570px; background-position: 62% center; background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 52%, rgba(255,255,255,.35) 83%), url('hero-jakarta-clearflow.webp'); }
  .reference-hero .container { padding-block: 58px 130px; }
  .hero-copy { max-width: 560px; }
  .service-flow { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.5rem; }
  .service-flow::before { left: 18px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #67A9E8 0 6px, transparent 6px 12px); }
  .service-flow li { display: grid; grid-template-columns: 38px 1fr; column-gap: 1rem; text-align: left; }
  .step-number { grid-row: 1 / 3; margin: 0; }
  .service-flow p { margin: .25rem 0 0; max-width: none; }
  .survey-panel { grid-template-columns: 1fr 1fr; }
  .survey-intro, .survey-breakdown { grid-column: 1 / -1; }
  .ecosystem-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 660px) {
  .container { padding-inline: 1rem; }
  .topbar .container { justify-content: flex-end; }
  .topbar-left { display: none; }
  .utility-link { padding-inline: .5rem; font-size: .7rem; }
  .utility-link.hide-mobile { display: none; }
  .masthead .container { min-height: 68px; }
  .brand .logo-mark { width: 38px; height: 42px; }
  .brand .logo-mark svg { width: 34px; height: 34px; }
  .brand .bt .b1 { font-size: 1rem; }
  .brand .bt .b2 { font-size: .55rem; }
  .masthead-contact { display: none; }
  .nav-search span { display: none; }
  .nav-search { min-width: 40px; width: 40px; padding: 0; }
  .reference-hero { min-height: 600px; background-position: 68% center; background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 68%, rgba(255,255,255,.5) 100%), url('hero-jakarta-clearflow.webp'); }
  .reference-hero .container { padding-block: 50px 120px; }
  .reference-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .reference-hero p.lead { font-size: .9rem; }
  .reference-hero .hero-search { padding-left: .7rem; }
  .voice-search { display: none; }
  .hero-shortcuts { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .hero-shortcuts a + a { padding-left: 0; border-left: 0; }
  .primary-service-card { grid-template-columns: 52px 1fr 28px; padding: 1rem; }
  .service-icon { width: 52px; height: 52px; }
  .quick-access-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-access-card { min-height: 116px; }
  .inline-heading, .flow-heading { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .featured-document { min-height: 390px; }
  .featured-document-copy { max-width: 72%; }
  .report-cover { right: .8rem; width: 110px; height: 160px; }
  .document-list-grid, .faq-columns, .regulation-grid { grid-template-columns: 1fr; }
  .document-list-card { min-height: 136px; }
  .service-flow-panel { padding-inline: 1rem; }
  .sla-badge { border-radius: 10px; }
  .help-strip { grid-template-columns: 42px 1fr; }
  .help-strip .btn { grid-column: 1 / -1; justify-content: center; }
  .survey-panel { grid-template-columns: 1fr; }
  .survey-intro, .survey-breakdown { grid-column: auto; }
  .survey-breakdown { grid-template-columns: 96px 1fr; }
  .survey-breakdown .donut { width: 94px; height: 94px; }
  .survey-breakdown .donut::after { width: 52px; height: 52px; }
  .ecosystem-panel { padding: 1rem; }
  .footer .fgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .topbar-right .utility-link { display: none; }
  .lang-toggle { margin-left: 0; }
  .primary-service-card { grid-template-columns: 48px 1fr; }
  .circle-arrow { display: none; }
  .featured-document-copy { max-width: 100%; }
  .report-cover { opacity: .35; right: -1rem; }
  .footer .fgrid { grid-template-columns: 1fr; }
}

/* =========================================================
   Design 1 lock · clean PPID PAM JAYA mockup · August 2026
   ========================================================= */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.text-link, .featured-download, .doc-action, .regulation-action, .help-strip .btn { display: inline-flex; align-items: center; gap: .38rem; }
.mini-icon svg, .circle-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Flat surfaces: cards are separated by borders, not elevation. */
.nav,
.trust-pill,
.reference-hero .hero-search,
.btn-primary,
.card,
.qs-card,
.form-card,
.table-wrap,
.track-card,
.pdf-reader,
.pdf-page,
.primary-service-card,
.quick-access-card,
.featured-document,
.document-list-card,
.service-flow-panel,
.regulation-card,
.ecosystem-panel,
.survey-panel,
.survey-metric,
.survey-breakdown { box-shadow: none !important; }
.card:hover,
.qs-card:hover,
.primary-service-card:hover,
.quick-access-card:hover,
.document-list-card:hover,
.regulation-card:hover { transform: none; box-shadow: none !important; }

/* Hero */
.reference-hero { min-height: 530px; color: var(--navy); background-color: #eff9ff; background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.48) 53%, rgba(255,255,255,.03) 72%), url('hero-jakarta-clearflow.webp'); background-position: center; }
.reference-hero .container { padding-block: 54px 126px; }
.hero-copy { max-width: 610px; }
.trust-pill { color: var(--navy); background: #edf8ff; border-color: #c8e2f4; }
.reference-hero h1 { max-width: 18ch; color: var(--navy); font-size: clamp(2.4rem, 3.9vw, 3.35rem); line-height: 1.08; }
.reference-hero h1 strong,
.reference-hero p.lead,
.hero-shortcuts a { color: var(--navy); }
.reference-hero p.lead { max-width: 49ch; }
.reference-hero .hero-search { max-width: 580px; background: #fff; }
.mini-icon { border: 0; color: var(--blue-700); }
.hero-shortcuts a:hover { color: var(--blue-700); }

/* Primary services */
.primary-services { margin-top: -84px; }
.primary-service-grid { gap: .85rem; }
.primary-service-card { min-height: 176px; border-radius: 14px; border-color: #cbddea; padding: 1.25rem 1.1rem; }
.primary-service-card:hover { border-color: #88bce5; }
.service-icon { box-shadow: none; }
.circle-arrow svg { width: 14px; height: 14px; }

/* Shared homepage rhythm */
.home-section,
.home-section.compact-section { padding-block: 1.7rem; }
.section-heading { margin-bottom: 1rem; }
.section-heading h2,
.flow-heading h2,
.faq-intro h2,
.survey-panel h2 { color: var(--navy); font-size: clamp(1.32rem, 2vw, 1.72rem); }
.text-link { color: var(--blue-700); }

/* Five quick-information cards */
.quick-access-grid { grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.quick-access-card { min-height: 150px; align-items: flex-start; justify-content: flex-start; gap: .8rem; text-align: left; padding: 1.05rem; border-radius: 11px; }
.quick-access-card:hover { border-color: #8abde4; color: var(--navy); }
.quick-card-head { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: .7rem; width: 100%; }
.quick-icon { width: 42px; height: 42px; }
.quick-icon svg { width: 36px; height: 36px; }
.quick-access-card strong { color: var(--blue-700); font-size: .78rem; line-height: 1.35; }
.quick-access-card p { color: var(--ink-500); font-size: .69rem; line-height: 1.55; margin-top: auto; }

/* Featured documents */
.documents-section { background: #fff; }
.featured-documents-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr); gap: .9rem; }
.featured-document { min-height: 306px; color: var(--navy); padding: 1.15rem; border: 1px solid #bddff3; border-radius: 12px; background: linear-gradient(135deg, #eef8ff 0%, #e5f5fd 100%); }
.featured-document::after { display: none; }
.featured-tag { background: var(--blue-700); border-radius: 4px; padding: .34rem .6rem; }
.featured-document-copy { max-width: 58%; margin-top: 1.55rem; }
.featured-document h3 { color: var(--navy); font-size: 1.42rem; margin: 0 0 .65rem; }
.featured-document p { color: var(--ink-700); font-size: .7rem; line-height: 1.58; }
.document-meta { align-items: center; color: var(--ink-500); }
.file-badge { color: #ef4350; border: 1px solid #ffcbd0; background: #fff5f6; border-radius: 3px; padding: .1rem .25rem; font-size: .55rem; font-weight: 800; }
.featured-download { margin-top: 1rem; border-radius: 7px; background: var(--blue-700); color: #fff; }
.featured-download:hover { background: var(--navy); color: #fff; }
.report-cover { right: 1.15rem; bottom: .9rem; width: 145px; height: 205px; object-fit: cover; padding: 0; border: 1px solid #a8cfe8; border-radius: 3px; transform: rotate(4deg); box-shadow: none; }
.document-list-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.document-list-card { min-height: 148px; grid-template-columns: 34px 1fr; grid-template-rows: 1fr auto; column-gap: .62rem; padding: .85rem; border-radius: 10px; }
.document-list-card:hover { border-color: #8abde4; }
.doc-line-icon { grid-row: auto; width: 34px; height: 38px; border: 0; background: transparent; border-radius: 0; }
.doc-line-icon svg { width: 31px; height: 31px; }
.doc-copy strong { font-size: .69rem; margin: .05rem 0 .3rem; }
.doc-copy small { color: var(--ink-500); font-size: .59rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 500; }
.doc-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; color: var(--ink-500); font-size: .57rem; margin-top: .55rem; }
.doc-action { color: var(--blue-700); margin-left: auto; font-size: .58rem; }
.doc-action .ui-icon { width: 12px; height: 12px; }

/* Service flow */
.service-flow-panel { position: relative; overflow: hidden; padding: 1.45rem 1.8rem 1.35rem; border-radius: 16px; background: linear-gradient(110deg, #f7fcff 0%, #eef9fd 100%); }
.flow-heading { align-items: center; }
.sla-badge { max-width: none; color: var(--blue-700); background: rgba(255,255,255,.8); border-color: #b9ddf1; padding: .4rem .72rem; }
.sla-badge svg { width: 16px; height: 16px; flex: 0 0 auto; }
.flow-track { position: relative; margin-top: 1.45rem; }
.flow-connector { position: absolute; z-index: 0; top: -3px; left: 7.5%; width: 85%; height: 52px; overflow: visible; fill: none; stroke: #5e9fee; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }
.service-flow { z-index: 1; margin-top: 0; gap: .7rem; }
.service-flow::before { display: none; }
.service-flow li { z-index: 1; }
.step-number { width: 48px; height: 48px; margin-bottom: .75rem; box-shadow: 0 0 0 6px #f3fbff; font-size: 1rem; }
.service-flow strong { font-size: .75rem; }
.service-flow p { font-size: .62rem; max-width: 20ch; }

/* Regulations */
.regulation-grid { gap: .75rem; }
.regulation-card { min-height: 130px; grid-template-columns: 54px 1fr; align-items: start; padding: 1rem; border-radius: 10px; }
.regulation-card:hover { border-color: #8abde4; }
.regulation-icon { width: 50px; height: 50px; color: var(--blue-700); background: transparent; border-radius: 0; }
.regulation-icon svg { width: 46px; height: 46px; }
.regulation-copy { display: flex; flex-direction: column; min-height: 94px; }
.regulation-card strong { font-size: .75rem; }
.regulation-card small { font-size: .58rem; }
.regulation-action { color: var(--blue-700); font-size: .58rem; font-weight: 800; margin-top: auto; }
.regulation-action .ui-icon { width: 12px; height: 12px; }

/* FAQ: intro column + one bordered accordion stack */
.faq-home { background: #fff; }
.faq-home .container { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 1.7rem; align-items: start; }
.faq-intro { padding-top: .35rem; }
.faq-intro h2 { line-height: 1.22; }
.faq-intro .text-link { margin-top: 1.1rem; }
.faq-content { min-width: 0; }
.faq-list { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.faq-home .acc { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq-home .acc:last-child { border-bottom: 0; }
.faq-home .acc-q { min-height: 47px; padding: .7rem .9rem; color: var(--blue-700); font-size: .72rem; }
.faq-home .acc-q::before { content: ''; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); margin-right: .75rem; transition: transform .2s; }
.faq-home .acc.open .acc-q::before { transform: rotate(45deg); }
.faq-home .acc-q .pm { color: var(--blue-700); margin-left: auto; }
.faq-home .acc-a .inner { padding: 0 2.4rem .8rem; font-size: .65rem; }
.help-strip { width: 100%; margin: .65rem 0 0; grid-template-columns: 42px 1fr auto; padding: .7rem .9rem; border-radius: 9px; }
.help-icon { color: var(--blue-700); background: transparent; }
.help-icon svg { width: 38px; height: 38px; }

/* Survey: intro | four metrics | distribution */
.survey-panel { grid-template-columns: 1.05fr 1.28fr 1fr; gap: .85rem; padding: 1rem; border-radius: 14px; }
.survey-intro { display: flex; flex-direction: column; justify-content: center; }
.survey-intro p { font-size: .68rem; line-height: 1.55; }
.survey-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.survey-metric { min-height: 78px; padding: .75rem; border-radius: 8px; }
.survey-metric > small:first-child { font-size: .58rem; }
.survey-metric > strong,
.metric-line > strong { color: var(--navy); font-family: 'Plus Jakarta Sans'; font-size: 1.55rem; line-height: 1; }
.metric-line > strong span { color: var(--ink-500); font-size: .72rem; }
.metric-line { display: flex; align-items: end; justify-content: space-between; gap: .6rem; margin-top: .42rem; }
.metric-line .period-value { font-size: .9rem; line-height: 1.15; }
.metric-icon { width: 32px; height: 32px; color: var(--blue-700); flex: 0 0 auto; }
.metric-icon.star-icon { fill: #f4b731; color: #f4b731; }
.survey-metric p { font-size: .57rem; margin-top: .2rem; }
.survey-breakdown { grid-template-columns: 124px 1fr; gap: .7rem; padding: .65rem; border: 0; }
.survey-breakdown .donut { width: 122px; height: 122px; }
.survey-breakdown .donut::after { width: 68px; height: 68px; }
.survey-note { grid-column: 1 / -1; color: var(--ink-500); font-size: .55rem; line-height: 1.45; }

@media (max-width: 1120px) {
  .quick-access-grid { grid-template-columns: repeat(3, 1fr); }
  .document-list-grid { grid-template-columns: repeat(2, 1fr); }
  .survey-panel { grid-template-columns: 1fr 1.2fr; }
  .survey-breakdown { grid-column: 1 / -1; grid-template-columns: 124px 1fr; }
}

@media (max-width: 820px) {
  .flow-connector { display: none; }
  .service-flow::before { display: block; }
  .faq-home .container { grid-template-columns: 1fr; gap: .9rem; }
  .faq-intro h2 br { display: none; }
  .faq-intro .text-link { margin-top: .55rem; }
  .survey-panel { grid-template-columns: 1fr; }
  .survey-intro, .survey-breakdown { grid-column: auto; }
}

@media (max-width: 660px) {
  .reference-hero { background-position: 68% center; }
  .quick-access-grid { grid-template-columns: 1fr 1fr; }
  .featured-document-copy { max-width: 70%; }
  .report-cover { width: 118px; height: 168px; }
  .document-list-grid { grid-template-columns: 1fr; }
  .help-strip { grid-template-columns: 42px 1fr; }
  .help-strip .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 440px) {
  .quick-access-grid { grid-template-columns: 1fr; }
  .featured-document { min-height: 360px; }
  .featured-document-copy { max-width: 100%; padding-right: 24%; }
  .report-cover { opacity: .2; right: -.5rem; }
  .survey-metrics { grid-template-columns: 1fr; }
  .survey-breakdown { grid-template-columns: 96px 1fr; }
  .survey-breakdown .donut { width: 94px; height: 94px; }
}

/* =========================================================
   System standardization · modern flat UI · August 2026
   ========================================================= */

/* One primary CTA language across the portal. */
.btn-primary,
.featured-download,
.inner-page .btn-aqua {
  min-height: 44px;
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
  box-shadow: none !important;
}
.btn-primary:hover,
.featured-download:hover,
.inner-page .btn-aqua:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: none;
}
.btn-primary svg,
.featured-download svg { flex: 0 0 auto; }

/* Featured report cover and service flow from the locked design. */
.report-cover {
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.service-flow-panel {
  background-color: #f5fbff;
  background-image: linear-gradient(90deg, rgba(248,253,255,.98) 0%, rgba(248,253,255,.94) 52%, rgba(248,253,255,.58) 100%), url('flow-aquatic-bg.webp');
  background-position: center, right bottom;
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.service-flow {
  list-style: none;
  padding: 0;
  margin-left: 0;
}
.service-flow li::marker { content: ''; }

/* Footer identity stays horizontal: mark left, name and region right. */
.footer .fbrand > .brand,
.footer a.brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem !important;
  padding: 0;
}
.footer .brand .logo-mark { flex: 0 0 38px; }
.footer .brand .bt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .12rem;
}
.footer .brand .b1,
.footer .brand .b2 { display: block; }

/* Search dialog */
.search-overlay {
  align-items: flex-start;
  padding: clamp(72px, 12vh, 128px) 16px 24px;
  background: rgba(0, 28, 67, .56);
}
.search-box {
  position: relative;
  width: min(680px, 100%);
  overflow: hidden;
  border: 1px solid #c8ddea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 43, 102, .2);
}
.search-box-head,
.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search-box-head {
  min-height: 54px;
  padding: .8rem 1rem;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  background: #f7fbfe;
}
.search-box-head strong { font-family: 'Plus Jakarta Sans'; font-size: .92rem; }
.modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid #d2e2ee;
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.modal-close:hover { color: var(--blue-700); border-color: #8ebee2; background: #eef8ff; }
.modal-close svg { width: 18px; height: 18px; }
.search-box .sb-input {
  min-height: 68px;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.search-box .sb-input > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--blue-700);
}
.search-box input::placeholder { color: #91a5b7; }
.search-box .sb-hint { background: #fbfdff; line-height: 1.55; }

/* Accessibility dialog */
.a11y-panel {
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding: 1.15rem;
  border: 1px solid #cbdfea;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0, 43, 102, .18);
}
.a11y-head { margin-bottom: .2rem; }
.a11y-head h4 { margin: 0; color: var(--navy); }
.a11y-panel .sub { line-height: 1.5; margin-bottom: 1rem; }
.a11y-grid { gap: .65rem; }
.a11y-opt {
  min-height: 92px;
  padding: .75rem .55rem;
  border-color: #d3e3ef;
  border-radius: 12px;
  background: #fff;
}
.a11y-opt svg { width: 22px; height: 22px; }
.a11y-reset {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--blue-700);
  background: #eef7ff;
  border: 1px solid #cfe4f4;
}
.a11y-reset svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* Shared inner-page shell */
.inner-page .inner-page-hero {
  min-height: 260px;
  position: relative;
  overflow: hidden;
  color: var(--navy);
  background-color: #eef9ff;
  background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 39%, rgba(255,255,255,.74) 56%, rgba(238,249,255,.08) 78%), url('inner-hero-aquatic.webp');
  background-position: center, right center;
  background-size: cover, auto 185%;
  background-repeat: no-repeat;
  border-bottom: 1px solid #cfe3f1;
}
.inner-page .inner-page-hero::after { display: none; }
.inner-page .inner-page-hero .container { padding-block: 2.65rem 3rem; }
.inner-page .inner-page-hero h1 {
  max-width: 18ch;
  color: var(--navy);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.12;
}
.inner-page .inner-page-hero p {
  max-width: 56ch;
  color: var(--ink-700);
  font-size: .94rem;
  line-height: 1.65;
}
.inner-page .breadcrumb,
.inner-page .breadcrumb a { color: var(--blue-700); }
.inner-page .breadcrumb a:hover { color: var(--navy); }
.inner-page .inner-page-section { padding-block: clamp(2.4rem, 4vw, 3.35rem); }
.inner-page .bg-soft { background: #f8fbfd; }
.inner-page .bg-cyan { background: #eef8fd; }
.inner-page .page-card,
.inner-page .form-card,
.inner-page .track-card,
.inner-page .table-wrap,
.inner-page .pdf-reader,
.inner-page .pdf-page,
.inner-page .stat-box {
  border: 1px solid #cbdfea;
  border-radius: 12px;
  box-shadow: none !important;
}
.inner-page .page-card:hover { transform: none; border-color: #91bddc; box-shadow: none !important; }
.inner-page .page-card-soft { background: #f1f9fe; border-color: #c6e2f2; }
.inner-page .page-card-muted { background: #f8fbfd; }
.inner-page .page-card-flat { background: rgba(255,255,255,.72); }
.inner-page .page-card-dark {
  color: var(--ink-700);
  background: #eef8fd;
  border-color: #c5e0ef;
}
.inner-page .page-card-dark h3 { color: var(--navy); }
.inner-page .input,
.inner-page textarea.input,
.inner-page select.input {
  min-height: 46px;
  border: 1px solid #c7dbe9;
  border-radius: 8px;
}
.inner-page input.input:not([type="file"]) {
  height: 46px;
  padding-block: 0;
}
.inner-page .input:focus,
.inner-page textarea.input:focus,
.inner-page select.input:focus {
  outline: 0;
  border-color: var(--blue-700);
  box-shadow: none;
}
.inner-page textarea.input { line-height: 1.55; }
.inner-page input[type="date"].input {
  padding-right: 2.5rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086ad7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px 18px;
}
.inner-page input[type="date"].input::-webkit-calendar-picker-indicator {
  width: 24px;
  height: 24px;
  margin-right: -.2rem;
  opacity: 0;
  cursor: pointer;
}
.ecosystem-page .table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.ecosystem-page .table-wrap .tbl { min-width: 760px; }
.inner-page .upload { border-color: #b8d5e8; background: #f9fcff; }
.inner-page .eyebrow { color: var(--aqua-700); }
.inner-page .card .ci { box-shadow: none; }

/* Reusable form primitives based on the clean filter patterns in the supplied reference. */
.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.file-input-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}
.upload:focus-within {
  color: var(--blue-700);
  background: #f4faff;
  border-color: var(--blue-700) !important;
}
.app-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.app-select .custom-select-trigger {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: 0 .85rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid #c7dbe9;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}
.app-select .custom-select-trigger:hover,
.app-select.open .custom-select-trigger,
.app-select .custom-select-trigger:focus-visible {
  outline: 0;
  border-color: var(--blue-700);
  box-shadow: none;
}
.app-select.invalid .custom-select-trigger,
.app-select .custom-select-trigger[aria-invalid="true"] { border-color: #c83838; }
.app-select .custom-select-value {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: .84rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-select .custom-select-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--ink-300);
  transition: transform .18s ease;
}
.app-select.open .custom-select-chevron { transform: rotate(180deg); }
.app-select .custom-select-list {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 256px;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid #b9d4e6;
  border-radius: 9px;
}
.app-select .custom-select-list[hidden] { display: none; }
.app-select .custom-select-option {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px;
  gap: .6rem;
  align-items: center;
  padding: .5rem .65rem;
  color: var(--ink-700);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.app-select .custom-select-option:hover,
.app-select .custom-select-option:focus-visible {
  color: var(--blue-700);
  background: #eef8ff;
  outline: 0;
}
.app-select .custom-select-option.selected {
  color: var(--blue-700);
  background: #e7f4fd;
  font-weight: 750;
}
.custom-select-check { width: 16px; height: 16px; opacity: 0; }
.custom-select-option.selected .custom-select-check { opacity: 1; }
.choice-check {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  margin: .35rem 0 1.1rem;
  color: var(--ink-500);
  font-size: .76rem;
  line-height: 1.55;
  cursor: pointer;
}
.choice-native-check,
.choice-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.choice-check-box {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 1px solid #afcddd;
  border-radius: 6px;
  transition: border-color .15s, background-color .15s, color .15s;
}
.choice-check-box svg { width: 14px; height: 14px; }
.choice-native-check:checked + .choice-check-box {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.choice-native-check:focus-visible + .choice-check-box { border-color: var(--navy); }
.choice-field { padding: 0; border: 0; }
.choice-field legend { margin-bottom: .45rem; color: var(--navy); font-size: .84rem; font-weight: 700; }
.choice-segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f1f7fb;
  border: 1px solid #cbdfea;
  border-radius: 11px;
}
.request-page .request-choice-option {
  position: relative;
  min-height: 40px;
  gap: .45rem;
  padding: 0 .8rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.request-page .request-choice-option.active { color: #fff; background: var(--blue-700); }
.choice-radio {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.request-choice-option.active .choice-radio { background: radial-gradient(circle, #fff 0 34%, transparent 38%); }
.request-choice-option:focus-within { outline: 0; }

.request-track-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr) auto;
  align-items: end;
  gap: .75rem;
}
.request-track-fields .field { min-width: 0; margin: 0; }
.request-track-fields .input,
.request-track-fields .btn { height: 46px; min-height: 46px; }
.request-track-fields .btn { align-self: end; justify-content: center; padding-block: 0; }

.faq-search-card {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.faq-search-field {
  height: 48px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0 .9rem;
  color: var(--ink-300);
  background: #fff;
  border: 1px solid #c7dbe9;
  border-radius: 9px;
}
.faq-search-field:focus-within { border-color: var(--blue-700); }
.faq-search-field > svg { width: 20px; height: 20px; flex: 0 0 20px; }
.faq-search-input {
  height: 46px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.open-data-page #pencarian-dataset { padding: 8px; }
.open-data-page #datasetFilterForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px auto auto;
  align-items: center;
  gap: 8px;
}
.open-data-page #datasetFilterForm > .flex {
  height: 46px;
  gap: .65rem;
  padding: 0 .85rem !important;
  color: var(--ink-300);
  background: #fff;
  border: 1px solid #c7dbe9 !important;
  border-radius: 8px !important;
}
.open-data-page #datasetFilterForm > .flex:focus-within { border-color: var(--blue-700) !important; }
.open-data-page #datasetFilterForm > .flex .input {
  height: 44px;
  min-height: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}
.open-data-page #datasetFilterForm .btn { height: 46px; min-height: 46px; padding-block: 0; justify-content: center; }
.open-data-page #datasetGrid { align-items: stretch; }
.open-data-page [data-dataset-card] {
  min-height: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-content: start;
  column-gap: .8rem;
  padding: 1.15rem;
}
.open-data-page [data-dataset-card] > .ci {
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  margin: 0;
}
.open-data-page [data-dataset-card] > .badge {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
}
.open-data-page [data-dataset-card] > h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 2.35em;
  margin: .95rem 0 .4rem;
  line-height: 1.25;
}
.open-data-page [data-dataset-card] > p:not(.small) {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  line-height: 1.55;
}
.open-data-page [data-dataset-card] > .flex {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  margin-top: .9rem;
}
.open-data-page [data-dataset-card] > .small {
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: .45rem;
}
.open-data-page #format-data .grid { align-items: stretch; }
.open-data-page #format-data .page-card { display: flex; flex-direction: column; align-items: flex-start; }
.open-data-page #format-data .page-card .btn { margin-top: auto; border-radius: 8px; }
@media (max-width: 900px) {
  .open-data-page #datasetFilterForm { grid-template-columns: 1fr 190px; }
  .open-data-page #datasetFilterForm .btn { width: 100%; }
}
@media (max-width: 620px) {
  .open-data-page #datasetFilterForm { grid-template-columns: 1fr; }
  .open-data-page [data-dataset-card] > h3 { min-height: 0; }
}
@media (max-width: 820px) {
  .request-track-fields { grid-template-columns: 1fr 1fr; }
  .request-track-fields .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 620px) {
  .request-track-fields { grid-template-columns: 1fr; }
  .request-track-fields .btn { grid-column: auto; }
}

/* Profile */
.profile-service-visual {
  overflow: hidden;
  margin: 0 0 .85rem;
  border: 1px solid #c5deed;
  border-radius: 12px;
  background: #eef8fd;
}
.profile-service-visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
}
.profile-service-visual figcaption {
  padding: .7rem .85rem;
  color: var(--ink-500);
  font-size: .72rem;
  line-height: 1.45;
}
.legal-basis-card { padding: 1rem; }
.legal-basis-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .1rem .1rem .85rem;
}
.legal-basis-head h3 { margin: 0; font-size: var(--fs-card-title, 1rem); }
.legal-basis-head-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  color: var(--blue-700);
  background: #fff;
  border: 1px solid #bddbed;
  border-radius: 10px;
}
.legal-basis-head-icon svg { width: 20px; height: 20px; }
.legal-basis-list {
  overflow: hidden;
  display: grid;
  background: rgba(255,255,255,.88);
  border: 1px solid #c8e0ee;
  border-radius: 10px;
}
.legal-basis-item {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .72rem .8rem;
}
.legal-basis-item + .legal-basis-item { border-top: 1px solid #d9e9f2; }
.legal-basis-code {
  width: 50px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: .25rem .35rem;
  color: var(--blue-700);
  background: #eaf5fd;
  border: 1px solid #bddcef;
  border-radius: 8px;
  font-size: var(--fs-badge, .72rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.legal-basis-copy {
  min-width: 0;
  color: var(--ink-700);
  font-size: var(--fs-card-desc, .8125rem);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.profile-page #maklumat .page-card-flat {
  background-image: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.78)), url('flow-aquatic-bg.webp');
  background-position: center, right bottom;
  background-size: cover, cover;
  border-color: #bddfee;
}
.profile-page .org { position: relative; }
.profile-page .org-node { border-color: #c7ddeb; box-shadow: none; }

/* Information list */
.dip-page .form-card.page-card {
  padding: 1rem !important;
  background: #f8fcff;
}
.dip-page .form-card.page-card > .flex { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; }
.dip-page table.tbl thead th { background: #eef8ff; }
.dip-page table.tbl tbody tr:hover { background: #f7fbff; }
.dip-page .dl { color: var(--blue-700); }
.dip-page .chip.active { background: var(--blue-700); border-color: var(--blue-700); }

/* Request services */
.request-page .chip-filter[role="tablist"] {
  display: flex;
  gap: 4px !important;
  overflow-x: auto;
  padding: 4px;
  background: #f3f8fb;
  border: 1px solid #cbdfea;
  border-radius: 12px;
  scrollbar-width: thin;
}
.request-page .chip-filter[role="tablist"] .chip {
  min-width: max-content;
  min-height: 46px;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0 .85rem;
  text-align: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
}
.request-page .chip-filter[role="tablist"] .chip svg { width: 19px; height: 19px; flex: 0 0 19px; }
.request-page .chip-filter[role="tablist"] .chip.active {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.request-page .tab-panel > .split { grid-template-columns: minmax(0, 1.45fr) minmax(270px, .72fr); gap: 1rem; }
.request-page #requestForm { padding: 1.45rem; }
.request-form-lead { margin: -.35rem 0 1rem; color: var(--ink-500); font-size: .76rem; line-height: 1.55; }
.request-form-section-title {
  margin: 1.15rem 0 .85rem;
  padding-bottom: .55rem;
  color: var(--navy);
  border-bottom: 1px solid #e0edf4;
  font-size: .82rem;
  letter-spacing: .01em;
}
.request-page #requestForm > .request-form-section-title:first-of-type { margin-top: .4rem; }
.request-page .field { margin-bottom: .9rem; }
.request-page .upload { padding: 1rem; }
.request-track-card { padding: 1.25rem; }
.request-page .request-track-fields .field { margin-bottom: 0; }
.request-page .timeline { padding-left: 3.25rem; }
.request-page .timeline::before { left: 11px; }
.request-page .tl-step {
  min-height: 54px;
  padding-bottom: 1.35rem;
}
.request-page .tl-step .dot { left: -3.25rem; }
.request-page .tl-step h4 {
  margin: 0 0 .25rem;
  line-height: 1.35;
}
.request-page .tl-step .when { line-height: 1.45; }
.request-page #bookingForm > h2 { margin-bottom: 1rem; }
.request-page #bookingForm .choice-field { margin: 0 0 1.15rem; }
.request-page #bookingForm .choice-field legend { margin-bottom: .55rem; }
.request-page #bookingForm .choice-segment {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.request-page #bookingForm .request-choice-option {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: .7rem;
  align-items: center;
  padding: .7rem .8rem;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid #cbdfea;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.request-page #bookingForm .request-choice-option:hover {
  border-color: #8cbcdf;
}
.request-page #bookingForm .request-choice-option.active {
  color: var(--navy);
  background: #eef8ff;
  border-color: var(--blue-700);
}
.booking-choice-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background: #e7f4fd;
  border-radius: 9px;
}
.booking-choice-icon svg { width: 21px; height: 21px; }
.booking-choice-copy { min-width: 0; display: grid; gap: .12rem; }
.booking-choice-copy strong {
  color: inherit;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .76rem;
  line-height: 1.3;
}
.booking-choice-copy small {
  color: var(--ink-500);
  font-size: .62rem;
  line-height: 1.35;
}
.booking-choice-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 1px solid #b9d2e2;
  border-radius: 50%;
}
.booking-choice-check svg { width: 13px; height: 13px; }
.request-choice-option.active .booking-choice-check {
  color: #fff;
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.request-choice-option:focus-within {
  border-color: var(--blue-700);
}
.request-page .page-card-soft { position: sticky; top: 76px; }
.request-page .service-team-image {
  width: calc(100% + 2rem);
  max-width: none;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  margin: -1rem -1rem 1rem;
  border-radius: 11px 11px 0 0;
}
.request-page .list-check-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--blue-700); }
.request-page .track-meta { display: grid; grid-template-columns: .8fr 1.5fr .8fr; gap: 1rem; }

/* FAQ */
.faq-page .inner-page-section > .container { max-width: 1040px !important; }
.faq-page #faqList {
  overflow: hidden;
  border: 1px solid #cbdfea;
  border-radius: 12px;
}
.faq-page #faqList .acc { margin: 0; border: 0; border-bottom: 1px solid #dce9f2; border-radius: 0; }
.faq-page #faqList .acc:last-child { border-bottom: 0; }
.faq-page .acc-q { min-height: 58px; }
.faq-page .form-card.page-card { background: #f8fcff; }

/* Reports */
.report-summary {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #eef9ff;
  border: 1px solid #bddff3;
  border-radius: 12px;
}
.report-summary > img {
  width: 112px;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border: 1px solid #bad7e9;
  border-radius: 4px;
}
.report-summary h2 { font-size: 1.18rem; margin: .15rem 0 .35rem; }
.report-summary p { color: var(--ink-500); font-size: .78rem; line-height: 1.55; }
.report-page .pdf-reader { grid-template-columns: 250px minmax(0, 1fr); }
.report-page .pdf-toc { padding: 1rem; background: #f5fbff; }
.report-page .pdf-toc a.active { color: #fff; background: var(--blue-700); }
.report-page .pdf-page { min-height: 440px; padding: clamp(1.3rem, 3vw, 2.25rem); }
.report-page .regulation-download-card { align-items: center; }
.report-page .file-tile {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 800;
}
.report-page .file-tile-pdf { color: #d14343; background: #fdecec; }
.report-page .reader-page-title { color: var(--navy); }

/* Survey */
.survey-page .stat-box { padding: 1rem; text-align: left; }
.survey-page .stat-box .n { color: var(--navy); }
.survey-page .stat-suffix { color: var(--ink-300); font-size: 1rem; }
.survey-page .bar { box-shadow: none; }
.survey-page .form-card { background: #fff; }

@media (max-width: 900px) {
  .inner-page .inner-page-hero { background-size: cover, auto 155%; }
  .dip-page .form-card.page-card > .flex { grid-template-columns: 1fr 150px; }
  .dip-page .form-card.page-card .btn { grid-column: 1 / -1; justify-content: center; }
  .request-page .chip-filter[role="tablist"] { grid-template-columns: repeat(2, 1fr); }
  .request-page .tab-panel > .split { grid-template-columns: 1fr; }
  .request-page .page-card-soft { position: static; }
  .report-summary { grid-template-columns: 104px minmax(0, 1fr); }
  .report-summary > img { width: 92px; }
  .report-summary .btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 620px) {
  .inner-page .inner-page-hero {
    min-height: 240px;
    background-image: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.84)), url('inner-hero-aquatic.webp');
    background-size: cover, auto 125%;
  }
  .inner-page .inner-page-hero .container { padding-block: 2.2rem 2.6rem; }
  .dip-page .form-card.page-card > .flex { grid-template-columns: 1fr; }
  .dip-page .form-card.page-card select.input { max-width: none !important; }
  .request-page .chip-filter[role="tablist"] { grid-template-columns: 1fr; }
  .request-page .track-meta { grid-template-columns: 1fr; }
  .request-page #bookingForm .choice-segment { grid-template-columns: 1fr; }
  .report-summary { grid-template-columns: 82px 1fr; }
  .report-summary > img { width: 76px; }
  .report-page .pdf-reader { grid-template-columns: 1fr; }
  .a11y-panel { left: 12px; right: 12px; bottom: 82px; width: auto; }
}

/* Icon and label alignment for pagination and reader navigation. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  line-height: 1.2;
  vertical-align: middle;
}
.chip svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  align-self: center;
}
.pdf-toolbar .chip,
.dip-page .chip {
  min-height: 44px;
}

/* Modern report statistics dashboard */
.report-page .pdf-view { min-width: 0; }
.report-page .pdf-toc button {
  width: 100%;
  display: block;
  padding: .5rem .6rem;
  color: var(--ink-700);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.report-page .pdf-toc button:hover,
.report-page .pdf-toc button.active {
  color: #fff;
  background: var(--blue-700);
}
.report-page .pdf-toc button:focus-visible {
  outline: 3px solid rgba(11,107,203,.3);
  outline-offset: 2px;
}
.report-page .pdf-toolbar .chip:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.reader-dashboard {
  display: grid;
  gap: 1rem;
}
.reader-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.reader-dashboard-head > div:first-child { min-width: 0; }
.reader-kicker {
  display: block;
  margin-bottom: .3rem;
  color: #087667;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.reader-dashboard-copy {
  max-width: 62ch;
  margin-top: .35rem;
  color: var(--ink-500);
  font-size: .82rem;
  line-height: 1.55;
}
.reader-trend-badge {
  min-width: 196px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  color: #087667;
  background: #edf9f6;
  border: 1px solid #c6e9df;
  border-radius: 11px;
}
.reader-trend-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  color: #087667;
  background: #d9f3eb;
  border-radius: 9px;
}
.reader-trend-icon svg { width: 18px; height: 18px; }
.reader-trend-badge > span:last-child,
.survey-count {
  display: grid;
  gap: .05rem;
}
.reader-trend-badge strong,
.survey-count strong {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1;
}
.reader-trend-badge small,
.survey-count small {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.35;
}
.reader-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.reader-kpi {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  gap: .14rem;
  padding: .78rem .88rem .76rem;
  background: #f8fcff;
  border: 1px solid #d3e5f0;
  border-radius: 11px;
}
.reader-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--blue);
}
.reader-kpi:nth-child(2)::before { background: var(--aqua); }
.reader-kpi:nth-child(3)::before { background: #5a7ed8; }
.reader-kpi small {
  color: var(--ink-500);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.reader-kpi strong {
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.15;
}
.reader-kpi strong em {
  color: var(--ink-500);
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
}
.reader-kpi > span {
  overflow: hidden;
  color: var(--ink-500);
  font-size: .7rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, .75fr);
  gap: .7rem;
}
.chart-panel {
  min-width: 0;
  padding: .85rem;
  background: #fff;
  border: 1px solid #d3e5f0;
  border-radius: 12px;
}
.chart-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.chart-panel-head span {
  display: block;
  margin-bottom: .12rem;
  color: var(--ink-500);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.chart-panel-head h3 {
  margin: 0;
  font-size: .9rem;
}
.chart-panel-head .chart-unit {
  flex: 0 0 auto;
  padding: .25rem .5rem;
  color: var(--blue-700);
  background: #edf7fd;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.trend-chart { position: relative; margin-top: .2rem; }
.trend-chart svg {
  width: 100%;
  height: 210px;
  display: block;
  overflow: visible;
}
.trend-grid {
  fill: none;
  stroke: #e4eef5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.trend-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.trend-dots {
  position: absolute;
  inset: 0 0 auto;
  height: 210px;
  pointer-events: none;
}
.trend-dots i {
  position: absolute;
  top: var(--dot-y);
  left: var(--dot-x);
  width: 10px;
  height: 10px;
  background: #fff;
  border: 3px solid var(--blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.trend-dots i.current {
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-color: #fff;
  outline: 2px solid var(--blue);
}
.trend-current {
  position: absolute;
  top: calc(30.4% - 32px);
  left: 90.3%;
  min-width: 50px;
  padding: .25rem .5rem;
  color: #fff;
  background: var(--navy);
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}
.trend-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-inline: 1.5%;
  color: var(--ink-500);
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
}
.category-bars {
  display: grid;
  gap: .82rem;
  margin-top: .95rem;
}
.category-row > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .32rem;
  color: var(--ink-700);
  font-size: .72rem;
  line-height: 1.35;
}
.category-row strong {
  flex: 0 0 auto;
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .75rem;
}
.category-row i,
.service-score-grid i {
  height: 7px;
  display: block;
  overflow: hidden;
  background: #e9f1f6;
  border-radius: 999px;
}
.category-row b,
.service-score-grid b {
  width: var(--bar-size);
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--blue), var(--aqua));
  border-radius: inherit;
}
.chart-insight {
  display: grid;
  gap: .08rem;
  margin-top: 1rem;
  padding: .65rem .7rem;
  color: var(--ink-500);
  background: #f3f9fd;
  border-radius: 9px;
  font-size: .7rem;
  line-height: 1.4;
}
.chart-insight strong { color: var(--blue-700); }
.survey-count {
  min-width: 148px;
  padding: .65rem .8rem;
  color: var(--blue-700);
  background: #eef8ff;
  border: 1px solid #cde4f3;
  border-radius: 11px;
}
.satisfaction-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: .7rem;
}
.satisfaction-score-panel {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
.satisfaction-ring {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--blue) 0 94%, #e7f0f6 94% 100%);
  border-radius: 50%;
}
.satisfaction-ring::before {
  content: "";
  width: 94px;
  height: 94px;
  grid-area: 1 / 1;
  background: #fff;
  border-radius: 50%;
}
.satisfaction-ring > span {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  text-align: center;
}
.satisfaction-ring strong {
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
}
.satisfaction-ring small {
  margin-top: .18rem;
  color: var(--ink-500);
  font-size: .7rem;
  font-weight: 700;
}
.score-label {
  display: inline-flex;
  margin-bottom: .45rem;
  padding: .24rem .52rem;
  color: #087667;
  background: #e5f7f1;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}
.satisfaction-score-panel h3 { margin-bottom: .25rem; font-size: .92rem; }
.satisfaction-score-panel p { color: var(--ink-500); font-size: .74rem; line-height: 1.5; }
.satisfaction-breakdown .category-bars { gap: .72rem; }
.service-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.service-score-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .7rem;
  align-items: center;
  padding: .72rem .8rem;
  background: #f8fcff;
  border: 1px solid #d3e5f0;
  border-radius: 10px;
}
.service-score-grid span { color: var(--ink-500); font-size: .72rem; font-weight: 700; }
.service-score-grid strong {
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1rem;
}
.service-score-grid i { grid-column: 1 / -1; height: 5px; }

body.a11y-contrast .report-summary,
body.a11y-contrast .pdf-toc,
body.a11y-contrast .pdf-page,
body.a11y-contrast .chart-panel,
body.a11y-contrast .reader-kpi,
body.a11y-contrast .reader-trend-badge,
body.a11y-contrast .survey-count,
body.a11y-contrast .chart-insight,
body.a11y-contrast .service-score-grid article,
body.a11y-contrast .satisfaction-ring::before {
  color: #fff !important;
  background: #0a0a0a !important;
  border-color: #ffeb3b !important;
}
body.a11y-contrast .inner-page-hero {
  background: #000 !important;
  border-color: #ffeb3b !important;
}
body.a11y-contrast .reader-kicker,
body.a11y-contrast .reader-kpi small,
body.a11y-contrast .reader-kpi > span,
body.a11y-contrast .reader-kpi strong em,
body.a11y-contrast .reader-trend-badge small,
body.a11y-contrast .survey-count small,
body.a11y-contrast .chart-panel-head span,
body.a11y-contrast .category-row > div,
body.a11y-contrast .trend-labels,
body.a11y-contrast .service-score-grid span,
body.a11y-contrast .satisfaction-ring small {
  color: #fff !important;
}
body.a11y-contrast .reader-kpi strong,
body.a11y-contrast .category-row strong,
body.a11y-contrast .chart-insight strong,
body.a11y-contrast .service-score-grid strong,
body.a11y-contrast .satisfaction-ring strong {
  color: #ffeb3b !important;
}
body.a11y-contrast .score-label {
  color: #000 !important;
  background: #ffeb3b !important;
}
body.a11y-contrast .pdf-toc button { color: #fff; }
body.a11y-contrast .pdf-toc button:hover,
body.a11y-contrast .pdf-toc button.active {
  color: #000;
  background: #ffeb3b;
}
body.a11y-contrast .trend-grid { stroke: #777; }
body.a11y-contrast .category-row i,
body.a11y-contrast .service-score-grid i { background: #555; }

@media (max-width: 1050px) {
  .report-dashboard-grid { grid-template-columns: 1fr; }
  .category-panel .category-bars { grid-template-columns: 1fr 1fr; }
  .category-panel .chart-insight { grid-column: 1 / -1; }
  .satisfaction-main { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .report-page .pdf-page { min-height: 0; padding: 1.15rem; }
  .reader-dashboard-head { flex-direction: column; }
  .reader-trend-badge,
  .survey-count { width: 100%; min-width: 0; }
  .trend-chart svg,
  .trend-dots { height: 180px; }
}

@media (max-width: 560px) {
  .report-page .pdf-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: .7rem;
  }
  .report-page .pdf-toolbar > span { text-align: right; }
  .report-page .pdf-toolbar .flex { display: grid; grid-template-columns: 1fr 1fr; }
  .report-page .pdf-toolbar .chip { justify-content: center; }
  .reader-kpi-grid,
  .service-score-grid,
  .category-panel .category-bars { grid-template-columns: 1fr; }
  .reader-kpi > span { white-space: normal; }
  .satisfaction-score-panel { grid-template-columns: 1fr; text-align: center; }
  .satisfaction-ring { margin-inline: auto; }
  .trend-chart svg,
  .trend-dots { height: 150px; }
}

/* DIP filters, custom year selector, and proportional pagination */
.dip-page .year-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.dip-page .dip-search-field {
  min-width: 240px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0 .95rem;
  color: var(--ink-300);
  background: #fff;
  border: 1px solid #c7dbe9;
  border-radius: 10px;
}
.dip-page .dip-search-field:focus-within {
  border-color: var(--blue);
  outline: 0;
}
.dip-page .dip-search-field > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.dip-page .dip-search-input {
  height: 46px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dip-page .custom-select-trigger {
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: 0 .8rem;
  color: var(--navy);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.dip-page .dip-search-submit {
  height: 48px;
  min-height: 48px;
  padding: 0 1.35rem;
  justify-content: center;
  border-radius: 9px;
}
.dip-page .custom-select-trigger:hover { border-color: var(--blue-300); }
.dip-page .custom-select-trigger:focus-visible {
  outline: 0;
  border-color: var(--blue);
}
.dip-page .custom-select-value {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dip-page .custom-select-chevron {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--blue-700);
  transition: transform .18s ease;
}
.dip-page .custom-select.open .custom-select-chevron { transform: rotate(180deg); }
.dip-page .custom-select-list {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 3px;
  padding: 4px;
  background: #fff;
  border: 1px solid #bfd8e9;
  border-radius: 10px;
}
.dip-page .custom-select-list[hidden] { display: none; }
.dip-page .custom-select-option {
  width: 100%;
  min-height: 38px;
  padding: .5rem .65rem;
  color: var(--ink-700);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.dip-page .custom-select-option:hover,
.dip-page .custom-select-option:focus-visible {
  color: var(--blue-700);
  background: #eef8ff;
  outline: 0;
}
.dip-page .custom-select-option.selected {
  color: #fff;
  background: var(--blue-700);
}
.dip-page .dip-toolbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dip-category-tools,
.dip-table-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dip-category-tools > .small { line-height: 40px; white-space: nowrap; }
.dip-page .dip-toolbar .chip-filter { gap: 6px; }
.dip-page .dip-toolbar .chip-filter .chip {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.dip-table-controls { margin-left: auto; }
.dip-table-controls .dip-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.dip-table-controls .app-select { width: 132px; }
.dip-table-controls .dip-control:last-child .app-select { width: 74px; }
.dip-table-controls .custom-select-trigger { height: 40px; min-height: 40px; }
.dip-empty {
  display: grid;
  gap: .3rem;
  justify-items: center;
  padding: 2rem 1rem;
  color: var(--ink-500);
  text-align: center;
}
.dip-empty strong { color: var(--navy); font-size: .9rem; }
.dip-empty > span { font-size: .75rem; }
.dip-page .dip-toolbar .chip-filter .chip:focus-visible,
.dip-page .dip-pagination .chip:focus-visible {
  outline: 0;
  border-color: var(--blue-700);
}
.dip-page .table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #b8d8ea transparent;
}
.dip-page .table-wrap::-webkit-scrollbar { height: 8px; }
.dip-page .table-wrap::-webkit-scrollbar-track { background: transparent; }
.dip-page .table-wrap::-webkit-scrollbar-thumb { background: #b8d8ea; border-radius: 999px; }
.dip-page table.tbl { min-width: 760px; }
.dip-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.dip-pagination-row > p { margin: 0; }
.dip-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dip-page .pagination-page {
  width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border-radius: 50%;
}
.dip-page .pagination-nav {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  gap: 6px;
  border-radius: 12px;
  white-space: nowrap;
}
.dip-page .pagination-nav:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.a11y-contrast .dip-page .custom-select-trigger,
body.a11y-contrast .dip-page .custom-select-list,
body.a11y-contrast .dip-page .custom-select-option {
  color: #fff !important;
  background: #0a0a0a !important;
  border-color: #ffeb3b !important;
}
body.a11y-contrast .dip-page .custom-select-option.selected,
body.a11y-contrast .dip-page .custom-select-option:hover,
body.a11y-contrast .dip-page .custom-select-option:focus-visible {
  color: #000 !important;
  background: #ffeb3b !important;
}

@media (max-width: 720px) {
  .dip-page .dip-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dip-category-tools,
  .dip-table-controls { width: 100%; }
  .dip-category-tools { align-items: flex-start; flex-direction: column; }
  .dip-category-tools > .small { line-height: 1.4; }
  .dip-page .dip-toolbar .chip-filter {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 2px 5px;
    scrollbar-width: thin;
  }
  .dip-page .dip-toolbar .chip-filter .chip { flex: 0 0 auto; }
  .dip-table-controls { justify-content: space-between; }
  .dip-table-controls .dip-control { flex: 1 1 0; }
  .dip-table-controls .app-select,
  .dip-table-controls .dip-control:last-child .app-select { width: 100%; }
  .dip-pagination-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .dip-pagination { width: 100%; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .dip-page .year-select { width: 100%; }
}

@media (max-width: 480px) {
  .dip-page .pagination-nav {
    width: 40px;
    flex: 0 0 40px;
    padding: 0;
  }
  .dip-page .pagination-label { display: none !important; }
}

/* Dedicated service standards page */
.standard-hero .container { padding-bottom: 2.75rem; }
.standard-hero-eyebrow { margin-bottom: .75rem; }
.standard-hero-summary {
  max-width: 670px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1.35rem;
}
.standard-hero-stat {
  min-width: 0;
  display: grid;
  gap: .18rem;
  padding: .78rem .9rem;
  background: rgba(255,255,255,.84);
  border: 1px solid #c4dfee;
  border-radius: 10px;
}
.standard-hero-stat strong {
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.3rem;
  line-height: 1;
}
.standard-hero-stat > span {
  color: var(--ink-500);
  font-size: .68rem;
  font-weight: 700;
}
.standard-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.4rem;
}
.standard-section-head h2 { max-width: 24ch; }
.standard-section-head > p {
  color: var(--ink-500);
  font-size: .82rem;
  line-height: 1.65;
}
.standard-section-head-centered {
  grid-template-columns: 1fr;
  gap: .45rem;
  max-width: 760px;
}
.standard-section-head-centered h2 { max-width: none; }
.standard-section-head-centered > p { max-width: 65ch; }
.standard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.standard-summary-card {
  min-height: 210px;
  padding: 1.15rem;
}
.standard-card-icon,
.standard-detail-icon,
.standard-channel-icon,
.standard-sla-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background: #eaf6fd;
  border: 1px solid #cce4f3;
  border-radius: 10px;
}
.standard-card-icon svg,
.standard-detail-icon svg,
.standard-channel-icon svg,
.standard-sla-icon svg { width: 23px; height: 23px; }
.standard-summary-card h3 { margin: .8rem 0 .38rem; font-size: .95rem; }
.standard-summary-card p { font-size: .78rem; line-height: 1.65; }
.standard-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 1.2rem 1rem 1.3rem;
  list-style: none;
  background: rgba(255,255,255,.78);
  border: 1px solid #c8e3f1;
  border-radius: 16px;
}
.standard-flow > li::marker { content: ""; }
.standard-flow::before {
  content: "";
  position: absolute;
  top: 43px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: #bcdcf0;
}
.standard-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  align-self: start;
  padding: .3rem .55rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.standard-step-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: .9rem;
  color: #fff;
  background: var(--blue-700);
  border: 5px solid #f7fbfe;
  border-radius: 50%;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 800;
}
.standard-step:nth-child(even) .standard-step-number { background: var(--aqua-700); }
.standard-step h3 { margin-bottom: .38rem; font-size: .82rem; }
.standard-step p { color: var(--ink-500); font-size: .7rem; line-height: 1.55; }
.standard-step-statuses {
  display: grid;
  gap: .35rem;
  margin-top: .65rem;
}
.standard-step-statuses > span {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: .35rem;
  align-items: start;
  color: var(--blue-700);
  font-size: .62rem;
  font-weight: 750;
  line-height: 1.4;
}
.standard-step-statuses svg { width: 14px; height: 14px; }
.standard-flow-section {
  background: #f8fbfd;
}
.standard-home-flow { padding: 1.45rem 1.8rem 1.35rem; }
.standard-home-flow .flow-heading > div { min-width: 0; }
.standard-flow-intro { max-width: 60ch; margin-top: .35rem; color: var(--ink-500); font-size: .76rem; line-height: 1.55; }
.standard-flow-note {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding: .65rem .75rem;
  color: var(--ink-500);
  background: rgba(255,255,255,.76);
  border: 1px solid #c9e2f1;
  border-radius: 9px;
  font-size: .66rem;
  line-height: 1.45;
}
.standard-flow-note > svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--blue-700); }
.standard-flow-note > span { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.standard-flow-note strong { color: var(--navy); }
.standard-reference-section { border-top: 1px solid #dceaf3; }
.standard-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.standard-reference-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: .75rem;
  align-items: center;
  padding: .9rem;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid #cbdfea;
  border-radius: 11px;
}
.standard-reference-card:hover {
  color: var(--ink-700);
  border-color: #91bddc;
}
.standard-reference-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background: #eaf6fd;
  border-radius: 9px;
}
.standard-reference-icon svg { width: 21px; height: 21px; }
.standard-reference-card > span:nth-child(2) { min-width: 0; display: grid; gap: .18rem; }
.standard-reference-card strong { color: var(--navy); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: .78rem; line-height: 1.35; }
.standard-reference-card small { color: var(--ink-500); font-size: .65rem; line-height: 1.4; }
.standard-reference-arrow { width: 17px; height: 17px; color: var(--blue-700); }
.standard-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.standard-detail-card {
  min-height: 190px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: .9rem;
  padding: 1.1rem;
}
.standard-detail-card[id] { scroll-margin-top: 72px; }
.standard-detail-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--aqua-700);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.standard-detail-card h3 { margin-bottom: .4rem; font-size: .9rem; }
.standard-detail-card p { color: var(--ink-500); font-size: .74rem; line-height: 1.6; }
.standard-sla-banner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: .85rem;
  padding: 1.1rem 1.2rem;
  background-image: linear-gradient(90deg, rgba(238,249,255,.97), rgba(238,249,255,.82)), url('flow-aquatic-bg.webp');
  background-position: center, right center;
  background-size: cover;
  border: 1px solid #bddfee;
  border-radius: 12px;
}
.standard-sla-icon { width: 52px; height: 52px; color: #fff; background: var(--blue-700); border: 0; }
.standard-sla-label { color: var(--aqua-700); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.standard-sla-banner h3 { margin: .15rem 0 .3rem; font-size: 1rem; }
.standard-sla-banner p { max-width: 85ch; color: var(--ink-500); font-size: .74rem; line-height: 1.55; }
.standard-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.standard-channel-card { min-height: 174px; padding: 1rem; }
.standard-channel-card h3 { margin: .7rem 0 .35rem; font-size: .9rem; }
.standard-channel-card p { color: var(--ink-500); font-size: .74rem; line-height: 1.55; }
.standard-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 1.45rem;
  background: #f1f9fe;
  border: 1px solid #c4e0ef;
  border-radius: 13px;
}
.standard-cta-panel h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.standard-cta-panel p { max-width: 65ch; margin-top: .45rem; color: var(--ink-500); font-size: .78rem; }
.standard-cta-actions { display: flex; align-items: center; gap: .55rem; }

/* Dedicated contact page */
.contact-section-heading { max-width: 760px; margin-bottom: 1.4rem; }
.contact-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.contact-channel-card {
  min-width: 0;
  min-height: 176px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  gap: .8rem;
  align-content: start;
  padding: 1rem;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid #cbdfea;
  border-radius: 12px;
}
.contact-channel-card:hover { color: var(--ink-700); border-color: #91bddc; }
.contact-channel-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background: #eaf6fd;
  border-radius: 10px;
}
.contact-channel-icon svg { width: 23px; height: 23px; }
.contact-channel-copy {
  min-width: 0;
  display: grid;
  gap: .22rem;
}
.contact-channel-copy small {
  color: var(--aqua-700);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.contact-channel-copy strong {
  overflow-wrap: anywhere;
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .84rem;
  line-height: 1.35;
}
.contact-channel-copy > span:last-child { color: var(--ink-500); font-size: .68rem; line-height: 1.5; }
.contact-channel-arrow { width: 17px; height: 17px; margin-top: .25rem; color: var(--blue-700); }
.contact-hours-card { grid-template-columns: 44px minmax(0, 1fr); }
.contact-hours-card .badge { grid-column: 2; justify-self: start; margin-top: .35rem; }
.contact-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(285px, .72fr);
  gap: 1rem;
  align-items: start;
}
.contact-form-card { padding: 1.35rem; }
.contact-form-heading { margin-bottom: 1.15rem; }
.contact-form-heading h2 { margin-bottom: .4rem; }
.contact-form-heading p { max-width: 66ch; color: var(--ink-500); font-size: .78rem; line-height: 1.6; }
.contact-form .field { margin-bottom: .9rem; }
.contact-consent {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: flex-start;
  gap: .6rem;
  margin: .2rem 0 1rem;
  color: var(--ink-500);
  font-size: .72rem;
  line-height: 1.5;
}
.contact-consent .choice-native-check { position: absolute; width: 1px; height: 1px; margin: 0; }
.contact-form-actions { display: flex; align-items: center; gap: .9rem; }
.contact-privacy-note { max-width: 42ch; color: var(--ink-500); font-size: .66rem; line-height: 1.45; }
.contact-side { display: grid; gap: .85rem; }
.contact-response-card { padding: 1.15rem; }
.contact-response-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: .75rem;
  color: #fff;
  background: var(--blue-700);
  border-radius: 11px;
}
.contact-response-icon svg { width: 24px; height: 24px; }
.contact-response-card h3 { margin: .7rem 0 .4rem; font-size: .98rem; }
.contact-response-card > p { color: var(--ink-500); font-size: .72rem; line-height: 1.55; }
.contact-response-list { display: grid; gap: .55rem; margin-top: .85rem; }
.contact-response-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  color: var(--ink-700);
  font-size: .7rem;
  line-height: 1.45;
}
.contact-response-item svg { width: 17px; height: 17px; color: var(--green); }
.contact-map-card {
  display: block;
  overflow: hidden;
  padding: 0;
  color: var(--ink-700);
}
.contact-map-card:hover { color: var(--ink-700); }
.contact-map-visual {
  position: relative;
  height: 155px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(8,104,215,.2);
  background: linear-gradient(135deg, #e7f7ff, #d5f0f4);
}
.contact-map-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-map-pin {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  padding: .55rem;
  color: #fff;
  background: var(--blue-700);
  border-radius: 50%;
}
.contact-map-copy { display: grid; gap: .2rem; padding: 1rem; }
.contact-map-copy small { color: var(--aqua-700); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.contact-map-copy strong { color: var(--navy); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: .84rem; }
.contact-map-copy > span { color: var(--ink-500); font-size: .7rem; }
.contact-map-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; color: var(--blue-700) !important; font-weight: 800; }
.contact-map-link svg { width: 16px; height: 16px; }
.contact-service-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.35rem 1.45rem;
}
.contact-cta-copy h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.contact-cta-copy p { max-width: 64ch; margin-top: .4rem; color: var(--ink-500); font-size: .77rem; }
.contact-cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; max-width: 430px; }
.contact-faq-link { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem; color: var(--blue-700); font-size: .72rem; font-weight: 800; }
.contact-faq-link svg { width: 16px; height: 16px; }

body.a11y-contrast .standard-hero-stat,
body.a11y-contrast .standard-step,
body.a11y-contrast .standard-reference-card,
body.a11y-contrast .standard-sla-banner,
body.a11y-contrast .standard-cta-panel,
body.a11y-contrast .contact-channel-card,
body.a11y-contrast .contact-map-card,
body.a11y-contrast .contact-map-visual,
body.a11y-contrast .contact-service-cta {
  color: #fff !important;
  background: #0a0a0a !important;
  border-color: #ffeb3b !important;
}
body.a11y-contrast .standard-hero-stat strong,
body.a11y-contrast .standard-step h3,
body.a11y-contrast .contact-channel-copy strong,
body.a11y-contrast .contact-map-copy strong { color: #ffeb3b !important; }

@media (max-width: 1050px) {
  .standard-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .standard-flow::before { display: none; }
  .standard-channel-grid,
  .standard-reference-grid,
  .contact-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-workspace { grid-template-columns: 1fr; }
  .contact-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .standard-section-head { grid-template-columns: 1fr; gap: .45rem; }
  .standard-summary-grid,
  .standard-detail-grid { grid-template-columns: 1fr; }
  .standard-summary-card { min-height: 0; }
  .standard-flow { grid-template-columns: 1fr; }
  .standard-step { min-height: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; }
  .standard-step-number { margin: 0; }
  .standard-channel-grid,
  .standard-reference-grid,
  .contact-channel-grid,
  .contact-side { grid-template-columns: 1fr; }
  .standard-cta-panel,
  .contact-service-cta { grid-template-columns: 1fr; }
  .standard-cta-actions { flex-wrap: wrap; }
  .contact-cta-actions { justify-content: flex-start; max-width: none; }
}

@media (max-width: 520px) {
  .standard-hero-summary { grid-template-columns: 1fr; }
  .standard-sla-banner { grid-template-columns: 1fr; }
  .standard-detail-card { grid-template-columns: 1fr; }
  .standard-cta-actions,
  .contact-form-actions { align-items: stretch; flex-direction: column; }
  .standard-cta-actions .btn,
  .contact-form-actions .btn,
  .contact-cta-actions .btn { justify-content: center; width: 100%; }
  .contact-channel-card { min-height: 0; }
}

/* Dedicated regulations directory */
.regulation-filter-card { padding: 8px !important; background: #f8fcff; }
.regulation-filter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px 132px auto;
  align-items: center;
  gap: 8px;
}
.regulation-search-field {
  height: 46px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0 .85rem;
  color: var(--ink-300);
  background: #fff;
  border: 1px solid #c7dbe9;
  border-radius: 8px;
}
.regulation-search-field:focus-within { border-color: var(--blue-700); }
.regulation-search-field > svg { width: 19px; height: 19px; flex: 0 0 19px; }
.regulation-search-field .input {
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}
.regulation-filter-form .btn { min-height: 46px; justify-content: center; border-radius: 8px; }
.regulation-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 1rem;
}
.regulation-directory-head p { margin: 0; white-space: nowrap; }
.regulation-directory { display: grid; gap: .75rem; }
.regulation-directory-card {
  min-height: 142px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
}
.regulation-file-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--blue-700);
  background: #eaf6fd;
  border-radius: 10px;
}
.regulation-file-icon svg { width: 25px; height: 25px; }
.regulation-directory-copy { min-width: 0; }
.regulation-directory-copy .badge { margin-bottom: .45rem; }
.regulation-directory-copy h3 { margin-bottom: .25rem; font-size: .96rem; }
.regulation-directory-copy p { max-width: 78ch; color: var(--ink-500); font-size: .74rem; line-height: 1.5; }
.regulation-meta {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-top: .55rem;
  color: var(--ink-300);
  font-size: .66rem;
  font-weight: 700;
}
.regulation-meta i { width: 3px; height: 3px; display: block; background: currentColor; border-radius: 50%; }
.regulation-directory-card > .btn { justify-content: center; white-space: nowrap; border-radius: 8px; }
.regulation-empty {
  display: grid;
  justify-items: center;
  gap: .35rem;
  margin-top: .75rem;
  padding: 2rem;
  color: var(--ink-500);
  text-align: center;
}
.regulation-empty[hidden] { display: none; }
.regulation-empty svg { width: 30px; height: 30px; color: var(--blue-700); }
.regulation-empty strong { color: var(--navy); }
.regulation-service-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.35rem 1.45rem;
}
.regulation-service-cta p { max-width: 68ch; margin-top: .35rem; color: var(--ink-500); font-size: .77rem; }
.regulation-service-cta .btn { justify-content: center; white-space: nowrap; }

@media (max-width: 900px) {
  .regulation-filter-form { grid-template-columns: minmax(0, 1fr) 180px 120px; }
  .regulation-filter-form .regulation-reset { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .regulation-filter-form { grid-template-columns: 1fr; }
  .regulation-filter-form .regulation-reset { grid-column: auto; }
  .regulation-directory-head { align-items: flex-start; flex-direction: column; }
  .regulation-directory-card { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
  .regulation-file-icon { width: 42px; height: 42px; }
  .regulation-directory-card > .btn { grid-column: 1 / -1; width: 100%; }
  .regulation-service-cta { grid-template-columns: 1fr; }
  .regulation-service-cta .btn { width: 100%; }
}

/* Open Data and Gallery card rhythm */
.gallery-page #galleryGrid { align-items: stretch; }
.gallery-page .gallery-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.gallery-page .gallery-media {
  width: 100%;
  overflow: hidden;
  margin: 0 0 1rem;
  border-radius: 11px;
}
.gallery-page .gallery-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.gallery-page .gallery-media figcaption {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: .65rem .8rem;
  line-height: 1.4;
}
.gallery-page .gallery-card > .flex {
  min-height: 31px;
  align-items: center;
  gap: .6rem;
}
.gallery-page .gallery-card > h3 {
  min-height: 2.45em;
  margin: .75rem 0 .4rem;
  font-size: 1rem;
  line-height: 1.23;
}
.gallery-page .gallery-card > p {
  min-height: 3.25em;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.gallery-page .gallery-card > .btn {
  align-self: flex-start;
  justify-content: center;
  margin-top: auto;
  border-radius: 8px;
}

/* Accessibility popover: compact, aligned, and readable at every text size. */
.a11y-panel {
  width: min(410px, calc(100vw - 32px));
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid #bfd6e6;
  border-radius: 16px;
  background: #fff;
}
.a11y-head {
  min-height: 58px;
  margin: 0;
  padding: .75rem .9rem .75rem 1.05rem;
  border-bottom: 1px solid #dce9f2;
  background: #f7fbfe;
}
.a11y-head h4 { font-size: 1rem; line-height: 1.3; }
.a11y-panel .sub {
  margin: 0;
  padding: .85rem 1.05rem 0;
  color: var(--ink-500);
  font-size: .76rem;
  line-height: 1.55;
}
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: .9rem 1.05rem;
}
.a11y-opt {
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .65rem .7rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid #ccdeea;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.a11y-opt svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: var(--blue-700);
  background: #edf8ff;
  border-radius: 9px;
}
.a11y-opt:hover,
.a11y-opt:focus-visible {
  outline: 0;
  color: var(--blue-700);
  background: #f7fbff;
  border-color: var(--blue-700);
}
.a11y-opt.active {
  color: var(--blue-700);
  background: #eaf6fd;
  border-color: var(--blue-700);
}
.a11y-reset {
  width: calc(100% - 2.1rem);
  min-height: 44px;
  margin: 0 1.05rem 1.05rem;
  padding: 0 .9rem;
  border: 1px solid #cbdfea;
  border-radius: 9px;
  background: #f6fafc;
}
.a11y-reset:hover,
.a11y-reset:focus-visible,
.a11y-head .modal-close:focus-visible {
  outline: 0;
  color: var(--blue-700);
  border-color: var(--blue-700);
  background: #eef8ff;
}

@media (max-width: 620px) {
  .gallery-page .gallery-card > h3,
  .gallery-page .gallery-card > p { min-height: 0; }
}

@media (max-width: 430px) {
  .a11y-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Mobile experience hardening - August 2026
   Fluid type and bottom-sheet patterns follow the proven
   responsive hierarchy used by the RuangTes frontend.
   ========================================================= */
:root {
  --fs-display: clamp(2rem, 2.9vw + 1rem, 3.35rem);
  --fs-page-title: clamp(1.75rem, 2vw + .9rem, 2.65rem);
  --fs-section-title: clamp(1.5rem, 1.2vw + 1rem, 1.9rem);
  --fs-card-title: clamp(.9rem, .22vw + .84rem, 1.02rem);
  --fs-body-desc: clamp(.875rem, .22vw + .82rem, 1rem);
  --fs-card-desc: clamp(.8125rem, .18vw + .77rem, .9rem);
  --fs-badge: clamp(.72rem, .08vw + .7rem, .76rem);
}

h1 { font-size: var(--fs-page-title); }
h2 { font-size: var(--fs-section-title); }
.reference-hero h1 { font-size: var(--fs-display); }
.inner-page-hero h1 { font-size: var(--fs-page-title); }
.section-heading h2,
.flow-heading h2,
.faq-intro h2,
.survey-panel h2,
.standard-section-head h2,
.contact-section-heading h2 { font-size: var(--fs-section-title); }
.inner-page-hero p,
.section-lead,
.section-desc,
.hero-desc { font-size: var(--fs-body-desc); line-height: 1.625; }
.card h3,
.page-card h3,
.document-list-card strong,
.regulation-card strong,
.regulation-directory-copy h3,
.gallery-card h3 { font-size: var(--fs-card-title); }
.card p,
.page-card p,
.document-list-card small,
.regulation-card small,
.regulation-directory-copy p,
.gallery-card p { font-size: var(--fs-card-desc); line-height: 1.625; }
.badge,
.featured-tag,
.file-badge { font-size: var(--fs-badge); line-height: 1.25; }

/* Horizontal controls are sliders on narrow screens. */
.mobile-slider {
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
}

/* Shared filter trigger / bottom sheet. It remains normal-flow on desktop. */
.mobile-filter-trigger,
.mobile-filter-sheet-head,
.mobile-filter-sheet-footer,
.mobile-filter-backdrop { display: none; }

.footer-mobile-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
}
.footer-mobile-toggle svg { display: none; width: 18px; height: 18px; flex: 0 0 18px; }

.mobile-filter-trigger {
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0 .95rem;
  color: var(--navy);
  background: #f8fcff;
  border: 1px solid #c8ddea;
  border-radius: 11px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.mobile-filter-trigger > span:first-child,
.mobile-filter-sheet-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.mobile-filter-trigger svg,
.mobile-filter-sheet-title svg { width: 19px; height: 19px; flex: 0 0 19px; }
.mobile-filter-trigger .mobile-filter-chevron { color: var(--blue-700); }
.mobile-filter-label-short { display: none; }
.dip-mobile-filter-dock { display: contents; }
.dip-mobile-filter-sentinel { display: none; }
.mobile-compact-filter-dock { display: contents; }
.mobile-compact-filter-sentinel,
.mobile-compact-search { display: none; }
.mobile-filter-sheet-close {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  color: var(--navy);
  background: #f2f8fc;
  border: 1px solid #d1e2ec;
  border-radius: 50%;
  cursor: pointer;
}
.mobile-filter-sheet-close svg { width: 19px; height: 19px; }

body.a11y-open,
body.search-open { overflow: hidden; }
body.a11y-open::before {
  content: "";
  position: fixed;
  z-index: 128;
  inset: 0;
  background: rgba(0, 28, 67, .5);
  backdrop-filter: blur(3px);
}
body.a11y-open .a11y-panel { z-index: 130; }
body.a11y-open .a11y-fab { z-index: 130; }
body.a11y-open .chat-fab,
body.a11y-open .chat-panel { visibility: hidden; pointer-events: none; }

@media (max-width: 900px) {
  .home-section,
  .home-section.compact-section { padding-block: 2.35rem; }
  .primary-service-grid { grid-template-columns: 1fr; }
  .primary-service-card { min-height: 0; }
  .document-list-card,
  .regulation-directory-card,
  .gallery-card,
  .open-data-page [data-dataset-card],
  .contact-channel-card,
  .standard-detail-card { min-width: 0; }
}

@media (max-width: 700px) {
  html {
    --mobile-nav-h: 64px;
    scroll-padding-top: var(--mobile-nav-h);
    overflow-x: clip;
  }
  body {
    min-width: 0;
    overflow-x: clip;
    font-size: 16px;
    line-height: 1.625;
  }
  .container { padding-inline: 1rem; }
  .section,
  .section.tight,
  .inner-page-section { padding-block: 2.25rem; }

  /* Keep mobile controls at 16px so iOS does not zoom the viewport. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select { font-size: 16px !important; }

  .input,
  textarea.input,
  select.input,
  .custom-select-trigger {
    min-height: 48px;
    font-size: 16px;
  }
  .input:focus,
  textarea.input:focus,
  select.input:focus,
  .custom-select-trigger:focus-visible {
    outline: 0;
    border-color: var(--blue-700);
    box-shadow: none !important;
  }
  .field { margin-bottom: 1rem; }
  .field label { font-size: .875rem; line-height: 1.45; }
  .field .hint,
  .small { font-size: .8125rem; line-height: 1.55; }
  .form-card { padding: 1.1rem; }
  .form-card .btn-primary,
  .request-track-fields .btn,
  .contact-form-actions .btn,
  .standard-cta-actions .btn { width: 100%; justify-content: center; }
  .btn { min-height: 44px; font-size: .875rem; }
  .btn-sm { min-height: 40px; }

  /* One compact task bar replaces the desktop three-row header. */
  .topbar { display: none; }
  .topbar-left,
  .topbar-right .utility-link { display: none !important; }
  .topbar-right { width: 100%; justify-content: flex-end; gap: .45rem; }
  .font-controls { margin: 0; }
  .font-controls .font-control { min-width: 28px; min-height: 26px; }
  .masthead { display: none; }
  .nav {
    position: sticky !important;
    z-index: 60;
    top: 0;
    width: 100%;
    isolation: isolate;
  }
  .nav .container {
    height: var(--mobile-nav-h);
    min-height: var(--mobile-nav-h);
    gap: .55rem;
    padding-inline: .75rem;
  }
  .nav-mobile-brand {
    min-width: 0;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    color: #fff;
    letter-spacing: -.01em;
  }
  .nav-mobile-brand:hover { color: #fff; }
  .nav-mobile-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 10px;
  }
  .nav-mobile-mark svg { width: 21px; height: 21px; }
  .nav-mobile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .08rem;
    line-height: 1.1;
  }
  .nav-mobile-copy strong {
    overflow: hidden;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-mobile-copy small {
    overflow: hidden;
    color: rgba(255,255,255,.68);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-actions { flex: 0 0 auto; gap: .35rem; }
  .nav-search {
    width: 40px;
    height: 40px;
    min-width: 40px;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
  }
  .nav-search > span { display: none; }
  .nav-a11y,
  .nav-toggle { width: 40px; height: 40px; }
  .nav-a11y { display: grid; }
  .nav .nav-a11y {
    color: #fff;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.25);
  }
  .nav-a11y svg { width: 18px; height: 18px; }
  .nav-links {
    inset: var(--mobile-nav-h) 10px auto;
    max-height: calc(100dvh - var(--mobile-nav-h) - 14px);
    overflow-y: auto;
    padding: .65rem;
    border: 1px solid #c8ddea;
    border-radius: 0 0 14px 14px;
  }
  .nav-links a,
  .nav-group-trigger { min-height: 46px; font-size: .875rem; }
  .nav-mobile-tools {
    display: grid;
    gap: .55rem;
    margin-top: .45rem;
    padding: .75rem;
    background: #f4f9fc;
    border: 1px solid #d8e7f0;
    border-radius: 10px;
  }
  .nav-mobile-tool-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--ink-500);
    font-size: .75rem;
    font-weight: 700;
  }
  .nav-mobile-tools .font-controls { display: inline-flex; }
  .nav-mobile-tools .font-control {
    width: 36px;
    min-width: 36px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #d3e3ed;
    border-radius: 7px;
  }
  .nav-mobile-tools .font-control + .font-control { margin-left: .3rem; }
  .nav-mobile-tools .lang-toggle { margin: 0; border-color: #c9dce8; }
  .nav-mobile-tools .lang-toggle button { min-width: 40px; min-height: 34px; color: var(--ink-500); }
  .nav-mobile-tools .lang-toggle button.active { color: #fff; }

  /* Promotional hero: centered, shorter, and legible over the visual. */
  .reference-hero {
    min-height: 0;
    text-align: center;
    background-position: 70% center;
    background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 72%, rgba(255,255,255,.7) 100%), url('hero-jakarta-clearflow.webp');
  }
  .reference-hero .container { padding-block: 2.35rem 4.5rem; }
  .hero-copy { max-width: 560px; margin-inline: auto; }
  .trust-pill {
    max-width: 100%;
    justify-content: center;
    margin-inline: auto;
    padding: .38rem .65rem;
    font-size: .7rem;
  }
  .reference-hero h1 {
    max-width: 100%;
    margin-top: .9rem;
    font-size: clamp(1.78rem, 7.4vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -.035em;
  }
  .reference-hero p.lead {
    max-width: 38ch;
    margin: .8rem auto 0;
    font-size: .9rem;
    line-height: 1.65;
  }
  .reference-hero .hero-search {
    width: 100%;
    min-height: 54px;
    margin: 1.2rem auto 0;
    padding: .3rem .3rem .3rem .85rem;
    border-radius: 12px;
  }
  .reference-hero .hero-search input {
    width: 0;
    min-width: 0;
    height: 46px;
    font-size: 16px;
  }
  .hero-search-submit { width: 46px; height: 46px; flex: 0 0 46px; }
  .hero-shortcuts {
    width: calc(100% + 2rem);
    margin: .95rem -1rem 0;
    padding: 0 1rem .35rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .hero-shortcuts::-webkit-scrollbar { display: none; }
  .hero-shortcuts a {
    min-height: 42px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    white-space: nowrap;
    font-size: .78rem;
  }

  .primary-services { margin-top: -2.25rem; }
  .primary-service-grid { gap: .65rem; }
  .primary-service-card {
    min-height: 0;
    grid-template-columns: 46px minmax(0, 1fr) 34px;
    gap: .75rem;
    padding: 1rem;
  }
  .service-icon { width: 46px; height: 46px; }
  .service-copy strong { font-size: .9rem; }
  .service-copy > span:last-child { font-size: .78rem; line-height: 1.55; }

  .home-section,
  .home-section.compact-section { padding-block: 2.1rem; }
  .section-heading.inline-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }
  .section-heading h2,
  .flow-heading h2,
  .faq-intro h2,
  .survey-panel h2 { font-size: 1.5rem; line-height: 1.25; }
  .text-link { min-height: 40px; font-size: .8125rem; }

  .quick-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .quick-access-card { min-height: 146px; padding: .8rem; gap: .55rem; }
  .quick-card-head { grid-template-columns: 36px minmax(0, 1fr); gap: .55rem; }
  .quick-icon { width: 36px; height: 36px; }
  .quick-icon svg { width: 30px; height: 30px; }
  .quick-access-card strong { font-size: .8rem; line-height: 1.35; }
  .quick-access-card p { font-size: .75rem; line-height: 1.55; }

  .featured-documents-layout { grid-template-columns: 1fr; }
  .featured-document { min-height: 308px; padding: 1rem; }
  .featured-document-copy { max-width: 67%; margin-top: 1.1rem; }
  .featured-document h3 { font-size: 1.15rem; }
  .featured-document p { font-size: .8125rem; line-height: 1.625; }
  .file-badge { font-size: .7rem; }
  .document-list-grid { grid-template-columns: 1fr; }
  .document-list-card { min-height: 0; padding: .9rem; }
  .doc-copy strong { font-size: .875rem; line-height: 1.4; }
  .doc-copy small,
  .doc-footer,
  .doc-action { font-size: .75rem; line-height: 1.5; }

  /* The public-service process remains one readable swipeable sequence. */
  .service-flow-panel { padding: 1.15rem 0 1rem; border-radius: 14px; }
  .flow-heading {
    align-items: center;
    flex-direction: column;
    gap: .7rem;
    padding-inline: 1rem;
    text-align: center;
  }
  .sla-badge { justify-content: center; font-size: .75rem; }
  .flow-track { margin-top: 1rem; }
  .flow-connector,
  .service-flow::before { display: none !important; }
  .service-flow {
    width: 100%;
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    padding: .3rem 1rem .8rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .service-flow::-webkit-scrollbar { display: none; }
  .service-flow li {
    min-width: 0;
    flex: 0 0 min(76vw, 270px);
    scroll-snap-align: center;
    padding: 1rem;
    text-align: left;
    background: rgba(255,255,255,.84);
    border: 1px solid #c8e3f1;
    border-radius: 12px;
  }
  .step-number { margin: 0 0 .7rem; }
  .service-flow strong { font-size: .875rem; }
  .service-flow p { max-width: none; font-size: .8125rem; line-height: 1.6; }

  .regulation-grid { grid-template-columns: 1fr; }
  .regulation-card { min-height: 0; }
  .regulation-card strong { font-size: .875rem; }
  .regulation-card small,
  .regulation-action { font-size: .75rem; line-height: 1.5; }
  .faq-home .container { gap: 1rem; }
  .faq-intro { text-align: center; }
  .faq-intro .text-link { justify-content: center; }
  .faq-home .acc-q,
  .faq-page .acc-q { min-height: 54px; padding: .85rem 1rem; font-size: .875rem; line-height: 1.45; }
  .faq-home .acc-a .inner,
  .faq-page .acc-a .inner { padding: 0 1rem 1rem; font-size: .8125rem; line-height: 1.65; }
  .survey-intro { text-align: center; }
  .survey-intro p,
  .survey-metric p,
  .survey-note { font-size: .8125rem; line-height: 1.6; }

  /* Interior-page hero remains left aligned for task readability. */
  .inner-page .inner-page-hero { min-height: 0; background-size: cover, auto 120%; }
  .inner-page .inner-page-hero .container { padding-block: 1.8rem 2.1rem; }
  .inner-page-hero h1 { font-size: clamp(1.75rem, 6.4vw, 2rem); line-height: 1.2; }
  .inner-page-hero p { max-width: 42ch; font-size: .875rem; line-height: 1.625; }
  .breadcrumb { overflow-x: auto; font-size: .75rem; white-space: nowrap; scrollbar-width: none; }

  /* Every short chip/tab group becomes a clean horizontal slider. */
  .chip-filter,
  .request-page .chip-filter[role="tablist"],
  .dip-page .dip-toolbar .chip-filter,
  #galleryFilters {
    width: calc(100% + 2rem);
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem !important;
    overflow-x: auto;
    margin-inline: -1rem;
    padding: .2rem 1rem .45rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .chip-filter::-webkit-scrollbar,
  .request-page .chip-filter[role="tablist"]::-webkit-scrollbar,
  #galleryFilters::-webkit-scrollbar { display: none; }
  .chip-filter .chip,
  .request-page .chip-filter[role="tablist"] .chip,
  .dip-page .dip-toolbar .chip-filter .chip {
    min-width: max-content;
    min-height: 44px;
    flex: 0 0 auto;
    padding-inline: .9rem;
    scroll-snap-align: center;
    white-space: nowrap;
    font-size: .8125rem;
  }
  .request-page .chip-filter[role="tablist"] {
    margin-bottom: 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .request-page .chip-filter[role="tablist"] .chip {
    background: #f2f7fb;
    border: 1px solid #cedfea;
    border-radius: 10px;
  }
  .request-page .chip-filter[role="tablist"] .chip.active {
    color: #fff;
    background: var(--blue-700);
    border-color: var(--blue-700);
  }

  /* Report TOC is a swipeable chapter strip instead of a tall preface. */
  .report-page .pdf-toc {
    width: 100%;
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .7rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .report-page .pdf-toc::-webkit-scrollbar { display: none; }
  .report-page .pdf-toc .tt { display: none; }
  .report-page .pdf-toc button {
    width: auto;
    min-height: 42px;
    flex: 0 0 min(72vw, 250px);
    scroll-snap-align: center;
    padding: .55rem .75rem;
    border: 1px solid #c9dfea;
    background: #fff;
    font-size: .8125rem;
  }

  /* Mobile filter button and accessible bottom sheet. */
  .mobile-filter-trigger { display: flex; }
  .mobile-filter-backdrop {
    position: fixed;
    z-index: 108;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 28, 67, .52);
    border: 0;
    backdrop-filter: blur(3px);
    transition: opacity .2s ease, visibility .2s ease;
  }
  .mobile-filter-backdrop.is-open { visibility: visible; opacity: 1; }
  .mobile-filter-sheet {
    position: fixed !important;
    z-index: 110;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    max-height: 85dvh;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden;
    opacity: 0;
    background: #fff !important;
    border: 1px solid #bfd7e6 !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 55px rgba(0, 43, 102, .18) !important;
    transform: translateY(105%);
    transition: transform .24s ease, opacity .2s ease, visibility .24s ease;
  }
  .mobile-filter-sheet.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .mobile-filter-sheet-head {
    position: sticky;
    z-index: 3;
    top: 0;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .65rem 1rem;
    background: #fff;
    border-bottom: 1px solid #dce9f2;
  }
  .mobile-filter-sheet-title {
    color: var(--navy);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 750;
  }
  .mobile-filter-sheet-footer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    display: flex;
    gap: .65rem;
    width: 100%;
    margin-top: auto;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #dce9f2;
  }
  .mobile-filter-sheet-footer .btn { width: 100%; justify-content: center; }
  body.mobile-sheet-open { overflow: hidden; }

  .dip-page .dip-toolbar > :not(.mobile-filter-sheet-head):not(.mobile-filter-sheet-footer) { margin-inline: 1rem; }
  .dip-page .dip-toolbar .dip-category-tools { margin-top: 1rem; }
  .dip-page .dip-toolbar .dip-category-tools,
  .dip-page .dip-toolbar .dip-table-controls { width: calc(100% - 2rem); }
  .dip-page .dip-toolbar .chip-filter {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }
  .dip-page .dip-table-controls { flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  .dip-page .dip-table-controls .dip-control { width: 100%; justify-content: space-between; }
  .dip-page .dip-table-controls .app-select,
  .dip-page .dip-table-controls .dip-control:last-child .app-select { width: min(68%, 260px); }
  .regulation-filter-card > form,
  #pencarian-dataset > form { padding: 1rem; }
  .regulation-filter-form,
  .open-data-page #datasetFilterForm { display: grid !important; grid-template-columns: 1fr !important; gap: .75rem !important; }
  .regulation-filter-form .btn,
  .open-data-page #datasetFilterForm .btn { width: 100%; }

  /* Mobile table rows become cards; desktop keeps the dense table view. */
  .table-wrap.mobile-card-table { overflow: visible; border: 0; background: transparent; }
  .mobile-card-table table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td { display: block; width: 100%; }
  .mobile-card-table table { min-width: 0 !important; }
  .mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .mobile-card-table tbody { display: grid; gap: .75rem; }
  .mobile-card-table tr {
    padding: .85rem;
    background: #fff;
    border: 1px solid #cbdfea;
    border-radius: 12px;
  }
  .mobile-card-table tr[hidden] { display: none; }
  .mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .48rem 0 !important;
    border: 0 !important;
    font-size: .8125rem;
  }
  .mobile-card-table td::before {
    content: attr(data-mobile-label-id);
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.45;
  }
  .mobile-card-table td:first-child {
    grid-template-columns: 1fr;
    padding-top: 0 !important;
    padding-bottom: .7rem !important;
    border-bottom: 1px solid #e1ebf2 !important;
  }
  .mobile-card-table td:first-child::before { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
  .mobile-card-table td:last-child { padding-bottom: 0 !important; }
  .mobile-card-table .dl { min-height: 38px; justify-content: center; border: 1px solid #c7dce9; border-radius: 9px; }
  body.lang-en .mobile-card-table td::before { content: attr(data-mobile-label-en); }
  .mobile-card-table .mobile-table-empty-row { padding: 0; }
  .mobile-card-table .mobile-table-empty-cell { display: block; padding: 0 !important; }
  .mobile-card-table .mobile-table-empty-cell::before { display: none; }

  /* Cards: one-column rhythm, readable copy, stable CTA placement. */
  .gallery-page #galleryGrid,
  .open-data-page #datasetGrid,
  .contact-channel-grid,
  .standard-reference-grid,
  .standard-channel-grid { grid-template-columns: 1fr; }
  .gallery-card,
  .open-data-page [data-dataset-card],
  .regulation-directory-card,
  .contact-channel-card,
  .standard-detail-card { min-height: 0; }
  .gallery-card h3,
  .open-data-page [data-dataset-card] h3,
  .regulation-directory-copy h3,
  .contact-channel-copy strong,
  .standard-detail-card h3 { font-size: .9375rem; line-height: 1.4; }
  .gallery-card p,
  .open-data-page [data-dataset-card] p,
  .regulation-directory-copy p,
  .contact-channel-copy > span:last-child,
  .standard-detail-card p { font-size: .8125rem; line-height: 1.625; }
  .regulation-directory-card { grid-template-columns: 42px minmax(0, 1fr); }
  .regulation-directory-card > .btn { grid-column: 1 / -1; width: 100%; }

  /* Forms and timelines keep labels/content left aligned. */
  .request-page .tab-panel,
  .request-page .form-card,
  .contact-form-card,
  .survey-page .form-card { text-align: left; }
  .request-page #requestForm,
  .request-page #bookingForm,
  .request-page #objectionForm { padding: 1.1rem; }
  .request-page .request-form-lead,
  .request-page .tl-step .when,
  .request-page .booking-choice-copy small { font-size: .8125rem; line-height: 1.6; }
  .request-page .timeline { padding-left: 2.7rem; }
  .request-page .tl-step .dot { left: -2.7rem; }
  .request-page .tl-step { padding-bottom: 1.5rem; }
  .request-page .tl-step h4 { font-size: .9rem; }
  .request-page #bookingForm .choice-segment { grid-template-columns: 1fr; }
  .request-choice-option { min-height: 72px; }

  /* Floating tools stay clear of page CTAs and become compact icon buttons. */
  .chat-fab,
  .a11y-fab { bottom: max(12px, env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .chat-fab { left: 12px; padding: 4px; }
  .chat-fab > [data-id],
  .chat-fab > [data-en] { display: none !important; }
  .chat-fab .cav { width: 38px; height: 38px; }
  .a11y-fab { right: 12px; }
  .chat-panel {
    right: 10px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-width: none;
    max-height: min(620px, calc(100dvh - 88px));
  }
  .chat-body { height: min(260px, 38dvh); }
  .a11y-panel {
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85dvh;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .a11y-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a11y-opt { min-height: 68px; font-size: .8125rem; }

  .search-overlay { align-items: flex-end; padding: 0; }
  .search-box {
    width: 100%;
    max-height: 85dvh;
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }
  .search-box .sb-input { padding: .9rem 1rem; }
  .search-box input { min-width: 0; font-size: 16px; }
  .search-box .sb-hint { padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom)); font-size: .8125rem; line-height: 1.6; }

  /* Center only promotional/footer content; task content stays left aligned. */
  .footer { padding-block: 2rem calc(4.5rem + env(safe-area-inset-bottom)); }
  .footer .fgrid { grid-template-columns: 1fr; gap: .35rem; text-align: center; }
  .footer .fbrand { padding-bottom: 1rem; }
  .footer .fbrand > .brand,
  .footer a.brand { justify-content: center; }
  .footer .brand .bt { align-items: flex-start; text-align: left; }
  .footer .fbrand p { max-width: 42ch; margin: .65rem auto 0; font-size: .8125rem; line-height: 1.6; }
  .footer-mobile-group {
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: left;
  }
  .footer-mobile-group h4 { margin: 0; }
  .footer-mobile-toggle { min-height: 48px; cursor: pointer; }
  .footer-mobile-toggle svg {
    display: block;
    color: rgba(255,255,255,.66);
    transform: rotate(90deg);
    transition: transform .18s ease;
  }
  .footer-mobile-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
  .footer-mobile-links { display: none; padding: 0 0 .65rem; }
  .footer-mobile-group.is-open .footer-mobile-links { display: block; }
  .footer-mobile-links a {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .25rem 0;
    font-size: .78rem;
  }
  .footer .fbot {
    align-items: center;
    flex-direction: column;
    margin-top: .9rem;
    padding-top: .9rem;
    text-align: center;
    font-size: .72rem;
  }
}

@media (max-width: 390px) {
  .reference-hero h1 { font-size: 1.78rem; }
  .reference-hero h1 [data-id],
  .reference-hero h1 [data-en] { white-space: nowrap; }
  .quick-access-grid { grid-template-columns: 1fr; }
  .quick-access-card { min-height: 0; }
  .featured-document-copy { max-width: 100%; padding-right: 18%; }
  .report-cover { opacity: .18; }
  .mobile-card-table td { grid-template-columns: 76px minmax(0, 1fr); gap: .55rem; }
}

@media (max-width: 340px) {
  .reference-hero h1 [data-id],
  .reference-hero h1 [data-en] { white-space: normal; }
  .a11y-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-filter-sheet,
  .mobile-filter-backdrop,
  .mobile-slider { scroll-behavior: auto; transition: none; }
}

/* Focused mobile refinements after visual review. */
@media (max-width: 700px) {
  .reference-hero {
    background-position: 64% center;
    background-image: linear-gradient(180deg, rgba(239,249,255,.86) 0%, rgba(235,247,254,.72) 58%, rgba(226,243,252,.46) 100%), url('hero-jakarta-clearflow.webp');
  }
  .trust-pill { background: rgba(239,249,255,.64); }
  .hero-shortcuts {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: transparent;
  }
  .hero-shortcuts a {
    padding: .38rem 0;
    background: transparent;
    border: 0;
  }
  .hero-shortcuts a + a { padding-left: 0; border-left: 0; }
  .mini-icon { background: rgba(239,249,255,.58); }

  .featured-document {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-rows: auto 1fr;
    gap: .9rem 1rem;
    align-items: start;
    padding: 1rem;
  }
  .featured-tag {
    grid-column: 1 / -1;
    justify-self: start;
    width: max-content;
  }
  .featured-document-copy {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .featured-document h3 { margin: .2rem 0 .55rem; font-size: 1.1rem; line-height: 1.3; }
  .featured-document p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .featured-document .document-meta { flex-wrap: wrap; gap: .35rem .7rem; }
  .featured-download { min-height: 42px; justify-content: center; }
  .report-cover {
    position: static;
    grid-column: 2;
    grid-row: 2;
    width: 96px;
    height: auto;
    aspect-ratio: 3 / 4;
    align-self: start;
    opacity: 1;
    object-fit: cover;
    transform: none;
  }

  .faq-home .acc-q {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
  }
  .faq-home .acc-q::before {
    width: 7px;
    height: 7px;
    margin: 0;
    align-self: center;
    justify-self: center;
  }
  .faq-home .acc-q > span:not(.pm) { min-width: 0; }
  .faq-home .acc-q .pm { display: none; }

  .badge {
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
    justify-self: start;
    white-space: normal;
  }
  .mobile-card-table td > .badge { width: max-content; justify-self: start; }
  .dip-pagination-row { align-items: center; text-align: center; }
  .dip-pagination-row > p { width: 100%; text-align: center; }
  .dip-pagination { width: 100%; justify-content: center; flex-wrap: wrap; margin-inline: auto; }

  .survey-page .split > *,
  .survey-page .chart,
  .survey-page .bar-col { min-width: 0; }
  .survey-page .chart { gap: .45rem; }
  .survey-page .bar-col .lab { overflow-wrap: anywhere; font-size: .7rem; }

  .mobile-filter-sheet .custom-select.open .custom-select-list {
    position: static;
    max-height: min(220px, 34dvh);
    margin-top: .35rem;
  }
  .footer-mobile-links a { min-height: 40px; }
}

@media (max-width: 380px) {
  .featured-document { grid-template-columns: minmax(0, 1fr) 82px; gap: .75rem; }
  .report-cover { width: 82px; }
  .featured-document h3 { font-size: 1rem; }
}

/* One result-count badge language across directories. */
.result-count-badge {
  min-height: 30px;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: .32rem .72rem;
  color: var(--blue-700);
  background: #edf8ff;
  border: 1px solid #c9e3f2;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .inner-page .inner-page-hero {
    background-image: linear-gradient(90deg, rgba(239,249,255,.93) 0%, rgba(234,247,254,.8) 58%, rgba(227,244,252,.64) 100%), url('inner-hero-aquatic.webp');
  }

  .regulation-page main > .inner-page-section:first-child {
    padding-top: 0;
  }
  .open-data-page #ringkasan-data {
    padding-top: 1.6rem;
  }
  .open-data-page #ringkasan-data > .container > .stat-row {
    margin-top: 0;
  }

  .mobile-filter-trigger {
    position: sticky !important;
    z-index: 55;
    top: var(--mobile-nav-h, 64px);
    width: calc(100% + 2rem);
    min-height: 52px;
    margin: 0 -1rem 1rem;
    padding-inline: 1rem;
    background: rgba(248,252,255,.97);
    border-width: 1px 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(10px);
  }
  .mobile-filter-trigger > span:first-child,
  .mobile-filter-trigger .mobile-filter-chevron {
    min-width: 0;
    line-height: 1;
  }
  .mobile-filter-trigger svg { display: block; }
  .mobile-filter-trigger .mobile-filter-chevron {
    width: 24px;
    height: 24px;
    display: grid;
    flex: 0 0 24px;
    place-items: center;
  }

  /* DIP follows RuangTes' compact two-row dock: search first, controls second. */
  .dip-mobile-filter-sentinel {
    width: 1px;
    height: 1px;
    display: block;
    margin-bottom: -1px;
    pointer-events: none;
  }
  .dip-mobile-filter-dock {
    position: sticky;
    z-index: 55;
    top: var(--mobile-nav-h, 64px);
    width: calc(100% + 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    margin: 0 -1rem 1rem;
    padding: .55rem 1rem;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #d8e7f0;
    border-bottom: 1px solid #c8ddea;
    box-shadow: none;
    backdrop-filter: blur(10px);
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  .dip-mobile-filter-dock.is-stuck {
    border-bottom-color: #b7d2e3;
    box-shadow: 0 8px 18px rgba(0,43,102,.09);
  }
  .dip-mobile-filter-dock .dip-mobile-search-card,
  .dip-mobile-filter-dock .dip-mobile-search-card > .flex {
    display: contents !important;
  }
  .dip-mobile-filter-dock .dip-search-field {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0 3.35rem 0 .75rem;
    border-color: #c8ddea;
    border-radius: 9px;
  }
  .dip-mobile-filter-dock .dip-search-field > svg {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 17px;
  }
  .dip-mobile-filter-dock .dip-search-input { height: 40px; font-size: 16px; }
  .dip-mobile-filter-dock .dip-search-submit {
    grid-column: 2;
    grid-row: 1;
    width: 42px !important;
    min-width: 42px;
    z-index: 1;
    height: 36px;
    min-height: 36px;
    margin-right: 3px;
    align-self: center;
    justify-self: end;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border-radius: 9px;
    line-height: 0;
  }
  .dip-mobile-filter-dock .dip-search-submit svg { width: 18px; height: 18px; display: block; margin: 0; }
  .dip-mobile-filter-dock .dip-search-submit > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
  .dip-mobile-filter-dock .year-select {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
  }
  .dip-mobile-filter-dock .year-select .custom-select-trigger {
    height: 40px;
    min-height: 40px;
    border-radius: 9px;
  }
  .dip-mobile-filter-dock > .mobile-filter-trigger {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0 .7rem;
    background: #f4f9fc;
    border: 1px solid #c8ddea;
    border-radius: 9px;
    box-shadow: none;
    backdrop-filter: none;
  }
  .dip-mobile-filter-dock .mobile-filter-label-full { display: none; }
  .dip-mobile-filter-dock .mobile-filter-label-short { display: inline; }
  .dip-mobile-filter-dock .mobile-filter-trigger > span:first-child { gap: .45rem; }
  .dip-mobile-filter-dock .mobile-filter-trigger svg { width: 17px; height: 17px; flex-basis: 17px; }
  .dip-mobile-filter-dock .mobile-filter-chevron { display: none; }

  /* Regulation and dataset filters mirror the compact RuangTes mobile dock. */
  .mobile-compact-filter-sentinel {
    width: 1px;
    height: 1px;
    display: block;
    margin-bottom: -1px;
    pointer-events: none;
  }
  .mobile-compact-filter-dock {
    position: sticky;
    z-index: 55;
    top: var(--mobile-nav-h, 64px);
    width: calc(100% + 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    margin: 0 -1rem 1rem;
    padding: .65rem 1rem;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #c8ddea;
    box-shadow: none;
    backdrop-filter: blur(10px);
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  .mobile-compact-filter-dock.is-stuck {
    border-bottom-color: #b7d2e3;
    box-shadow: 0 8px 18px rgba(0,43,102,.09);
  }
  .mobile-compact-search {
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 .8rem;
    color: var(--ink-300);
    background: #fff;
    border: 1px solid #c8ddea;
    border-radius: 999px;
  }
  .mobile-compact-search:focus-within { border-color: var(--blue-700); }
  .mobile-compact-search > svg {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 17px;
  }
  .mobile-compact-search-input {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0 !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 16px;
  }
  .mobile-compact-search-input::placeholder { color: var(--ink-300); }
  .mobile-compact-filter-dock > .mobile-filter-trigger {
    position: static !important;
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 0 .8rem;
    color: var(--blue-700);
    background: #f4f9fc;
    border: 1px solid #c8ddea;
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: none;
  }
  .mobile-compact-filter-dock .mobile-filter-label-full { display: none; }
  .mobile-compact-filter-dock .mobile-filter-label-short { display: inline; }
  .mobile-compact-filter-dock .mobile-filter-trigger > span:first-child { gap: .4rem; }
  .mobile-compact-filter-dock .mobile-filter-trigger svg {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 17px;
  }
  .mobile-compact-filter-dock .mobile-filter-chevron { display: none; }

  .result-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .65rem;
  }
  .result-heading-row > div { min-width: 0; width: 100%; }
  .result-heading-row h2 { line-height: 1.28; }
  .result-count-badge { min-height: 30px; font-size: .75rem; }
  .regulation-directory-head .result-count-badge { align-self: flex-start; }

  .dip-page .mobile-filter-sheet .dip-table-controls .custom-select-trigger {
    height: 48px;
    min-height: 48px;
  }

  .report-page .pdf-toolbar { display: none !important; }

  .chat-panel.open {
    display: flex;
    flex-direction: column;
  }
  .chat-head { flex: 0 0 auto; }
  .chat-body {
    min-height: 110px;
    height: auto;
    flex: 1 1 auto;
  }
  .chat-quick {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chat-quick::-webkit-scrollbar { display: none; }
  .chat-quick button {
    min-height: 44px;
    flex: 0 0 auto;
    padding: .55rem .8rem;
    white-space: nowrap;
  }

  .hero-shortcuts {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    overflow: visible;
    margin: .9rem 0 0;
    padding: 0;
  }
  .hero-shortcuts a {
    min-height: 38px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .quick-access-heading {
    align-items: center !important;
    text-align: center;
  }
  .quick-access-heading .text-link { justify-content: center; }

  .legal-basis-card { padding: .8rem; }
  .legal-basis-head { gap: .6rem; padding: 0 0 .7rem; }
  .legal-basis-head-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .legal-basis-item {
    min-height: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .65rem;
    padding: .7rem;
  }
  .legal-basis-code { width: 44px; min-height: 28px; padding-inline: .25rem; }

  .service-flow li,
  .standard-service-flow li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.05rem;
    row-gap: .1rem;
    align-items: start;
    text-align: left;
  }
  .service-flow .step-number,
  .standard-service-flow .step-number {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
  }
  .service-flow strong,
  .standard-service-flow strong {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  .service-flow p,
  .standard-service-flow p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    text-align: left;
  }
}

/* Canonical clean focus treatment: one border, never an outer form ring. */
.inner-page .field > .input:focus,
.inner-page .field > .input:focus-visible,
.inner-page .form-row .input:focus,
.inner-page .form-row .input:focus-visible,
.inner-page textarea.input:focus,
.inner-page textarea.input:focus-visible,
.inner-page select.input:focus,
.inner-page select.input:focus-visible {
  outline: 0 !important;
  border-color: var(--blue-700) !important;
  box-shadow: none !important;
}