/* =========================================================
   Four Seas - main stylesheet
   1. Tokens & reset
   2. Typography & utilities
   3. Buttons, links, eyebrow
   4. Header & navigation
   5. Hero
   6. Marquee
   7. Value strip
   8. Section head
   9. Services
   10. Process
   11. Dark section / why / stats
   12. Industries
   13. Quotes
   14. Blog cards
   15. FAQ
   16. CTA band
   17. Footer & WhatsApp float
   18. Inner pages
   19. Forms
   20. Article / prose
   21. Motion & responsive
   ========================================================= */

/* ---------- 1. Tokens & reset ---------- */
/* Montserrat variable (100-900) sesuai Design Guide Four Seas.
   Satu file latin 37 KB menutup Bold 700 untuk judul, SemiBold 600 untuk
   subjudul, Medium 500 untuk label, dan Regular 400 untuk teks isi. */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
	/* Palet mengikuti Design Guide Four Seas:
	   Navy Blue #042552 - Ocean Blue #0E40BB - Slate Blue #52647A
	   Gold #B08038 - Light Grey #F3F5F8. */
	--navy: #042552;
	--navy-2: #063063;
	--navy-3: #0a3f7d;
	--blue: #0e40bb;
	--blue-deep: #0b3396;
	--blue-tint: #eef2fc;
	--blue-tint-2: #f6f8fe;
	--gold: #b08038;
	/* Gold di atas navy: #b08038 hanya 4,3:1 sehingga gagal AA untuk teks
	   kecil. #d9ab63 memberi 6,2:1 di --navy-2 dan 7,2:1 di --navy. */
	--gold-light: #d9ab63;
	/* Teks di atas bidang gold. Navy #042552 hanya 4,3:1 di atas #b08038,
	   gagal AA untuk teks normal. #01142e memberi 5,3:1 dan masih terbaca
	   sebagai navy brand. */
	--on-gold: #01142e;
	--ink: #042552;
	--body: #46586b;
	/* #6b7c8e hanya 4.29:1 di latar terang dan gagal WCAG AA untuk teks
	   normal. Slate Blue #52647a memberi 6.1:1 di atas putih. */
	--muted: #52647a;
	--line: #e3e9f1;
	--line-strong: #cfd8e4;
	--paper: #ffffff;
	--paper-2: #f3f5f8;
	--radius: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 1px 2px rgba(4, 37, 82, 0.05), 0 10px 30px -18px rgba(4, 37, 82, 0.18);
	--shadow-md: 0 30px 70px -40px rgba(4, 37, 82, 0.45);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--container: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 78px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

::selection {
	background: var(--gold);
	color: var(--on-gold);
}

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

/* ---------- 2. Typography & utilities ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: clamp(72px, 8vw, 124px);
	position: relative;
}

.section--tight {
	padding-block: clamp(48px, 5vw, 72px);
}

.section--paper {
	background: var(--paper-2);
}

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

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 999;
	background: var(--navy);
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 16px;
	color: #fff;
}

[hidden] {
	display: none !important;
}

/* ---------- 3. Buttons, links, eyebrow ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
	white-space: nowrap;
}

.btn__icon {
	flex: none;
	transition: transform 0.3s var(--ease);
}

.btn:hover .btn__icon {
	transform: translate(2px, -2px);
}

.btn--primary {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 10px 24px -14px rgba(14, 64, 187, 0.9);
}

.btn--primary:hover {
	background: var(--blue-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -18px rgba(14, 64, 187, 0.95);
}

.btn--dark {
	background: var(--navy-2);
	color: #fff;
}

.btn--dark:hover {
	background: var(--navy);
	color: #fff;
	transform: translateY(-2px);
}

.btn--yellow {
	background: var(--gold);
	color: var(--on-gold);
}

.btn--yellow:hover {
	background: #c08f42;
	color: var(--on-gold);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--ink);
	background: #fff;
	color: var(--ink);
	transform: translateY(-2px);
}

.btn--light {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.btn--light:hover {
	background: #fff;
	color: var(--navy);
}

.btn--lg {
	padding: 16px 26px;
	font-size: 1rem;
}

.btn--sm {
	padding: 10px 16px;
	font-size: 0.875rem;
}

.btn--block {
	width: 100%;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--line-strong);
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease), gap 0.25s var(--ease);
	white-space: nowrap;
}

.link-arrow svg {
	transition: transform 0.3s var(--ease);
}

.link-arrow:hover {
	color: var(--blue);
	border-color: var(--blue);
}

.link-arrow:hover svg {
	transform: translate(2px, -2px);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* --muted kini 5.4:1 dan lolos AA; section gelap punya aturan sendiri. */
	color: var(--muted);
}

.eyebrow__num {
	color: var(--blue);
	font-variant-numeric: tabular-nums;
}

