:root{
  --cream:#F7F0E7;
  --berry:#5D1426;
  --pink:#E9517C;
  --pink-soft:#F3A4B9;
  --pink-pale:#F8D9E1;

  --ink:#38272A;
  --muted:#D8CCC2;
  --accent:#E9517C;

  --forest:#102117;
  --forest-soft:#1C3525;

  --sage:#A9B88B;
  --sage-soft:#DCE3C8;

  --gold:#D9A727;
  --gold-soft:#F0D889;

  --deep-berry:#48101F;
  --berry-soft:#6D2335;

  --wallpaper:url("wallpaper_durian.png");
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,Helvetica,sans-serif;

  color:var(--ink);
  background:var(--cream);

  overflow-x:hidden;
  overflow-y:auto;
}

button,
a{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}


/* =========================================================
   SITE
   PRODUCTS HERO BACKGROUND SYSTEM — LOCKED
   ========================================================= */

.site{
  width:100%;
  min-height:100vh;

  position:relative;

  background-color:var(--cream);
  background-image:var(--wallpaper);

  background-size:0 0;
  background-position:center center;
  background-repeat:no-repeat;

  transition:
    background-image .35s ease,
    background-color .45s ease;
}


/* Actual wallpaper only on first viewport */

.site::after{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  z-index:0;

  pointer-events:none;

  background-image:inherit;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  transition:
    background-image .35s ease;
}


/* Light overlay only on Products */

.site::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(247,240,231,.16) 0%,
      rgba(247,240,231,.08) 25%,
      rgba(247,240,231,.02) 44%,
      rgba(247,240,231,0) 62%
    );
}


/* =========================================================
   LOGO — LOCKED
   ========================================================= */

.brand-fixed{
  position:absolute;

  top:16px;
  left:24px;

  margin:0;
  padding:0;

  display:block;

  z-index:100;
}

.brand-fixed img{
  display:block;

  width:100px;
  height:auto;

  margin:0;
  padding:0;

  object-fit:contain;

  opacity:1;

  filter:
    saturate(1.35)
    contrast(1.22)
    drop-shadow(
      0 0 .45px
      rgba(233,81,124,.95)
    )
    drop-shadow(
      0 1px 2px
      rgba(93,20,38,.10)
    );
}


/* =========================================================
   HEADER — LOCKED
   ========================================================= */

.topbar{
  height:96px;
  width:100%;

  position:relative;

  z-index:30;
}


/* =========================================================
   NAVIGATION — LOCKED
   ========================================================= */

.nav{
  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  display:flex;

  justify-content:center;
  align-items:center;

  gap:44px;

  width:max-content;

  color:var(--berry);

  font-size:11px;
  font-weight:700;

  letter-spacing:.15em;

  white-space:nowrap;
}

.nav a{
  position:relative;

  padding:12px 0;

  white-space:nowrap;
}

.nav a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:3px;

  height:1px;

  background:var(--pink);
}


/* =========================================================
   COUNTER — LOCKED
   ========================================================= */

.counter{
  position:absolute;

  top:50%;
  right:6.5vw;

  transform:
    translateY(-50%);

  display:flex;

  align-items:baseline;

  gap:7px;

  color:var(--berry);

  font-size:12px;

  letter-spacing:.15em;
}

.counter strong{
  color:var(--accent);

  font-size:21px;
  font-weight:500;
}


/* =========================================================
   PRODUCTS HERO — LOCKED
   ========================================================= */

.hero{
  min-height:
    calc(100vh - 96px);

  min-height:
    calc(100svh - 96px);

  display:grid;

  grid-template-columns:
    40% 60%;

  align-items:center;

  padding:
    2vh
    4.5vw
    4vh
    6.5vw;

  position:relative;

  z-index:20;
}


/* =========================================================
   HERO COPY — LOCKED
   ========================================================= */

.copy{
  position:relative;

  z-index:22;

  align-self:center;

  padding-bottom:5vh;

  transition:
    opacity .22s ease,
    transform .22s ease;
}

.copy.changing{
  opacity:0;

  transform:
    translateY(8px);
}

.kicker{
  margin:
    0 0 22px;

  color:var(--berry);

  font-size:10px;
  font-weight:700;

  letter-spacing:.34em;
}

.title{
  margin:0;

  color:var(--berry);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      70px,
      7.6vw,
      126px
    );

  font-weight:400;

  line-height:.88;

  letter-spacing:-.05em;

  text-transform:capitalize;
}

