/* ==========================================================================
   Travana Creative — Company Profile
   Brand palette taken from /assets/Filosofi Travana:
     Navy         #12284B  — kepercayaan, profesionalisme, kekuatan, stabilitas
     Ivory White  #F7F5F0  — kesederhanaan, kejelasan, kenyamanan
     Heritage Gold#C9A64B  — kemewahan, nilai tinggi, optimisme, kreativitas
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand */
  --navy: #12284b;
  --navy-900: #0c1c36;
  --navy-800: #12284b;
  --navy-700: #1b3765;
  --navy-600: #274a80;
  --navy-100: #e3e8f1;

  --ivory: #f7f5f0;
  --ivory-dark: #ece8df;

  --gold: #c9a64b;
  --gold-light: #dcc07c;
  --gold-dark: #a8862f;

  --white: #ffffff;
  --ink: #12284b;
  --muted: #5b6982;
  --muted-light: #93a0b5;
  --line: rgba(18, 40, 75, 0.1);

  /* Typography */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Spacing & shape */
  --container: 1180px;
  --gutter: 24px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(18, 40, 75, 0.06);
  --shadow: 0 14px 40px rgba(18, 40, 75, 0.1);
  --shadow-lg: 0 30px 70px rgba(18, 40, 75, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 78px;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--navy);
  color: var(--ivory);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 72px 0; }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: rgba(247, 245, 240, 0.75); }
.section--navy h2,
.section--navy h3 { color: var(--ivory); }

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.section--navy .eyebrow { color: var(--gold-light); }

.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  margin-bottom: 18px;
}
.section-sub { font-size: 1.0625rem; margin: 0; }
.section--navy .section-sub { color: rgba(247, 245, 240, 0.72); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold {
  background: var(--gold);
  color: var(--navy-900);
  box-shadow: 0 10px 26px rgba(201, 166, 75, 0.34);
}
.btn--gold:hover { background: var(--gold-light); box-shadow: 0 16px 34px rgba(201, 166, 75, 0.42); }

.btn--navy {
  background: var(--navy);
  color: var(--ivory);
  box-shadow: 0 10px 26px rgba(18, 40, 75, 0.24);
}
.btn--navy:hover { background: var(--navy-700); }

.btn--ghost-light {
  border-color: rgba(247, 245, 240, 0.35);
  color: var(--ivory);
}
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold-light); }

.btn--ghost-dark { border-color: var(--line); color: var(--navy); }
.btn--ghost-dark:hover { border-color: var(--navy); background: var(--navy); color: var(--ivory); }

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

/* ---------- 5. Header / navigation ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              height 0.35s var(--ease);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; transition: opacity 0.3s var(--ease); }
.brand__mark--light { display: block; }
.brand__mark--dark { display: none; }

.site-header.is-stuck {
  background: rgba(247, 245, 240, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(18, 40, 75, 0.06);
  height: 68px;
}
.site-header.is-stuck .brand__mark--light { display: none; }
.site-header.is-stuck .brand__mark--dark { display: block; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(247, 245, 240, 0.82);
  padding: 10px 14px;
  border-radius: 999px;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); font-weight: 600; }

.site-header.is-stuck .nav__link { color: var(--muted); }
.site-header.is-stuck .nav__link:hover,
.site-header.is-stuck .nav__link.is-active { color: var(--navy); }

.nav__cta { margin-left: 12px; padding: 11px 24px; font-size: 0.875rem; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: rgba(247, 245, 240, 0.12);
  position: relative;
  flex: none;
}
.site-header.is-stuck .nav-toggle { background: rgba(18, 40, 75, 0.07); }
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background-color 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.site-header.is-stuck .nav-toggle span { background: var(--navy); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(201, 166, 75, 0.2), transparent 62%),
    radial-gradient(900px 620px at 8% 92%, rgba(39, 74, 128, 0.55), transparent 60%),
    linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  color: rgba(247, 245, 240, 0.8);
  padding: calc(var(--header-h) + 84px) 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  z-index: -1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
}
/* Without this, a long unbreakable word can push a grid column wider than the
   viewport (grid items default to min-width: auto). */
