:root{
    --bg: #F4EFE6;
    --bg-2: #EAE2D2;
    --ink: #1C150E;
    --ink-soft: #3A2E22;
    --muted: #6B5B48;
    --line: #D9CEB8;
    --accent: #3E5B3A;
    --brand: #9F3013;          /* NEW brand red */
    --brand-soft: #B84A2B;
    --cherry: #8A2A1E;
    --gold: #B88A3E;

    --serif: "Fraunces", "Times New Roman", serif;
    --sans: "Inter Tight", -apple-system, sans-serif;
    --mono: "JetBrains Mono", monospace;

    --radius: 2px;
    --maxw: 1280px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    font-size:16px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    opacity:.12;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode:multiply;
  }

  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

  .container{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  @media(max-width:768px){.container{padding:0 20px}}

  /* ===== NAV ===== */
/* ===== NAV ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(244, 239, 230, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* logo kiri, menu tetap tengah */
.nav-inner {
  position: relative;
  width: 100%;
  min-height: 74px;
  padding: 12px 36px;
  display: flex;
  align-items: center;
}

/* LOGO: pindah kiri */
.logo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0;
}

.logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.logo-sub {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .24em;
  color: var(--brand);
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}

/* MENU: tetap center */


.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 4px 0;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--brand);
}

.nav-cta {
  background: var(--ink);
  color: var(--bg);
  padding: 11px 18px !important;
  font-size: 11.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-cta:hover {
  background: var(--brand);
  color: var(--bg);
}

.burger {
  display: none;
  position: relative;
  z-index: 4;
  margin-left: auto;
  font-size: 24px;
  line-height: 1;
}

/* ===== TABLET ===== */
@media (max-width: 1200px) {
  .nav-inner {
    padding: 12px 24px;
  }

  .logo-name {
    font-size: 21px;
  }

  .logo-sub {
    font-size: 7px;
    letter-spacing: .2em;
  }

  .nav-links {
    gap: 22px;
  }

  .nav-links a {
    font-size: 11.5px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 980px) {
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
  }

  body {
    padding-top: 64px;
  }

  .nav-inner {
    min-height: 64px;
    padding: 10px 20px;
  }

  .nav-links {
    display: none;
  }

  .burger {
    display: block;
    margin-left: auto;
  }

  .nav-links.open {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    transform: none !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 20px 24px;
    background: rgba(244, 239, 230, .98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 35px rgba(0,0,0,.08);
    z-index: 99998;
  }

  .nav-links.open a {
    width: 100%;
    font-size: 13px;
    padding: 8px 0;
  }

  .nav-links.open .nav-cta {
    width: auto;
    margin-top: 8px;
    padding: 12px 18px !important;
  }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 420px) {
  .nav-inner {
    padding: 10px 16px;
  }

  .logo {
    gap: 8px;
  }

  .logo-img {
    width: 32px;
    height: 32px;
  }

  .logo-name {
    font-size: 16px;
  }

  .logo-sub {
    font-size: 5.5px;
    letter-spacing: .12em;
  }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:52% 48%;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);

  background:
    url("../img/carousel-1.jpg") center 40% / cover no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(244,239,230,.78) 0%,
      rgba(244,239,230,.64) 24%,
      rgba(244,239,230,.34) 45%,
      rgba(244,239,230,.12) 62%,
      rgba(244,239,230,0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.28) 45%,
      rgba(0,0,0,.42) 70%,
      rgba(0,0,0,.58) 100%
    );
}

.hero-text{
  position:relative;
  z-index:3;
  padding:70px 40px 70px 70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--brand);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:32px;
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--brand);
  flex-shrink:0;
}

.hero h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(56px, 6vw, 92px);
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--ink);
}

.hero h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--brand);
}

/* kanan hanya untuk posisi badge */
.hero-visual{
  position:relative;
  z-index:3;
  min-height:calc(100vh - 74px);
  background:transparent;
  overflow:visible;
}