.eyebrow__line {
	display: inline-block;
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

/* Label di atas bidang gold. Gold #b08038 cukup terang, jadi 0.82
   memberi 6.1:1 untuk teks navy di atasnya. */
.eyebrow--dark {
	color: var(--on-gold);
}

.hl {
	color: var(--gold-light);
}

/* ---------- 4. Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	border-bottom-color: var(--line);
	box-shadow: 0 12px 30px -26px rgba(10, 37, 64, 0.5);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
}

.site-header__logo {
	flex: none;
}

.brand {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}

/* Lockup resmi (emblem + lettering). Rasio 336:88 dijaga atribut
   width/height supaya tidak ada pergeseran layout saat gambar dimuat. */
.brand__lockup {
	display: block;
	height: 52px;
	width: auto;
}

.brand--light {
	color: #fff;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.site-nav__list > li > a {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}

.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1.5px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.site-nav__list > li.current-menu-item > a {
	color: var(--blue);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

.site-nav__mobile-cta,
.site-nav__label,
.site-nav__brand,
.site-nav__meta {
	display: none;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	background: #fff;
	border-radius: 12px;
	align-items: center;
	justify-content: center;
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
}

.nav-toggle__bars i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.6px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.3s var(--ease), opacity 0.2s ease, top 0.3s var(--ease);
}

.nav-toggle__bars i:first-child {
	top: 0;
}

.nav-toggle__bars i:last-child {
	top: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child {
	top: 5px;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child {
	top: 5px;
	transform: rotate(-45deg);
}

.site-nav__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(4, 37, 82, 0.4);
	backdrop-filter: blur(2px);
	z-index: 90;
}

/* ---------- 5. Hero ---------- */
.hero {
	padding-top: clamp(28px, 4vw, 52px);
	padding-bottom: clamp(8px, 2vw, 16px);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60vw;
	height: 60vw;
	max-width: 820px;
	max-height: 820px;
	background: radial-gradient(circle, rgba(14, 64, 187, 0.07), rgba(14, 64, 187, 0) 62%);
	pointer-events: none;
}

/* Peta rute laut: grid halus + line-art pelabuhan. */
.hero__chart {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--blue);
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(to right, rgba(14, 64, 187, 0.13) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(14, 64, 187, 0.13) 1px, transparent 1px);
	background-size: 96px 96px;
	background-position: -1px -1px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 24%, #000 58%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.28) 24%, #000 58%, #000 100%);
}

.hero__chart-svg {
	display: block;
	width: 100%;
	height: 100%;
	/* Batasi skala artboard pada ukuran desainnya. Tanpa ini SVG ikut
	   membesar mengikuti lebar viewport (1920/1440 = 1.33x) sementara tinggi
	   hero dibatasi max-width container, sehingga semua koordinat Y terdorong
	   turun dan hub menabrak marquee. */
	max-width: 1440px;
	/* Pusatkan artboard agar tetap sejajar dengan container saat viewport
	   lebih lebar dari 1440px (ultrawide). */
	margin-inline: auto;
	/* Rute digambar melewati batas artboard supaya menyentuh tepi kiri layar
	   pada viewport lebar. Area luapan masih di dalam kotak .hero__chart
	   sehingga mask gradien tetap bekerja. */
	overflow: visible;
}

/* Line-art dijaga tetap samar; label pelabuhan punya opacity sendiri
   supaya koordinat tetap terbaca tanpa menaikkan intensitas garis. */
.chart-routes,
.chart-nodes,
.chart-hub,
.chart-compass {
	opacity: 0.53;
}

.chart-label {
	color: var(--navy);
	opacity: 0.9;
}

.chart-label__leader {
	stroke: currentColor;
	stroke-width: 1;
	stroke-dasharray: 2 3;
	opacity: 0.5;
}

.chart-label__tick {
	fill: currentColor;
	opacity: 0.65;
}

.chart-label__name {
	fill: currentColor;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.chart-label__coord {
	fill: currentColor;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.chart-hub__dot {
	fill: var(--gold);
}

/* Denyut halus pada cincin hub agar titik tujuan terbaca sebagai "hidup". */
.chart-hub__ring,
.chart-hub__halo {
	transform-box: fill-box;
	transform-origin: center;
}

.chart-hub__ring {
	animation: hub-pulse 4.8s ease-in-out infinite;
}

.chart-hub__halo {
	animation: hub-pulse 4.8s ease-in-out infinite 0.6s;
}

@keyframes hub-pulse {
	0%,
	100% {
		opacity: 0.18;
		transform: scale(0.94);
	}
	50% {
		opacity: 0.42;
		transform: scale(1.04);
	}
}

/* Satu busur bergerak pelan agar terasa hidup, tanpa mengganggu teks.
   Offset harus kelipatan panjang pola dash (4 + 12 = 16) supaya loop mulus:
   -160 = 10 periode penuh, jadi frame terakhir identik dengan frame awal. */
.chart-route--live {
	animation: chart-flow 10s linear infinite;
}

@keyframes chart-flow {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -160;
	}
}

/* Orbit kompas: teks melingkar berputar pelan, seluruh area adalah tautan
   ke Tentang Kami. Default samar agar menyatu dengan peta; saat hover atau
   fokus keyboard ia berubah menjadi tombol yang tegas. */
.hero-orbit {
	position: absolute;
	right: clamp(20px, 6.5vw, 120px);
	bottom: clamp(104px, 11.5vh, 136px);
	width: clamp(96px, 8.4vw, 124px);
	aspect-ratio: 1;
	color: var(--blue);
	opacity: 0.42;
	z-index: 2;
	border-radius: 50%;
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.hero-orbit__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hero-orbit__ring {
	transform-box: view-box;
	transform-origin: 60px 60px;
	animation: orbit-spin 26s linear infinite;
}

.hero-orbit__text {
	fill: currentColor;
	font-family: inherit;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hero-orbit__dial > * {
	stroke: currentColor;
	stroke-width: 1;
	fill: none;
}

.hero-orbit__disc {
	opacity: 0.5;
	transition: fill 0.35s var(--ease), stroke 0.35s var(--ease), opacity 0.35s var(--ease);
}

.hero-orbit__dial-dash {
	stroke-dasharray: 1.5 6;
	opacity: 0.35;
}

.hero-orbit__cross {
	opacity: 0.35;
}

.hero-orbit__needle {
	fill: currentColor;
	stroke: none;
	opacity: 0.75;
	transition: fill 0.35s var(--ease);
}

.hero-orbit__needle-tail {
	opacity: 0.3;
}

/* Hover / fokus: orbit berhenti agar teks terbaca, kompas jadi tombol. */
.hero-orbit:hover,
.hero-orbit:focus-visible {
	opacity: 1;
	transform: scale(1.06);
	color: var(--navy);
}

.hero-orbit:hover .hero-orbit__ring,
.hero-orbit:focus-visible .hero-orbit__ring {
	animation-play-state: paused;
}

.hero-orbit:hover .hero-orbit__disc,
.hero-orbit:focus-visible .hero-orbit__disc {
	fill: var(--blue);
	stroke: var(--blue);
	opacity: 1;
}

.hero-orbit:hover .hero-orbit__needle,
.hero-orbit:focus-visible .hero-orbit__needle {
	fill: var(--gold);
}

.hero-orbit:hover .hero-orbit__dial-dash,
.hero-orbit:hover .hero-orbit__cross,
.hero-orbit:hover .hero-orbit__needle-tail,
.hero-orbit:focus-visible .hero-orbit__dial-dash,
.hero-orbit:focus-visible .hero-orbit__cross,
.hero-orbit:focus-visible .hero-orbit__needle-tail {
	stroke: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

.hero-orbit:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 6px;
}

@keyframes orbit-spin {
	to {
		transform: rotate(360deg);
	}
}

.hero__grid {
	display: grid;
	/* Kolom teks sedikit lebih lebar dari media: judul 4 baris terasa
	   pecah, sementara gambar tetap cukup besar untuk jadi bukti visual. */
	grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
	gap: clamp(32px, 4vw, 60px);
	align-items: center;
	position: relative;
	z-index: 1;
}

.hero__title {
	/* Headline copy deck lebih panjang dari versi sebelumnya, jadi ukuran
	   maksimum diturunkan agar tetap 4 baris di desktop dan CTA tidak
	   terdorong ke bawah fold. */
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.045em;
	margin-bottom: 24px;
}

.hero__title em {
	font-style: normal;
	display: inline;
	/* Baris kedua judul memakai gold brand, bukan stabilo. Gold #b08038
	   memberi 3,5:1 di atas putih - lolos AA untuk teks besar (>=24px bold),
	   dan terbaca sebagai aksen, bukan sebagai blok warna. */
	color: var(--gold);
}

.hero__lead {
	max-width: 46ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	color: var(--body);
	margin-bottom: 30px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

.hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.hero__points li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--muted);
}

.hero__points svg {
	color: var(--blue);
	flex: none;
}

.hero__media {
	position: relative;
	padding-bottom: 38px;
}

.hero__figure {
	position: relative;
	border-radius: 26px 26px 26px 26px;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	background: var(--blue-tint);
	box-shadow: var(--shadow-md);
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 1.2s var(--ease);
}

.hero__figure:hover .hero__image {
	transform: scale(1.045);
}

.hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 37, 82, 0.18) 0%, rgba(4, 37, 82, 0) 42%, rgba(4, 37, 82, 0.28) 100%);
	pointer-events: none;
}

.hero__caption {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: 0.01em;
}

.hero__caption-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #21a366;
	box-shadow: 0 0 0 3px rgba(33, 163, 102, 0.18);
}

.route-card {
	position: absolute;
	left: clamp(-6px, -1.4vw, -20px);
	bottom: 0;
	width: min(322px, 86%);
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 26px 60px -34px rgba(10, 37, 64, 0.55);
	z-index: 3;
}

.route-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 12px;
}

.route-card__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}

.route-card__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 0.8125rem;
}

.route-card__lane {
	font-weight: 600;
	color: var(--ink);
}

.route-card__meta {
	color: var(--muted);
	font-size: 0.75rem;
	white-space: nowrap;
}

.route-card__note {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--line);
	font-size: 0.6875rem;
	color: var(--muted);
}

/* ---------- 6. Marquee ---------- */
.marquee {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	margin-top: clamp(36px, 5vw, 64px);
	padding-block: 18px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.marquee__label {
	flex: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.marquee__viewport {
	flex: 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.marquee__list {
	display: flex;
	align-items: center;
	flex: none;
}

.marquee__list li {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0.78;
	white-space: nowrap;
}

.marquee__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
	flex: none;
}

.marquee--dark {
	border-color: rgba(255, 255, 255, 0.14);
}

.marquee--dark .marquee__label,
.marquee--dark .marquee__list li {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- 7. Value strip ---------- */
.value-strip {
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}

.value-strip__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.value-strip__list li {
	display: flex;
	gap: 14px;
	padding: 30px clamp(16px, 3vw, 34px);
	border-left: 1px solid var(--line);
}

.value-strip__list li:first-child {
	border-left: 0;
	padding-left: 0;
}

.value-strip__icon {
	flex: none;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--blue);
}

.value-strip__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
}

.value-strip__text {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 30ch;
}

/* ---------- 8. Section head ---------- */
.section__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: clamp(36px, 4.5vw, 60px);
}

.section__head-row .section-head {
	margin-bottom: 0;
}

.section-head {
	max-width: 660px;
	margin-bottom: clamp(36px, 4.5vw, 56px);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
	max-width: 720px;
}

.section-head--center .eyebrow {
	justify-content: center;
}

.section-head__title {
	font-size: clamp(1.88rem, 3.36vw, 2.93rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.06;
}

.section-head__text {
	margin-top: 18px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--body);
	max-width: 54ch;
}

.section-head--center .section-head__text {
	margin-inline: auto;
}

.section-head--dark .section-head__title {
	color: #fff;
}

.section-head--dark .section-head__text {
	color: rgba(255, 255, 255, 0.68);
}

.section-head--dark .eyebrow {
	color: rgba(255, 255, 255, 0.55);
}

.section-head--dark .eyebrow__num {
	color: var(--gold-light);
}

/* ---------- 9. Services ---------- */
.section--services {
	background: #fff;
}

.service-grid {
	display: grid;
	/* Empat layanan mengisi satu baris penuh; minmax menjaga kartu tetap
	   terbaca sebelum media query menurunkannya jadi dua kolom. */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	color: inherit;
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(14, 64, 187, 0.08), transparent 62%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.service-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--blue), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease);
}

.service-card:hover {
	transform: translateY(-6px);
	border-color: rgba(14, 64, 187, 0.3);
	box-shadow: 0 30px 60px -38px rgba(10, 37, 64, 0.55);
}

.service-card:hover::before {
	opacity: 1;
}

.service-card:hover::after {
	transform: scaleX(1);
}

.service-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.service-card__num {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.service-card__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--blue-tint);
	color: var(--blue);
	transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}

.service-card:hover .service-card__icon {
	background: var(--blue);
	color: #fff;
	transform: rotate(-6deg);
}

.service-card__title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 10px;
}

.service-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
}

/* Kartu di beranda adalah ringkasan, jadi tidak memuat bullet yang
   seluruhnya sudah ada di halaman Layanan. Tautan mengarah ke detail. */
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 20px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--blue);
}