.hero__grid > * { min-width: 0; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border: 1px solid rgba(201, 166, 75, 0.4);
  background: rgba(201, 166, 75, 0.1);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--gold-light);
  letter-spacing: 0.02em;
  margin-bottom: 26px;
}
.hero__badge img { height: 20px; width: auto; }

.hero__title {
  font-size: clamp(2.3rem, 1.3rem + 4vw, 4rem);
  text-wrap: balance;
  color: var(--ivory);
  line-height: 1.08;
  margin-bottom: 22px;
}
/* The gold colour alone carries the emphasis. An underline or background band
   breaks down here: the headline wraps across lines at most widths, and on a
   display size the inline box bottom sits deep in the descender area, so the
   band collided with the next line and painted past the text. */
.hero__title em {
  font-style: normal;
  color: var(--gold);
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.55);
  margin: 0 0 14px;
}
.hero__text {
  font-size: 1.0625rem;
  max-width: 52ch;
  color: rgba(247, 245, 240, 0.76);
  margin: 0 0 34px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-top: 1px solid rgba(247, 245, 240, 0.14);
  padding-top: 28px;
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  color: var(--ivory);
  line-height: 1.1;
}
.stat__num span { color: var(--gold); }
.stat__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(247, 245, 240, 0.6);
  display: block;
  margin-top: 4px;
}

.hero__stats.hero__stats--three { grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Hero visual */
.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__card {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1.06;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(247, 245, 240, 0.28);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: float 7s ease-in-out infinite;
}
.hero__card::before {
  content: "";
  position: absolute;
  width: 128%;
  height: 128%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(201, 166, 75, 0.5) 78%, transparent 92%);
  animation: spin 14s linear infinite;
}
.hero__card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  background: linear-gradient(150deg, #ffffff, var(--ivory));
}
.hero__card-inner { position: relative; z-index: 1; text-align: center; padding: 34px; }
.hero__card-inner img { width: min(52%, 176px); margin: 0 auto 22px; }
.hero__card-inner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgba(247, 245, 240, 0.18);
  box-shadow: 0 10px 28px rgba(8, 17, 33, 0.45);
  white-space: nowrap;
}
.hero__chip i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.hero__chip--a { top: 4%; left: -11%; animation: float 6s ease-in-out infinite 0.4s; }
.hero__chip--b { bottom: 6%; right: -11%; animation: float 6.5s ease-in-out infinite 1.1s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 7. Marquee (client / value strip) ---------- */
.strip {
  background: var(--ivory);
  border-block: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-light);
  white-space: nowrap;
}
.strip__item::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 8. About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 68px;
  align-items: center;
}
.about__media { position: relative; z-index: 0; }
.about__media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  /* Gradien brand sebagai latar: bila foto eksternal gagal dimuat, yang
     tampil adalah panel berwarna brand, bukan kotak putih kosong. */
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--line);
}
/* Rasio dikunci agar tinggi kolom tetap seimbang apa pun ukuran foto aslinya. */
.about__media-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.about__media::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about__caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.8125rem;
  color: var(--muted-light);
}
.about__caption svg { width: 16px; height: 16px; flex: none; color: var(--gold-dark); margin-top: 3px; }

