/* =============================================
   PT Aroma Kopi Toraja
   Editorial Coffee Brand Design
   ============================================= */

/* --- Design Tokens --- */
:root {
  --bg: #FAF7F4;
  --bg-alt: #EFEAE4;
  --surface: #fff;
  --text: #2C2220;
  --text-muted: #7D736D;
  --accent: #C45D3E;
  --accent-dark: #A84B30;
  --dark: #1C1210;
  --dark-surface: #2A1F1B;
  --brown: #6B3A2A;
  --sage: #7A8C6E;
  --border: rgba(44, 34, 32, 0.1);
  --border-strong: rgba(44, 34, 32, 0.18);
  --shadow: 0 4px 16px rgba(28, 18, 16, 0.07);
  --r: 10px;
  --r-lg: 14px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* anchors clear the sticky header */
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100%; height: auto }
h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
}

/* --- Page transitions (progressive enhancement, Chromium only) --- */
@view-transition { navigation: auto }
::view-transition-old(root) { animation-duration: .2s }
::view-transition-new(root) { animation-duration: .26s }

/* --- Reading progress bar (phones with scroll-driven animation support) --- */
@supports (animation-timeline: scroll()) {
  @media (max-width: 720px) {
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      z-index: 200;
      pointer-events: none;
      animation: progress-grow linear both;
      animation-timeline: scroll();
    }
  }
  @keyframes progress-grow { to { transform: scaleX(1) } }
}

/* --- Layout --- */
.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0 }
.icon-lg { width: 32px; height: 32px }
.icon-xl { width: 42px; height: 42px }

