/* ═══════════════════════════════════════
   STORY PAGE — story.css
═══════════════════════════════════════ */

/* ── FOUNDER SECTION ── */
.founder-section {
  padding: 100px 80px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.founder-img-wrapper {
  position:static;
}
.founder-img-wrapper img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}
.founder-img-wrapper::before {
  content: '';
  position: absolute;
  top: 20 px; left: 20px; right: -20px; bottom: -20px;
  border: 1px solid rgba(199, 154, 59, 0.28);
  z-index: -1;
}
.founder-img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(11,11,11,0.4) 100%);
}
.founder-img-label {
  position: absolute;
  bottom: 24px; left: 64px;
  background: var(--gld);
  padding: 14px 28px;
  z-index: 2;
}
.founder-img-label span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--blk);
  line-height: 1.2;
}
.founder-img-label small {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(11,11,11,0.65);
}
.founder-text { padding-top: 20px; }
.founder-text p {
  font-size: 15px;
  line-height: 1.92;
  color: rgba(247,245,242,0.6);
  font-weight: 300;
  margin-bottom: 22px;
}
.founder-signature {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.founder-signature img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(199,154,59,0.4);
}
.founder-sig-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}
.founder-sig-title {
  font-size: 11px;
  color: rgba(247,245,242,0.38);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ── QUOTE STRIP ── */
.story-quote-strip {
  background: #0d0d0d;
  border-top: 1px solid rgba(199,154,59,0.12);
  border-bottom: 1px solid rgba(199,154,59,0.12);
  padding: 64px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.story-quote-strip::before {
  content: '"';
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 220px;
  color: rgba(199,154,59,0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.story-quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  color: rgba(247,245,242,0.82);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 20px;
  position: relative;
}
.story-quote-attr {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gld);
  text-transform: uppercase;
}

/* ── HERITAGE SECTION ── */
.heritage-section {
  padding: 100px 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.heritage-text p {
  font-size: 15px;
  line-height: 1.92;
  color: rgba(247,245,242,0.58);
  font-weight: 300;
  margin-bottom: 22px;
}
.heritage-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(199,154,59,0.1);
  margin-top: 40px;
}
.heritage-highlight {
  background: var(--blk);
  padding: 28px 24px;
  transition: background 0.3s;
}
.heritage-highlight:hover { background: #111; }
.heritage-highlight-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--gld);
  line-height: 1;
  margin-bottom: 6px;
}
.heritage-highlight-label {
  font-size: 11px;
  color: rgba(247,245,242,0.42);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.heritage-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px 200px;
  gap: 10px;
}
.heritage-img-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.heritage-img-grid div { overflow: hidden; }
.heritage-img-grid div:hover img { transform: scale(1.06); }
.heritage-img-grid .span2 { grid-column: span 3; }

/* ── VALUES SECTION ── */
.values-section {
  padding: 80px 80px 100px;
  background: #0a0a0a;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(199,154,59,0.1);
  margin-top: 60px;
}
.value-card {
  background: #0a0a0a;
  padding: 52px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.value-card:hover { background: #111; }
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gld), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.value-card:hover::before { opacity: 1; }
.value-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 300;
  color: rgba(199,154,59,0.12);
  line-height: 1;
  position: absolute;
  top: 20px; right: 28px;
}
.value-icon {
  width: 52px; height: 52px;
  border: 1px solid rgba(199,154,59,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 24px;
}
.value-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 14px;
}
.value-desc {
  font-size: 13px;
  color: rgba(247,245,242,0.45);
  line-height: 1.85;
}

/* ── TIMELINE ── */
.timeline-section {
  padding: 80px 80px 100px;
}
.timeline-line-center{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;

  width:2px; /* was 1px */

  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(199,154,59,.15) 10%,
    rgba(199,154,59,.35) 25%,
    rgba(199,154,59,.35) 75%,
    rgba(199,154,59,.15) 90%,
    transparent 100%
  );

  transform:translateX(-50%);
  z-index:0;
}
.timeline-wrapper {
  position: relative;
  max-width: 900px;
  margin: 60px auto 0;
}
.tl-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  margin-bottom: 0;
  position: relative;
}
.tl-left {
  text-align: right;
  padding: 36px 48px 36px 0;
  border-bottom: 1px solid rgba(199,154,59,0.08);
}
.tl-right {
  padding: 36px 0 36px 48px;
  border-bottom: 1px solid rgba(199,154,59,0.08);
}
.tl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid rgba(199,154,59,0.08);
}
.tl-dot {
  width: 14px; height: 14px;
  background: var(--gld);
  border-radius: 50%;
  border: 3px solid var(--blk);
  box-shadow: 0 0 0 1px var(--gld);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tl-connector {
  width: 1px; flex: 1;
  background: rgba(199,154,59,0.25);
  min-height: 40px;
}
.tl-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gld);
  line-height: 1;
  margin-bottom: 8px;
}
.tl-event-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 6px;
}
.tl-event-desc {
  font-size: 13px;
  color: rgba(247,245,242,0.45);
  line-height: 1.7;
}





