section {
  padding: var(--space-2xl) 0;
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0.5rem 0 0.75rem;
}

.section-header p {
  color: var(--color-text-muted);
  max-width: 50ch;
}

.bg-offwhite {
  background-color: var(--color-offwhite);
}

.bg-brand-dark {
  background-color: var(--color-black);
  color: var(--color-offwhite);
}

.bg-brand-dark .section-header p {
  color: rgba(247, 245, 241, 0.75);
}

.bg-brand-dark .eyebrow {
  color: var(--color-gold);
}

/* ---- Hero/About: Hero stays pinned while About rolls up to cover it (single stack, nothing covers About) ---- */
.vh-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.about-overlay {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 -24px 60px -20px rgba(11, 11, 12, 0.45);
}

/* ---- About: product flat-lay as a full-bleed section background, copy on top, potato image bleeding off the right edge ---- */
.about-bg-section {
  position: relative;
  background-image: url('../images/about-left-2.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.about-bg-section > .container {
  position: relative;
  z-index: 1;
}

.about-watermark {
  position: absolute;
  top: -9rem;
  left: clamp(220px, 37vw, 820px);
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 600;
  text-transform: lowercase;
  color: var(--color-black);
  opacity: 0.06;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* ---- Faint lowercase title watermark, reused on every section below (except hero/footer).
   Negative z-index keeps it behind each section's normal-flow content without having to
   touch that content's own stacking — see .watermark-host, which gives the section the
   positioned + z-index:0 context a negative z-index child needs to stay contained. ---- */
.watermark-host {
  position: relative;
  overflow: hidden;
}

.section-watermark {
  position: absolute;
  z-index: -1;
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  pointer-events: none;
  white-space: nowrap;
}

.section-watermark--dark {
  color: var(--color-black);
  opacity: 0.06;
}

.section-watermark--light {
  color: var(--color-white);
  opacity: 0.08;
}

.section-watermark--pos-tl { top: -1.5rem; left: -1rem; }
.section-watermark--pos-tr { top: -2rem; right: -1rem; }
.section-watermark--pos-bl { bottom: -2rem; left: 3vw; }
.section-watermark--pos-br { bottom: -2.5rem; right: 2vw; }
.section-watermark--pos-mid-right { top: 45%; right: -1vw; transform: translateY(-50%); }

.about-copy-inner {
  position: relative;
  z-index: 1;
  max-width: clamp(340px, 35vw, 520px);
  margin-left: clamp(220px, 42vw, 820px);
  /* A scoped card backdrop (not a section-wide wash) so the text always stays
     legible regardless of where the product clutter in the photo lands at a
     given aspect ratio/viewport width. */
  background-color: rgba(247, 245, 241, 0.94);
  padding: 1.75rem 2.25rem;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -24px rgba(11, 11, 12, 0.25);
}

.about-copy-inner .section-title {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  margin: 0.75rem 0 1.5rem;
}

.about-copy-inner p {
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.about-popup-wrap {
  position: absolute;
  right: -5%;
  bottom: -950px;
  z-index: 2;
  width: clamp(180px, 24vw, 360px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-popup-wrap {
    bottom: 0;
  }
}

.about-popup-img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  /* Soft fade at the bottom so any clipping from the section's overflow:hidden
     always reads as an intentional vignette, never a hard mid-object cut. */
  mask-image: linear-gradient(to bottom, black 70%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 97%);
}

/* ---- Mobile & tablet/small-laptop (<1200px): the full-bleed background + shifted
   text + bleeding popup layout only has enough real width to avoid collisions on
   genuinely wide desktop screens. Below that (this covers common 1024px laptop
   viewports too), drop the photo background entirely and stack a normal inline
   product image below the copy instead, so text always stays legible. ---- */
@media (max-width: 1199.98px) {
  #about.vh-section {
    min-height: auto;
    display: block;
    padding: var(--space-xl) 0;
  }

  .about-bg-section {
    background-image: none;
  }

  .about-copy-inner {
    margin-left: 0;
    max-width: 60ch;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.about-page-img {
  border-radius: var(--radius-card);
}

.about-mobile-img {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  margin-top: var(--space-md);
  box-shadow: var(--shadow-lift);
}

/* ---- Faint gold spotlight that follows the cursor (desktop only, see app.js).
   Reused by Visi & Misi and Distribusi — any dark section can opt in via this class. ---- */
.gold-spotlight {
  position: relative;
  overflow: hidden;
}

.gold-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 360px at var(--mx, 50%) var(--my, 50%), rgba(184, 149, 74, 0.16), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.gold-spotlight.is-glow-active::before {
  opacity: 1;
}

.gold-spotlight > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gold-spotlight::before {
    transition: none;
  }
}

.visi-quote {
  border-left: 3px solid var(--color-gold);
  padding-left: 1.5rem;
  margin: 0 auto var(--space-xl);
  max-width: 62ch;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.5;
  color: var(--color-white);
  text-align: left;
}

.visi-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 245, 241, 0.6);
}

.read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-gold);
  padding-bottom: 2px;
}