.accent-line{
  width:56px;
  height:2px;

  margin-top:26px;

  background:
    var(--accent);

  transition:
    background .35s ease;
}

.tagline{
  margin:
    40px 0 0;

  color:var(--berry);

  font-size:11px;
  font-weight:600;

  letter-spacing:.34em;

  text-transform:uppercase;
}


/* =========================================================
   ARROWS — LOCKED
   ========================================================= */

.arrow{
  position:absolute;

  z-index:40;

  top:52%;

  transform:
    translateY(-50%);

  width:50px;
  height:50px;

  border:0;

  background:transparent;

  color:var(--accent);

  font-size:32px;
  font-weight:300;

  cursor:pointer;

  transition:
    color .35s ease,
    opacity .2s ease,
    transform .2s ease;
}

.arrow:hover{
  transform:
    translateY(-50%)
    scale(1.08);
}

.arrow.left{
  left:1.8vw;
}

.arrow.right{
  right:1.8vw;
}


/* =========================================================
   DOTS — LOCKED
   ========================================================= */

.dots{
  position:absolute;

  left:6.5vw;
  bottom:4.2vh;

  z-index:25;

  display:flex;

  gap:12px;
}

.dot{
  width:7px;
  height:7px;

  border:0;
  border-radius:50%;

  padding:0;

  background:
    var(--muted);

  cursor:pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}

.dot.active{
  background:
    var(--accent);

  transform:
    scale(1.08);
}

.flavour-note{
  position:absolute;

  right:5.5vw;
  bottom:4.2vh;

  z-index:20;

  color:
    rgba(
      93,
      20,
      38,
      .55
    );

  font-size:9px;
  font-weight:700;

  letter-spacing:.24em;

  text-transform:uppercase;
}


/* =========================================================
   STORY INTRO
   ESTA PINK EDITORIAL TRANSITION
   ========================================================= */

.story-intro{
  position:relative;

  z-index:10;

  min-height:58vh;

  display:flex;
  align-items:center;

  padding:
    100px
    8vw;

  background:
    linear-gradient(
      135deg,
      var(--pink-pale) 0%,
      #F6C4D2 46%,
      var(--pink-soft) 100%
    );

  overflow:hidden;
}

.story-intro::after{
  content:"";

  position:absolute;

  width:42vw;
  height:42vw;

  max-width:700px;
  max-height:700px;

  right:-12vw;
  top:-18vw;

  border-radius:50%;

  background:
    rgba(255,255,255,.22);

  pointer-events:none;
}

.story-intro-inner{
  position:relative;

  z-index:2;

  width:min(760px,80vw);
}

.story-eyebrow{
  margin:0 0 24px;

  color:var(--berry);

  font-size:10px;
  font-weight:700;

  letter-spacing:.34em;

  text-transform:uppercase;
}

.story-intro-title{
  margin:0;

  color:var(--berry);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      54px,
      6.2vw,
      104px
    );

  font-weight:400;

  line-height:.94;

  letter-spacing:-.045em;
}

.story-intro-copy{
  width:min(560px,100%);

  margin:
    36px
    0
    0;

  color:
    rgba(93,20,38,.78);

  font-size:15px;

  line-height:1.75;
}

.story-intro-line{
  width:68px;
  height:2px;

  margin-top:36px;

  background:
    var(--berry);
}


/* =========================================================
   STORY CHAPTER BASE
   ========================================================= */

.story-chapter{
  position:relative;

  z-index:10;

  width:100%;

  padding:
    clamp(70px,8vw,130px)
    6vw
    clamp(80px,9vw,150px);

  overflow:hidden;
}

.story-chapter-inner{
  width:min(1480px,100%);

  margin:0 auto;

  position:relative;

  z-index:2;
}


/* =========================================================
   STORY META
   ========================================================= */

.story-meta{
  display:grid;

  grid-template-columns:
    70px
    auto
    1fr;

  align-items:center;

  gap:22px;

  margin-bottom:30px;

  font-size:10px;
  font-weight:700;

  letter-spacing:.25em;

  text-transform:uppercase;
}

.story-number{
  opacity:.62;
}

.story-name{
  font-size:12px;
}

.story-location{
  justify-self:end;

  opacity:.62;
}


/* =========================================================
   STORY FRAME
   Artwork no longer fills whole monitor.
   ========================================================= */