/* --- Retired decorations --- */
.toraja-corner::before,
.section.pattern-soft::before,
.intro-copy::after { display: none !important }

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: rgba(250, 247, 244, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.site-header::before,
.site-header::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  background: url('../img/biji-kopi.png') center / contain no-repeat;

  background-image: image-set(url('../img/biji-kopi.webp') type('image/webp'), url('../img/biji-kopi.png') type('image/png'));
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.site-header::before {
  left: -20px;
  transform: translateY(-50%) scaleX(-1);
}
.site-header::after {
  right: -20px;
}
.site-header .container { position: relative; z-index: 1 }
@media (max-width: 1280px) {
  .site-header::before,
  .site-header::after { width: 110px; height: 110px; opacity: 0.8 }
  .site-header::before { left: -24px }
  .site-header::after { right: -24px }
}
@media (max-width: 1060px) {
  .site-header::before,
  .site-header::after { display: none }
}
.nav-wrap {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.brand img { width: 52px; height: auto }
.brand-text { display: flex; flex-direction: column; line-height: 1.15 }
.brand-title {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}
.brand-subtitle {
  font-family: Inter, sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 2px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 6px;
  transition: color .2s, background .2s;
  white-space: nowrap;
  position: relative;
}
.main-nav a:hover { color: var(--text); background: var(--bg-alt) }
.main-nav a.active { color: var(--text); font-weight: 600 }
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.lang-btn {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-btn.active { background: var(--dark); color: #fff }
.mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.mobile-toggle span {
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transition: .2s;
}
.mobile-toggle.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg) }
.mobile-toggle.active span:nth-child(2) { opacity: 0 }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-secondary {
  background: var(--dark);
  color: #fff;
}
.btn-secondary:hover { background: var(--dark-surface) }
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-light {
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  border-color: rgba(255, 255, 255, .4);
}
.btn-light:hover { background: #fff }

/* --- Hero (Homepage) --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 92% 45%, rgba(107, 58, 42, .22), transparent 58%), var(--dark);
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/toraja-hero-pattern.svg') center / 240px 240px repeat;
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .18) 30%, rgba(0, 0, 0, .1) 60%, #000);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .18) 30%, rgba(0, 0, 0, .1) 60%, #000);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1 }
.hero-grid {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}
.hero h1, .page-hero h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.06;
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
.hero p {
  font-size: 16px;
  max-width: 520px;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 28px;
  line-height: 1.75;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap }
.hero .btn-light {
  color: var(--dark);
  border-color: rgba(255, 255, 255, .35);
}
.hero .btn-light:hover { background: #fff; color: var(--dark) }
.hero-media { position: relative }
.hero-image-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}
.hero-image-card img {
  height: 480px;
  width: 100%;
  object-fit: cover;
}
.hero-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(28, 18, 16, .3));
  pointer-events: none;
}
.hero-stat {
  position: absolute;
  left: -20px;
  bottom: 28px;
  background: var(--bg);
  color: var(--text);
  border-radius: var(--r);
  padding: 14px 18px;
  border: 1px solid var(--border);
}
.hero-stat strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  line-height: 1;
}
.hero-stat span {
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- Page Hero (Subpages) --- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(28, 18, 16, .88), rgba(28, 18, 16, .92)),
    url('../img/coffee-beans.jpg') center / cover no-repeat;
  background-image:
    linear-gradient(rgba(28, 18, 16, .88), rgba(28, 18, 16, .92)),
    image-set(url('../img/coffee-beans.webp') type('image/webp'), url('../img/coffee-beans.jpg') type('image/jpeg'));
  color: #fff;
}
.page-hero .container { position: relative; padding: 80px 0 }
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 16px;
}
.breadcrumb a:hover { color: var(--accent) }
.page-hero p {
  max-width: 600px;
  color: rgba(255, 255, 255, .5);
  font-size: 17px;
}
/* Toraja motifs in the hero corners on phones */
@media (max-width: 720px) {
  .hero::after,
  .page-hero::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 300px;
    background: url('../img/tumbuhan-kopi.png') center / contain no-repeat;

    background-image: image-set(url('../img/tumbuhan-kopi.webp') type('image/webp'), url('../img/tumbuhan-kopi.png') type('image/png'));
    pointer-events: none;
    z-index: -1;
  }
  .hero::after {
    top: -36px;
    right: -50px;
    opacity: .26;
  }
  .page-hero::after {
    right: -52px;
    bottom: -72px;
    opacity: .3;
  }
}

/* --- Sections --- */
.section { padding: 96px 0; position: relative }
.section.pattern-soft { background: var(--bg-alt) }

/* --- Tumbuhan Kopi Decoration (Products preview / accent sections) --- */
.has-tumbuhan-deco { position: relative; overflow: hidden }
.has-tumbuhan-deco::before,
.has-tumbuhan-deco::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 18vw, 280px);
  height: clamp(440px, 44vw, 700px);
  background: url('../img/tumbuhan-kopi.png') center / contain no-repeat;

  background-image: image-set(url('../img/tumbuhan-kopi.webp') type('image/webp'), url('../img/tumbuhan-kopi.png') type('image/png'));
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.has-tumbuhan-deco::before {
  left: -60px;
  transform: translateY(-50%) scaleX(-1);
}
.has-tumbuhan-deco::after {
  right: -60px;
}
.has-tumbuhan-deco .container { position: relative; z-index: 1 }
@media (max-width: 1200px) {
  .has-tumbuhan-deco::before,
  .has-tumbuhan-deco::after {
    width: clamp(140px, 16vw, 200px);
    height: clamp(340px, 40vw, 480px);
  }
  .has-tumbuhan-deco::before { left: -80px }
  .has-tumbuhan-deco::after { right: -80px }
}
@media (max-width: 720px) {
  /* One coffee-plant motif, tucked into the section's top-right corner */
  .has-tumbuhan-deco::before { display: none }
  .has-tumbuhan-deco::after {
    top: -50px;
    right: -46px;
    width: 150px;
    height: 320px;
    transform: none;
    opacity: .85;
  }
}

/* --- Tongkonan Decoration (About section) --- */
.has-tongkonan-deco { position: relative; overflow: hidden }
.tongkonan-deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 340px);
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: saturate(0.85);
}
.tongkonan-deco--left {
  left: -40px;
  transform: translateY(-50%) scaleX(-1); /* mirror: bangunan depan menghadap ke kanan */
}
.tongkonan-deco--right {
  right: -40px;
  /* default orientation: bangunan depan menghadap ke kiri */
}
.has-tongkonan-deco .container { position: relative; z-index: 1 }

@media (max-width: 1060px) {
  .tongkonan-deco { width: clamp(140px, 26vw, 220px); opacity: 0.10 }
  .tongkonan-deco--left { left: -60px }
  .tongkonan-deco--right { right: -60px }
}
@media (max-width: 720px) {
  /* One faint tongkonan silhouette anchored to the section's bottom-left corner */
  .tongkonan-deco {
    top: auto;
    bottom: -16px;
    width: 132px;
    opacity: .09;
    transform: none;
  }
  .tongkonan-deco--left {
    left: -30px;
    transform: scaleX(-1);
  }
  .tongkonan-deco--right { display: none }
}
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section-kicker {
  font-family: Inter, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px;
}
.section-title {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0;
}
.section-lead {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 16px;
}