.lead {
  font-size: 1.125rem;
  color: var(--navy-700);
  margin-bottom: 20px;
}
.about p { margin: 0 0 18px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.pillar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(201, 166, 75, 0.5);
}
.pillar h3 {
  font-size: 0.9375rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pillar h3 svg { width: 20px; height: 20px; color: var(--gold-dark); flex: none; }
.pillar p { font-size: 0.875rem; margin: 0; line-height: 1.6; }

/* Values row */
.values {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 76px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.value { text-align: center; }
.value__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(201, 166, 75, 0.16), rgba(201, 166, 75, 0.04));
  border: 1px solid rgba(201, 166, 75, 0.28);
  color: var(--gold-dark);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.value:hover .value__icon { transform: translateY(-6px) rotate(-6deg); }
.value__icon svg { width: 26px; height: 26px; }
.value h4 {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: var(--navy);
}

/* ---------- 9. Services ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.service:hover {
  transform: translateY(-8px);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}
.service:hover::before { transform: scaleX(1); }
.service__num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(18, 40, 75, 0.06);
  line-height: 1;
  transition: color 0.35s var(--ease);
}
.service:hover .service__num { color: rgba(201, 166, 75, 0.28); }
.service__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  margin-bottom: 22px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.service__icon svg { width: 26px; height: 26px; }
.service:hover .service__icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}
.service h3 { font-size: 1.1875rem; margin-bottom: 10px; transition: color 0.35s var(--ease); }
.service p { font-size: 0.9375rem; margin: 0 0 18px; transition: color 0.35s var(--ease); }
.service:hover h3 { color: var(--ivory); }
.service:hover p { color: rgba(247, 245, 240, 0.72); }
.service__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.service__tags li {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-display);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(18, 40, 75, 0.05);
  color: var(--muted);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.service:hover .service__tags li {
  background: rgba(247, 245, 240, 0.1);
  color: rgba(247, 245, 240, 0.8);
}

.process {
  margin-top: 76px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 12px;
}
.step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.step h4 { font-size: 1.0625rem; margin-bottom: 6px; }
.step p { font-size: 0.875rem; margin: 0; line-height: 1.6; }

/* ---------- 10. Portfolio ----------
   RESERVED: the .works / .work / .filter rules below are not used on the page
   right now, because the client has not supplied project case studies yet.
   They are kept ready so portfolio items can be added with markup alone —
   see EDITING.md, "Adding a portfolio project". Same for .quote further down. */
.portfolio__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.portfolio__head .section-head { margin-bottom: 0; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.2);
  background: transparent;
  color: rgba(247, 245, 240, 0.7);
  transition: all 0.25s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--gold-light); }
.filter.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}

.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.work {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  border: 1px solid rgba(247, 245, 240, 0.12);
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.work.is-hidden { display: none; }
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--work-bg, linear-gradient(150deg, #17325e, #0e1e3a));
  transition: transform 0.6s var(--ease);
}
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 17, 33, 0.92) 12%, rgba(8, 17, 33, 0.32) 58%, transparent 88%);
}
.work:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 166, 75, 0.5);
  box-shadow: var(--shadow-lg);
}
.work:hover::before { transform: scale(1.07); }

.work__watermark {
  position: absolute;
  top: -12px;
  right: -18px;
  width: 46%;
  opacity: 0.09;
  z-index: -1;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.work:hover .work__watermark { transform: rotate(-8deg) scale(1.06); opacity: 0.16; }

.work__tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--gold);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.work h3 { color: var(--ivory); font-size: 1.25rem; margin-bottom: 6px; }
.work p {
  font-size: 0.875rem;
  color: rgba(247, 245, 240, 0.68);
  margin: 0;
  line-height: 1.6;
}
.work__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 245, 240, 0.14);
  font-size: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.work__meta svg {
  width: 15px; height: 15px;
  transition: transform 0.3s var(--ease);
}
.work:hover .work__meta svg { transform: translateX(4px); }

.portfolio__cta {
  text-align: center;
  margin-top: 48px;
  font-size: 0.9375rem;
}
.portfolio__cta a { color: var(--gold-light); font-weight: 600; border-bottom: 1px solid rgba(201, 166, 75, 0.4); }
.portfolio__cta a:hover { color: var(--gold); }

