/* ==========================================================================
   Galleon — HALAMAN STATIS
   Experience, Contact Us, dan page biasa lainnya.

   Konvensi file ini sama dengan home.css:
   - Satu blok bernomor per komponen, urut sesuai urutan tampil.
   - Media query diletakkan di dalam blok komponennya.
   - Breakpoint yang dipakai hanya tiga: 1024px, 900px, 600px.
   - Angka yang berulang dijadikan custom property di awal blok.

   Urutan:
     1. Page Hero
     2. Konten halaman biasa
   ========================================================================== */

/* ==========================================================================
   2. HISTORY

   Video di-float ke kanan, teks mengalir mengelilinginya. Layout dua
   kolom sejajar tidak pernah pas di sini: teksnya panjang sekali
   sementara videonya pendek, jadi kolom kanan selalu kosong dua
   pertiga ke bawah.

   Float membuat teks memakai lebar penuh setelah melewati video, jadi
   tidak ada ruang menganggur — dan sebagai efek samping, baris teksnya
   jadi lebih pendek di bagian atas sehingga lebih enak dibaca.

   Tidak ada max-width pada pembungkusnya: konten rata kiri mengikuti
   container, sejajar dengan hero di atasnya.
   ========================================================================== */

.history-section { background: var(--c-surface); }

.history {
	--media-w: clamp(360px, 42%, 560px);
}

/* --- Kepala --- */
.history__head {
	max-width: 68ch;
	margin-bottom: var(--sp-6);
}

.history__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.history__title {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

/* Garis aksen pendek — penanda yang sama dengan garis vertikal
   di hero, menjaga bahasa visualnya konsisten. */
.history__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: var(--sp-5);
	border-radius: 2px;
	background: var(--c-accent);
}

/* --- Body ---
   flow-root supaya float di dalamnya tidak keluar dari pembungkus. */
.history__body { display: flow-root; }

/* --- Media ---
   Float, bukan kolom grid. Teks mengalir di kirinya lalu melebar
   penuh setelah videonya terlewati. */
.history__media {
	float: right;
	width: var(--media-w);
	margin: var(--sp-1) 0 var(--sp-6) var(--sp-8);
}

/* --- Isi ---
   Berasal dari WYSIWYG, jadi tiap elemen diatur sendiri di sini.
   Tidak memakai .prose karena lebar dan warnanya berbeda.

   Semua paragraf memakai ukuran yang sama. Pembeda antar paragraf
   dibuat lewat warna, bobot, dan garis aksen — bukan lewat ukuran,
   supaya blok teks panjang tetap terbaca sebagai satu kesatuan. */
.history__content {
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
	text-wrap: pretty;
}

/* Setelah video terlewati, baris teks bisa jadi selebar container —
   terlalu panjang untuk dibaca nyaman. Ini membatasinya. */
.history__content > * { max-width: 78ch; }

.history__content > * + * { margin-top: var(--sp-4); }

.history__content p {
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
}

/* Paragraf yang seluruhnya tebal jadi pernyataan. Ukurannya tetap
   sama dengan paragraf lain — yang membedakan hanya garis aksen,
   warna teks, dan font display. */
.history__content p:has(> strong:only-child) {
	margin-block: var(--sp-5);
	padding-left: var(--sp-5);
	border-left: 3px solid var(--c-accent);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	color: var(--c-ink);
}

.history__content p:has(> strong:only-child) strong { font-weight: inherit; }

.history__content strong { color: var(--c-ink); font-weight: var(--fw-bold); }

.history__content ul,
.history__content ol {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
}

.history__content li {
	position: relative;
	list-style: none;
	padding-left: var(--sp-6);
	font-size: var(--fs-base);
}

.history__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: var(--c-accent);
}

.history__content ol { counter-reset: history-item; }
.history__content ol li { counter-increment: history-item; }

.history__content ol li::before {
	content: counter(history-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	color: var(--c-accent-text);
}

/* --- Video facade --- */
.video-facade {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--c-ink);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	isolation: isolate;
}

.video-facade__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.video-facade__btn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	background: rgba(26, 25, 23, 0.30);
	border: 0;
	transition: background-color var(--dur) var(--ease);
}