/* --- Grid --- */
.grid { display: grid; gap: 20px }
.grid-2 { grid-template-columns: repeat(2, 1fr) }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-4 { grid-template-columns: repeat(4, 1fr) }

/* --- Cards --- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .3s;
}
.card:hover { border-color: var(--border-strong) }
.card-pad { padding: 24px }
.media-card img { width: 100%; height: 260px; object-fit: cover }
.media-card .card-pad { min-height: 200px }
.media-card--roasted img { object-position: center }
.card h3 { font-size: 20px; color: var(--text); margin: 0 0 8px }
.card p { color: var(--text-muted); margin: 0 0 14px; font-size: 15px }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: var(--accent);
}
.link-arrow:hover svg { transform: translateX(3px) }
.link-arrow svg { transition: transform .2s }
.tag {
  display: inline-flex;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--brown);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
  font-family: Inter, sans-serif;
}

/* --- Intro Layout --- */
.intro-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 48px;
  align-items: center;
}
.intro-copy {
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.intro-copy .btn { margin-top: 18px }

/* About overview actions: two buttons share one row and wrap when they no longer fit */
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.intro-actions .btn { margin-top: 0 }

/* About overview: wider visual column, photo fills its frame (no letterbox bands) */
.about-overview .intro-layout { grid-template-columns: 1fr 1.2fr }
.intro-layout .product-photo--contain {
  height: auto;
  aspect-ratio: 1600 / 790; /* matches kebun-toraja-timemark.jpg */
  background: transparent;
}
.intro-layout .product-photo--contain img { object-fit: cover }
/* About overview: right column stacks the main photo above the nursery photo duo */
.about-overview__media { display: grid; gap: 14px }
.about-overview__media .image-stack--duo { margin-top: 0 }
.image-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.image-stack img {
  height: 260px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r);
}
.image-stack img:nth-child(2) { margin-top: 36px }

/* 4-foto variant (2x2 staggered) */
.image-stack--quad img { height: 200px }
.image-stack--quad img:nth-child(2) { margin-top: 36px }
.image-stack--quad img:nth-child(3) { margin-top: -22px }
.image-stack--quad img:nth-child(4) { margin-top: 14px }

/* 2-foto variant (About: Company Identity) */
.image-stack--duo { margin-top: 26px }
.image-stack--duo img { height: 300px }
.image-stack--duo img:nth-child(2) { margin-top: 0 }

/* 2-foto variant, taller (Quality: Specifications photos, portrait shots) */
.image-stack--tall img { height: 560px }

/* --- Quality: Product Specifications (card + photo pair per step) ---
   Each step keeps its explanation and its photo in one <article> so the pair can travel
   together as a single swipeable slide on phones. On desktop the three articles sit in a
   normal 3-column grid, and `subgrid` keeps the card row and the photo row aligned across
   columns (so all three cards stay the same height). */
.specs-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0 20px;
}
.spec-slide {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
}
.spec-photo { display: block; min-width: 0 }
/* aspect-ratio instead of a fixed height so the 3:4 photos are never cropped */
.spec-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r);
}

/* Quality specs section: let the whole block run a little wider on large screens so the
   three photos read bigger. Heading, cards and photos all widen together, so the section
   keeps its own internal alignment. Scoped to this section, and gated above every
   max-width breakpoint so phones/tablets keep the standard container padding.
   The -64px keeps at least a 32px gutter at every supported width. */
@media (min-width: 1320px) {
  .specs-section .container { width: min(1320px, calc(100% - 64px)) }
}

/* --- Dark Section --- */
.dark-section {
  isolation: isolate;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}