.story-frame{
  width:min(86vw,1440px);

  margin:0 auto;

  position:relative;

  aspect-ratio:21 / 9;

  overflow:hidden;

  border:0;

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.16);
}

.product-story-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center center;

  user-select:none;
  pointer-events:none;

  image-rendering:auto;
}


/* =========================================================
   STORY 01 — DURIAN
   DEEP FOREST GREEN
   ========================================================= */

.story-durian{
  color:#EDF0D4;

  background:
    linear-gradient(
      145deg,
      #07130C 0%,
      var(--forest) 52%,
      var(--forest-soft) 100%
    );
}

.story-durian::before{
  content:"";

  position:absolute;

  width:460px;
  height:460px;

  right:-120px;
  bottom:-180px;

  border-radius:50%;

  background:
    rgba(151,171,80,.12);
}

.story-durian .story-meta{
  color:#DCE59A;
}


/* =========================================================
   STORY 02 — AVOCADO
   IVORY + SAGE
   ========================================================= */

.story-avocado{
  color:#31562E;

  background:
    linear-gradient(
      120deg,
      #F4F0E6 0%,
      #ECEEDB 54%,
      var(--sage-soft) 100%
    );
}

.story-avocado::before{
  content:"";

  position:absolute;

  width:58vw;
  height:58vw;

  left:-26vw;
  bottom:-42vw;

  border-radius:50%;

  background:
    rgba(125,151,91,.16);
}

.story-avocado .story-meta{
  color:#496B43;
}


/* =========================================================
   STORY 03 — PINEAPPLE
   ESTA PINK + TROPICAL GOLD
   ========================================================= */

.story-pineapple{
  color:var(--berry);

  background:
    linear-gradient(
      135deg,
      #F4A6BB 0%,
      #F2B4C5 44%,
      #F2D993 100%
    );
}

.story-pineapple::before{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  right:-130px;
  top:-210px;

  border-radius:50%;

  background:
    rgba(255,226,99,.30);
}

.story-pineapple::after{
  content:"";

  position:absolute;

  width:340px;
  height:340px;

  left:-100px;
  bottom:-160px;

  border-radius:50%;

  background:
    rgba(255,255,255,.18);
}

.story-pineapple .story-meta{
  color:#711D33;
}


/* =========================================================
   STORY 04 — CEMPEDAK
   DEEP ESTA BERRY
   ========================================================= */

.story-cempedak{
  color:#F8E6C0;

  background:
    linear-gradient(
      145deg,
      #310A15 0%,
      var(--deep-berry) 55%,
      var(--berry-soft) 100%
    );
}

.story-cempedak::before{
  content:"";

  position:absolute;

  width:520px;
  height:520px;

  left:-180px;
  top:-240px;

  border-radius:50%;

  background:
    rgba(217,167,39,.11);
}

.story-cempedak .story-meta{
  color:#F3CD73;
}


/* =========================================================
   OUR STORY TRANSITION
   ========================================================= */

.story-outro{
  position:relative;

  z-index:10;

  min-height:66vh;

  display:flex;
  align-items:center;

  padding:
    110px
    8vw;

  background:
    var(--cream);
}

.story-outro-inner{
  width:min(900px,82vw);

  margin:0 auto;

  text-align:center;
}

.story-outro .story-eyebrow{
  color:var(--pink);
}

.story-outro-title{
  margin:0;

  color:var(--berry);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      56px,
      6.5vw,
      110px
    );

  font-weight:400;

  line-height:.95;

  letter-spacing:-.045em;
}

.story-outro .story-intro-line{
  margin:
    40px
    auto
    0;

  background:
    var(--pink);
}


/* =========================================================
   JINGLE — LOCKED
   ========================================================= */

.jingle-control{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:99999;

  min-height:40px;

  padding:
    10px 15px;

  border:
    1px solid
    var(--pink);

  border-radius:999px;

  background:
    var(--berry);

  color:white;

  font-size:10px;
  font-weight:700;

  letter-spacing:.13em;

  cursor:pointer;

  box-shadow:
    0 12px 30px
    rgba(
      68,
      39,
      39,
      .16
    );
}