.video-facade__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding-left: 4px; /* segitiga play secara optik tidak di tengah */
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-ink);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
	transition: transform var(--dur) var(--ease-out);
}

/* Denyut halus supaya tombol terbaca sebagai sesuatu yang bisa diklik */
.video-facade__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--c-accent);
	animation: galleon-pulse 2.4s var(--ease-out) infinite;
}

@keyframes galleon-pulse {
	0%   { transform: scale(1);   opacity: 0.8; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

@media (hover: hover) {
	.video-facade__btn:hover { background: rgba(26, 25, 23, 0.16); }
	.video-facade__btn:hover .video-facade__icon { transform: scale(1.08); }
	.video-facade:hover .video-facade__poster { transform: scale(1.04); }
}

.video-facade__btn:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: -3px;
}

/* Setelah diklik, iframe menggantikan poster */
.video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Poster tanpa video — dipakai kalau URL video dikosongkan */
.video-facade--static { box-shadow: var(--shadow-md); }

/* --- Responsive --- */
@media (max-width: 780px) {
	/* Float dilepas — di layar sempit, teks yang mengalir di samping
	   video jadi terlalu kurus untuk dibaca. */
	.history__media {
		float: none;
		width: auto;
		margin: 0 0 var(--sp-6);
	}

	.history__head { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.video-facade__icon::before { animation: none; }
}

/* ==========================================================================
   3. OUR VISION

   Hierarki dibalik dari section lain: judul jadi label kecil,
   pernyataan visinya yang tampil besar. Untuk section ini,
   pernyataan itulah isinya.

   Latar bergambar opsional dengan parallax. Kalau tidak ada gambar,
   PHP memasang class .has-pattern sebagai penggantinya.
   ========================================================================== */

.vision-section {
	position: relative;
	padding-block: calc(var(--sp-section) * 1.2);
	background: var(--c-ink);
	color: var(--c-on-dark-muted);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

/* --- Latar bergambar --- */
.vision__bg {
	position: absolute;
	inset: -12% 0;
	z-index: -2;
	will-change: transform;
}

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

/* Overlay tebal — gambar di sini berfungsi sebagai tekstur, bukan
   sebagai foto yang harus dikenali isinya. Teks tetap prioritas. */
.vision-section--media .vision__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse at center,
			rgba(26, 25, 23, 0.35) 0%,
			rgba(26, 25, 23, 0.72) 75%
		);
}

.vision {
	position: relative;
	z-index: 1;
	max-width: 68ch;
	margin-inline: auto;
}

/* --- Eyebrow --- */
.vision__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-on-dark-muted);
}

.vision__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--c-accent);
}

/* --- Judul ---
   Berperan sebagai label, bukan headline. Sengaja kecil dan berwarna
   aksen supaya tidak bersaing dengan pernyataan di bawahnya. */
.vision__title {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-accent);
}

/* Garis aksen pendek sebagai pemisah label dan pernyataan */
.vision__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: var(--sp-5) auto 0;
	border-radius: 2px;
	background: var(--c-accent);
	opacity: 0.5;
}

/* --- Pernyataan ---
   Inilah isi sebenarnya, jadi diberi ukuran display. Rata tengah
   hanya nyaman sampai sekitar empat baris — kalau visi Galleon
   ternyata lebih panjang dari itu, kabari untuk diubah rata kiri. */
.vision__desc {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: 1.35;
	letter-spacing: var(--ls-snug);
	color: var(--c-on-dark);
	text-wrap: balance;
}

.vision-section--media .vision__desc,
.vision-section--media .vision__title,
.vision-section--media .vision__eyebrow {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.vision__desc > * + * { margin-top: var(--sp-5); }
.vision__desc p { margin: 0; }
.vision__desc strong { color: var(--c-accent); font-weight: inherit; }

/* Paragraf kedua dan seterusnya dikembalikan ke ukuran normal —
   pernyataan utamanya cukup satu, sisanya penjelasan. */
.vision__desc p ~ p {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-none);
	color: var(--c-on-dark-muted);
}

/* Daftar tetap rata tengah, tapi bulletnya diganti garis pemisah
   supaya tidak terlihat seperti daftar yang salah tempat. */