.dark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/toraja-hero-pattern.svg') right center / 240px 240px repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000);
  mask-image: linear-gradient(90deg, transparent 25%, #000);
  opacity: .2;
  pointer-events: none;
}
.dark-section .section-title { color: #fff }
.dark-section .section-lead,
.dark-section .card p { color: rgba(255, 255, 255, .55) }
.dark-card {
  background: var(--dark-surface);
  border-color: rgba(255, 255, 255, .07);
}
.dark-card:hover { border-color: rgba(255, 255, 255, .14) }
.dark-card h3 { color: #fff }
.icon-box {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  background: rgba(196, 93, 62, .1);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.dark-card .icon-box { background: rgba(196, 93, 62, .14) }

/* --- Farm-to-Cup Story --- */
.story-section {
  background: var(--dark);
  padding: 68px 0;
}
.story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: clamp(450px, 42vw, 520px);
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #174626;
  box-shadow: 0 24px 60px rgba(8, 5, 4, .22);
}
.story-panel__media {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #102d19;
}
.story-panel__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
}
.story-panel__content {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(36px, 5vw, 60px);
}
.story-panel__content::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 210px;
  height: 480px;
  right: -34px;
  bottom: -190px;
  background: url('../img/tumbuhan-kopi.png') center / contain no-repeat;

  background-image: image-set(url('../img/tumbuhan-kopi.webp') type('image/webp'), url('../img/tumbuhan-kopi.png') type('image/png'));
  transform: rotate(24deg);
  opacity: .2;
}
.story-panel__kicker {
  margin: 0 0 15px;
  color: #e59a5f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-panel h2 {
  max-width: 590px;
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.story-panel__lead {
  max-width: 590px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.75;
}

/* --- Process Timeline --- */
body[data-page="home"] .section.pattern-soft:last-child {
  overflow: hidden;
  isolation: isolate;
}
body[data-page="home"] .section.pattern-soft:last-child::after {
  content: '';
  position: absolute;
  top: -60px;
  right: max(24px, calc((100vw - 1240px) / 2));
  width: 160px;
  height: 360px;
  background: url('../img/tumbuhan-kopi.png') center / contain no-repeat;

  background-image: image-set(url('../img/tumbuhan-kopi.webp') type('image/webp'), url('../img/tumbuhan-kopi.png') type('image/png'));
  transform: rotate(-24deg);
  opacity: .8;
  z-index: -1;
  pointer-events: none;
}
.process-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  counter-reset: step;
}
.step-card {
  padding: 20px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
  font-family: Inter, sans-serif;
}
.step-card h3 { font-size: 16px; margin-bottom: 6px; color: var(--text) }
.step-card p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6 }
.step-card.with-photo { padding: 0 }
.step-card.with-photo::before { display: none !important; content: none !important }
.step-photo { display: block; width: 100%; height: 150px; object-fit: cover }
.step-body { padding: 18px 20px 22px }
.step-number {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
  font-family: Inter, sans-serif;
}
.step-body h3 { font-size: 16px; margin: 0 0 6px; color: var(--text) }
.step-body p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6 }
.process-hint { font-size: 14px; color: var(--text-muted); margin: 0 }

/* --- Swipe affordance for the mobile process carousel --- */
.swipe-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: opacity .3s;
}
.swipe-hint .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  animation: swipe-nudge 1.4s ease-in-out infinite;
}
.swipe-hint.is-hidden { opacity: 0 }
@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0) }
  50% { transform: translateX(4px) }
}

/* --- Product Page --- */
.catalog-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}
.catalog-visual { display: grid; gap: 16px }
.product-photo {
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.product-photo.large { height: 500px }
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-photo--contain {
  background: #dfe0d2;
}
.product-photo--contain img {
  object-fit: contain;
  object-position: left center;
}
.table-stack { display: grid; gap: 16px }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
}
.price-table th,
.price-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.price-table th {
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: Inter, sans-serif;
  font-weight: 700;
}
.price-table tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
}
.price-table tbody tr {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}
.price-table tbody td { border-bottom: 0; padding: 0 }

/* --- Catalog Packshots --- */
.pack-showcase {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
/* Slightly larger tiles on wide screens: let the row extend a little past the text column */
@media (min-width: 1320px) {
  .pack-showcase { margin-inline: -32px }
}
/* Two-up packs strand the odd 5th tile at the far left — centre it on the full row instead */
@media (min-width: 361px) and (max-width: 1060px) {
  .pack-showcase > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}
/* Tighter gap on phones, so the centred tile matches its siblings exactly */
@media (min-width: 361px) and (max-width: 720px) {
  .pack-showcase > :last-child:nth-child(odd) { width: calc(50% - 6px) }
}
.pack-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .3s;
}
.pack-tile:hover { border-color: var(--border-strong) }
.pack-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pack-tile figcaption {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  text-align: center;
}