/* ---------- 11. Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(201, 166, 75, 0.28);
  position: absolute;
  top: 14px;
  right: 24px;
}
.quote p { font-size: 0.9375rem; margin: 0 0 22px; position: relative; }
.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  flex: none;
}
.quote__by strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--navy);
  line-height: 1.3;
}
.quote__by span { font-size: 0.8125rem; color: var(--muted-light); }

/* ---------- 12. Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.contact__info { position: relative; }
.contact-list { margin: 34px 0 0; display: grid; gap: 8px; }
.contact-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  transition: background-color 0.3s var(--ease);
}
.contact-item:hover { background: rgba(247, 245, 240, 0.06); }
.contact-item__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(201, 166, 75, 0.14);
  border: 1px solid rgba(201, 166, 75, 0.3);
  color: var(--gold-light);
  flex: none;
}
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item h4 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.5);
  margin: 4px 0 4px;
  font-weight: 600;
}
.contact-item p, .contact-item a {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ivory);
  line-height: 1.55;
  transition: color 0.25s var(--ease);
}
.contact-item a:hover { color: var(--gold-light); }

.socials { display: flex; gap: 10px; margin-top: 30px; }
.social {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 245, 240, 0.18);
  color: rgba(247, 245, 240, 0.78);
  transition: all 0.28s var(--ease);
}
.social svg { width: 19px; height: 19px; }
.social:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
  transform: translateY(-3px);
}

/* Form */
.form-card {
  background: var(--ivory);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  /* Kartu terang di dalam .section--navy: warna teks harus disetel ulang
     agar tidak mewarisi warna terang milik seksi navy. */
  color: var(--muted);
}
.form-card h3 { font-size: 1.375rem; margin-bottom: 6px; color: var(--ink); }
.form-card > p { font-size: 0.9375rem; margin: 0 0 28px; color: var(--muted); }
.form-consent span { color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}
.field label span { color: var(--gold-dark); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6982' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-light); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 166, 75, 0.16);
}
.field .error {
  font-size: 0.75rem;
  color: #c0392b;
  min-height: 1em;
  display: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0392b; }
.field.has-error .error { display: block; }

.form-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.55;
}
.form-consent input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--gold-dark); }

.form-note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--muted-light);
  margin: -4px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.form-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }

.form-status {
  grid-column: 1 / -1;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.875rem;
  display: none;
  gap: 10px;
  align-items: flex-start;
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.form-status--ok { background: rgba(46, 125, 79, 0.1); color: #256b45; }
.form-status--err { background: rgba(192, 57, 43, 0.09); color: #a33327; }

/* ---------- 12b. Mission list ---------- */
.mission {
  margin-top: 76px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.mission__head { position: sticky; top: calc(var(--header-h) + 24px); }
.mission__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0; }
.mission__list { display: grid; gap: 4px; }
.mission__list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--radius);
  transition: background-color 0.3s var(--ease);
}
.mission__list li:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.mission__num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 0.08em;
  flex: none;
  padding-top: 3px;
}
.mission__list p { margin: 0; font-size: 0.9375rem; line-height: 1.7; }

/* ---------- 12c. Partners ---------- */
.partners { text-align: center; margin-bottom: 56px; }
.partners__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.45);
  margin: 0 0 26px;
}
.partners__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.partners__grid li {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(247, 245, 240, 0.86);
  padding: 13px 24px;
  border: 1px solid rgba(247, 245, 240, 0.16);
  border-radius: 999px;
  background: rgba(247, 245, 240, 0.04);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.partners__grid li:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-3px);
}

/* ---------- 12d. Work CTA ---------- */
.work-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(247, 245, 240, 0.18);
  background: rgba(247, 245, 240, 0.04);
}
.work-cta__text { max-width: 620px; }
.work-cta h3 { font-size: 1.25rem; margin-bottom: 6px; }
.work-cta p { margin: 0; font-size: 0.9375rem; color: rgba(247, 245, 240, 0.72); }