.vision__desc ul {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	text-align: left;
	max-width: 44ch;
	margin-inline: auto;
}

.vision__desc ul li {
	list-style: none;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-ink-line);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-normal);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-none);
	color: var(--c-on-dark-muted);
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.vision-section { padding-block: var(--sp-section); }
}

@media (max-width: 600px) {
	.vision { max-width: none; }
	.vision__desc { font-size: var(--fs-lg); }
	.vision__title::after { margin-block-start: var(--sp-4); }
}

/* ==========================================================================
   4. COMPANY VALUES

   Timeline vertikal, bukan grid. Panjang deskripsi tiap value sangat
   timpang — di grid, kartu pendek dipaksa setinggi yang terpanjang
   dan terlihat setengah kosong. Timeline membiarkan tiap baris
   setinggi isinya sendiri.

   Judul dipecah PHP: awalan "GALLEON IN" tampil kecil dan redup,
   kata terakhirnya besar sebagai pembeda.
   ========================================================================== */

.values-section { background: var(--c-surface-alt); }

/* --- Kepala: teks kiri, gambar kanan --- */
.values-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: center;
	margin-bottom: var(--sp-section);
}

.values-head--text-only {
	grid-template-columns: 1fr;
	max-width: 60ch;
}

.values-head__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.values-head__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

.values-head__desc {
	max-width: 46ch;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.values-head__desc > * + * { margin-top: var(--sp-4); }
.values-head__desc p { margin: 0; }
.values-head__desc strong { color: var(--c-ink); font-weight: var(--fw-bold); }

/* --- Gambar ---
   Tiga lapis: blok aksen di belakang sebagai jangkar, bingkai garis
   yang bergeser ke arah berlawanan, dan tanda logo di sudut. Ketiganya
   tipis-tipis saja — nomor timeline di bawah sudah cukup kuat, jadi
   foto di sini tidak perlu bersaing. */
.values-head__media {
	position: relative;
	margin: 0;
	isolation: isolate;
}

/* Blok aksen di belakang, sudut kiri bawah */
.values-head__media::before {
	content: "";
	position: absolute;
	left: calc(var(--sp-5) * -1);
	bottom: calc(var(--sp-5) * -1);
	width: 45%;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	background: var(--c-accent-soft);
	z-index: -2;
}

/* Bingkai garis, bergeser ke arah berlawanan */
.values-head__media::after {
	content: "";
	position: absolute;
	inset: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
	border: 2px solid var(--c-accent);
	border-radius: var(--radius-lg);
	opacity: 0.4;
	z-index: -1;
	pointer-events: none;
	transition:
		inset var(--dur-slow) var(--ease-out),
		opacity var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
	/* Bingkai merapat saat hover — gerakan kecil yang membuat
	   gambarnya terasa hidup tanpa perlu animasi mencolok. */
	.values-head__media:hover::after {
		inset: var(--sp-3) calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-3);
		opacity: 0.7;
	}
}

.values-head__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* Tanda logo di sudut — penanda kecil yang mengikat gambar ke
   identitas brand tanpa perlu watermark di dalam fotonya. */
.values-head__mark {
	position: absolute;
	right: calc(var(--sp-4) * -1);
	top: calc(var(--sp-4) * -1);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-accent);
	box-shadow: var(--shadow-md);
}

/* --- Timeline ---
   Padding, bukan gap, supaya garis penghubung bisa membentang
   sampai ke item berikutnya. */
.values-timeline {
	--marker-w:  clamp(72px, 8vw, 108px);
	--num-size:  56px;

	margin: 0;
	padding: 0;
	max-width: 92ch;
}

.value-step {
	position: relative;
	display: grid;
	grid-template-columns: var(--marker-w) minmax(0, 1fr);
	gap: var(--sp-6);
	list-style: none;
	padding-bottom: var(--sp-9);
}

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

/* --- Penanda --- */
.value-step__marker {
	position: relative;
	display: flex;
	justify-content: center;
}

.value-step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--num-size);
	height: var(--num-size);
	border: 2px solid var(--c-line-strong);
	border-radius: 50%;
	background: var(--c-surface-alt);
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-snug);
	color: var(--c-text-muted);
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