.misi-grid {
  margin-top: var(--space-xl);
}

.misi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.misi-item .misi-badge {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-circle);
  border: 1.5px solid rgba(184, 149, 74, 0.5);
  background-color: rgba(184, 149, 74, 0.12);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.misi-item:hover .misi-badge {
  transform: translateY(-4px);
  background-color: rgba(184, 149, 74, 0.22);
}

.misi-item p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(247, 245, 241, 0.75);
  max-width: 26ch;
}

/* ---- Product ---- */
.product-filter .nav-link {
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-black);
  border: 1px solid var(--color-border);
  margin: 0 0.4rem 0.6rem 0;
}

.product-filter .nav-link.active {
  background: var(--gradient-gold);
  border-color: var(--color-gold-dim);
  color: var(--color-black);
}

.product-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  background-color: var(--color-white);
}

.product-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.product-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-offwhite);
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform var(--duration-base) var(--ease-out);
  will-change: transform;
}

.product-thumb:hover img {
  transform: scale(1.8);
}

.product-card .card-body {
  padding: 1rem 1.1rem;
}

.product-card .card-body .category-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dim);
  font-weight: 600;
}

.product-card .card-body h3 {
  font-size: 1.05rem;
  margin: 0.25rem 0 0;
  font-family: var(--font-body);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .product-thumb img {
    transition: none;
  }
}

/* ---- Distribusi ---- */
.stat-row {
  margin: var(--space-xl) 0;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  border-left: 1px solid rgba(247, 245, 241, 0.15);
}

.stat-item:first-child {
  border-left: none;
}

.stat-item .stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-gold);
  display: block;
  line-height: 1;
}

.stat-item .stat-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(247, 245, 241, 0.75);
}

.warehouse-carousel .carousel-item {
  padding: 1rem 0;
}

.warehouse-info {
  padding: 2rem 2.5rem 2rem 0;
}

.warehouse-info .eyebrow {
  color: var(--color-gold);
}

.warehouse-info h3 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  margin: 0.5rem 0 0.75rem;
  color: var(--color-white);
}

.warehouse-info address {
  color: rgba(247, 245, 241, 0.8);
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.warehouse-info .warehouse-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Slide counter ("01 / 03"), mirrors the hero carousel's counter pattern */
.warehouse-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
  font-family: var(--font-heading);
}

.warehouse-counter-current {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gold);
}

.warehouse-counter-divider {
  width: 20px;
  height: 1px;
  background-color: rgba(247, 245, 241, 0.3);
}

.warehouse-counter-total {
  font-size: 0.85rem;
  color: rgba(247, 245, 241, 0.6);
}