.service-card__link svg {
	transition: transform 0.3s var(--ease);
}

.service-card:hover .service-card__link svg {
	transform: translate(3px, -3px);
}

/* Kalimat penutup setelah grid layanan (copy deck: "Apa pun kebutuhan
   pengiriman Anda..."). */
.section__closing {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	max-width: 66ch;
}

.section__closing p {
	margin: 0;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--muted);
}

/* ---------- 10. Process ---------- */
.section--process {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.process {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.process__aside {
	align-self: stretch;
}

.process__sticky {
	position: sticky;
	top: calc(var(--header-h) + 40px);
}

.process__aside-foot {
	margin-top: 30px;
}

.process__note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 0.75rem;
	color: var(--muted);
}

.process__steps {
	position: relative;
	display: grid;
	gap: 0;
}

.process__steps::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 12px;
	bottom: 40px;
	width: 1px;
	background: linear-gradient(180deg, var(--line-strong), var(--line) 70%, transparent);
}

/* Garis progres: terisi mengikuti step yang sudah dilewati. */
.process__steps::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 12px;
	width: 1px;
	height: var(--step-progress, 0px);
	background: linear-gradient(180deg, var(--blue), rgba(14, 64, 187, 0.35));
	transition: height 0.45s var(--ease);
	pointer-events: none;
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 26px;
	padding: 0 0 34px;
}

.step:last-child {
	padding-bottom: 0;
}

.step__marker {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line-strong);
	transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.step__num {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	transition: color 0.35s var(--ease);
}

.step.is-active .step__marker {
	background: var(--navy-2);
	border-color: var(--navy-2);
}

.step.is-active .step__num {
	color: var(--gold-light);
}

.step__meta {
	margin-bottom: 6px;
}

.step__time {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.step__title {
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	font-weight: 700;
	margin-bottom: 8px;
}

.step__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--body);
	max-width: 52ch;
}

/* ---------- 11. Dark section ---------- */
/* Backdrop gelap berlapis: gradien dalam, dua sumber cahaya, grid blueprint,
   matriks titik, arsir diagonal, dan vignette tepi. Tidak ada bidang polos. */
.section--dark,
.section--ink {
	position: relative;
	isolation: isolate;
	background-color: var(--navy);
	background-image:
		radial-gradient(900px 560px at 84% -8%, rgba(14, 64, 187, 0.42), transparent 62%),
		radial-gradient(700px 440px at 3% 106%, rgba(217, 171, 99, 0.1), transparent 66%),
		radial-gradient(640px 420px at 48% 118%, rgba(30, 136, 218, 0.16), transparent 70%),
		linear-gradient(168deg, #042552 0%, #063063 44%, #03203f 100%);
	color: rgba(255, 255, 255, 0.74);
	overflow: clip;
}

/* Lapisan 1: grid blueprint + matriks titik, memudar ke bawah. */
.section--dark::before,
.section--ink::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 88px 88px, 88px 88px;
	-webkit-mask-image: radial-gradient(130% 120% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.45) 66%, transparent 92%);
	mask-image: radial-gradient(130% 120% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.45) 66%, transparent 92%);
	pointer-events: none;
	z-index: 0;
}

/* Lapisan 2: arsir diagonal halus + vignette agar tepi tidak rata polos. */
.section--dark::after,
.section--ink::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 14px),
		radial-gradient(120% 92% at 50% 50%, transparent 54%, rgba(3, 12, 20, 0.5) 100%);
	pointer-events: none;
	z-index: 0;
}

/* Konten di atas kedua lapisan tekstur. */
.section--dark > *,
.section--ink > * {
	position: relative;
	z-index: 1;
}

.why {
	padding-block: clamp(72px, 8vw, 120px);
}

.why__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(700px circle at 82% 8%, rgba(14, 64, 187, 0.3), transparent 62%),
		radial-gradient(520px circle at 8% 92%, rgba(217, 171, 99, 0.08), transparent 60%);
}

.why__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

/* Kolom copy menempel saat daftar kanan digulir (Kapabilitas). */
.why__grid--sticky > :first-child {
	position: sticky;
	top: calc(var(--header-h) + 40px);
}

.why__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 28px;
	margin-top: 40px;
}

/* Jumlah pilar ganjil (5 di beranda): item terakhir melebar penuh supaya
   tidak menyisakan kolom kosong di sebelahnya. */
.why__list li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.why__list li {
	display: flex;
	gap: 13px;
}

.why__icon {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--gold-light);
}

.why__list h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 5px;
}

.why__list p {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* Varian satu kolom tanpa jarak atas, dipakai saat daftar berdiri sendiri
   di samping judul section (halaman Industri). */
.why__list--stack {
	grid-template-columns: 1fr;
	margin-top: 0;
}

.why__media {
	position: relative;
	padding-bottom: 30px;
}

.why__figure {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 3.6;
	background: var(--navy-3);
}

.why__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.05) contrast(1.02);
}

.why__stat-card {
	position: absolute;
	left: -14px;
	bottom: 0;
	max-width: 268px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

/* Kartu ini dulu memuat klaim "98%". Sekarang isinya komitmen yang bisa
   ditepati, jadi tidak perlu angka besar; ikon mengambil peran penanda. */
.why__stat-icon {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--blue-tint);
	color: var(--blue);
	margin-bottom: 10px;
}

.why__stat-label {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--body);
}

.why__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: 999px;
	background: rgba(4, 37, 82, 0.62);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.6875rem;
	font-weight: 600;
	color: #fff;
}

.why__badge svg {
	color: var(--gold-light);
}

.stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(48px, 6vw, 76px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 36px;
}

.stats__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 20px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	padding-left: 24px;
}

.stats__item:first-child {
	border-left: 0;
	padding-left: 0;
}

.stats__value {
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.stats__label {
	font-size: 0.75rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	max-width: 20ch;
}

/* ---------- 12. Industries ---------- */
.industry-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line);
}

.industry-card {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 22px;
	gap: 18px;
	align-items: start;
	padding: 26px 22px;
	border-bottom: 1px solid var(--line);
	transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}

.industry-card:nth-child(odd) {
	border-right: 1px solid var(--line);
	padding-left: 0;
}

.industry-card:nth-child(even) {
	padding-right: 0;
}

.industry-card:hover {
	background: var(--blue-tint-2);
}

.industry-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--blue-tint);
	color: var(--blue);
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.industry-card:hover .industry-card__icon {
	background: var(--blue);
	color: #fff;
}

.industry-card__body {
	display: block;
}

.industry-card__title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 5px;
}

.industry-card__text {
	display: block;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--body);
	max-width: 44ch;
}

.industry-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.industry-card__tags span {
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--muted);
}

.industry-card__arrow {
	justify-self: end;
	color: var(--muted);
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s ease;
}

.industry-card:hover .industry-card__arrow {
	opacity: 1;
	transform: translate(0, 0);
	color: var(--blue);
}

/* Sektor sebagai index bergaris, bukan dinding kartu.
   Delapan kartu dengan bobot sama tidak memberi pembaca titik masuk;
   daftar membuat judul sektor bisa dipindai sekilas dan label duduk
   sejajar. Grid dua kolom menjaga urutan baca kiri ke kanan, sehingga
   sektor 1 dan 2 bersebelahan seperti indeks, bukan melompat. */
.sector-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 4.5vw, 72px);
	border-top: 1px solid var(--line);
}

.sector-item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}

.sector-item__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--blue-tint);
	color: var(--blue);
}

.sector-item__title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}

.sector-item__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
	max-width: 46ch;
}

/* Label sektor sebagai teks berpenyekat, bukan deretan pill. Di daftar,
   pill membaca sebagai badge dan mengulang bentuk kartu yang baru saja
   dihapus. */
.sector-item__tags {
	display: flex;
	flex-wrap: wrap;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sector-item__tags li {
	position: relative;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--body);
}

.sector-item__tags li + li {
	margin-left: 17px;
}

.sector-item__tags li + li::before {
	content: "·";
	position: absolute;
	left: -11px;
	color: var(--line-strong);
}

/* ---------- 13. Quotes ---------- */
/* Situasi, bukan testimoni. Tiga kolom bergaris atas tanpa kotak:
   bentuk kartu akan mengulang grid layanan dan industri, sementara isi
   di sini adalah pasangan masalah dan penanganan, bukan kutipan. */
.section--situations {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.situation-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	margin-top: 52px;
}

.situation-card {
	display: flex;
	flex-direction: column;
	padding-top: 26px;
	border-top: 2px solid var(--line-strong);
}

.situation-card__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

/* Label "Yang kami lakukan" duduk di garis yang sama pada ketiga kartu.
   Label didorong ke bawah oleh margin auto, dan ruang di bawahnya
   disamakan lewat tinggi minimum teks penutup (3 baris). */
.situation-card__label--fix {
	margin: auto 0 8px;
	padding-top: 20px;
	color: var(--blue);
}

.situation-card__fix {
	min-height: calc(1.6em * 3);
}