.jingle-control:hover{
  background:
    var(--pink);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:960px){

  .site::after{
    background-position:
      62% center;
  }


  /* LOGO */

  .brand-fixed{
    top:12px;
    left:16px;
  }

  .brand-fixed img{
    width:90px;
    height:auto;
  }


  /* HEADER */

  .topbar{
    height:78px;
  }


  /* NAV */

  .nav{
    display:none;
  }


  /* COUNTER */

  .counter{
    right:20px;
  }


  /* HERO */

  .hero{
    min-height:
      calc(100vh - 78px);

    min-height:
      calc(100svh - 78px);

    display:block;

    padding:
      6vh
      20px
      0;
  }

  .copy{
    width:70vw;

    max-width:520px;

    padding:
      0 24px;
  }

  .title{
    font-size:
      clamp(
        60px,
        18vw,
        92px
      );
  }

  .tagline{
    margin-top:22px;

    font-size:9px;

    letter-spacing:.23em;
  }


  /* ARROWS */

  .arrow{
    top:60%;
  }

  .arrow.left{
    left:4px;
  }

  .arrow.right{
    right:4px;
  }


  /* DOTS */

  .dots{
    left:44px;
    bottom:24px;
  }

  .flavour-note{
    display:none;
  }


  /* STORY INTRO */

  .story-intro{
    min-height:auto;

    padding:
      80px
      7vw;
  }

  .story-intro-title{
    font-size:
      clamp(
        48px,
        10vw,
        78px
      );
  }


  /* STORY CHAPTER */

  .story-chapter{
    padding:
      72px
      24px
      88px;
  }

  .story-meta{
    grid-template-columns:
      52px
      auto
      1fr;

    gap:14px;

    margin-bottom:22px;
  }

  .story-frame{
    width:min(92vw,1200px);
  }


  /* OUTRO */

  .story-outro{
    min-height:56vh;

    padding:
      90px
      7vw;
  }


  /* JINGLE */

  .jingle-control{
    right:14px;
    bottom:14px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  .site::after{
    background-position:
      66% center;
  }


  /* LOGO */

  .brand-fixed{
    top:10px;
    left:12px;
  }

  .brand-fixed img{
    width:78px;
    height:auto;
  }


  /* COUNTER */

  .counter{
    right:14px;

    font-size:10px;
  }

  .counter strong{
    font-size:18px;
  }


  /* HERO */

  .hero{
    padding-top:4vh;
  }

  .copy{
    width:78vw;

    max-width:310px;

    padding:
      0 18px;
  }

  .kicker{
    margin-bottom:14px;
  }

  .title{
    font-size:52px;
  }

  .tagline{
    max-width:250px;

    line-height:1.6;
  }


  /* STORY INTRO */

  .story-intro{
    padding:
      64px
      22px;

    min-height:auto;
  }

  .story-intro-inner{
    width:100%;
  }

  .story-intro-title{
    font-size:
      clamp(
        42px,
        14vw,
        62px
      );
  }

  .story-intro-copy{
    font-size:13px;

    line-height:1.65;
  }


  /* STORY CHAPTER */

  .story-chapter{
    padding:
      54px
      12px
      66px;
  }

  .story-chapter-inner{
    width:100%;
  }

  .story-meta{
    grid-template-columns:
      auto
      1fr;

    gap:
      8px
      14px;

    margin:
      0
      8px
      18px;

    font-size:8px;
  }

  .story-number{
    grid-column:1;
  }

  .story-name{
    grid-column:2;

    font-size:10px;
  }

  .story-location{
    grid-column:
      1 / -1;

    justify-self:start;

    margin-left:0;
  }

  .story-frame{
    width:100%;

    aspect-ratio:21 / 9;

    box-shadow:
      0 16px 38px
      rgba(0,0,0,.14);
  }

  .product-story-image{
    object-fit:contain;
  }


  /* OUTRO */

  .story-outro{
    min-height:auto;

    padding:
      80px
      22px;
  }

  .story-outro-inner{
    width:100%;
  }

  .story-outro-title{
    font-size:
      clamp(
        44px,
        14vw,
        68px
      );
  }


  /* JINGLE */

  .jingle-control{
    font-size:9px;

    padding:
      9px 12px;
  }
}

/* =========================================================
   ESTA PRODUCT STORY JOURNEY — FINAL REDESIGN
   LOWER PRODUCTS ONLY
   HERO ABOVE THIS AREA MUST STAY LOCKED
   ========================================================= */

.story-journey{
  position:relative;
  z-index:10;

  width:100%;

  overflow:hidden;

  background:#f7f0e7;
}


/* =========================================================
   PRODUCT STORY INTRO
   Calm transition from the main hero
   ========================================================= */

.story-transition-intro{
  position:relative;

  min-height:58vh;

  display:flex;
  align-items:center;

  padding:
    9vh
    8vw;

  overflow:hidden;

  background:#f5d6df;

  color:#5d1426;
}


/* subtle ESTA pink block */

.story-transition-intro::before{
  content:"";

  position:absolute;

  width:34vw;
  height:100%;

  right:0;
  top:0;

  background:#eca0b6;

  opacity:.48;
}


/* thin vertical editorial line */

.story-transition-intro::after{
  content:"";

  position:absolute;

  right:17vw;
  top:12%;

  width:1px;
  height:76%;

  background:
    rgba(93,20,38,.18);
}


.story-transition-content{
  position:relative;

  z-index:3;

  width:min(720px,72vw);
}


.story-transition-center{
  margin:0 auto;
  text-align:center;
}


.story-small-title{
  margin:0 0 24px;

  font-size:10px;
  font-weight:700;

  letter-spacing:.34em;

  text-transform:uppercase;
}


.story-big-title{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      56px,
      6vw,
      108px
    );

  font-weight:400;

  line-height:.91;

  letter-spacing:-.05em;
}