/* Garis penghubung ke item berikutnya */
.value-step:not(:last-child) .value-step__marker::after {
	content: "";
	position: absolute;
	top: var(--num-size);
	bottom: calc(var(--sp-9) * -1);
	left: 50%;
	width: 2px;
	translate: -50% 0;
	background: linear-gradient(
		180deg,
		var(--c-line-strong),
		var(--c-line)
	);
}

@media (hover: hover) {
	.value-step:hover .value-step__num {
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: var(--c-ink);
	}
}

/* --- Isi --- */
.value-step__body { padding-top: var(--sp-2); }

.value-step__title {
	margin: 0 0 var(--sp-4);
	line-height: var(--lh-snug);
}

/* Awalan "GALLEON IN" — kecil dan redup, karena bagian ini sama
   di semua item dan bukan yang membedakan. */
.value-step__prefix {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* Kata terakhir — inilah pembedanya, jadi diberi ukuran display */
.value-step__last {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--c-ink);
}

.value-step__desc {
	max-width: 68ch;
	margin: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
	text-wrap: pretty;
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.values-head {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	.values-head__desc { max-width: none; }

	/* Gambar naik ke atas — di layar sempit, melihat dulu lebih kuat
	   daripada membaca dulu. Margin perlu karena blok aksen dan
	   bingkai keluar dari batas gambar. */
	.values-head__media {
		order: -1;
		margin-inline: var(--sp-5);
	}

	.values-head__img { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
	.values-timeline {
		--marker-w: 48px;
		--num-size: 44px;
	}

	.value-step {
		gap: var(--sp-4);
		padding-bottom: var(--sp-8);
	}

	.value-step:not(:last-child) .value-step__marker::after {
		bottom: calc(var(--sp-8) * -1);
	}

	.value-step__body { padding-top: var(--sp-1); }
	.value-step__last { font-size: var(--fs-lg); }

	.values-head__mark {
		width: 56px;
		height: 56px;
		right: calc(var(--sp-3) * -1);
		top: calc(var(--sp-3) * -1);
	}

	.values-head__mark svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.value-step__num { transition: none; }
	.values-head__media::after { transition: none; }
}

/* ==========================================================================
   5. FOUNDER

   Foto kiri dengan kartu identitas menumpuk di tepi bawahnya, judul
   dan sambutan di kanan. Judul sengaja tidak terpusat di atas —
   di layout dua kolom, judul terpusat terasa terputus dari isinya.
   ========================================================================== */

.founder-section { background: var(--c-surface); }

.founder {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sp-9);
	align-items: center;
}

.founder--text-only {
	grid-template-columns: 1fr;
	max-width: 68ch;
}

/* --- Foto ---
   Blok aksen di belakang supaya foto potret tidak terasa melayang
   sendirian di ruang kosong. */
.founder__media {
	position: relative;
	isolation: isolate;
}

.founder__media::before {
	content: "";
	position: absolute;
	left: calc(var(--sp-6) * -1);
	top: calc(var(--sp-6) * -1);
	width: 58%;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	background: var(--c-accent-soft);
	z-index: -1;
}

.founder__figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.founder__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
}

/* --- Kartu identitas ---
   Menumpuk di tepi bawah foto. Pola profil eksekutif: nama dan
   jabatan berada tepat di foto orangnya, bukan terpisah jauh. */
.founder__card {
	position: relative;
	z-index: 2;
	width: calc(100% - var(--sp-7));
	margin: calc(var(--sp-7) * -1) auto 0;
	padding: var(--sp-5);
	background: var(--c-ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

/* Garis aksen tipis di tepi atas kartu */
.founder__card::before {
	content: "";
	position: absolute;
	inset-inline: var(--sp-5);
	top: 0;
	height: 3px;
	border-radius: 0 0 2px 2px;
	background: var(--c-accent);
}

/* Varian tanpa foto — jadi blok biasa di alur teks */
.founder__card--inline {
	width: auto;
	max-width: 26ch;
	margin: var(--sp-6) 0 0;
	text-align: left;
}

.founder__name {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--c-on-dark);
}

.founder__position {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-accent);
}