/* foto div lama dimatikan */
.hero-coffee-photo{
  display:none !important;
}

.hero-ctas{
  margin-top:44px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  transition:all .25s;
  border:1px solid var(--ink);
  cursor:pointer;
}

.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:var(--brand);border-color:var(--brand);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn svg{width:14px;height:14px}


.hero-badge{
  position:absolute;
  left:0;
  right:48px;
  bottom:48px;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:nowrap;
}

.hero-badge-card{
  min-width:230px;
  background:rgba(28,21,14,.85);
  color:var(--bg);
  padding:18px 22px;
  backdrop-filter:blur(8px);
  border-left:3px solid var(--brand);
}

@media(max-width:980px){
  .hero{
    display:block;
    min-height:auto;

    background:
      linear-gradient(
        90deg,
        rgba(244,239,230,.98) 0%,
        rgba(244,239,230,.88) 30%,
        rgba(244,239,230,.45) 55%,
      ),
      url("../img/carousel-1.jpg") right center / cover 100% no-repeat;
  }

  .hero-text{
    position:relative;
    z-index:3;
    padding:54px 24px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    align-items:flex-start;
    color:var(--ink);
  }

  .eyebrow{
    display:flex;
    margin-bottom:24px;
    align-items:flex-start;
  }

  .hero h1{
    max-width:none;
    font-size:clamp(46px, 12vw, 64px);
    line-height:.98;
    color:var(--ink);
  }

  .hero h1 em{
    color:var(--brand);
    font-style:italic;
  }

  .hero-sub{
    max-width:100%;
    margin-top:26px;
    font-size:16px;
    line-height:1.65;
    color:#000;
    font-weight:400;
  }

  .hero-ctas{
    margin-top:34px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    width:auto;
  }

  .hero-ctas .btn{
    width:auto;
    justify-content:center;
    padding:15px 26px;
    border:1px solid var(--ink);
    font-size:12.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:500;
  }

  .hero-ctas .btn-primary{
    background:var(--ink);
    color:var(--bg);
  }

  .hero-ctas .btn-ghost{
    background:transparent;
    color:var(--ink);
  }

  .hero-visual{
    min-height:auto;
    padding:0 24px 34px;
    display:block;
  }

  .hero-badge{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:190px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .hero-badge-card{
    width:100%;
    min-width:0;
    margin:0;
  }
}

@media(max-width:576px){
  .hero-text{
    padding:46px 24px 18px;
  }

  .hero h1{
    font-size:46px;
  }

  .hero-badge{
    margin-top:190px;
  }
}

/* ===== MARQUEE ===== */
  .marquee{
    border-bottom:1px solid var(--line);
    padding:18px 0;overflow:hidden;background:var(--bg-2);
  }
  .marquee-track{
    display:flex;gap:60px;
    animation:scroll 45s linear infinite;white-space:nowrap;
  }
  .marquee span{
    font-family:var(--serif);font-style:italic;
    font-size:20px;color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:60px;
  }
  .marquee span::after{content:"✦";color:var(--brand);margin-left:60px}
  @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  /* ===== SECTIONS ===== */
  section{padding:110px 0;position:relative}
  .sec-head{
    display:grid;grid-template-columns:auto 1fr;gap:60px;
    align-items:end;margin-bottom:64px;
  }
  @media(max-width:760px){.sec-head{grid-template-columns:1fr;gap:24px}}
  .sec-num{
    font-family:var(--mono);font-size:12px;
    letter-spacing:.2em;color:var(--brand);text-transform:uppercase;
  }
  .sec-title{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(36px, 5vw, 64px);
    line-height:1;letter-spacing:-.02em;
  }
  .sec-title em{font-style:italic;color:var(--brand)}
  .sec-lead{max-width:520px;font-size:16px;color:var(--ink-soft);line-height:1.65}


  /* ===== ABOUT ===== */
  .about{
    background:var(--bg-2);
    border-top:1px solid var(--line);
    padding:70px 0 82px;
  }

  .about .container{
    max-width:1280px;
    padding:0 70px;
  }

  .about .sec-head{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:55px;
    align-items:start;
    margin-bottom:32px;
  }

  .about .sec-num{
    padding-top:28px;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
  }

  .about .sec-title{
    font-size:clamp(42px, 4vw, 62px);
    line-height:.96;
    letter-spacing:-.035em;
  }

  .about-grid{
    display:grid;
    grid-template-columns:390px 528px;
    gap:34px;
    align-items:start;
    justify-content:center;
  }

  .about-body{
    max-width:390px;
  }

  .about-body p{
    font-size:13px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:18px;
  }

  .about-body p:first-child::first-letter{
    font-family:var(--serif);
    font-weight:400;
    font-style:italic;
    font-size:86px;
    float:left;
    line-height:.78;
    margin:6px 12px 0 0;
    color:var(--brand);
  }

  .about-visual{
  display:grid;
  grid-template-columns:260px 350px;
  grid-template-rows:180px 180px;
  gap:18px;
  align-items:start;
  justify-content:start;
  height:378px;
}

.about-visual > div{
  overflow:hidden;
  border:0;
  background:none !important;
  filter:none !important;
}

.about-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Foto A */
.about-visual .a{
  grid-column:1;
  grid-row:1 / span 2;
  width:260px;
  height:378px;
}

.about-visual .a img{
  object-position:center center;
}

/* Foto B / E */
.about-visual .b{
  grid-column:2;
  grid-row:1;
  width:350px;
  height:180px;
}

.about-visual .b img{
  object-fit:cover;
  object-position:center 80%;
}

/* Foto C */
.about-visual .c{
  grid-column:2;
  grid-row:2;
  width:350px;
  height:180px;
}

.about-visual .c img{
  object-position:center center;
}

  /* ===== RESPONSIVE ABOUT ===== */
  @media(max-width:1100px){
    .about .container{
      padding:0 32px;
    }

    .about-grid{
      grid-template-columns:1fr;
      gap:38px;
    }

    .about-body{
      max-width:100%;
    }

    .about-visual{
      max-width:528px;
    }
  }

    @media(max-width:768px){
    .about{
      padding:54px 0 70px;
    }

    .about .container{
      padding:0 22px;
    }

    .about .sec-head{
      grid-template-columns:1fr;
      gap:16px;
      margin-bottom:30px;
    }

    .about .sec-num{
      padding-top:0;
    }

    .about .sec-title{
      font-size:42px;
    }

    .about-grid{
      grid-template-columns:1fr;
      gap:32px;
    }

    .about-body p{
      font-size:14px;
    }

    .about-visual{
      display:grid;
      grid-template-columns:42% 58%;
      grid-template-rows:128px 128px;
      gap:10px;
      width:100%;
      max-width:100%;
      height:266px;
      margin-bottom:0;
    }

    .about-visual .a{
      grid-column:1;
      grid-row:1 / span 2;
      width:100%;
      height:266px;
    }

    .about-visual .b{
      grid-column:2;
      grid-row:1;
      width:100%;
      height:128px;
    }

    .about-visual .c{
      grid-column:2;
      grid-row:2;
      width:100%;
      height:128px;
    }

    .about-visual .a img,
    .about-visual .b img,
    .about-visual .c img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .about-visual .b img{
      object-position:center 80%;
    }
  }

  /* ===== PILLARS / STRENGTHS ===== */
.strengths{
  position:relative;
  z-index:2;
  clear:both;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:110px 0;
}

.strengths .sec-head{
  position:relative;
  z-index:2;
}

.pillars{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
  border:1px solid var(--line);
  background:var(--line);
}

.pillar{
  background:var(--bg);
  padding:36px 32px;
  min-height:240px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background .25s;
}

.pillar:hover{
  background:var(--bg-2);
}

.pillar-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  color:var(--brand);
}