.story-transition-text{
  width:min(520px,100%);

  margin:
    32px
    0
    0;

  font-size:14px;

  line-height:1.75;

  color:
    rgba(93,20,38,.75);
}


.story-line{
  display:block;

  width:62px;
  height:2px;

  margin-top:34px;

  background:#5d1426;
}



/* =========================================================
   COMMON FRUIT STORY FOUNDATION
   ========================================================= */

.fruit-story{
  position:relative;

  width:100%;

  min-height:92vh;

  overflow:hidden;

  display:flex;
  align-items:center;
}


.fruit-story-inner{
  position:relative;

  z-index:2;

  width:100%;
  min-height:92vh;

  margin:0 auto;
}


/* =========================================================
   COMMON STORY HEADER
   ========================================================= */

.fruit-story-header{
  position:absolute;

  z-index:8;

  display:flex;
  align-items:flex-start;

  gap:16px;

  width:auto;

  margin:0;
}


.fruit-story-index{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:44px;

  font-weight:400;

  line-height:1;

  opacity:.26;
}


.fruit-story-heading{
  display:flex;

  flex-direction:column;

  gap:7px;
}


.fruit-story-heading span{
  font-size:11px;

  font-weight:700;

  letter-spacing:.28em;
}


.fruit-story-heading small{
  font-size:8px;

  font-weight:700;

  letter-spacing:.25em;

  opacity:.58;
}



/* =========================================================
   COMMON ARTWORK
   Artwork intentionally NOT always same size
   ========================================================= */

.fruit-story-artwork{
  position:absolute;

  z-index:4;

  overflow:hidden;

  aspect-ratio:21 / 9;

  margin:0;

  box-shadow:
    0 34px 90px
    rgba(38,24,20,.16);
}


.fruit-story-artwork img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  user-select:none;
  pointer-events:none;

  image-rendering:auto;
}



/* =========================================================
   COMMON FOOTER
   ========================================================= */

.fruit-story-footer{
  position:absolute;

  z-index:8;

  display:flex;

  justify-content:space-between;

  gap:24px;

  width:auto;

  margin:0;

  font-size:8px;

  font-weight:700;

  letter-spacing:.24em;

  text-transform:uppercase;

  opacity:.64;
}



/* =========================================================
   01 — DURIAN
   Large artwork pushed right
   Dark forest anchor
   ========================================================= */

.fruit-story-durian{
  background:#102117;

  color:#dfe6a8;
}


/* lighter block on left creates depth */

.fruit-story-durian::before{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:29%;
  height:100%;

  background:#162c1e;
}


/* small vertical accent */

.fruit-story-durian::after{
  content:"";

  position:absolute;

  left:27%;
  top:11%;

  width:2px;
  height:78%;

  background:
    rgba(219,229,158,.16);
}


.fruit-story-durian .fruit-story-header{
  left:7vw;
  top:14vh;
}


.fruit-story-durian .fruit-story-artwork{
  width:min(83vw,1495px);

  right:5vw;
  top:50%;

  transform:
    translateY(-50%);
}


.fruit-story-durian .fruit-story-footer{
  left:7vw;
  bottom:11vh;

  width:19vw;

  min-width:250px;

  flex-direction:column;

  gap:8px;
}



/* =========================================================
   02 — AVOCADO
   Mirrored composition
   Artwork smaller and pushed left
   ========================================================= */