.situation-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin-bottom: 10px;
}

.situation-card__awal {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
}

.situation-card__fix {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink);
}

/* ---------- 14. Blog cards ---------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: var(--blue-tint);
	margin-bottom: 18px;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.post-card:hover .post-card__media img {
	transform: scale(1.045);
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.post-card__cat {
	color: var(--blue);
}

.post-card__meta time::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--line-strong);
	margin-right: 10px;
	vertical-align: middle;
}

.post-card__title {
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 700;
	margin-bottom: 8px;
}

.post-card__title a:hover {
	color: var(--blue);
}

.post-card__excerpt {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
	margin-bottom: 14px;
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ink);
	margin-top: auto;
}

.post-card:hover .post-card__more {
	color: var(--blue);
}

/* ---------- 15. FAQ ---------- */
.faq {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

.faq__sticky {
	position: sticky;
	top: calc(var(--header-h) + 40px);
}

.faq__list {
	border-top: 1px solid var(--line);
	/* Kompensasi scroll ditangani JS agar konsisten antar browser. */
	overflow-anchor: none;
}

.faq-item {
	border-bottom: 1px solid var(--line);
}

.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__q {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.faq-item__summary:hover .faq-item__q {
	color: var(--blue);
}

.faq-item__toggle {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	color: var(--ink);
	transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.faq-item.is-active .faq-item__toggle {
	transform: rotate(45deg);
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.faq-item__answer {
	padding: 0 44px 24px 0;
}

.faq-item__answer-inner {
	display: block;
}

/* Mode beranimasi hanya aktif setelah JS siap (kelas .faq-ready),
   sehingga tanpa JS tetap terbuka/tertutup secara native. */
.faq-ready .faq-item__answer {
	height: 0;
	padding: 0;
	overflow: hidden;
	transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-ready .faq-item__answer-inner {
	padding: 0 44px 24px 0;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.26s ease 0.04s, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-ready .faq-item.is-active .faq-item__answer-inner {
	opacity: 1;
	transform: none;
}

.faq-item__answer p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--body);
	max-width: 62ch;
}

/* ---------- 16. CTA band ---------- */
.cta-band {
	position: relative;
	background: var(--gold);
	color: var(--on-gold);
	overflow: hidden;
}

.cta-band__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(4, 37, 82, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(4, 37, 82, 0.07) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(circle at 20% 0%, #000, transparent 78%);
	mask-image: radial-gradient(circle at 20% 0%, #000, transparent 78%);
	pointer-events: none;
}

.cta-band__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-block: clamp(56px, 7vw, 92px);
}

.cta-band__title {
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--on-gold);
}

.cta-band__text {
	margin-top: 16px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--on-gold);
	max-width: 50ch;
}

.cta-band__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.cta-band__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--on-gold);
	border-bottom: 1px solid rgba(1, 20, 46, 0.3);
	padding-bottom: 2px;
}

.cta-band__phone:hover {
	border-color: var(--navy);
}

.cta-band__note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--on-gold);
}

/* ---------- 17. Footer & WhatsApp float ---------- */
.site-footer {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.66);
	padding-top: clamp(56px, 7vw, 80px);
	position: relative;
	overflow: hidden;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
	gap: clamp(28px, 4vw, 56px);
}

.site-footer__tagline {
	margin-top: 20px;
	font-size: 0.875rem;
	line-height: 1.65;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.6);
}

.site-footer__tagline--strong {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	max-width: 26ch;
	color: #fff;
}

.site-footer__social {
	display: flex;
	gap: 9px;
	margin-top: 22px;
}

.site-footer__social a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.8);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.site-footer__social a:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--on-gold);
}

.site-footer__heading {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58);
	margin-bottom: 18px;
}

.site-footer__links li {
	margin-bottom: 10px;
}

.site-footer__links a {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.68);
	transition: color 0.2s ease;
}

.site-footer__links a:hover {
	color: #fff;
}

.site-footer__contact li {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
}

.site-footer__contact svg {
	flex: none;
	margin-top: 3px;
	color: var(--gold-light);
}

.site-footer__contact a:hover {
	color: #fff;
}

/* ---------- Wordmark footer dengan efek hover (adaptasi Aceternity UI) ----------
   Tiga lapisan teks identik: garis dasar samar, lapisan yang menyala saat
   hover, dan lapisan bergradien yang dibuka oleh mask radial mengikuti kursor.
   Ukuran memakai textLength sehingga wordmark selalu selebar container. */
.site-footer__wordmark {
	margin-top: clamp(36px, 5vw, 58px);
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
}

.wordmark-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.wordmark-svg__text {
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 158px;
	font-weight: 800;
	fill: transparent;
	stroke-width: 1.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.wordmark-svg__outline {
	stroke: rgba(255, 255, 255, 0.1);
}

.wordmark-svg__ghost {
	stroke: rgba(255, 255, 255, 0.26);
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.wordmark-svg__fill {
	stroke: url(#fsWordGradient);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.site-footer__wordmark:hover .wordmark-svg__ghost {
	opacity: 0.7;
}

.site-footer__wordmark:hover .wordmark-svg__fill {
	opacity: 1;
}

.site-footer__bottom {
	margin-top: clamp(28px, 4vw, 44px);
	padding-block: 22px 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.58);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.site-footer__legal a:hover {
	color: #fff;
}

.wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 95;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 9px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 18px 40px -22px rgba(10, 37, 64, 0.5);
	transform: translateY(14px);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), box-shadow 0.3s ease;
}

.wa-float.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.wa-float:hover {
	box-shadow: 0 24px 50px -24px rgba(10, 37, 64, 0.6);
}

.wa-float__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #25d366;
	color: #fff;
	flex: none;
}

.wa-float__label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}

/* ---------- 18. Inner pages ---------- */
/* Hero halaman dalam: gelap berlapis (gradien + grid + titik + arsir +
   vignette). Homepage memakai .hero tersendiri, jadi tidak terpengaruh. */
.page-hero {
	--boxes-line: rgba(148, 163, 184, 0.2);
	position: relative;
	isolation: isolate;
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(40px, 5vw, 72px);
	overflow: hidden;
	background-color: var(--navy);
	background-image:
		radial-gradient(820px 460px at 88% -14%, rgba(14, 64, 187, 0.46), transparent 62%),
		radial-gradient(620px 380px at 2% 112%, rgba(217, 171, 99, 0.1), transparent 66%),
		linear-gradient(164deg, #042552 0%, #063063 52%, #03203f 100%);
	color: rgba(255, 255, 255, 0.74);
}

/* Grid blueprint + matriks titik, memudar ke bawah. */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
	background-size: 88px 88px, 88px 88px;
	-webkit-mask-image: radial-gradient(124% 130% at 44% -10%, #000 22%, rgba(0, 0, 0, 0.4) 68%, transparent 94%);
	mask-image: radial-gradient(124% 130% at 44% -10%, #000 22%, rgba(0, 0, 0, 0.4) 68%, transparent 94%);
	pointer-events: none;
	z-index: 0;
}

/* Arsir diagonal + vignette tepi. */
.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 14px),
		radial-gradient(128% 96% at 50% 46%, transparent 52%, rgba(3, 12, 20, 0.52) 100%);
	pointer-events: none;
	z-index: 0;
}

.page-hero > .container {
	position: relative;
	z-index: 1;
}

/* ---------- Background boxes (adaptasi Aceternity UI) ----------
   Grid miring 64x32 px di belakang konten hero. Nilai transform, ukuran sel,
   dan border mengikuti komponen sumber; warna garis disesuaikan agar menyatu
   dengan latar navy tema. Dekoratif: aria-hidden dan pointer-events none. */
.hero-boxes {
	position: absolute;
	/* Bidang grid dibuat lebih besar dari hero lalu dipusatkan, supaya
	   seluruh area hero terisi setelah di-skew (versi sumber memakai
	   -top-1/4 / left-1/4 + translate, yang pada tinggi hero tema ini
	   membuat separuh bidang terpotong di atas). */
	inset: -55% -25%;
	z-index: 0;
	pointer-events: none;
	transform: skewX(-48deg) skewY(14deg) scale(0.72) rotate(0deg) translateZ(0);
	transform-origin: 50% 50%;
	/* Full-bleed: grid dibiarkan terpotong oleh overflow hero, tanpa fade.
	   Jumlah sel sudah dihitung melebihi batas hero, jadi tidak ada celah. */
}

.hero-boxes__grid {
	position: absolute;
	top: 0;
	left: 0;
}

.hero-boxes__row {
	display: flex;
	flex: none;
}

.hero-boxes__cell {
	position: relative;
	flex: none;
	width: 64px;
	height: 32px;
	border-right: 1px solid var(--boxes-line);
	border-bottom: 1px solid var(--boxes-line);
	/* Padam perlahan (2s) seperti animate transition duration 2 di sumber. */
	transition: background-color 2s var(--ease);
}

/* Menyala seketika saat kursor masuk (duration 0 di sumber). */
.hero-boxes__cell.is-lit {
	background-color: var(--c, transparent);
	transition-duration: 0s;
}

