/* ==========================================================================
   Galleon — HALAMAN STATIS
   Dimuat di semua Page (page.php, Experience, Contact, Career).
   Komponen .page-hero ada di components.css; blok di sini khusus
   section halaman Experience.

   Konvensi file ini (sama dengan home.css):
   - Satu blok bernomor per section, urut sesuai urutan tampil.
   - Media query diletakkan di dalam blok section-nya.
   - Breakpoint hanya dari daftar di base.css: 1200, 1024, 768, 480.
   - Angka yang berulang dijadikan custom property di awal blok.

   Ritme latar section Experience:
     Hero gelap → History putih → Vision gelap → Values krem →
     Founder putih → Life krem → Career putih → CTA penutup gelap

   Urutan:
     0. Kepala section bersama (eyebrow, judul, teks WYSIWYG)
     1. History
     2. Our Vision
     3. Company Values
     4. Founder
     5. Life at Galleon
     6. Career
   ========================================================================== */


/* ==========================================================================
   0. KEPALA SECTION BERSAMA

   Eyebrow, judul, dan teks WYSIWYG di section Experience punya gaya
   yang sama — ditulis sekali di sini. Jarak bawah judul diatur di
   blok masing-masing karena tiap layout berbeda.
   ========================================================================== */

.history__eyebrow,
.values-head__eyebrow,
.founder__eyebrow,
.life-head__eyebrow,
.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);
}

.history__title,
.values-head__title,
.founder__title,
.life-head__title,
.career__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;
}

/* Teks dari WYSIWYG ACF */
.values-head__desc,
.founder__quote,
.life-head__desc {
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.values-head__desc > * + *,
.founder__quote > * + *,
.life-head__desc > * + * { margin-top: var(--sp-4); }

.values-head__desc p,
.founder__quote p,
.life-head__desc p { margin: 0; }

.values-head__desc strong,
.founder__quote strong,
.life-head__desc strong {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}


/* ==========================================================================
   1. HISTORY

   Video di-float ke kanan, teks mengalir mengelilinginya. Teksnya
   panjang sementara videonya pendek — dengan dua kolom, kolom kanan
   selalu kosong di bawah. Float membuat teks melebar penuh setelah
   melewati video.
   ========================================================================== */

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

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

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

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

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

.history__media {
	float: right;
	width: var(--media-w);
	margin: var(--sp-1) 0 var(--sp-6) var(--sp-8);
}

/* --- Isi (WYSIWYG) ---
   Semua paragraf sama ukurannya; pembeda dibuat lewat warna, bobot,
   dan garis aksen supaya blok panjang 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 bisa selebar container — dibatasi. */
.history__content > * { max-width: 78ch; }
.history__content > * + * { margin-top: var(--sp-4); }
.history__content p { margin: 0; }

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

/* Paragraf yang seluruhnya tebal jadi pernyataan: garis aksen + font
   display, ukuran tetap sama. */
.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 ul,
.history__content ol {
	display: grid;
	gap: var(--sp-3);
}

.history__content li {
	position: relative;
	padding-left: var(--sp-6);
}

.history__content ul li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	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;
	top: 0;
	left: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-black);
	color: var(--c-accent-text);
}

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

.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;
	border: 0;
	background: rgb(var(--c-ink-rgb) / 0.3);
	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);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
	color: var(--c-ink);
	transition: transform var(--dur) var(--ease-out);
}

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

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

@media (hover: hover) {
	.video-facade__btn:hover { background: rgb(var(--c-ink-rgb) / 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); }

/* Float dilepas — teks di samping video jadi terlalu kurus. */
@media (max-width: 768px) {
	.history__head { max-width: none; }

	.history__media {
		float: none;
		width: auto;
		margin: 0 0 var(--sp-6);
	}
}


/* ==========================================================================
   2. OUR VISION

   Hierarki dibalik: judul jadi label kecil, pernyataan visinya yang
   tampil besar. Latar bergambar opsional dengan parallax (page.js);
   tanpa gambar, PHP memasang .has-pattern sebagai pengganti.
   ========================================================================== */

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

/* --- Latar bergambar ---
   Inset negatif memberi ruang gerak untuk parallax. */
.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 berfungsi sebagai tekstur, teks prioritas. */
.vision-section--media .vision__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		rgb(var(--c-ink-rgb) / 0.35) 0%,
		rgb(var(--c-ink-rgb) / 0.72) 75%
	);
}

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

.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 — kecil & 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);
}

.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 visi — ukuran display. Rata tengah nyaman sampai ±4 baris. */
.vision__desc {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	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 {
	font-weight: inherit;
	color: var(--c-accent);
}

/* Paragraf kedua dst. & daftar = penjelasan, ukuran normal. */
.vision__desc p ~ p,
.vision__desc ul li {
	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: bullet diganti garis pemisah. */
.vision__desc ul {
	display: grid;
	gap: var(--sp-4);
	max-width: 44ch;
	margin-inline: auto;
	text-align: left;
}

.vision__desc ul li {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-ink-line);
}

@media (max-width: 1024px) {
	.vision-section { padding-block: var(--sp-section); }
}

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


/* ==========================================================================
   3. COMPANY VALUES

   Timeline vertikal: panjang deskripsi tiap value timpang, jadi tiap
   baris dibiarkan setinggi isinya. Judul dipecah PHP — awalan
   "GALLEON IN" kecil & redup, kata terakhir besar sebagai pembeda.
   Penanda berupa icon statis (values.php).
   ========================================================================== */

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

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

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

.values-head__title { margin-bottom: var(--sp-5); }

.values-head__desc { max-width: 46ch; }

/* --- Gambar ---
   Blok aksen di belakang, bingkai garis bergeser berlawanan, dan tanda
   logo di sudut — tipis-tipis supaya tidak bersaing dengan timeline. */
.values-head__media {
	position: relative;
	isolation: isolate;
	margin: 0;
}

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

.values-head__media::after {
	content: "";
	position: absolute;
	inset: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
	z-index: -1;
	border: 2px solid var(--c-accent);
	border-radius: var(--radius-lg);
	opacity: 0.4;
	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. */
	.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;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.values-head__mark {
	position: absolute;
	top: calc(var(--sp-4) * -1);
	right: calc(var(--sp-4) * -1);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--c-ink);
	box-shadow: var(--shadow-md);
	color: var(--c-accent);
}

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

	max-width: 92ch;
}

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

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