.pillar h4{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--ink);
}

.pillar p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}

  /* ===== MOBILE STRENGTHS FIX ===== */
  @media(max-width:768px){
    .strengths{
      margin-top:0;
      padding:70px 0;
      background:var(--bg);
      border-top:1px solid var(--line);
      overflow:hidden;
    }

    .strengths .container{
      position:relative;
      z-index:3;
    }

    .strengths .sec-head{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
      margin-bottom:34px;
      background:var(--bg);
    }

    .strengths .sec-num{
      padding-top:0;
      font-size:10px;
    }

    .strengths .sec-title{
      font-size:42px;
      line-height:1;
    }

    .pillars{
      grid-template-columns:1fr;
      border:0;
      gap:14px;
      background:transparent;
    }

    .pillar{
      min-height:auto;
      padding:26px 22px;
      border:1px solid var(--line);
      background:var(--bg);
    }

    .pillar h4{
      font-size:25px;
    }

    .pillar p{
      font-size:15px;
    }
  }

  /* ===== PRODUCTS ===== */
  .products{
    background:var(--ink);color:var(--bg);
    position:relative;overflow:hidden;
  }
  .products .sec-title{color:var(--bg)}
  .products .sec-title em{color:var(--brand-soft)}
  .products .sec-num{color:var(--brand-soft)}
  .products .sec-lead{color:rgba(244,239,230,.7)}

  .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  @media(max-width:860px){.prod-grid{grid-template-columns:1fr}}

  .prod-card{
    border:1px solid rgba(244,239,230,.18);
    padding:40px 36px;position:relative;
    background:rgba(244,239,230,.02);
    transition:all .35s;
  }
  .prod-card:hover{background:rgba(244,239,230,.06);transform:translateY(-4px)}
  .prod-icon{width:72px;height:72px;margin-bottom:28px}
  .prod-card h3{
    font-family:var(--serif);font-size:44px;font-weight:300;
    letter-spacing:-.02em;line-height:1;margin-bottom:6px;
  }
  .prod-card h3 em{font-style:italic;color:var(--brand-soft)}
  .prod-card .tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block;
  }
  .prod-card .desc{
    font-size:15px;line-height:1.65;
    color:rgba(244,239,230,.78);margin-bottom:28px;
  }
  .spec-table{
    display:grid;grid-template-columns:1fr;gap:0;
    border-top:1px solid rgba(244,239,230,.18);
  }
  .spec-row{
    display:grid;grid-template-columns:130px 1fr;gap:20px;
    padding:12px 0;border-bottom:1px solid rgba(244,239,230,.12);
    font-size:13.5px;
  }
  .spec-row:last-child{border-bottom:none}
  .spec-row .k{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
    text-transform:uppercase;color:rgba(244,239,230,.5);padding-top:2px;
  }
  .spec-row .v{color:var(--bg);line-height:1.5}

  /* ===== ORIGINS ===== */