/* Tanda plus di tiap pertemuan sel genap, seperti SVG di komponen sumber. */
.hero-boxes__cell--plus::before {
	content: "";
	position: absolute;
	top: -14px;
	left: -22px;
	width: 40px;
	height: 24px;
	background-image:
		linear-gradient(var(--boxes-line), var(--boxes-line)),
		linear-gradient(var(--boxes-line), var(--boxes-line));
	background-size: 1px 100%, 100% 1px;
	background-position: center, center;
	background-repeat: no-repeat;
}

/* Opsi terang bila suatu halaman membutuhkannya. */
.page-hero--light {
	background-color: #fff;
	background-image: radial-gradient(680px circle at 88% 0%, rgba(14, 64, 187, 0.07), transparent 60%);
	color: var(--body);
}

.page-hero--light::before,
.page-hero--light::after {
	display: none;
}

.page-hero--light .page-hero__title {
	color: var(--ink);
}

.page-hero--light .page-hero__text {
	color: var(--body);
}

.page-hero--light .eyebrow {
	color: var(--muted);
}

.page-hero--light .page-hero__meta li {
	color: var(--muted);
}

.page-hero--light .page-hero__meta svg {
	color: var(--blue);
}

.page-hero--light .breadcrumb ol {
	color: var(--muted);
}

.page-hero--light .breadcrumb li + li::before {
	color: var(--line-strong);
}

.page-hero--light .breadcrumb li[aria-current] {
	color: var(--ink);
}

.page-hero--light .breadcrumb a:hover {
	color: var(--blue);
}

.page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
	gap: 48px;
	align-items: end;
}

.page-hero__title {
	font-size: clamp(2.2rem, 4.4vw, 3.74rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.045em;
	margin-bottom: 20px;
	color: #fff;
}

.page-hero__text {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.76);
	max-width: 60ch;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: 26px;
}

.page-hero__meta li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.66);
}

.page-hero__meta svg {
	color: var(--gold-light);
	flex: none;
}

/* Eyebrow & breadcrumb versi gelap. */
.page-hero .eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

.page-hero .eyebrow__num {
	color: var(--gold-light);
}

.page-hero .breadcrumb ol {
	color: rgba(255, 255, 255, 0.54);
}

.page-hero .breadcrumb li + li::before {
	color: rgba(255, 255, 255, 0.28);
}

.page-hero .breadcrumb li[aria-current] {
	color: rgba(255, 255, 255, 0.92);
}

.page-hero .breadcrumb a:hover {
	color: var(--gold-light);
}

.breadcrumb {
	margin-bottom: 26px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--muted);
}

.breadcrumb li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb li + li::before {
	content: "/";
	color: var(--line-strong);
}

.breadcrumb a:hover {
	color: var(--blue);
}

.breadcrumb li[aria-current] {
	color: var(--ink);
	font-weight: 500;
}

/* Split layout */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 80px);
	align-items: center;
}

.split--top {
	align-items: start;
}

.split--media-right .split__media {
	order: 2;
}

.split__media {
	position: relative;
}

.split__figure {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	background: var(--blue-tint);
}

.split__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.split__figure--wide {
	aspect-ratio: 16 / 10;
}

.split__body p + p {
	margin-top: 16px;
}

.lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--body);
}

/* Feature grid */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.feature-card {
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.feature-card:hover {
	transform: translateY(-5px);
	border-color: rgba(14, 64, 187, 0.3);
	box-shadow: var(--shadow-sm);
}

.feature-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--blue-tint);
	color: var(--blue);
	margin-bottom: 18px;
}

.feature-card h3 {
	font-size: 1.0625rem;
	margin-bottom: 8px;
}

.feature-card p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
}

/* Kartu utama yang lebih berat dari pendukungnya (hierarki isi, bukan
   dekorasi): janji inti mengambil satu baris penuh, dua janji operasional
   duduk berdampingan di bawahnya. */
.feature-grid--lead {
	grid-template-columns: 1fr 1fr;
}

.feature-card--lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 30px 32px;
	border-color: rgba(14, 64, 187, 0.22);
}

.feature-card--lead .feature-card__icon {
	width: 46px;
	height: 46px;
	margin-bottom: 0;
}

.feature-card--lead h3 {
	font-size: 1.3125rem;
	letter-spacing: -0.015em;
}

.feature-card--lead p {
	max-width: 62ch;
	font-size: 0.9375rem;
}

.feature-card--dark {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.feature-card--dark h3 {
	color: #fff;
}

.feature-card--dark p {
	color: rgba(255, 255, 255, 0.62);
}

.feature-card--dark .feature-card__icon {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--gold-light);
}

/* ---------- Daftar berbutir (Tentang Kami, Layanan) ----------
   Judul di kiri, daftar di kanan. Tiap butir tanpa kotak: hanya garis
   pemisah atas tipis, tanpa border kiri/kanan/bawah dan tanpa radius.
   Kesan premium datang dari tipografi dan jarak, bukan dari kotak. */
.rule-split {
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(36px, 5vw, 84px);
}

.rule-list {
	display: grid;
	gap: 0;
}

.rule-item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 18px;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	transition: border-color 0.35s var(--ease);
}

.rule-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-item:hover {
	border-top-color: rgba(217, 171, 99, 0.45);
}

.rule-item__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gold-light);
	transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.rule-item:hover .rule-item__icon {
	background: var(--gold);
	color: var(--on-gold);
}

.rule-item__title {
	margin-bottom: 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
}

.rule-item__text {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.6);
	max-width: 46ch;
}

/* Varian untuk section berlatar terang. Tanpa ini, teks tetap putih dan
   tidak terbaca di atas kertas. */
.rule-list--light .rule-item,
.rule-list--light .rule-item:last-child {
	border-color: var(--line);
}

.rule-list--light .rule-item__icon {
	background: var(--blue-tint);
	color: var(--blue);
}

.rule-list--light .rule-item__title {
	color: var(--ink);
}

.rule-list--light .rule-item__text {
	color: var(--body);
}

/* Service list page */
.service-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.service-nav__inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-block: 12px;
	scrollbar-width: none;
	/* Petunjuk bahwa masih ada tautan di kanan: tepi kanan memudar saat
	   daftar bisa digulir. Nilai --nav-fade diatur JS (0 saat tidak perlu). */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--nav-fade, 0px)), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--nav-fade, 0px)), transparent 100%);
	scroll-behavior: smooth;
}

.service-nav__inner::-webkit-scrollbar {
	display: none;
}

.service-nav a {
	flex: none;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	transition: all 0.25s ease;
}

.service-nav a:hover,
.service-nav a.is-current {
	background: var(--navy-2);
	border-color: var(--navy-2);
	color: #fff;
}

.service-detail {
	padding-block: clamp(48px, 6vw, 84px);
	border-bottom: 1px solid var(--line);
	scroll-margin-top: calc(var(--header-h) + 60px);
}

.service-detail:last-of-type {
	border-bottom: 0;
}

.service-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.service-detail--reverse .service-detail__media {
	order: 2;
}

/* Dua layanan inti (laut dan kepabeanan) diberi bobot visual lebih:
   gambar lebih lebar dan judul lebih besar. Dasarnya isi, bukan dekorasi:
   teksnya sendiri menyebut laut sebagai tulang punggung impor dan
   kepabeanan sebagai titik paling sering barang tertahan. */
.service-detail--feature .service-detail__grid {
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(36px, 5.5vw, 84px);
}

.service-detail--feature .service-detail__title {
	font-size: clamp(1.95rem, 3.3vw, 2.85rem);
}

.service-detail--feature .service-detail__figure {
	aspect-ratio: 4 / 3;
}

.service-detail__figure {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3.2;
	background: var(--blue-tint);
}

.service-detail__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.service-detail:hover .service-detail__figure img {
	transform: scale(1.03);
}

.service-detail__num {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 14px;
}

/* Nomor urut diberi bobot lebih dari label kategori supaya terbaca sebagai
   penanda posisi, bukan sekadar hiasan. */
.service-detail__num-value {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.service-detail__tag {
	color: var(--muted);
	font-weight: 600;
}

.service-detail__title {
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 14px;
}

/* Ringkasan satu kalimat: dibaca sebelum paragraf penjelasan, jadi
   hierarkinya di atas teks isi tapi di bawah judul. */
.service-detail__lead {
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 12px;
	max-width: 46ch;
}

.service-detail__text {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--body);
	margin-bottom: 22px;
}

.check-list {
	display: grid;
	gap: 10px;
	margin-bottom: 26px;
}

.check-list li {
	display: flex;
	gap: 10px;
	font-size: 0.875rem;
	color: var(--ink);
}

.check-list svg {
	flex: none;
	color: var(--blue);
	margin-top: 3px;
}

/* Comparison table */
.compare {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
}

.compare__head,
.compare__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.compare__head {
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
}