/* Final centered timeline item */

.tl-future{
  display:block;
  position:relative;
  text-align:center;
  margin-top:20px;
}

.tl-future .tl-center{
  border-bottom:none;
  padding-bottom:0;
}
.tl-center{
  position:relative;
  z-index:1;
}
.tl-future-content{
  max-width:420px;
  margin:24px auto 0;
}

.tl-future-content .tl-year{
  margin-bottom:12px;
}

/* Optional glowing future dot */

.tl-future-dot{
  position:relative;
}

.tl-future-dot::after{
  content:'';
  position:absolute;
  inset:-8px;
  border:1px solid rgba(199,154,59,.4);
  border-radius:50%;
  animation: futurePulse 2.5s infinite;
}

@keyframes futurePulse{
  from{
    transform:scale(.8);
    opacity:1;
  }
  to{
    transform:scale(1.8);
    opacity:0;
  }
}
/* ── INGREDIENTS SECTION ── */
.ingredients-section {
  padding: 100px 80px;
  background: var(--blk);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ingredients-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  animation: slowZoom 12s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(1.05);
  }
}
.ingredients-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 12s ease;
}
.ingredients-img:hover img { transform: scale(1.05); }
.ingredient-tags {
  position: absolute;
  bottom: 28px; left: 28px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ingredient-tag {
  background: rgba(11,11,11,0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(199,154,59,0.3);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--gld);
  letter-spacing: 1px;
}
.ingredients-text p {
  font-size: 15px;
  line-height: 1.92;
  color: rgba(247,245,242,0.58);
  font-weight: 300;
  margin-bottom: 22px;
}
.sourcing-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 36px;
}
.sourcing-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(199,154,59,0.12);
  transition: border-color 0.3s;
}
.sourcing-item:hover { border-color: rgba(199,154,59,0.35); }
.sourcing-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sourcing-item-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gld);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sourcing-item-val {
  font-size: 13px;
  color: rgba(247,245,242,0.5);
  line-height: 1.65;
}

/* ── CTA STRIP ── */
.story-cta {
  padding: 80px;
  background: #0a0a0a;
  text-align: center;
  border-top: 1px solid rgba(199,154,59,0.12);
}
.story-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.2;
}
.story-cta p {
  font-size: 15px;
  color: rgba(247,245,242,0.5);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.8;
  font-weight: 300;
}
.story-cta-btns{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:32px;
}

.story-cta-btns a{
  width:220px;
  height:54px;

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

  text-align:center;
  white-space:nowrap;

  box-sizing:border-box;
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .founder-section,
  .heritage-section,
  .ingredients-section { grid-template-columns: 1fr; gap: 52px; }
  .founder-img-wrapper img { height: 400px; }
  .heritage-img-grid { grid-template-rows: 220px 160px; }
  /* .tl-item { grid-template-columns: 1fr; }
  .tl-left { text-align: left; padding: 20px 0 0; border-bottom: none; }
  .tl-right { padding: 0 0 24px; border-bottom: 1px solid rgba(199,154,59,0.08); }
  .tl-center { display: none; } */
  .values-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .founder-section,
  .heritage-section,
  .ingredients-section,
  .values-section,
  .timeline-section,
  .story-quote-strip,
  .story-cta { padding: 40px 20px; }

  .values-grid { grid-template-columns: 1fr; }

  .heritage-highlights { grid-template-columns: 1fr 1fr; }

  .heritage-img-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 160px 160px;
  }

  .heritage-img-grid .span2 {
    grid-column: span 1;
  }

  .ingredients-section {
    padding: 60px 24px;
  }

  .page-hero{
      min-height: 340px !important;
  }

  .page-title{
      font-size: clamp(38px, 10vw, 52px);
      margin-bottom: 12px;
  }

  .page-subtitle{
      font-size: 14px;
      line-height: 1.6;
      max-width: 320px;
      margin: 0 auto;
  }

  /* ADD THE TIMELINE CODE HERE */
  /* .tl-left,
.tl-right{
    padding: 24px 0;
}

.tl-year{
    font-size: 24px;
    margin-bottom: 8px;
}

.tl-event-title{
    font-size: 18px;
    margin-bottom: 10px;
}

.tl-event-desc{
    font-size: 14px;
    line-height: 1.8;
} */