/* --- Bean Profile --- */
.bean-profile-card { overflow: hidden; isolation: isolate }
.bean-profile-card::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 26px;
  width: clamp(120px, 14vw, 200px);
  height: 260px;
  background: url('../img/biji-kopi.png') center / contain no-repeat;

  background-image: image-set(url('../img/biji-kopi.webp') type('image/webp'), url('../img/biji-kopi.png') type('image/png'));
  filter: brightness(.65) sepia(.3);
  opacity: .23;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: -1;
}
.bean-profile-card:nth-child(2)::after {
  transform: rotate(16deg) scaleX(-1);
}
.bean-profile-card .bean-photo {
  height: 220px;
  margin: 0 -24px 20px;
  overflow: hidden;
}
.bean-profile-card .bean-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bean-profile-card .icon-box { margin-top: 2px }
/* Sub-line under a card title: keeps the gap to the list below it tight */
.bean-profile-card .card-note { margin: 0 }
.flavour-card .flavour-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r);
  margin-bottom: 16px;
}
.flavour-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.flavour-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
}
.flavour-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- About: Identity --- */
.identity-grid { grid-template-columns: repeat(2, 1fr) }
.identity-item {
  padding: 20px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.identity-label {
  font-family: Inter, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.identity-value { font-weight: 600; color: var(--text) }

/* --- About: Mission --- */
.mission-list { display: grid; gap: 12px }
.mission-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 16px;
  border-radius: var(--r);
  color: #fff;
}
.mission-item span:last-child {
  display: block;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
  line-height: 1.6;
  font-size: 15px;
}
.mission-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  font-family: Inter, sans-serif;
}

/* --- Gallery --- */
.gallery-grid { columns: 3 280px; column-gap: 14px }
.gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.gallery-item img { width: 100%; object-fit: cover }
.gallery-caption {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Inter, sans-serif;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
}
.contact-list { display: grid; gap: 12px }
.contact-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.contact-row .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--bg-alt);
  color: var(--brown);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-row h3 {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--text);
}
.contact-row p { margin: 0; color: var(--text-muted); font-size: 14px }

/* --- Forms --- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field { display: grid; gap: 5px }
.field.full { grid-column: 1 / -1 }
.field label {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  font-family: Inter, sans-serif;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: .2s;
}
.field textarea { min-height: 120px; resize: vertical }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(196, 93, 62, .08);
}

/* --- Map --- */
.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}
.map-open {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 600;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: var(--accent);
  border-top: 1px solid var(--border);
  transition: .2s;
}
.map-open:hover { background: var(--bg-alt) }

/* --- Visit card (contact location visual) --- */
.visit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
/* The photo fills whatever height the CTA column next to it ends up with */
.visit-card picture {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
}
.visit-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.visit-card__body {
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border);
}
.visit-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--brown);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.visit-card__chip .icon { width: 15px; height: 15px }
.visit-card__body p { margin: 12px 0 0; color: var(--text-muted); font-size: 14px }

/* --- Footer --- */
.site-footer {
  position: relative;
  padding-top: 24px;
  background: radial-gradient(ellipse at right top, rgba(107, 58, 42, .18), transparent 65%), var(--dark);
  color: #fff;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: url('../img/toraja-border.svg') center / 144px 24px repeat-x;
  opacity: .7;
  pointer-events: none;
}
.footer-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr .7fr .8fr 1fr;
  gap: 32px;
  padding: 60px 0;
}
.footer-brand img {
  width: 80px;
  background: var(--surface);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 14px;
}
.footer-brand p {
  color: rgba(255, 255, 255, .5);
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
.footer-col h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--accent);
}
.footer-links { display: grid; gap: 8px }
.footer-links a,
.footer-contact li {
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  transition: color .2s;
}
.footer-links a:hover { color: #fff }
.footer-contact {
  list-style: none;
  display: grid;
  gap: 10px;
}
.footer-contact li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.socials { display: flex; gap: 8px; margin-top: 14px }
.socials a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .5);
  transition: .2s;
}
.socials a:hover { background: var(--accent); color: #fff }
.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 18px 0;
  color: rgba(255, 255, 255, .35);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* --- WhatsApp Float --- */
.whatsapp-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .25);
  transition: transform .2s, opacity .2s;
}
.whatsapp-float:hover { transform: scale(1.06) }
/* Hidden while the footer is on screen so it never covers links or contact info */
.whatsapp-float.float-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* --- Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================
   Responsive
   ================================== */