.compare__col-label {
	padding: 14px 24px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.compare__col-label--accent {
	color: var(--blue);
	border-left: 1px solid var(--line);
	background: var(--blue-tint-2);
}

.compare__row + .compare__row {
	border-top: 1px solid var(--line);
}

.compare__cell {
	display: flex;
	gap: 12px;
	padding: 22px 24px;
	font-size: 0.875rem;
	line-height: 1.6;
}

.compare__cell--before {
	color: var(--muted);
}

.compare__cell--after {
	border-left: 1px solid var(--line);
	background: var(--blue-tint-2);
	color: var(--ink);
}

.compare__marker {
	flex: none;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	margin-top: 1px;
}

.compare__cell--before .compare__marker {
	background: #f1f4f8;
	color: #93a3b3;
}

.compare__cell--after .compare__marker {
	background: var(--blue);
	color: #fff;
}

.compare__title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
}

.compare__cell--before .compare__title {
	color: var(--body);
	font-weight: 600;
}

.compare__text {
	display: block;
}

/* Label kolom versi mobile. Header tabel disembunyikan di layar sempit,
   jadi tiap sel membawa labelnya sendiri agar pembaca tetap tahu mana
   "Sebelum" dan mana "Bersama Four Seas". Tersembunyi saat header tampil. */
.compare__cell-tag {
	display: none;
	margin-bottom: 7px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.compare__cell--before .compare__cell-tag {
	color: var(--body);
}

.compare__cell--after .compare__cell-tag {
	color: var(--blue);
}

@media (max-width: 720px) {
	.compare__head {
		display: none;
	}

	.compare__cell-tag {
		display: block;
	}

	.compare__row {
		grid-template-columns: 1fr;
	}

	.compare__cell--after {
		border-left: 0;
		border-top: 1px dashed var(--line);
	}

	.compare__cell {
		padding: 18px;
	}
}

/* Role cards (Tentang Kami) */
.role-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.role-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 22px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.role-card:hover {
	transform: translateY(-4px);
	border-color: rgba(14, 64, 187, 0.3);
	box-shadow: var(--shadow-sm);
}

.role-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.role-card__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--blue-tint);
	color: var(--blue);
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.role-card:hover .role-card__icon {
	background: var(--blue);
	color: #fff;
}

.role-card__num {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.role-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.role-card__text {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--body);
	margin-bottom: 14px;
}

.role-card__tag {
	align-self: flex-start;
	margin-top: auto;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--muted);
}

.role-note {
	grid-column: 1 / -1;
	display: flex;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--paper-2);
	border: 1px solid var(--line);
}

.role-note__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--blue);
}

.role-note p {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--body);
}

.role-note strong {
	color: var(--ink);
}

/* Timeline / values */
.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.value-item {
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.value-item__num {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--blue);
	margin-bottom: 10px;
}

.value-item h3 {
	font-size: 1.0625rem;
	margin-bottom: 8px;
}

.value-item p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
}

/* Batas, bukan tips. Tiga kartu pertama semuanya cara menekan biaya;
   kartu kepatuhan adalah pernyataan penolakan. Ia mendapat satu baris
   penuh dan bidang gelap supaya terbaca sebagai garis yang tidak
   dilewati, bukan saran keempat. Ditaruh setelah aturan .value-item p
   agar warna teksnya tidak kalah oleh spesifisitas yang sama. */
.value-item--boundary {
	grid-column: 1 / -1;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 26px 28px;
	background: var(--navy);
	border-color: var(--navy);
}

.value-item--boundary h3 {
	color: #fff;
}

.value-item--boundary p {
	max-width: 82ch;
	color: rgba(255, 255, 255, 0.76);
}

.value-item__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--gold-light);
}

.timeline {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

.timeline__item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--line);
}

.timeline__year {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--blue);
	font-variant-numeric: tabular-nums;
}

.timeline__title {
	font-size: 1.0625rem;
	margin-bottom: 6px;
}

.timeline__text {
	font-size: 0.875rem;
	color: var(--body);
	max-width: 62ch;
}

/* Contact */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.contact-info__list {
	display: grid;
	gap: 14px;
	margin-top: 26px;
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}

/* Hanya kanal yang benar-benar bisa dihubungi yang bergerak saat kursor
   lewat. Alamat dan jam tidak memakai bentuk ini lagi, jadi tidak ada
   lagi kartu yang mengangkat diri tanpa melakukan apa pun. */
a.contact-info__item {
	color: inherit;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

a.contact-info__item:hover {
	border-color: rgba(14, 64, 187, 0.3);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

a.contact-info__item:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.contact-info__body {
	flex: 1;
	min-width: 0;
}

/* Panah kecil sebagai penanda bahwa kartu ini membuka sesuatu. */
.contact-info__go {
	flex: none;
	align-self: center;
	color: var(--muted);
	opacity: 0;
	transform: translate(-3px, 3px);
	transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

a.contact-info__item:hover .contact-info__go,
a.contact-info__item:focus-visible .contact-info__go {
	opacity: 1;
	transform: none;
	color: var(--blue);
}

/* Alamat dan jam: referensi, bukan tautan. Tanpa kartu, tanpa hover. */
.contact-info__meta {
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 16px;
}

.contact-info__meta-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 16px;
}

.contact-info__meta dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 3px;
}

.contact-info__meta dd {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
}

.contact-info__icon {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--blue-tint);
	color: var(--blue);
}

.contact-info__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 3px;
}

.contact-info__value {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.contact-form-card {
	padding: clamp(24px, 3vw, 36px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--shadow-sm);
}

.contact-form-card__title {
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.contact-form-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--body);
	margin-bottom: 22px;
}

.map-frame {
	margin-top: 22px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--blue-tint);
}

.map-frame iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 34vw, 460px);
	border: 0;
	background: #e8eef5;
}

/* Peta di dalam section gelap: bingkai tipis terang supaya bidang peta
   yang terang terbaca sebagai kartu, bukan sebagai bagian latar. */
.map-frame--dark {
	margin-top: 0;
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Alamat sebagai teks di bawah peta. Iframe tidak bisa dibaca screen
   reader, dan sebagian jaringan memblokir Google Maps. */
.map-frame__caption {
	margin: 0;
	padding: 12px 16px;
	font-size: 0.75rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.05);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- 19. Forms ---------- */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field--full {
	grid-column: 1 / -1;
}

.field label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.field__req {
	color: var(--blue);
}

/* Penanda bahwa dua kolom kontak saling menggantikan, bukan sama-sama wajib. */
.field__alt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--muted);
}

.field__hint {
	grid-column: 1 / -1;
	margin: -4px 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--body);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	/* Grid item default min-width:auto membuat select mengikuti opsi
	   terpanjang dan bisa melebihi layar 360px. */
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
	min-height: 120px;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: #9aa8b6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(14, 64, 187, 0.14);
}

.field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.form-foot__note {
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 32ch;
}

.form-foot__note a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.form-notice {
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 0.875rem;
	margin-bottom: 20px;
	border: 1px solid transparent;
}

.form-notice--success {
	background: #edf9f1;
	border-color: #bfe8cd;
	color: #15663a;
}

.form-notice--error {
	background: #fdf0ef;
	border-color: #f3c9c5;
	color: #8c2318;
}

/* ---------- 20. Article / prose ---------- */
/* Hero artikel: gelap berlapis, senada dengan .page-hero. */
.article-hero {
	--boxes-line: rgba(148, 163, 184, 0.2);
	position: relative;
	isolation: isolate;
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(32px, 4vw, 48px);
	overflow: hidden;
	background-color: var(--navy);
	background-image:
		radial-gradient(760px 430px at 90% -12%, rgba(14, 64, 187, 0.44), transparent 62%),
		radial-gradient(560px 340px at 2% 114%, rgba(217, 171, 99, 0.09), transparent 66%),
		linear-gradient(164deg, #042552 0%, #063063 52%, #03203f 100%);
	color: rgba(255, 255, 255, 0.74);
}

.article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
	background-size: 88px 88px, 88px 88px;
	-webkit-mask-image: radial-gradient(124% 132% at 40% -12%, #000 20%, rgba(0, 0, 0, 0.4) 66%, transparent 94%);
	mask-image: radial-gradient(124% 132% at 40% -12%, #000 20%, rgba(0, 0, 0, 0.4) 66%, transparent 94%);
	pointer-events: none;
	z-index: 0;
}

.article-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 14px),
		radial-gradient(128% 96% at 50% 46%, transparent 52%, rgba(3, 12, 20, 0.52) 100%);
	pointer-events: none;
	z-index: 0;
}

.article-hero > .container {
	position: relative;
	z-index: 1;
}

.article-hero .breadcrumb ol {
	color: rgba(255, 255, 255, 0.54);
}

.article-hero .breadcrumb li + li::before {
	color: rgba(255, 255, 255, 0.28);
}

.article-hero .breadcrumb li[aria-current] {
	color: rgba(255, 255, 255, 0.92);
}

.article-hero .breadcrumb a:hover {
	color: var(--gold-light);
}

.article-hero .article-meta {
	color: rgba(255, 255, 255, 0.62);
}

.article-hero .article-meta__cat {
	color: var(--gold-light);
}