/* --- Teks --- */
.founder__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.founder__title {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

/* --- Sambutan ---
   Tanda kutip besar menandai bahwa ini suara seseorang, bukan
   narasi perusahaan seperti di section lain. */
.founder__quote {
	position: relative;
	padding-top: var(--sp-7);
	max-width: 58ch;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
	text-wrap: pretty;
}

.founder__quote::before {
	content: "\201C";
	position: absolute;
	top: calc(var(--sp-2) * -1);
	left: 0;
	font-family: var(--font-display);
	font-size: 4.5rem;
	font-weight: var(--fw-black);
	line-height: 1;
	color: var(--c-accent);
	opacity: 0.4;
}

.founder__quote > * + * { margin-top: var(--sp-4); }
.founder__quote p { margin: 0; }
.founder__quote strong { color: var(--c-ink); font-weight: var(--fw-bold); }

/* --- Sosial media --- */
.founder__connect {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.founder__connect-label {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.founder__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
}

.founder__socials li { list-style: none; }

.founder__social {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-text-muted);
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.founder__social:hover {
		transform: translateY(-3px);
		background: var(--c-ink);
		border-color: var(--c-ink);
		color: var(--c-accent);
	}
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.founder {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.founder__media {
		max-width: 360px;
		margin-inline: auto;
		margin-left: var(--sp-6);
	}

	.founder__quote { max-width: none; }
}

@media (max-width: 600px) {
	.founder__media {
		max-width: none;
		margin-left: var(--sp-5);
		margin-right: 0;
	}

	.founder__quote::before { font-size: 3.5rem; }
	.founder__quote { padding-top: var(--sp-6); }

	.founder__connect {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-4);
	}
}

/* ==========================================================================
   6. LIFE AT GALLEON

   Foto jadi banner lebar, bukan kolom di samping teks. Values dan
   Founder sudah memakai pola dua kolom teks-dan-gambar; mengulanginya
   untuk ketiga kalinya membuat halaman terasa monoton.

   Tombol sosial menumpuk di sudut banner sebagai panel gelap —
   ajakan mengikuti sosial media jadi bagian dari fotonya, bukan
   blok terpisah yang harus dicari.
   ========================================================================== */

.life-section { background: var(--c-surface-alt); }

/* --- Kepala: judul kiri, deskripsi kanan --- */
.life-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-7);
	align-items: end;
	margin-bottom: var(--sp-block);
}

.life-head__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.life-head__title {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

.life-head__desc {
	max-width: 44ch;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.life-head__desc > * + * { margin-top: var(--sp-4); }
.life-head__desc p { margin: 0; }
.life-head__desc strong { color: var(--c-ink); font-weight: var(--fw-bold); }

/* --- Banner --- */
.life-banner {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	isolation: isolate;
}

/* Varian tanpa foto — panel sosial jadi blok gelap berdiri sendiri */
.life-banner--plain {
	background: var(--c-ink);
	box-shadow: none;
}

.life-banner__figure {
	margin: 0;
	overflow: hidden;
}

.life-banner__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
	.life-banner:hover .life-banner__img { transform: scale(1.03); }
}

/* --- Panel sosial ---
   Menumpuk di sudut kiri bawah banner. Latar gelap pekat supaya
   terbaca di atas foto apa pun. */
.life-follow {
	position: absolute;
	left: var(--sp-6);
	bottom: var(--sp-6);
	z-index: 2;
	max-width: calc(100% - var(--sp-6) * 2);
	padding: var(--sp-5) var(--sp-6);
	background: rgba(26, 25, 23, 0.88);
	border-radius: var(--radius);
	backdrop-filter: blur(8px);
}

.life-banner--plain .life-follow {
	position: static;
	max-width: none;
	background: transparent;
	backdrop-filter: none;
	padding: var(--sp-7);
}

.life-follow__label {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-accent);
}

.life-follow__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
}

.life-follow__list li { list-style: none; }

.life-follow__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-5);
	background: transparent;
	border: 1px solid var(--c-ink-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	color: var(--c-on-dark);
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur) var(--ease-out);
}

.life-follow__link svg { flex: 0 0 auto; color: var(--c-accent); }