@media (max-width: 1060px) {
  .site-header { overflow: visible }
  .nav-wrap { height: 64px }
  .nav-actions { gap: 8px }
  .lang-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
  }
  .mobile-toggle {
    display: flex;
    width: 44px;
    height: 44px;
  }
  .main-nav {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    top: 72px;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(28, 18, 16, .18);
    padding: 12px 12px max(16px, env(safe-area-inset-bottom));
    display: grid;
    gap: 4px;
    justify-content: stretch;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 120;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 10px;
    white-space: normal;
  }
  .main-nav a.active::after { display: none }
  .main-nav a.active { background: var(--bg-alt) }
  .nav-actions .btn { display: none }
  .hero-grid,
  .intro-layout,
  .contact-grid,
  .catalog-layout { grid-template-columns: 1fr }
  .about-overview .intro-layout { grid-template-columns: 1fr }
  .hero-grid { min-height: auto; padding: 40px 0 }
  .hero::before {
    background-size: 190px 190px;
    opacity: .22;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .12) 45%, #000);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .12) 45%, #000);
  }
  .hero-image-card img { height: 380px }
  .hero-stat { left: 16px }
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, 1fr) }
  .process-line { grid-template-columns: repeat(2, 1fr) }
  .footer-main { grid-template-columns: 1fr 1fr }
  .section-header { flex-direction: column; align-items: flex-start }
  .identity-grid { grid-template-columns: 1fr }
  .pack-showcase { grid-template-columns: repeat(2, 1fr) }
  .product-photo.large { height: 400px }
  .story-panel { height: 480px; min-height: 0 }
  .story-panel__media img { min-height: 0 }
  /* Contact page already offers WhatsApp everywhere — keep the form area clear */
  body[data-page="contact"] .whatsapp-float { display: none }
}

@media (max-width: 860px) {
  .story-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .story-panel__media img { height: 340px }
  .story-panel__content { padding: 36px 30px 42px }
}