.article-hero .article-meta__dot {
	background: rgba(255, 255, 255, 0.42);
}

.article-hero__title {
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin-bottom: 18px;
	max-width: 22ch;
	color: #fff;
}

.article-cover {
	margin-top: 32px;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 8;
	background: var(--blue-tint);
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}

.article-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
	padding-block: clamp(40px, 5vw, 64px);
}

.prose {
	max-width: 72ch;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--body);
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	margin-top: 2em;
	margin-bottom: 0.6em;
	letter-spacing: -0.025em;
}

.prose h3 {
	font-size: 1.1875rem;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--blue-deep);
}

.prose blockquote {
	margin: 1.6em 0;
	padding: 20px 24px;
	border-left: 3px solid var(--gold);
	background: var(--paper-2);
	border-radius: 0 12px 12px 0;
	color: var(--ink);
	font-size: 1rem;
}

.prose figure {
	margin: 1.8em 0;
}

.prose img {
	border-radius: 12px;
}

.prose figcaption {
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--muted);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.prose th,
.prose td {
	padding: 10px 12px;
	border: 1px solid var(--line);
	text-align: left;
}

.prose th {
	background: var(--paper-2);
	font-weight: 700;
	color: var(--ink);
}

.article-aside {
	position: sticky;
	top: calc(var(--header-h) + 32px);
	display: grid;
	gap: 18px;
}

.aside-card {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
}

.aside-card--dark {
	background: var(--navy-2);
	border-color: var(--navy-2);
	color: rgba(255, 255, 255, 0.7);
}

.aside-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
}

.aside-card--dark .aside-card__title {
	color: #fff;
}

.aside-card p {
	font-size: 0.8125rem;
	line-height: 1.6;
}

.aside-card .btn {
	margin-top: 14px;
}

.aside-list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.aside-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.aside-list a {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.45;
	display: block;
}

.aside-list a:hover {
	color: var(--blue);
}

.aside-list time {
	display: block;
	margin-top: 4px;
	font-size: 0.6875rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.related {
	padding-block: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--line);
}

/* Archive */
.archive-head {
	padding-block: clamp(32px, 4vw, 52px);
	border-bottom: 1px solid var(--line);
}

.archive-head__title {
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.archive-head__text {
	margin-top: 10px;
	font-size: 0.9375rem;
	color: var(--body);
	max-width: 60ch;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--navy-2);
	border-color: var(--navy-2);
	color: #fff;
}

/* 404 */
.not-found {
	padding-block: clamp(64px, 10vw, 140px);
	text-align: center;
}

.not-found__code {
	font-size: clamp(5rem, 16vw, 12rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.8;
	color: var(--blue-tint);
	margin-bottom: 16px;
}

.not-found__title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin-bottom: 12px;
}

.not-found__text {
	max-width: 46ch;
	margin: 0 auto 28px;
	color: var(--body);
}

/* ---------- 21. Motion & responsive ---------- */
.has-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.has-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (max-width: 1100px) {
	.site-nav__list {
		gap: 20px;
	}

	.site-nav__list > li > a {
		font-size: 0.875rem;
	}

	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.why__list {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.article-layout {
		grid-template-columns: minmax(0, 1fr) 260px;
	}
}

/* Di bawah 1240px label koordinat dan orbit kompas berebut ruang yang sama.
   Label bersifat dekoratif, orbit adalah tautan - label disembunyikan. */
@media (max-width: 1240px) {
	.chart-label {
		display: none;
	}
}

@media (max-width: 1024px) {	.site-nav__list {
		gap: 13px;
	}

	.site-nav__list > li > a {
		font-size: 0.8125rem;
	}

	.site-header__inner {
		gap: 12px;
	}

	.btn.site-header__cta {
		padding: 12px 16px;
		font-size: 0.875rem;
	}
}

@media (max-width: 960px) {
	:root {
		--header-h: 70px;
	}

	/* backdrop-filter membuat containing block untuk position:fixed,
	   sehingga panel menu harus dinonaktifkan blur-nya di mobile. */
	.site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(255, 255, 255, 0.96);
	}

	.nav-toggle {
		display: inline-flex;
		transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
	}

	/* Saat panel terbuka tombol menjadi kaca gelap agar menyatu dengan panel. */
	.nav-toggle[aria-expanded="true"] {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.22);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars i {
		background: #fff;
	}

	.site-nav__backdrop {
		background: rgba(5, 20, 34, 0.52);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}

	.site-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 88vw);
		z-index: 95;
		isolation: isolate;
		padding: 88px 26px calc(26px + env(safe-area-inset-bottom));
		transform: translateX(100%);
		transition: transform 0.46s var(--ease);
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
		/* Panel tidak boleh navy polos: gradien berlapis seperti section dark. */
		background-color: var(--navy);
		background-image:
			radial-gradient(520px 380px at 108% -6%, rgba(14, 64, 187, 0.44), transparent 62%),
			radial-gradient(420px 320px at -18% 104%, rgba(217, 171, 99, 0.1), transparent 68%),
			linear-gradient(168deg, #042552 0%, #063063 54%, #03203f 100%);
		color: rgba(255, 255, 255, 0.74);
	}

	/* Tekstur grid, memudar dari kanan atas. */
	.site-nav::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
		background-size: 76px 76px;
		-webkit-mask-image: radial-gradient(122% 104% at 74% 0%, #000 8%, rgba(0, 0, 0, 0.32) 62%, transparent 92%);
		mask-image: radial-gradient(122% 104% at 74% 0%, #000 8%, rgba(0, 0, 0, 0.32) 62%, transparent 92%);
		pointer-events: none;
		z-index: 0;
	}

	/* Arsir diagonal + vignette tepi. */
	.site-nav::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 14px),
			radial-gradient(132% 92% at 62% 44%, transparent 46%, rgba(3, 12, 20, 0.52) 100%);
		pointer-events: none;
		z-index: 0;
	}

	.site-nav > * {
		position: relative;
		z-index: 1;
	}

	.site-nav.is-open {
		transform: translateX(0);
	}

	/* Saat panel terbuka, header & logo dilebur ke latar gelap supaya logo
	   tidak tampak terpotong di sisi kiri panel. */
	.site-header.is-nav-open {
		background: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.site-header__logo {
		transition: opacity 0.24s var(--ease);
	}

	.site-header.is-nav-open .site-header__logo {
		opacity: 0;
		pointer-events: none;
	}

	.site-header__actions {
		position: relative;
		z-index: 96;
	}

	/* Identitas brand di kepala panel, sejajar dengan tombol tutup. */
	.site-nav__brand {
		position: absolute;
		top: 13px;
		left: 26px;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 9px;
		height: 44px;
		margin: 0;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.86);
	}

	.site-nav__brand-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--gold);
		box-shadow: 0 0 0 4px rgba(176, 128, 56, 0.16);
	}

	/* Label kecil di atas daftar menu. */
	.site-nav__label {		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 10px;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.6);
	}

	.site-nav__label span {
		width: 22px;
		height: 1px;
		background: currentColor;
		opacity: 0.6;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		counter-reset: navitem;
	}

	.site-nav__list > li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		counter-increment: navitem;
		opacity: 0;
		transform: translateX(14px);
		transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
	}

	/* Muncul berurutan saat panel dibuka. */
	.site-nav.is-open .site-nav__list > li {
		opacity: 1;
		transform: none;
		transition-delay: calc(80ms + var(--i, 0) * 46ms);
	}

	.site-nav__list > li > a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px 12px;
		margin-inline: -12px;
		font-size: clamp(1.1875rem, 5.2vw, 1.375rem);
		font-weight: 600;
		letter-spacing: -0.015em;
		color: #fff;
		transition: background 0.3s var(--ease), color 0.3s var(--ease);
	}

	/* Sorotan baris tipis, melebar sedikit melewati padding panel. */
	.site-nav__list > li > a:hover,
	.site-nav__list > li > a:focus-visible {
		background: rgba(255, 255, 255, 0.045);
		border-radius: 9px;
	}

	/* Nomor urut tipis di kiri. */
	.site-nav__list > li > a::before {
		content: counter(navitem, decimal-leading-zero);
		flex: none;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		font-variant-numeric: tabular-nums;
		color: rgba(255, 255, 255, 0.3);
		transition: color 0.3s var(--ease);
	}

	/* Panah kecil di kanan (menggantikan garis bawah versi desktop). */
	.site-nav__list > li > a::after {
		content: "";
		position: static;
		display: block;
		flex: none;
		width: 6px;
		height: 6px;
		margin-left: auto;
		background: none;
		border-top: 1.5px solid currentColor;
		border-right: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: 0.26;
		transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
	}

	.site-nav__list > li > a:hover::before,
	.site-nav__list > li > a:focus-visible::before {
		color: var(--gold-light);
	}

	.site-nav__list > li > a:focus-visible {
		outline: 2px solid rgba(217, 171, 99, 0.6);
		outline-offset: 6px;
		border-radius: 4px;
	}

	.site-nav__list > li > a:hover::after,
	.site-nav__list > li > a:focus-visible::after {
		opacity: 0.85;
		transform: rotate(45deg) translate(2px, -2px);
	}

	.site-nav__list > li.current-menu-item > a {
		color: var(--gold-light);
	}

	.site-nav__list > li.current-menu-item > a::before {
		color: rgba(217, 171, 99, 0.66);
	}

	.site-nav__list > li.current-menu-item > a::after {
		opacity: 0.8;
		/* Aturan desktop memakai scaleX(1) dengan spesifisitas lebih tinggi;
		   di sini harus ditegaskan ulang agar tetap berbentuk panah. */
		transform: rotate(45deg);
	}

	.site-nav__mobile-cta {
		display: grid;
		gap: 14px;
		margin-top: 24px;
		margin-bottom: 28px;
	}

	/* Blok kontak menempel di bawah panel, mengisi ruang kosong. */
	.site-nav__meta {
		display: grid;
		gap: 5px;
		margin-top: auto;
		padding-top: 22px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.site-nav__meta-label {
		margin-bottom: 3px;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.6);
	}

	.site-nav__meta-link {
		font-size: 0.9375rem;
		font-weight: 500;
		color: #fff;
		transition: color 0.25s var(--ease);
	}

	.site-nav__meta-link:hover {
		color: var(--gold-light);
	}

	.site-nav__meta-text {
		font-size: 0.75rem;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.62);
	}

	.site-header__cta {
		display: none;
	}
	/* Hero satu kolom: tidak ada ruang kosong di kanan-bawah untuk orbit
	   tanpa menabrak CTA atau daftar poin. Tautan Tentang Kami tetap
	   tersedia di menu utama dan footer. */
	.hero-orbit {
		display: none;
	}

	.hero__grid,
	.why__grid,
	.process,
	.faq,
	.split,
	.contact-grid,
	.page-hero__grid,
	.service-detail__grid,
	.service-detail--feature .service-detail__grid,
	.value-grid,
	.article-layout {
		grid-template-columns: 1fr;
	}

	/* Tiga kartu prinsip jadi satu kolom; kartu batas menumpuk ikonnya. */
	.value-item--boundary {
		flex-direction: column;
		gap: 12px;
	}

	/* Index sektor: satu kolom supaya judul dan label tidak terpotong. */
	.sector-index {
		grid-template-columns: 1fr;
	}

	/* Alamat dan jam: label di atas nilainya, karena 132px terlalu sempit
	   untuk kolom teks di layar 390px. */
	.contact-info__meta-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.hero__media {
		order: -1;
		padding-bottom: 0;
	}

	.hero__figure {
		aspect-ratio: 16 / 10;
	}

	.hero__title {
		font-size: clamp(2.3rem, 7.2vw, 3.2rem);
	}

	/* Mobile: rute terlalu kecil untuk terbaca, sisakan grid halus saja. */
	.hero__chart {
		opacity: 0.34;
		background-size: 64px 64px;
	}

	.hero__chart-svg {
		display: none;
	}

	.hero__caption {
		top: 14px;
		bottom: auto;
		left: 14px;
		padding: 6px 12px;
		font-size: 0.6875rem;
	}

	.route-card {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		margin: -26px 0 0;
		box-shadow: 0 20px 44px -30px rgba(10, 37, 64, 0.5);
	}

	.process__sticky,
	.faq__sticky,
	.why__grid--sticky > :first-child,
	.article-aside {
		position: static;
	}

	.process__aside-foot {
		margin-bottom: 32px;
	}

	.why__media {
		order: -1;
	}

	.why__figure {
		aspect-ratio: 16 / 10;
	}

	.why__stat-card {
		position: static;
		max-width: none;
		left: auto;
		bottom: auto;
		margin-top: 14px;
		display: flex;
		align-items: flex-start;
		gap: 14px;
	}

	.why__stat-icon {
		flex: none;
		margin-bottom: 0;
	}

	.why__badge {
		top: 12px;
		right: 12px;
	}

	.why__media {
		padding-bottom: 0;
	}

	.value-strip__list {
		grid-template-columns: 1fr;
	}

	.value-strip__list li {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-inline: 0;
	}

	.value-strip__list li:first-child {
		border-top: 0;
	}

	.service-detail--reverse .service-detail__media,
	.split--media-right .split__media {
		order: 0;
	}

	.stats {
		grid-template-columns: 1fr 1fr;
		row-gap: 26px;
	}

	.stats__item:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.situation-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Satu kolom: label tidak perlu sejajar antar kartu, jadi ruang
	   penyeimbang tiga baris dihapus. */
	.situation-card__label--fix {
		margin-top: 16px;
	}

	.situation-card__fix {
		min-height: 0;
	}

	.post-grid,
	.feature-grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.cta-band__inner {
		grid-template-columns: 1fr;
	}

	.section__head-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}

	.article-aside {
		grid-template-columns: 1fr 1fr;
	}
}