/*Timeline*/

/*.tl-item{*/
/*  display:block;*/
/*  padding-left:36px;*/
/*  margin-bottom:32px;*/
/*  position:relative;*/
/*}*/


/*.timeline-line-center{*/
/*  display:none;*/
/*}*/


/*.tl-left,*/
/*.tl-right{*/
/*  width:100%;*/
/*  text-align:left;*/
/*  padding:0;*/
/*  border:none;*/
/*}*/

/*.tl-left:empty,*/
/*.tl-right:empty{*/
/*  display:none;*/
/*}*/

/*.tl-item::before{*/
/*  content:'';*/
/*  position:absolute;*/
/*  left:10px;*/
/*  top:0;*/
/*  bottom:-32px;*/
/*  width:1px;*/
/*  background:rgba(199,154,59,.25);*/
/*}*/

/*.tl-item::after{*/
/*  content:'';*/
/*  position:absolute;*/
/*  left:4px;*/
/*  top:8px;*/
/*  width:14px;*/
/*  height:14px;*/
/*  border-radius:50%;*/
/*  background:var(--gld);*/
/*}*/

/*.tl-center{*/
/*  display:none;*/
/*}*/







/* .values-grid{
   display:flex;
    gap:16px;

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

    scroll-snap-type:x mandatory;
    padding:8px;
    padding-bottom:12px;

    background:rgba(199,154,59,.08);
}

.values-grid::-webkit-scrollbar{
  display:none;
}

.value-card{
  min-width:calc(100vw - 64px);
  flex:0 0 calc(100vw - 64px);

  scroll-snap-align:center;

  padding:32px 24px;

  border:1px solid rgba(199,154,59,.12);
  background:#0f0f0f;
}

.value-number{
  font-size:42px;
  top:18px;
  right:20px;
}

.value-title{
  font-size:24px;
}

.value-desc{
  font-size:14px;
  line-height:1.8;
} */
/* .values-grid,
.value-card{
    border:none !important;
} */

.values-section{
  padding:40px 20px;
}

.values-grid{
  display:flex;
  gap:16px;

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

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  padding:8px;
  padding-bottom:12px;

 background:none !important;

  border:none !important;
}

.values-grid::-webkit-scrollbar{
  display:none;
}

.value-card{
  min-width:calc(100vw - 80px);
  flex:0 0 calc(100vw - 80px);

  scroll-snap-align:center;

  padding:32px 24px;

  background:#0f0f0f;
  border:1px solid rgba(199,154,59,.15);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}
/* personal */
/* .cat{
  min-width:calc(100vw - 80px);
  flex:0 0 calc(100vw - 80px);

  scroll-snap-align:center;

  
  background:rgba(199,154,59,.08);
} */
.value-number{
  font-size:42px;
  top:18px;
  right:20px;
}

.value-icon{
  width:52px;
  height:52px;
  margin-bottom:20px;
}

.value-title{
  font-size:24px;
  line-height:1.2;
  margin-bottom:14px;
}

.value-desc{
  font-size:14px;
  line-height:1.8;
}

/* desktop hover still works */

.value-card:hover{
  background:#111;
}

.value-card:hover::before{
  opacity:1;
}

/* mobile touch effect */

/* .value-card.touch-active{
  background:#111;
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(199,154,59,.15);
}

.value-card.touch-active::before{
  opacity:1;
} */

.value-card.touch-active{
  background:#111;
  box-shadow:0 12px 30px rgba(199,154,59,.15);
}

.value-card.touch-active::before{
  opacity:1;
}

.values-slider{
  position:relative;
}
/* dots */
.values-dots,.ingredient-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;

  margin-top:20px;
}

.value-dot,.ingredient-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:rgba(199,154,59,.25);

  transition:all .3s ease;
}

.value-dot.active,.ingredient-dot.active{
  width:24px;
  border-radius:999px;
  background:var(--gld);
}
















.founder-img-wrapper{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
}

.founder-img-wrapper img{
    display:block !important;
    width:100% !important;
    height:320px !important;
    object-fit:cover !important;
}

.founder-img-label{
    display:none !important;
}

.founder-img-wrapper::before,
.founder-img-wrapper::after{
    display:none !important;
}













/* founder */
/*.founder-img-wrapper{*/
/*  position:relative;*/
/*  overflow:hidden;*/

/*  border-radius:24px;*/

/*  margin-bottom:24px;*/