@media (max-width: 720px) {
  .dark-section::before { background-size: 190px 190px; opacity: .12 }
  .story-panel__content::before { width: 160px; height: 370px; bottom: -160px; opacity: .14 }
  .bean-profile-card::after { top: 20px; right: 16px; width: 120px; height: 200px; opacity: .16 }
  body[data-page="home"] .section.pattern-soft:last-child::after { width: 110px; height: 260px; right: -28px; opacity: .5 }
  .container { width: min(100% - 32px, 1200px) }
  .brand { min-height: 44px }
  .brand img { width: 44px }
  .brand-subtitle { display: none }
  .hero h1, .page-hero h1 { font-size: clamp(28px, 8.6vw, 34px) }
  .hero p, .page-hero p { font-size: 15px }
  .hero-grid { padding: 44px 0 }
  .hero p { margin-bottom: 22px }
  .hero-actions { flex-direction: row; flex-wrap: wrap }
  .btn { padding: 13px 20px; min-height: 48px }
  .form-card .btn { width: 100% }
  .hero-image-card img { height: 250px }
  /* Edge-to-edge hero photo for a more immersive phone layout */
  .hero-media { margin-inline: -16px }
  .hero-image-card { border-radius: 0 }
  .hero-stat {
    position: static;
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
  }
  .hero-stat strong { font-size: 24px }
  .hero-stat span { font-size: 13px }
  .section { padding: 56px 0 }
  .section-header { margin-bottom: 28px }
  .grid-2,
  .grid-3 { grid-template-columns: 1fr }
  /* Icon/spec card rows sit 2-up like native app tiles */
  .grid-4 { grid-template-columns: repeat(2, 1fr) }
  .grid-4 .card-pad { padding: 18px 16px }
  .grid-4 .card h3 { font-size: 16px }
  .grid-4 .card p { font-size: 13px }
  .grid-4 .icon-box { width: 40px; height: 40px; margin-bottom: 12px }
  /* Process timeline becomes a swipeable snap carousel */
  .process-line {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .process-line::-webkit-scrollbar { display: none }
  .process-line > * { flex: 0 0 68%; scroll-snap-align: start }
  /* Specifications: one slide per step — the explanation and its photo move together */
  .specs-carousel {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .specs-carousel::-webkit-scrollbar { display: none }
  .spec-slide {
    flex: 0 0 80%;
    grid-template-rows: auto auto;
    align-content: start;
    scroll-snap-align: start;
  }
  .step-card p, .step-body p { font-size: 13px }
  .step-body { padding: 16px 18px 20px }
  .image-stack { grid-template-columns: 1fr }
  .image-stack img:nth-child(2) { margin-top: 0 }
  .image-stack--quad img,
  .image-stack--quad img:nth-child(2),
  .image-stack--quad img:nth-child(3),
  .image-stack--quad img:nth-child(4) { margin-top: 0; height: 220px }
  .image-stack--duo img { height: 220px }
  .image-stack--tall img { height: 340px }
  .image-stack--trio img { height: 340px; aspect-ratio: auto }
  .intro-copy { padding: 22px }
  .media-card img { height: 200px }
  /* Gallery: two-tile masonry keeps the page short */
  .gallery-grid { columns: 2 150px; column-gap: 10px }
  .gallery-item { margin-bottom: 10px }
  .gallery-caption { padding: 10px 12px; font-size: 12px }
  /* Identity reads as a compact spec list */
  .identity-grid { gap: 10px }
  .identity-item { padding: 14px 16px }
  .identity-label { font-size: 10px; margin-bottom: 2px }
  .identity-value { font-size: 14px }
  .footer-main { grid-template-columns: 1fr; padding: 44px 0 32px }
  .footer-col h3 { margin-bottom: 10px }
  .footer-links { gap: 2px }
  .footer-links a { display: flex; align-items: center; min-height: 44px }
  .footer-bottom { flex-direction: column }
  .form-grid { grid-template-columns: 1fr }
  .field.full { grid-column: auto }
  /* 16px inputs stop iOS Safari from zooming on focus */
  .field input,
  .field textarea,
  .field select { font-size: 16px }
  .field input,
  .field select { min-height: 48px }
  /* Comfortable touch targets for inline links */
  .link-arrow { min-height: 44px; padding-block: 8px }
  .socials { gap: 10px }
  .socials a { width: 44px; height: 44px }
  .breadcrumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px }
  .page-hero .container { padding: 48px 0 }
  .breadcrumb { font-size: 12px }
  /* Labels sit at 11-12px on desktop; phones need the small-text floor of 13px */
  .eyebrow,
  .section-kicker,
  .story-panel__kicker,
  .breadcrumb { font-size: 13px }
  .price-table th,
  .price-table td { padding: 12px; font-size: 14px }
  .contact-row { padding: 14px }
  .map-frame iframe { height: 280px }
  .visit-card picture { min-height: 220px }
  .visit-card__body { padding: 16px }
  .product-photo,
  .product-photo.large { height: 260px }
  .about-overview .product-photo--contain { aspect-ratio: auto; height: 240px }
  /* Pack catalogue stays two-up on phones; an odd last tile centres (see the rule below) */
  .pack-showcase { gap: 12px; margin-top: 28px }
  .pack-tile figcaption { padding: 10px 10px 12px; font-size: 13px }
  /* Small-text floor: no label copy below 13px on phones */
  .tag,
  .step-number,
  .visit-card__chip { font-size: 13px }
  .flavour-list li { font-size: 13px }
  .bean-profile-card .bean-photo { height: 180px }
  .step-photo { height: 140px }
  .story-section { padding: 44px 0 }
  .story-panel { grid-template-columns: 1fr; height: auto; min-height: 0; border-radius: 16px }
  .story-panel__media img { height: 280px; min-height: 0; object-position: center 46% }
  .story-panel__content { padding: 28px 22px 34px }
  .story-panel h2 { font-size: 28px }
  .story-panel__lead { margin-top: 16px; font-size: 15px }
}

/* Swipe hint shows only where a carousel is actually active */
@media (min-width: 361px) and (max-width: 720px) {
  .swipe-hint { display: flex }
}
/* The specifications carousel stays swipeable on the smallest phones, so its hint does too */
@media (max-width: 720px) {
  .specs-carousel + .swipe-hint { display: flex }
}

/* Footer motifs on phones: keep the long dark footer from feeling empty */
@media (max-width: 720px) {
  .site-footer {
    isolation: isolate;
    overflow: hidden; /* clip the corner motifs so they never widen the page */
  }
  .site-footer::after {
    content: '';
    position: absolute;
    right: -46px;
    bottom: 108px;
    width: 150px;
    height: 330px;
    background: url('../img/tumbuhan-kopi.png') center / contain no-repeat;

    background-image: image-set(url('../img/tumbuhan-kopi.webp') type('image/webp'), url('../img/tumbuhan-kopi.png') type('image/png'));
    opacity: .17;
    pointer-events: none;
    z-index: -1;
  }
  .footer-bottom::before {
    content: '';
    position: absolute;
    left: -22px;
    bottom: 2px;
    width: 152px;
    height: 108px;
    background: url('../img/tongkonan.png') center / contain no-repeat;

    background-image: image-set(url('../img/tongkonan.webp') type('image/webp'), url('../img/tongkonan.png') type('image/png'));
    opacity: .14;
    pointer-events: none;
    z-index: -1;
  }
}

@media (max-width: 480px) {
  .container { width: min(100% - 24px, 1200px) }
  .brand { min-width: 44px; min-height: 44px; gap: 8px }
  .brand img { width: 40px }
  .brand-title { font-size: 13px }
  .nav-wrap { gap: 10px }
  .section { padding: 48px 0 }
  .section-header { gap: 18px; margin-bottom: 24px }
  .process-line { margin-inline: -12px; padding-inline: 12px }
  .specs-carousel { margin-inline: -12px; padding-inline: 12px }
  .hero-media { margin-inline: -12px }
  /* Trim the hero so more of the next section peeks into the first screen */
  .hero-image-card img { height: 220px }
  .hero-grid { padding: 32px 0 }
  .card p { font-size: 14px }
  .card-pad { padding: 20px }
  .media-card .card-pad { min-height: 0 }
  .footer-main { gap: 28px; padding: 40px 0 32px }
  .form-card { padding: 22px 18px }
  .whatsapp-float {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 360px) {
  .brand-text { display: none }
  .whatsapp-float { display: none }
  /* Very small phones: everything reads best as a single column */
  .pack-showcase { grid-template-columns: 1fr; margin-top: 24px }
  .grid-4 { grid-template-columns: 1fr }
  .gallery-grid { columns: 1 }
  .process-line {
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .process-line > * { flex: none; scroll-snap-align: none }
  /* The specifications carousel deliberately stays swipeable this small — the slide is
     still ~250px wide at 320px, and stacking it here would lose the swipe pairing. */
  .hero-image-card img { height: 210px }
  .hero-actions .btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important }
}

.footer-bottom { flex-wrap: wrap; }
.footer-bottom .geo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Catalog Dialog (About: Company Overview) ---
   A native <dialog> so Escape, focus trapping and the top layer come from the
   browser. The panel fills the dialog, which keeps backdrop clicks landing on
   the <dialog> itself (close) while clicks on content hit a child (no close). */
.catalog-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
.catalog-dialog::backdrop { background: rgba(28, 18, 16, .66) }
.catalog-dialog[open] {
  display: flex;
  flex-direction: column;
}
.catalog-dialog__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.catalog-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.catalog-dialog__title {
  font-size: 20px;
  font-weight: 400;
  min-width: 0;
}
/* Language switcher lives here too: the modal covers the page header switcher */
.catalog-dialog__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.catalog-dialog__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: .2s;
}
.catalog-dialog__close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.catalog-dialog__body {
  display: grid;
  gap: 28px;
  padding: 24px;
  overflow-y: auto;
  /* Scrolling the sheets must not scroll the page behind the dialog */
  overscroll-behavior: contain;
}
.catalog-sheet {
  display: grid;
  gap: 12px;
  margin: 0;
}
.catalog-sheet img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.catalog-sheet__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.catalog-sheet__link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.catalog-sheet__link:hover { color: var(--accent-dark) }
.catalog-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.catalog-sheet__download {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .catalog-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .catalog-dialog__head { padding: 14px 16px }
  .catalog-dialog__title { font-size: 17px }
  .catalog-dialog__close { width: 44px; height: 44px }
  .catalog-dialog__body { gap: 22px; padding: 16px }
  .catalog-sheet { gap: 10px }
  .catalog-sheet__caption { font-size: 12px }
}

@media (max-width: 360px) {
  .intro-actions .btn { width: 100% }
  /* The head wraps rather than dropping the language switcher: ID/EN must stay
     reachable while the catalog is open, even on the narrowest phones. */
  .catalog-dialog__head { flex-wrap: wrap; gap: 10px }
  .catalog-dialog__title { flex: 1 1 100%; font-size: 16px }
}