@media (hover: hover) {
	.life-follow__link:hover {
		transform: translateY(-3px);
		background: var(--c-accent);
		border-color: var(--c-accent);
		color: var(--c-ink);
	}

	.life-follow__link:hover svg { color: var(--c-ink); }
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.life-head {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
		align-items: start;
	}

	.life-head__desc { max-width: none; }

	.life-banner__img { aspect-ratio: 16 / 9; }

	.life-follow {
		left: var(--sp-5);
		bottom: var(--sp-5);
		padding: var(--sp-4) var(--sp-5);
	}
}

@media (max-width: 600px) {
	/* Panel keluar dari foto — di layar sempit dia menutupi
	   hampir seluruh gambar kalau tetap menumpuk. */
	.life-banner {
		background: var(--c-ink);
		box-shadow: none;
	}

	.life-banner__img { aspect-ratio: 4 / 3; }

	.life-follow {
		position: static;
		max-width: none;
		padding: var(--sp-6);
		background: transparent;
		backdrop-filter: none;
	}

	.life-follow__list { flex-direction: column; }
	.life-follow__link { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.life-banner__img { transition: none; }
}

/* ==========================================================================
   7. CAREER

   Teks kiri, mosaik foto kanan. Tinggi baris ditetapkan lewat
   grid-template-rows, bukan mengikuti rasio gambar — jadi susunannya
   tetap rapi berapa pun ukuran file yang diunggah.

   Mosaik bertangga hanya dipasang kalau ada empat foto. Dengan
   kurang dari itu, grid jatuh ke dua kolom rata supaya tidak ada
   sel yang menganga.

   Section penutup halaman, jadi tombolnya paling menonjol di antara
   semua section — teks kiri sengaja dibuat lebih lapang.
   ========================================================================== */

.career-section { background: var(--c-surface); }

.career {
	--tile-row: clamp(140px, 16vw, 220px);

	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--sp-8);
	align-items: center;
}

.career--text-only {
	grid-template-columns: 1fr;
	max-width: 56ch;
}

/* --- Teks --- */
.career__eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.career__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

.career__desc {
	max-width: 42ch;
	margin: 0 0 var(--sp-7);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.career__actions { margin: 0; }

.career__actions .btn svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.career__actions .btn:hover svg { transform: translateX(4px); }
}

/* --- Mosaik ---
   Default: dua kolom rata. Susunan bertangga hanya dipasang kalau
   foto keempat ada, supaya tiga foto tidak menyisakan sel kosong. */
.career__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: var(--tile-row);
	gap: var(--sp-4);
}

/* Susunan bertangga: foto 2 dan 3 merentang dua baris, itu yang
   menghasilkan tinggi berselang-seling seperti mosaik. */
.career__gallery:has(> :nth-child(4)) {
	grid-template-rows: repeat(3, var(--tile-row));
	grid-auto-rows: unset;
}

.career__gallery:has(> :nth-child(4)) .career__tile--1 { grid-column: 1; grid-row: 1; }
.career__gallery:has(> :nth-child(4)) .career__tile--2 { grid-column: 2; grid-row: 1 / span 2; }
.career__gallery:has(> :nth-child(4)) .career__tile--3 { grid-column: 1; grid-row: 2 / span 2; }
.career__gallery:has(> :nth-child(4)) .career__tile--4 { grid-column: 2; grid-row: 3; }

.career__tile {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-surface-alt);
}

.career__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

/* Lapisan aksen tipis yang memudar saat hover — memberi tanda bahwa
   foto ini bagian dari satu rangkaian, bukan gambar acak. */
.career__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 55%,
		rgba(26, 25, 23, 0.35) 100%
	);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

@media (hover: hover) {
	.career__tile:hover .career__img { transform: scale(1.06); }
	.career__tile:hover::after { opacity: 1; }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.career {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	.career__desc { max-width: none; }
}

@media (max-width: 600px) {
	.career {
		--tile-row: clamp(110px, 32vw, 170px);
	}

	.career__gallery { gap: var(--sp-3); }
	.career__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.career__img,
	.career__tile::after,
	.career__actions .btn svg { transition: none; }
}



.cta-section { background: var(--c-surface); }