/* Varian icon: emas gelap di lingkaran netral, jadi ink saat hover. */
.value-step__num--icon { color: var(--c-accent-text); }

.value-step__num--icon svg {
	width: 24px;
	height: 24px;
}

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

@media (hover: hover) {
	.value-step:hover .value-step__num {
		border-color: var(--c-accent);
		background: 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" — sama di semua item, jadi kecil & redup. */
.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 — pembeda, 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;
}

/* Gambar naik ke atas di layar sempit — melihat dulu lebih kuat
   daripada membaca dulu. Margin karena blok aksen & bingkai keluar
   dari batas gambar. */
@media (max-width: 768px) {
	.values-head {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

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

	.values-head__media {
		order: -1;
		margin-inline: var(--sp-5);
	}

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

@media (max-width: 480px) {
	.values-timeline {
		--marker-w: 48px;
		--num-size: 44px;
		--step-pad: var(--sp-8);
	}

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

	.value-step__num--icon svg {
		width: 20px;
		height: 20px;
	}

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

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


/* ==========================================================================
   4. FOUNDER

   Foto kiri dengan kartu identitas menumpuk di tepi bawahnya; judul
   dan sambutan di kanan.
   ========================================================================== */

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

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

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

/* --- Foto + blok aksen di belakang --- */
.founder__media {
	position: relative;
	isolation: isolate;
}

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

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

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

/* --- Kartu identitas ---
   Menumpuk di tepi bawah foto: nama & jabatan menempel pada fotonya. */
.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);
	border-radius: var(--radius);
	background: var(--c-ink);
	box-shadow: var(--shadow-lg);
	text-align: center;
}

.founder__card::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: var(--sp-5);
	height: 3px;
	border-radius: 0 0 2px 2px;
	background: var(--c-accent);
}

/* Varian tanpa foto — 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__title { margin-bottom: var(--sp-6); }

/* Tanda kutip besar menandai suara seseorang, bukan narasi perusahaan. */
.founder__quote {
	--quote-mark: 4.5rem;

	position: relative;
	max-width: 58ch;
	padding-top: var(--sp-7);
	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: var(--quote-mark);
	font-weight: var(--fw-black);
	line-height: var(--lh-none);
	color: var(--c-accent);
	opacity: 0.4;
}

/* --- 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__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.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 {
		border-color: var(--c-ink);
		background: var(--c-ink);
		color: var(--c-accent);
		transform: translateY(-3px);
	}
}

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

	/* Margin kiri memberi ruang untuk blok aksen di belakang foto. */
	.founder__media {
		max-width: 360px;
		margin-right: auto;
		margin-left: var(--sp-6);
	}

	.founder__quote { max-width: none; }
}

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

	.founder__quote {
		--quote-mark: 3.5rem;

		padding-top: var(--sp-6);
	}

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


/* ==========================================================================
   5. LIFE AT GALLEON

   Foto sebagai banner lebar (Values & Founder sudah dua kolom; tiga
   kali berturut-turut terasa monoton). Tombol sosial menumpuk di
   sudut banner sebagai panel gelap.
   ========================================================================== */

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

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

.life-head__desc { max-width: 44ch; }

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

/* 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 {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	transition: transform var(--dur-reveal) var(--ease-out);
}

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

/* --- Panel sosial ---
   Latar gelap pekat supaya terbaca di atas foto apa pun. */
.life-follow {
	position: absolute;
	bottom: var(--sp-6);
	left: var(--sp-6);
	z-index: 2;
	max-width: calc(100% - var(--sp-6) * 2);
	padding: var(--sp-5) var(--sp-6);
	border-radius: var(--radius);
	background: rgb(var(--c-ink-rgb) / 0.88);
	backdrop-filter: blur(8px);
}

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

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

.life-follow__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-5);
	border: 1px solid var(--c-ink-line);
	border-radius: var(--radius-pill);
	background: transparent;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-on-dark);
	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);
}

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

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

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

/* ≤768px: kepala satu kolom, panel sosial keluar dari foto — kalau
   tetap menumpuk, panel menutupi sebagian besar gambar. */
@media (max-width: 768px) {
	.life-head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--sp-5);
	}

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

	.life-banner {
		background: var(--c-ink);
		box-shadow: none;
	}

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

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

@media (max-width: 480px) {
	.life-banner__img { aspect-ratio: 4 / 3; }

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


/* ==========================================================================
   6. CAREER

   Teks kiri, mosaik foto kanan. Tinggi baris ditetapkan lewat grid,
   bukan rasio gambar, jadi susunan tetap rapi berapa pun ukuran file.
   Mosaik bertangga hanya dipasang kalau ada empat foto.
   ========================================================================== */

.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);
	align-items: center;
	gap: var(--sp-8);
}

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

/* --- Teks --- */
.career__title { margin-bottom: var(--sp-5); }

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

.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);
	background: var(--c-surface-alt);
	overflow: hidden;
}

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

/* Gradasi tipis yang muncul saat hover. */
.career__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgb(var(--c-ink-rgb) / 0.35) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}

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

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

	.career__desc { max-width: none; }
}

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

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