/* .container */
.container {
  max-width: var(--container);      /* 1440px */
  margin-inline: auto;              /* center */
  padding-inline: var(--pad-x);     /* 0 di desktop */
}
@media (max-width: 1488px) {        /* 1440 container + ~48 napas */
  .container { padding-inline: var(--pad-x-mobile); }   /* 24px */
}

/* .section */
.section {
  padding-block: var(--section-pad);   /* 80px atas-bawah */
}
/* varian background selang-seling */
.section--muted { background: var(--off-white); }
.section--navy  { background: var(--navy); color: var(--white); }

/* .h2-section */
.h2-section {
  text-align: center;
  margin-bottom: var(--title-gap-after);   /* 48px ke elemen bawahnya */
  color: var(--navy);
}
.h2-section::after {
  content: "";
  display: block;
  width: 56px;                 /* panjang garis */
  height: 4px;
  margin-inline: auto;         /* center garis */
  margin-top: var(--title-gap-line);   /* 16px dari teks judul */
  background: var(--blue-accent);
  border-radius: 2px;
}

.h2-section--left {
  text-align: left;
}
.h2-section--left::after { margin-inline: 0; }

/* penanda anchor scroll */
[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

/* varian judul di atas background gelap */
.h2-section--invert { color: var(--white); }
.h2-section--invert::after { background: var(--white); }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}