.fruit-story-avocado{
  background:#eef0df;

  color:#385939;
}


/* sage panel on right */

.fruit-story-avocado::before{
  content:"";

  position:absolute;

  right:0;
  top:0;

  width:33%;
  height:100%;

  background:#d8e0c2;
}


/* giant subtle circle */

.fruit-story-avocado::after{
  content:"";

  position:absolute;

  right:-11vw;
  bottom:-19vw;

  width:38vw;
  height:38vw;

  border-radius:50%;

  background:
    rgba(104,133,84,.10);
}


.fruit-story-avocado .fruit-story-header{
  right:7vw;
  top:15vh;

  text-align:right;

  flex-direction:row-reverse;
}


.fruit-story-avocado .fruit-story-heading{
  align-items:flex-end;
}


.fruit-story-avocado .fruit-story-artwork{
  width:min(71vw,1288px);

  left:5vw;
  top:48%;

  transform:
    translateY(-50%);
}


.fruit-story-avocado .fruit-story-footer{
  right:7vw;
  bottom:13vh;

  width:22vw;

  min-width:270px;

  flex-direction:column;

  text-align:right;

  gap:8px;
}



/* =========================================================
   03 — PINEAPPLE
   More open / centered composition
   ESTA pink used as background block
   ========================================================= */

.fruit-story-pineapple{
  background:#f7f0e7;

  color:#5d1426;
}


/* large ESTA pink rectangle */

.fruit-story-pineapple::before{
  content:"";

  position:absolute;

  left:0;
  top:10%;

  width:58%;
  height:72%;

  background:#efa3b8;
}


/* gold secondary block */

.fruit-story-pineapple::after{
  content:"";

  position:absolute;

  right:0;
  bottom:0;

  width:23%;
  height:38%;

  background:#dec663;
}


.fruit-story-pineapple .fruit-story-header{
  left:7vw;
  top:13vh;
}


.fruit-story-pineapple .fruit-story-artwork{
  width:min(76vw,1357px);

  left:50%;
  top:51%;

  transform:
    translate(-42%,-50%);

  box-shadow:
    0 38px 95px
    rgba(71,34,32,.20);
}


/* intentional out-of-line feel:
   image extends beyond the main pink field */

.fruit-story-pineapple .fruit-story-footer{
  right:6vw;
  bottom:10vh;

  width:22vw;

  min-width:270px;

  flex-direction:column;

  text-align:right;

  gap:8px;
}



/* =========================================================
   04 — CEMPEDAK
   Large again, mirrored from Durian
   ========================================================= */

.fruit-story-cempedak{
  background:#4a1020;

  color:#f0cf78;
}


/* warmer burgundy panel right */

.fruit-story-cempedak::before{
  content:"";

  position:absolute;

  right:0;
  top:0;

  width:27%;
  height:100%;

  background:#61192d;
}


/* subtle gold line */

.fruit-story-cempedak::after{
  content:"";

  position:absolute;

  right:26%;
  top:13%;

  width:1px;
  height:74%;

  background:
    rgba(241,203,103,.20);
}


.fruit-story-cempedak .fruit-story-header{
  right:7vw;
  top:14vh;

  text-align:right;

  flex-direction:row-reverse;
}


.fruit-story-cempedak .fruit-story-heading{
  align-items:flex-end;
}


.fruit-story-cempedak .fruit-story-artwork{
  width:min(85vw,1541px);

  left:4vw;
  top:49%;

  transform:
    translateY(-50%);
}


.fruit-story-cempedak .fruit-story-footer{
  right:7vw;
  bottom:10vh;

  width:20vw;

  min-width:260px;

  flex-direction:column;

  text-align:right;

  gap:8px;
}



/* =========================================================
   MICRO DEPTH
   Straight lines, no waves
   ========================================================= */

.fruit-story-durian
.fruit-story-artwork,

.fruit-story-cempedak
.fruit-story-artwork{
  border:
    1px solid
    rgba(255,255,255,.08);
}


.fruit-story-avocado
.fruit-story-artwork{
  border:
    1px solid
    rgba(58,90,55,.10);
}


.fruit-story-pineapple
.fruit-story-artwork{
  border:
    1px solid
    rgba(93,20,38,.10);
}



/* =========================================================
   DO NOT DESIGN OUR STORY YET
   Stop Products after Cempedak
   ========================================================= */

.story-transition-outro{
  display:none;
}