/* ---------- 13. CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold) 55%, var(--gold-light));
  border-radius: var(--radius-lg);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 44px solid rgba(255, 255, 255, 0.14);
  top: -140px; right: -80px;
}
.cta-band__text { position: relative; max-width: 640px; }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); color: var(--navy-900); margin-bottom: 8px; }
.cta-band p { color: rgba(18, 40, 75, 0.78); margin: 0; font-size: 1rem; }
.cta-band .btn { position: relative; }

/* ---------- 14. Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(247, 245, 240, 0.6);
  padding: 72px 0 0;
  font-size: 0.9375rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 52px;
}
.footer__brand img { height: 38px; margin-bottom: 20px; }
.footer__brand p { margin: 0 0 20px; max-width: 34ch; line-height: 1.7; }
.footer h4 {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 18px;
}
.footer__links { display: grid; gap: 11px; }
.footer__links a { transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }
.footer__links a:hover { color: var(--gold-light); padding-left: 5px; }

.footer__bottom {
  border-top: 1px solid rgba(247, 245, 240, 0.1);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom strong { color: rgba(247, 245, 240, 0.82); font-weight: 600; }

/* Back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: var(--gold);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.3s var(--ease);
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); color: var(--navy-900); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- 15. Scroll reveal ----------
   Ruas ini hanya disembunyikan bila JavaScript aktif (kelas .js dipasang di
   <head>). Tanpa JS, seluruh konten tetap tampil normal. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1080px) {
  .values { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .quotes { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 960px) {
  .mission { grid-template-columns: 1fr; gap: 28px; }
  .mission__head { position: static; }
  .work-cta { padding: 28px 24px; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero__visual { order: -1; }
  .hero__card { width: min(100%, 330px); }
  .hero__chip--a { left: 0; }
  .hero__chip--b { right: 0; }
  .about__grid { grid-template-columns: 1fr; gap: 56px; }
  .about__media::before { inset: 16px -16px -16px 16px; }
  .contact__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-header.is-stuck { height: var(--header-h); }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--ivory);
    padding: 18px var(--gutter) 26px;
    box-shadow: 0 24px 40px rgba(18, 40, 75, 0.14);
    border-top: 1px solid var(--line);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link,
  .site-header.is-stuck .nav__link {
    color: var(--navy);
    font-size: 1rem;
    padding: 14px 8px;
    border-radius: 10px;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active,
  .site-header.is-stuck .nav__link.is-active { color: var(--gold-dark); }
  .nav__cta { margin: 16px 0 0; padding: 15px 24px; border-bottom: 0; }
  .site-header:not(.is-stuck) .nav { background: var(--ivory); }
}

@media (max-width: 720px) {
  .hero__stats.hero__stats--three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero__stats.hero__stats--three .stat__label { font-size: 0.6875rem; line-height: 1.35; }
  .mission__list li { padding: 14px 12px; gap: 14px; }
  .partners__grid li { font-size: 0.8125rem; padding: 10px 16px; }
  .section { padding: 72px 0; }
  .hero { padding: calc(var(--header-h) + 56px) 0 76px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .cards { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); margin-top: 56px; padding-top: 44px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .cta-band { padding: 40px 28px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .portfolio__head { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .values { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hero__chip { font-size: 0.75rem; padding: 10px 14px; }
}

/* ---------- 17. Motion & print ---------- */
@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;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .to-top, .nav-toggle, .strip, .hero__visual { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; break-inside: avoid; }
}

/* Pesan galat yang berada di luar pembungkus .field (mis. kotak persetujuan) */
.error.is-shown { display: block; }
.form-status a { font-weight: 600; }

/* ---------- 18. Language switch ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 240, 0.22);
  background: rgba(247, 245, 240, 0.08);
  flex: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-stuck .lang-switch {
  border-color: var(--line);
  background: rgba(18, 40, 75, 0.05);
}

.lang-switch__btn {
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(247, 245, 240, 0.7);
  padding: 7px 13px;
  border-radius: 999px;
  line-height: 1;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang-switch__btn:hover { color: var(--ivory); }
.site-header.is-stuck .lang-switch__btn { color: var(--muted); }
.site-header.is-stuck .lang-switch__btn:hover { color: var(--navy); }

.lang-switch__btn.is-active,
.site-header.is-stuck .lang-switch__btn.is-active {
  background: var(--gold);
  color: var(--navy-900);
}

@media (max-width: 860px) {
  /* Tetap terlihat di header ponsel, di samping tombol menu.
     Logo, pemilih bahasa, dan tombol menu harus muat dalam 375px, jadi
     jarak antar elemen dan ukuran logo dikecilkan di sini. */
  .site-header .container { gap: 10px; }
  .brand img { height: 28px; }
  .lang-switch { margin-left: auto; padding: 2px; }
  .lang-switch__btn { padding: 7px 10px; font-size: 0.75rem; }
}

@media (max-width: 400px) {
  .brand img { height: 25px; }
  .lang-switch__btn { padding: 7px 8px; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .nav-toggle { width: 42px; height: 42px; }
}