.warehouse-info .warehouse-nav button {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-circle);
  border: 1.5px solid rgba(247, 245, 241, 0.35);
  background: transparent;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.warehouse-info .warehouse-nav button:hover {
  border-color: var(--color-gold);
  background-color: rgba(184, 149, 74, 0.15);
}

.warehouse-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---- Partner ---- */
.partner-tabs .nav-link {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  margin: 0 0.35rem 0.6rem;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.partner-tabs .nav-link:hover {
  border-color: var(--color-gold);
  color: var(--color-black);
}

.partner-tabs .nav-link.active {
  background: var(--gradient-gold);
  border-color: var(--color-gold-dim);
  color: var(--color-black);
}

/* Switching tabs gives a soft fade + rise instead of an abrupt content swap */
#partner .tab-pane.fade {
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  transform: translateY(8px);
}

#partner .tab-pane.fade.show {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .partner-tabs .nav-link {
    transition: none;
  }

  #partner .tab-pane.fade {
    transition: none;
    transform: none;
  }
}

.partner-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 168px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.partner-chip:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) {
  .partner-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .partner-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.partner-grid .partner-chip {
  width: 100%;
}

/* ---- Artikel ---- */
.article-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  background-color: var(--color-white);
}

.article-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-card .card-body {
  padding: 1.25rem;
}

.article-card .article-date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.article-card h3 {
  font-size: 1.15rem;
  font-family: var(--font-body);
  font-weight: 700;
  margin: 0.5rem 0 0.6rem;
}

.article-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Featured spotlight: 1 large card + a column of small cards (Home teaser only) */
.artikel-spotlight {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-md);
}

.artikel-spotlight-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.article-card--featured img {
  aspect-ratio: 16 / 10;
}

.article-card--featured .card-body {
  padding: 1.75rem;
}

.article-card--featured h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.artikel-spotlight-side .article-card {
  display: flex;
  flex-direction: row;
}

.artikel-spotlight-side .article-card img {
  width: 40%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.artikel-spotlight-side .article-card .card-body {
  padding: 1rem 1.1rem;
}

.artikel-spotlight-side .article-card h3 {
  font-size: 1rem;
  margin: 0.35rem 0 0.4rem;
}

.artikel-spotlight-side .article-card p {
  display: -webkit-box;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 991.98px) {
  .artikel-spotlight {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .artikel-spotlight-side .article-card {
    flex-direction: column;
  }

  .artikel-spotlight-side .article-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ---- Lokasi ---- */
.lokasi-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2rem;
}

/* Stretch to match its sibling column only when it's alone in its own column
   (e.g. the homepage's side-by-side card/map) — not when stacked with another
   .lokasi-map in the same column (e.g. the Kontak Kami page), where both would
   otherwise fight over 100% of the shared column height. */
.lokasi-card:only-child {
  height: 100%;
}

.lokasi-card .lokasi-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.lokasi-card .lokasi-item i {
  color: var(--color-gold);
  font-size: 1.1rem;
  margin-top: 0.15rem;
}

.lokasi-map {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 360px;
}

.lokasi-map:only-child {
  height: 100%;
  min-height: 360px;
}

.lokasi-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (min-width: 992px) {
  .about-media .img-float-2 {
    display: block;
  }
}

/* ---- Mobile responsiveness refinements ---- */
@media (max-width: 767.98px) {
  section {
    padding: var(--space-xl) 0;
  }

  .about-media .img-main {
    width: 100%;
    height: 260px;
  }

  .about-media .img-float {
    display: none;
  }

  .warehouse-info {
    padding: 1.5rem 0.5rem 1rem;
    text-align: center;
  }

  .warehouse-info .warehouse-nav {
    justify-content: center;
  }

  .warehouse-photo img {
    height: 220px;
  }

  .stat-item {
    border-left: none;
    border-top: 1px solid rgba(247, 245, 241, 0.15);
    padding: 1.25rem 0.5rem;
  }

  .stat-item:first-child {
    border-top: none;
  }
}