/* =========================================================
   LARGE DESKTOP
   Avoid excessive upscaling
   ========================================================= */

@media(min-width:1700px){

  .fruit-story-durian
  .fruit-story-artwork{
    width:1472px;
  }

  .fruit-story-avocado
  .fruit-story-artwork{
    width:1242px;
  }

  .fruit-story-pineapple
  .fruit-story-artwork{
    width:1311px;
  }

  .fruit-story-cempedak
  .fruit-story-artwork{
    width:1495px;
  }
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:960px){

  .story-transition-intro{
    min-height:auto;

    padding:
      76px
      7vw;
  }

  .story-transition-intro::before{
    width:28%;
  }


  .fruit-story{
    min-height:76vh;
  }

  .fruit-story-inner{
    min-height:76vh;
  }


  .fruit-story-header{
    top:8vh !important;
  }


  .fruit-story-durian
  .fruit-story-artwork,

  .fruit-story-cempedak
  .fruit-story-artwork{
    width:90vw;
  }


  .fruit-story-avocado
  .fruit-story-artwork{
    width:81vw;
  }


  .fruit-story-pineapple
  .fruit-story-artwork{
    width:83vw;
  }


  .fruit-story-footer{
    bottom:7vh !important;

    min-width:220px !important;
  }
}



/* =========================================================
   MOBILE
   Layout remains varied but safe
   ========================================================= */

@media(max-width:520px){

  .story-transition-intro{
    padding:
      60px
      20px;

    min-height:auto;
  }

  .story-transition-intro::before{
    width:22%;
  }

  .story-transition-intro::after{
    display:none;
  }

  .story-transition-content{
    width:100%;
  }

  .story-small-title{
    font-size:8px;
  }

  .story-big-title{
    font-size:
      clamp(
        42px,
        13vw,
        60px
      );
  }

  .story-transition-text{
    font-size:13px;
  }


  /* stories become vertical editorial cards */

  .fruit-story{
    min-height:auto;

    padding:
      52px
      14px
      64px;
  }

  .fruit-story-inner{
    min-height:auto;

    display:flex;

    flex-direction:column;
  }


  .fruit-story-header{
    position:relative;

    left:auto !important;
    right:auto !important;
    top:auto !important;

    width:100%;

    margin:
      0
      0
      16px;

    padding:
      0 4px;

    text-align:left !important;

    flex-direction:row !important;
  }


  .fruit-story-heading{
    align-items:flex-start !important;
  }


  .fruit-story-index{
    font-size:28px;
  }


  .fruit-story-artwork{
    position:relative;

    left:auto !important;
    right:auto !important;
    top:auto !important;

    width:100% !important;

    margin:0;

    transform:none !important;

    aspect-ratio:21 / 9;

    box-shadow:
      0 16px 38px
      rgba(0,0,0,.15);
  }


  .fruit-story-footer{
    position:relative;

    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;
    min-width:0 !important;

    margin:
      16px
      0
      0;

    padding:
      0 4px;

    text-align:left !important;

    flex-direction:row !important;

    font-size:7px;

    gap:12px;
  }


  /* preserve alternating tone on mobile */

  .fruit-story-avocado
  .fruit-story-header,

  .fruit-story-cempedak
  .fruit-story-header{
    flex-direction:row-reverse !important;

    text-align:right !important;
  }


  .fruit-story-avocado
  .fruit-story-heading,

  .fruit-story-cempedak
  .fruit-story-heading{
    align-items:flex-end !important;
  }


  .fruit-story-avocado
  .fruit-story-footer,

  .fruit-story-cempedak
  .fruit-story-footer{
    justify-content:flex-end;

    text-align:right !important;
  }
}

/* =========================================================
   PRODUCTS — RESPONSIVE NAV + LANDSCAPE STORY FIX
   2026-08-30
   Desktop design remains untouched.
   ========================================================= */

@media(max-width:960px){

  /* Restore navigation hidden by the older tablet rule. */
  .topbar{
    position:relative !important;
    height:78px !important;
    z-index:1000 !important;
    background:transparent !important;
  }

  .brand-fixed{
    top:8px !important;
    left:10px !important;
    z-index:1010 !important;
  }

  .brand-fixed img{
    width:50px !important;
    height:auto !important;
  }

  .nav{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    top:46px !important;
    left:10px !important;
    right:10px !important;

    width:calc(100% - 20px) !important;
    transform:none !important;

    justify-content:space-between !important;
    align-items:center !important;
    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:1010 !important;
  }

  .nav a{
    display:block !important;
    flex:0 0 auto !important;
    padding:3px 0 !important;

    font-size:6.8px !important;
    line-height:1 !important;
    letter-spacing:.01em !important;

    white-space:nowrap !important;
  }
}