.origins{
  padding:110px 0;
  background:var(--bg);
}

.origin-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  border:0;
  background:transparent;
}

.origin{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:0;
  background:#fffdf8;
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.origin:hover{
  background:#fffdf8;
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(28,21,14,.08);
}

/* IMAGE AREA */
.origin-img{
  position:relative;
  width:100%;
  height:170px;
  overflow:hidden;
  background:linear-gradient(
    to bottom,
    #ffffff 0%,
    #eeeeee 32%,
    #c9c9c9 68%,
    #8f8f8f 100%
  );
}

.origin-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* BADGE */
.origin-head{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  margin:0;
  display:block;
}

.origin-head .num{
  display:inline-flex;
  align-items:center;
  background:var(--brand);
  color:#fff;
  padding:7px 11px;
  font-family:var(--mono);
  font-size:8px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.origin-head .coord{
  display:none;
}

/* CONTENT */
.origin-content{
  padding:22px 22px 18px;
  flex:1;
}

.origin h4{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 5px;
}

.origin .region{
  font-family:var(--mono);
  font-style:normal;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}

.origin p{
  font-size:12px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}

.origin .profile{
  display:none;
}

/* BOTTOM LINK */
.origin-arrow{
  margin-top:auto;
  padding:16px 22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:9px;
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  color:var(--brand);
}

.origin-arrow svg{
  width:12px;
  height:12px;
  margin-left:auto;
}

.origin.request{
  background:#fffdf8;
}

.origin.request h4{
  color:var(--ink);
}

/* RESPONSIVE */
@media(max-width:980px){
  .origin-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }
}

@media(max-width:640px){
  .origins{
    padding:70px 0;
  }

  .origin-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .origin{
    min-height:auto;
  }

  .origin-img{
    height:185px;
  }

  .origin h4{
    font-size:28px;
  }
}

  /* ===== PROCESS ===== */
  .process{background:var(--bg-2);border-top:1px solid var(--line)}
  .process-layout{
    display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start;
  }
  @media(max-width:960px){.process-layout{grid-template-columns:1fr}}
  .process-img{
    height:600px;
    background:url('images/workers-raking.jpg') center/cover;
    border:1px solid var(--line);
    filter:sepia(.05) saturate(.95);
  }
  .steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .step{
    padding:24px 0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start;
    transition:padding-left .25s;
  }
  .step:hover{padding-left:8px}
  .step-num{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    color:var(--brand);padding-top:4px;
  }
  .step-content h5{
    font-family:var(--serif);font-size:22px;font-weight:500;
    margin-bottom:6px;letter-spacing:-.01em;
  }
  .step-content p{font-size:14px;color:var(--ink-soft);line-height:1.55}
  .step-time{
    font-family:var(--mono);font-size:10.5px;
    letter-spacing:.12em;color:var(--muted);
    padding-top:4px;white-space:nowrap;
  }

  /* ===== QC BANNER ===== */
  .qc{
    background:var(--ink);color:var(--bg);
    padding:70px 0;position:relative;overflow:hidden;
  }
  .qc::before{
    content:"";position:absolute;inset:0;
    background:url('images/sorting-women.jpg') center/cover;
    opacity:.15;
  }
  .qc .container{position:relative;z-index:2}
  .qc-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  }
  @media(max-width:860px){.qc-grid{grid-template-columns:1fr}}
  .qc h3{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(32px,4vw,52px);
    letter-spacing:-.02em;line-height:1.05;margin-bottom:20px;
  }
  .qc h3 em{font-style:italic;color:var(--brand-soft)}
  .qc p{font-size:16px;line-height:1.65;color:rgba(244,239,230,.8)}
  .qc-checks{display:grid;gap:14px}
  .qc-check{
    display:grid;grid-template-columns:auto 1fr;gap:18px;
    padding:18px 20px;
    background:rgba(244,239,230,.06);
    border-left:3px solid var(--brand);
  }
  .qc-check .step-tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.15em;
    text-transform:uppercase;color:var(--brand-soft);
  }
  .qc-check h6{
    font-family:var(--serif);font-size:18px;font-weight:500;
    margin-top:4px;margin-bottom:6px;
  }
  .qc-check p{font-size:13.5px;line-height:1.55;color:rgba(244,239,230,.7)}

  /* ===== AVAILABILITY ===== */
  .avail{background:var(--bg);border-top:1px solid var(--line)}
  .avail-inner{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  }
  @media(max-width:860px){.avail-inner{grid-template-columns:1fr;gap:40px}}
  .avail-img{
    height:440px;
    background:url('images/warehouse-bags.jpg') center/cover;
    border:1px solid var(--line);
  }
  .avail-text h3{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(32px,4.2vw,52px);
    letter-spacing:-.02em;line-height:1.05;margin-bottom:20px;
  }
  .avail-text h3 em{font-style:italic;color:var(--brand)}
  .avail-text p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:14px}
  .avail-banner{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;margin:24px 0;
    background:var(--bg-2);border-left:3px solid var(--accent);
  }
  .pulse{
    width:10px;height:10px;border-radius:50%;background:#4A7A3E;
    box-shadow:0 0 0 0 rgba(74,122,62,.7);animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(74,122,62,.7)}
    70%{box-shadow:0 0 0 12px rgba(74,122,62,0)}
    100%{box-shadow:0 0 0 0 rgba(74,122,62,0)}
  }
  .avail-banner span{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .avail-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

  .avail-stock{
    height:440px;
    border:1px solid var(--line);
    background:#fffdf8;
    overflow:auto;
    padding:18px;
  }

  .stock-loading{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .stock-table{
      width:100%;
      border-collapse:collapse;
      table-layout:auto;
  }

  .stock-table th,
  .stock-table td{
      padding:10px 8px;
      text-align:left;
      white-space:nowrap;
  }

  /* Kolom No */
  .stock-table th:first-child,
  .stock-table td:first-child{
      width:40px;
      min-width:40px;
      max-width:40px;
      text-align:center;
  }

  @media(max-width:768px){
    .avail-stock{
      height:360px;
      padding:12px;
    }

    .stock-table{
      font-size:11px;
    }
  }

  /* ===== CONTACT ===== */
  .cta{background:var(--brand);color:var(--bg);position:relative;overflow:hidden}
  .cta .sec-title{color:var(--bg)}
  .cta .sec-title em{color:#F4D58D}
  .cta .sec-num{color:#F4D58D}
  .cta .sec-lead{color:rgba(244,239,230,.82)}

  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
  @media(max-width:860px){.cta-grid{grid-template-columns:1fr}}

  .contact-card{
    border:1px solid rgba(244,239,230,.3);
    padding:36px;display:flex;flex-direction:column;gap:24px;
  }
  .contact-row{
    display:grid;grid-template-columns:auto 1fr;gap:20px;
    align-items:start;padding-bottom:20px;
    border-bottom:1px solid rgba(244,239,230,.2);
  }
  .contact-row:last-child{border:none;padding:0}
  .contact-icon{
    width:40px;height:40px;border:1px solid rgba(244,239,230,.4);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .contact-icon svg{width:18px;height:18px}
  .contact-row .k{
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(244,239,230,.7);margin-bottom:4px;
  }
  .contact-row .v{
    font-family:var(--serif);font-size:18px;font-weight:400;
    letter-spacing:-.01em;line-height:1.35;
  }
  .contact-row a.v{transition:color .2s}
  .contact-row a.v:hover{color:#F4D58D}

  .office-card{
    padding:28px;background:rgba(28,21,14,.25);
    border:1px solid rgba(244,239,230,.2);
  }
  .office-card h5{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:#F4D58D;margin-bottom:12px;
  }
  .office-card p{font-size:14px;line-height:1.6;color:var(--bg);margin-bottom:6px}
  .office-card + .office-card{margin-top:16px}

  /* ===== FOOTER ===== */
  footer{background:var(--ink);color:var(--bg);padding:80px 0 30px}
  .foot-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px;
  }
  @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
  @media(max-width:500px){.foot-grid{grid-template-columns:1fr}}
  .foot h6{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--brand-soft);margin-bottom:20px;
  }
  .foot p, .foot a{
    font-size:14px;color:rgba(244,239,230,.72);
    line-height:1.7;display:block;margin-bottom:4px;
  }
  .foot a:hover{color:var(--bg)}
  .foot-brand .logo{margin-bottom:14px}
  .foot-brand .logo-name{color:var(--bg)}
  .foot-brand .logo-sub{color:var(--brand-soft)}
  .foot-brand p{max-width:320px;margin-top:6px}

  .foot-base{
    border-top:1px solid rgba(244,239,230,.15);padding-top:24px;
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(244,239,230,.5);flex-wrap:wrap;gap:12px;
  }

  /* Social links in footer */
  .socials{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
  .social-link{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(244,239,230,.2);
    color:rgba(244,239,230,.75);
    transition:all .25s;position:relative;
  }
  .social-link:hover{
    border-color:var(--brand-soft);color:var(--brand-soft);
    background:rgba(159,48,19,.08);
  }
  .social-link svg{width:18px;height:18px}
  .social-link.pending{opacity:.45;cursor:default}
  .social-link.pending:hover{
    border-color:rgba(244,239,230,.2);color:rgba(244,239,230,.75);
    background:transparent;
  }
  .social-link .pending-dot{
    position:absolute;top:-3px;right:-3px;
    width:8px;height:8px;border-radius:50%;
    background:var(--brand-soft);
  }

  /* ===== WHATSAPP FLOAT ===== */
  .wa-fab{
    position:fixed;bottom:28px;right:28px;z-index:60;
    display:flex;align-items:center;gap:0;
  }
  .wa-label{
    background:var(--ink);color:var(--bg);
    padding:14px 0 14px 0;
    font-family:var(--mono);font-size:12px;letter-spacing:.12em;
    text-transform:uppercase;white-space:nowrap;margin-right:-8px;
    border-radius:999px 0 0 999px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    max-width:0;overflow:hidden;
    transition:max-width .5s ease, padding .5s ease;
  }
  .wa-fab.show .wa-label{max-width:280px;padding:14px 28px 14px 22px}
  .wa-btn{
    width:62px;height:62px;border-radius:50%;
    background:#25D366;color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 32px rgba(37,211,102,.45);
    transition:transform .3s;position:relative;z-index:2;
    animation:fabPulse 2.5s infinite;cursor:pointer;
  }
  .wa-btn:hover{transform:scale(1.08)}
  .wa-btn svg{width:30px;height:30px}
  @keyframes fabPulse{
    0%,100%{box-shadow:0 12px 32px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.4)}
    50%{box-shadow:0 12px 32px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0)}
  }

  /* Chat panel */
  .chat-panel{
    position:fixed;bottom:104px;right:28px;z-index:60;
    width:340px;max-width:calc(100vw - 40px);
    background:var(--bg);border:1px solid var(--line);
    box-shadow:0 20px 50px rgba(0,0,0,.18);
    transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;
    transition:all .3s ease;
  }
  .chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
  .chat-header{
    background:var(--brand);color:var(--bg);
    padding:18px 22px;display:flex;justify-content:space-between;align-items:center;
  }
  .chat-header .h{font-family:var(--serif);font-size:18px;letter-spacing:-.01em}
  .chat-header .s{
    font-family:var(--mono);font-size:10px;letter-spacing:.15em;
    text-transform:uppercase;color:rgba(244,239,230,.8);
  }
  .chat-close{color:var(--bg);font-size:20px;line-height:1;cursor:pointer}
  .chat-body{padding:22px}
  .chat-bubble{
    background:var(--bg-2);padding:14px 16px;
    font-size:14px;line-height:1.55;color:var(--ink-soft);
    margin-bottom:14px;border-left:2px solid var(--brand);
  }
  .chat-body textarea{
    width:100%;min-height:80px;resize:vertical;
    font-family:var(--sans);font-size:14px;padding:12px;
    border:1px solid var(--line);background:#fff;color:var(--ink);
    outline:none;margin-bottom:12px;
  }
  .chat-body textarea:focus{border-color:var(--brand)}
  .chat-send{
    width:100%;background:#25D366;color:#fff;padding:13px;
    font-family:var(--mono);font-size:12px;letter-spacing:.15em;
    text-transform:uppercase;display:flex;align-items:center;
    justify-content:center;gap:10px;transition:background .2s;cursor:pointer;
  }
  .chat-send:hover{background:#1fb957}
  .chat-send svg{width:16px;height:16px}

  .reveal{opacity:0;transform:translateY(24px);transition:all .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}