/* Viewport pendek (mis. 320-'-640): rapatkan panel menu agar blok kontak
   di bawah tidak terpotong. */
@media (max-width: 960px) and (max-height: 740px) {
	.site-nav {
		padding-top: 76px;
		padding-bottom: calc(18px + env(safe-area-inset-bottom));
	}

	.site-nav__list > li > a {
		padding: 12px;
		font-size: 1.0625rem;
	}

	.site-nav__mobile-cta {
		margin-top: 18px;
		margin-bottom: 18px;
	}

	.site-nav__meta {
		padding-top: 16px;
	}
}

/* Layar sangat pendek (mis. 320-'-568): rapatkan lagi supaya seluruh isi
   panel muat tanpa scroll dan brand tidak ikut tergulir. */
@media (max-width: 960px) and (max-height: 620px) {
	.site-nav {
		padding-top: 72px;
		padding-bottom: calc(14px + env(safe-area-inset-bottom));
	}

	.site-nav__label {
		margin-bottom: 6px;
	}

	.site-nav__list > li > a {
		padding: 9px 12px;
		font-size: 1rem;
	}

	.site-nav__mobile-cta {
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.site-nav__mobile-cta .btn {
		padding-block: 12px;
	}

	.site-nav__meta {
		padding-top: 10px;
		gap: 3px;
	}

	.site-nav__meta-label {
		display: none;
	}
}

/* Montserrat lebih lebar, jadi eyebrow terpanjang ("Import & Freight
   Forwarding · Jakarta") pecah jadi dua baris di ponsel. Tracking dirapatkan
   sedikit dan ukurannya diturunkan 1px supaya tetap satu baris sampai 360px. */
@media (max-width: 480px) {
	.eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		gap: 8px;
	}

	.eyebrow__line {
		width: 20px;
	}

	/* Label CTA copy deck lebih panjang dan tombol memakai nowrap, sehingga
	   satu tombol bisa memaksa kolom hero lebih lebar dari layar. Di ponsel
	   tombol ditumpuk penuh dan teksnya boleh turun baris. */
	.hero__actions {
		width: 100%;
	}

	.hero__actions .btn,
	.section__closing .btn,
	.form-foot .btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 720px) {
	.service-grid,
	.post-grid,
	.feature-grid,
	.value-grid,
	.role-grid,
	.industry-grid,
	.form-grid,
	.article-aside {
		grid-template-columns: 1fr;
	}

	/* Kartu utama: ikon di atas teks supaya kolom teks tidak terlalu sempit. */
	.feature-card--lead {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 24px 22px;
	}

	.feature-card--lead .feature-card__icon {
		width: 42px;
		height: 42px;
	}

	.feature-card--lead h3 {
		font-size: 1.1875rem;
	}

	/* Mobile: semua baris industri rata kiri, tanpa indentasi selang-seling. */
	.industry-card,
	.industry-card:nth-child(odd),
	.industry-card:nth-child(even) {
		border-right: 0;
		padding: 22px 0;
	}

	.industry-card__arrow {
		opacity: 1;
		transform: none;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.site-footer__wordmark {
		margin-top: 28px;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.wa-float {
		padding: 8px;
	}

	.wa-float__label {
		display: none;
	}

	.timeline__item {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.stats {
		grid-template-columns: 1fr 1fr;
	}

	.stats__item {
		padding-left: 16px;
	}

	.stats__item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.page-hero__title {
		font-size: clamp(2rem, 8vw, 2.6rem);
	}

	.hero__points {
		gap: 8px 16px;
	}

	.marquee {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.marquee__viewport {
		width: 100%;
	}

	.article-hero__title {
		font-size: clamp(1.8rem, 7vw, 2.4rem);
	}

	.article-cover {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.has-js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	/* Panel menu: hilangkan jeda stagger agar tidak ada menu yang "telat". */
	.site-nav__list > li {
		opacity: 1;
		transform: none;
		transition-delay: 0s !important;
	}

	.marquee__track {
		animation: none;
	}

	.chart-route--live,
	.chart-hub__ring,
	.chart-hub__halo,
	.hero-orbit__ring {
		animation: none;
	}
}

@media print {
	.site-header,
	.site-footer,
	.wa-float,
	.cta-band {
		display: none;
	}

	body {
		color: #000;
	}
}