/* ---------- PHONE / TABLET LANDSCAPE ---------- */

@media(max-width:960px) and (orientation:landscape){

  html,
  body{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  /* Keep the navigation inside the artwork area, no empty header block. */
  .topbar{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:64px !important;
    z-index:1000 !important;
    pointer-events:none;
  }

  .brand-fixed,
  .nav,
  .counter{
    pointer-events:auto;
  }

  .brand-fixed{
    top:8px !important;
    left:12px !important;
  }

  .brand-fixed img{
    width:52px !important;
  }

  .nav{
    top:16px !important;
    left:80px !important;
    right:82px !important;
    width:auto !important;

    justify-content:center !important;
    gap:clamp(12px,3vw,28px) !important;
  }

  .nav a{
    font-size:clamp(6.5px,1vw,8px) !important;
  }

  .counter{
    top:18px !important;
    right:14px !important;
    transform:none !important;
  }

  /* Hero occupies the real viewport; header overlays it. */
  .hero{
    min-height:100vh !important;
    min-height:100svh !important;
    padding-top:64px !important;
  }

  .site::after,
  .site::before{
    height:100vh !important;
    height:100svh !important;
  }

  .copy{
    width:44vw !important;
    max-width:420px !important;
    padding:0 18px !important;
  }

  .title{
    font-size:clamp(42px,8vw,72px) !important;
  }

  .kicker{
    margin-bottom:10px !important;
    font-size:7px !important;
  }

  .tagline{
    margin-top:14px !important;
    font-size:7px !important;
  }

  .accent-line{
    margin-top:14px !important;
  }

  .arrow{
    top:52% !important;
  }

  /*
    Product Story:
    the old <=960 tablet rules use absolute artwork/header/footer
    inside a short 76vh section. In landscape that causes overlap.
    Landscape now uses normal document flow, while portrait remains
    exactly as before.
  */
  .story-transition-intro{
    min-height:auto !important;
    padding:58px 7vw !important;
  }

  .fruit-story{
    min-height:auto !important;
    padding:48px 5vw 56px !important;
    display:block !important;
    overflow:hidden !important;
  }

  .fruit-story-inner{
    min-height:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .fruit-story-header{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:0 4px !important;
  }

  .fruit-story-index{
    font-size:28px !important;
  }

  .fruit-story-artwork,
  .fruit-story-durian .fruit-story-artwork,
  .fruit-story-avocado .fruit-story-artwork,
  .fruit-story-pineapple .fruit-story-artwork,
  .fruit-story-cempedak .fruit-story-artwork{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;

    width:min(88vw,900px) !important;
    margin:0 auto !important;

    transform:none !important;
    aspect-ratio:21 / 9 !important;
  }

  .fruit-story-footer,
  .fruit-story-durian .fruit-story-footer,
  .fruit-story-avocado .fruit-story-footer,
  .fruit-story-pineapple .fruit-story-footer,
  .fruit-story-cempedak .fruit-story-footer{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;
    min-width:0 !important;

    margin:14px 0 0 !important;
    padding:0 4px !important;

    flex-direction:row !important;
    justify-content:space-between !important;
    text-align:left !important;

    gap:14px !important;
    font-size:7px !important;
  }

  .fruit-story-avocado .fruit-story-header,
  .fruit-story-cempedak .fruit-story-header{
    flex-direction:row-reverse !important;
    text-align:right !important;
  }

  .fruit-story-avocado .fruit-story-heading,
  .fruit-story-cempedak .fruit-story-heading{
    align-items:flex-end !important;
  }

  .fruit-story-avocado .fruit-story-footer,
  .fruit-story-cempedak .fruit-story-footer{
    text-align:right !important;
  }
}

/* =========================================================
   PRODUCTS — TABLET PORTRAIT HERO IMAGE FIX
   ========================================================= */
@media (min-width:521px)
       and (max-width:960px)
       and (orientation:portrait){

  .site::after{
    height:calc(100svh - 78px) !important;
    top:78px !important;

    background-size:cover !important;
    background-position:62% center !important;
  }

  .site::before{
    height:calc(100svh - 78px) !important;
    top:78px !important;
  }
}