/*  box-shadow:*/
/*    0 20px 50px rgba(0,0,0,.35);*/
/*} */

/*.founder-img-wrapper img{*/
/*  height:320px;*/
/*  width:100%;*/
/*  object-fit:cover;*/
/*} */
/*.founder-img-label{*/
/*  position:static;*/

/*  display:block;*/

/*  width:100%;*/

/*  margin-top:0;*/

/*  padding:8px 18px;*/

/*  border-left:3px solid var(--gld);*/

/*  background:#11111100;*/

/*  border-radius:0 0 16px 16px;*/
/*}*/

.founder-img-label span{
  font-size:22px;
}

.founder-img-label small{
  display:block;
  margin-top:2px;
}


.founder-text{
      position:relative;
      padding-left:20px;
  }
  
.founder-text::before{
      content:'';
  
      position:absolute;
  
      left:0;
      top:8px;
  
      width:2px;
      height:80px;
  
      background:var(--gld);
  }
  
  .story-highlight{
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    line-height:1.2;
    color:var(--gld);

    margin:0 0 24px;

    max-width:260px;
  }
  /* moin image invisible on mobile */
  .founder-img-wrapper,.founder-img-label{
    /*display:none;*/
}

/* founder image and signature */


  .founder-signature{
      margin:0 0 32px;

      display:flex;
      flex-direction:column;

      text-align:center;

      padding:24px;

      border-radius:24px;

      background:#0f0f0f;

      border:1px solid rgba(199,154,59,.15);
  }

  .founder-signature img{
      width:120px;
      height:120px;

      border-radius:50%;

      margin:0 auto 16px;

      border:2px solid var(--gld);
  }

  .founder-sig-name{
      font-size:26px;
      margin-bottom:6px;
  }

  .founder-sig-title{
      color:var(--gld);
      letter-spacing:2px;
  }
  


  .founder-mobile-card{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;

      padding:24px;

      border-radius:24px;

      background:#0f0f0f;

      border:1px solid rgba(199,154,59,.15);

      margin-bottom:32px;
  }

  .founder-mobile-card img{
      width:250px;
      height:250px;
      object-position: top;
      object-fit:cover;
      border-radius:50%;
      border:2px solid var(--gld);
      margin-bottom:16px;
  }

/* Ingredients */


/* .ingredients-img{
  overflow: hidden;
  border-radius: 24px;
}

.ingredients-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
} */
/* INGREDIENTS SLIDER */

.sourcing-list{
  display:flex;
  gap:16px ;

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

  scroll-snap-type:x mandatory ;
  -webkit-overflow-scrolling:touch ;
  flex-direction:row ;
  padding:8px 0 12px ;
}

.sourcing-list::-webkit-scrollbar{
  display:none ;
}

.sourcing-item{
  min-width:100% ;
  flex:0 0 100% ;

  scroll-snap-align:center ;

  padding:24px ;

  background:#0f0f0f ;
  border:1px solid rgba(199,154,59,.15) ;
  border-radius:18px ;

  transition:border-color .3s ease ;
}

.sourcing-item-icon{
  font-size:22px;
  margin-bottom:16px;
}

.sourcing-item-label{
  margin-bottom:10px;
}

.sourcing-item-val{
  font-size:14px;
  line-height:1.8;
}
.sourcing-item:active{
  transform:scale(.98);
  border-color:rgba(199,154,59,.4);
}
.ingredients-text,
.ingredients-mobile-wrap{
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.ingredients-section > *{
  min-width:0;
}
.story-cta-btns{
  flex-direction:column;
  gap:12px;
}

.story-cta-btns a{
  width:100%;
  max-width:320px;
  height:52px;
}
.heritage-img-grid{
  display:grid;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 90px 70px;

  gap:8px;
}

.heritage-img-grid .span2{
  grid-column: 1 / -1;
}

.heritage-img-grid img{
  width:100%;
  height:100%;
  object-fit:var();
}

#founder{
  display: none;
}
}




@media (min-width:769px){
  .values-dots{
      display:none;
  }
  .story-highlight{
    display:none;
}
.founder-mobile-card{
  display:none;
}

#founder {
  /* Center content horizontally and vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* Optional: Limit the container width */
  max-width: 300px; 
  margin: 0 auto;
}

#founder img {
  /* Reduce image size */
  width: 250px;  /* Adjust as needed */
  height: 250px; /* Adjust as needed */
  object-position: top;
  object-fit: cover; /* Ensures image doesn't stretch/distort */
  border-radius: 50%; /* Optional: Makes image circular */
  margin-bottom: 10px; /* Space between image and text */
}

}