/* Our Story page */
body.page-template-page-our-story { background: var(--cream); }
/* ══ HERO ══ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--warm);
}
.hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 25%;
  display:block;
  opacity:0;
  transition:opacity 1.8s cubic-bezier(.4,0,.2,1);
}
.hero-img.in{opacity:1}
.hero-img-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  background:var(--warm);
}
.hero-img-ph-label{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;color:var(--brown-mid);opacity:.4;text-align:center;line-height:1.7}
.hero-img-ph-path{font-size:10px;letter-spacing:.1em;color:var(--muted2);font-family:monospace;opacity:.5}

/* Bottom-to-top gradient — copy sits over dark zone */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(42,31,20,.82) 0%,
    rgba(42,31,20,.5) 32%,
    rgba(42,31,20,.12) 58%,
    rgba(42,31,20,0) 80%);
}

.hero-content{
  position:relative;z-index:2;
  padding:0 64px 80px;
  max-width:1000px;
  width:100%;
}
.hero-eyebrow{
  font-size:9px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:24px;
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);
  animation:fadeUp .9s .4s cubic-bezier(.4,0,.2,1) forwards;
}
.hero-eyebrow::before{content:"";width:20px;height:1px;background:var(--gold);flex-shrink:0}
.hero-h{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(48px,7vw,96px);line-height:.95;
  letter-spacing:-.03em;color:var(--white);margin-bottom:28px;
  opacity:0;transform:translateY(20px);
  animation:fadeUp 1.1s .55s cubic-bezier(.4,0,.2,1) forwards;
}
.hero-h em{font-style:italic;color:rgba(200,169,110,.85)}
.hero-sub{
  font-size:clamp(14px,1.5vw,17px);line-height:1.9;
  color:rgba(247,242,234,.65);font-weight:300;max-width:560px;
  opacity:0;transform:translateY(14px);
  animation:fadeUp 1s .75s cubic-bezier(.4,0,.2,1) forwards;
}

/* Scroll hint */
.hero-scroll{
  position:absolute;bottom:40px;right:64px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:fadeUp .8s 1.6s ease forwards;
}
.scroll-line{width:1px;height:0;background:rgba(247,242,234,.35);animation:lineGrow 1.2s 1.8s cubic-bezier(.4,0,.2,1) forwards}
.scroll-txt{font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(247,242,234,.4);font-weight:400;white-space:nowrap}


/* ══ SECTION BASE ══ */
.section{padding:120px 0;overflow:hidden}
.section-inner{max-width:1100px;margin:0 auto;padding:0 56px}
.eyebrow{
  font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold);flex-shrink:0}
.section-h{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(36px,4.2vw,60px);line-height:1.04;letter-spacing:-.025em;color:var(--text);
}
.section-h em{font-style:italic;color:var(--brown-mid)}


/* ══ S1 — OPENING STATEMENT ══ */
.s-opening{background:var(--cream);padding:120px 0}
.opening-inner{max-width:1100px;margin:0 auto;padding:0 56px}
.opening-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.opening-pull{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;
  font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.02em;
  color:var(--text);
}
.opening-body{
  font-size:clamp(15px,1.5vw,18px);line-height:1.95;
  color:var(--muted);font-weight:300;padding-bottom:6px;
}
/* Running horizontal rule between sections */
.section-rule{
  width:calc(100% - 112px);max-width:1100px;margin:0 auto;
  height:1px;background:var(--border);
}


/* ══ S2 — WHY PANJARI ══ */
.s-panjari{background:var(--warm);padding:120px 0}
.panjari-inner{max-width:1100px;margin:0 auto;padding:0 56px}
.panjari-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

/* Image block */
.panjari-img-wrap{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--cream);
}
.panjari-img-wrap img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;display:block;
  transform:scale(1.04);
  transition:transform 1.8s cubic-bezier(.4,0,.2,1);
}
.panjari-img-wrap.in img{transform:scale(1)}
.panjari-img-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;pointer-events:none;
}
.panjari-img-wrap img[src]:not([src=""]) ~ .panjari-img-ph{opacity:0}
.img-ph-label{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:13px;color:var(--brown-mid);opacity:.4;text-align:center;line-height:1.6}
.img-ph-path{font-size:10px;letter-spacing:.1em;color:var(--muted2);font-family:monospace;opacity:.45}

/* Panjari copy */
.panjari-copy{}
.panjari-body{
  font-size:clamp(15px,1.5vw,17px);line-height:1.95;color:var(--muted);
  font-weight:300;margin-top:28px;
}
.panjari-body + .panjari-body{margin-top:20px}

/* Ingredient list — quiet, not a product list */
.panjari-ingredients{
  margin-top:40px;padding-top:36px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:0;
}
.pi-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--border);font-size:14px;
  color:var(--muted);font-weight:300;letter-spacing:.01em;
}
.pi-item:first-child{border-top:1px solid var(--border)}
.pi-dash{width:16px;height:1px;background:var(--gold);flex-shrink:0}


/* ══ S3 — WHY WE STARTED ══ */
.s-why{background:var(--cream);padding:0}
.why-inner{max-width:1100px;margin:0 auto;padding:120px 56px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.why-img-wrap{
  position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--warm);
}
.why-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.why-img-wrap.in img{transform:scale(1)}
.why-img-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.why-img-wrap img[src]:not([src=""]) ~ .why-img-ph{opacity:0}

.why-copy{padding-top:8px}
.why-body{font-size:clamp(15px,1.5vw,17px);line-height:1.95;color:var(--muted);font-weight:300;margin-top:24px}
.why-body + .why-body{margin-top:18px}

/* Pull quote within why section */
.why-quote{
  margin-top:36px;padding:24px 28px;
  border-left:2px solid var(--gold);background:var(--warm);
}
.why-quote-text{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;
  font-size:clamp(18px,2vw,24px);line-height:1.5;letter-spacing:-.01em;
  color:var(--brown-mid);
}


/* ══ S4 — OUR KITCHEN (full bleed visual) ══ */
.s-kitchen{background:var(--brown);padding:0;overflow:hidden}

/* Full-width image */
.kitchen-img-full{
  position:relative;width:100%;height:70vh;min-height:480px;max-height:720px;
  overflow:hidden;background:#2a1f14;
}
.kitchen-img-full img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;display:block;
  transform:scale(1.03);
  transition:transform 2s cubic-bezier(.4,0,.2,1);
}
.kitchen-img-full.in img{transform:scale(1)}
.kitchen-img-full-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:#2a1f14;
}
.kitchen-img-full img[src]:not([src=""]) ~ .kitchen-img-full-ph{opacity:0}
.kitchen-img-full-ph .img-ph-label{color:rgba(200,169,110,.4)}
.kitchen-img-full-ph .img-ph-path{color:rgba(200,169,110,.3)}

/* Bottom gradient over image */
.kitchen-img-full::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:45%;
  background:linear-gradient(to top,var(--brown) 0%,transparent 100%);
  pointer-events:none;
}

/* Steps — below the image, on brown bg */
.kitchen-steps{
  max-width:1100px;margin:0 auto;padding:72px 56px 96px;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:rgba(247,242,234,.06);
  border-top:1px solid rgba(247,242,234,.06);
}
.ks-step{padding:36px 28px;background:var(--brown);transition:background .4s}
.ks-step:hover{background:#4d3520}
.ks-num{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:11px;letter-spacing:.16em;color:var(--gold);
  margin-bottom:16px;display:block;
}
.ks-name{
  font-family:"Cormorant Garamond",serif;font-size:clamp(17px,1.6vw,21px);
  font-weight:400;color:var(--white);margin-bottom:10px;letter-spacing:-.01em;
}
.ks-body{font-size:12px;line-height:1.8;color:rgba(247,242,234,.5);font-weight:300}
.ks-rule{width:20px;height:1px;background:var(--gold);opacity:.4;margin-bottom:16px;transition:width .4s,opacity .4s}
.ks-step:hover .ks-rule{width:36px;opacity:.8}


/* ══ S5 — OUR PROMISE ══ */
.s-promise{background:var(--cream);padding:120px 0}
.promise-inner{max-width:1100px;margin:0 auto;padding:0 56px}
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

/* Left — the promise lines */
.promise-lines{list-style:none}
.promise-line{
  padding:22px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:baseline;gap:16px;
}
.promise-line:first-child{border-top:1px solid var(--border)}
.promise-num{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:11px;letter-spacing:.12em;color:var(--gold);flex-shrink:0;
}
.promise-text{
  font-family:"Cormorant Garamond",serif;font-weight:400;
  font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em;
  color:var(--text);line-height:1.2;
}
.promise-sub{font-size:13px;line-height:1.8;color:var(--muted);font-weight:300;margin-top:4px}

/* Right — image */
.promise-img-wrap{
  position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--warm);
}
.promise-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.04);transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.promise-img-wrap.in img{transform:scale(1)}
.promise-img-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.promise-img-wrap img[src]:not([src=""]) ~ .promise-img-ph{opacity:0}


/* ══ S6 — PEOPLE NOT MACHINES (photo essay) ══ */
.s-people{background:var(--warm);padding:120px 0}
.people-inner{max-width:1100px;margin:0 auto;padding:0 56px}

/* Masonry-style photo grid */
.photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  margin-top:64px;
}
.photo-cell{
  position:relative;overflow:hidden;background:var(--cream);
}
/* First cell spans 2 rows — hero shot */
.photo-cell:first-child{grid-row:span 2;aspect-ratio:unset}
.photo-cell:not(:first-child){aspect-ratio:4/3}

.photo-cell img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.4,0,.2,1);
}
.photo-cell:hover img{transform:scale(1.04)}

.photo-cell-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;pointer-events:none;
}
.photo-cell img[src]:not([src=""]) ~ .photo-cell-ph{opacity:0}
.photo-cell-ph-label{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:12px;color:var(--brown-mid);opacity:.4;text-align:center;line-height:1.6;padding:0 12px}
.photo-cell-ph-path{font-size:9px;letter-spacing:.08em;color:var(--muted2);font-family:monospace;opacity:.4;padding:0 8px;text-align:center}

/* Caption strip below grid */
.photo-caption{
  padding-top:28px;display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.photo-caption-text{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;
  font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;color:var(--brown-mid);
  max-width:480px;line-height:1.35;
}
.photo-caption-note{font-size:12px;color:var(--muted2);font-weight:300;letter-spacing:.02em;max-width:240px;line-height:1.7;text-align:right}


/* ══ S7 — FINAL CTA ══ */
.s-cta{
  background:var(--brown);padding:120px 0;text-align:center;
}
.cta-inner{max-width:680px;margin:0 auto;padding:0 56px}
.cta-ornament{
  font-family:"Cormorant Garamond",serif;font-size:44px;font-weight:300;
  color:rgba(200,169,110,.2);margin-bottom:20px;letter-spacing:.1em;line-height:1;
}
.cta-eyebrow{
  font-size:9px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.cta-eyebrow::before,.cta-eyebrow::after{content:"";width:24px;height:1px;background:var(--gold);opacity:.5}
.cta-h{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;
  font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.025em;
  color:var(--white);margin-bottom:24px;
}
.cta-sub{
  font-size:15px;line-height:1.9;color:rgba(247,242,234,.55);
  font-weight:300;max-width:440px;margin:0 auto 48px;
}
.cta-btn{
  display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brown);background:var(--gold);
  padding:17px 52px;text-decoration:none;font-weight:500;
  border:1.5px solid var(--gold);
  transition:background .35s cubic-bezier(.4,0,.2,1),color .35s,transform .25s,box-shadow .35s;
  margin-bottom:20px;
}
.cta-btn:hover{
  background:transparent;color:var(--gold);
  transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.cta-btn:active{transform:none;box-shadow:none}
.cta-trust{
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:4px;
}
.cta-trust-item{font-size:10px;letter-spacing:.12em;color:rgba(247,242,234,.35);font-weight:300}
.cta-trust-sep{margin:0 12px;color:var(--gold);opacity:.3;font-size:8px}



/* ══ KEYFRAMES ══ */
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes lineGrow{to{height:48px}}


/* ══ RESPONSIVE ══ */
@media(max-width:767px){
  .hero-content{padding:0 24px 60px}
  .hero-scroll{display:none}
  .opening-inner,.panjari-inner,.why-inner,.promise-inner,.people-inner,.cta-inner{padding-left:24px;padding-right:24px}
  .opening-grid,.panjari-grid,.why-grid,.promise-grid{grid-template-columns:1fr;gap:40px}
  .kitchen-steps{grid-template-columns:1fr 1fr;padding:52px 24px 72px}
  .photo-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .photo-cell:first-child{grid-row:span 1;aspect-ratio:4/3}
  .photo-caption{flex-direction:column;gap:16px}
  .photo-caption-note{text-align:left;max-width:100%}
  .section-rule{width:calc(100% - 48px)}
}
@media(min-width:768px) and (max-width:1100px){
  .opening-inner,.panjari-inner,.why-inner,.promise-inner,.people-inner,.cta-inner{padding-left:40px;padding-right:40px}
  .kitchen-steps{grid-template-columns:repeat(3,1fr);padding:64px 40px 80px}
  .hero-content{padding:0 48px 72px}
  .section-rule{width:calc(100% - 80px)}
}

/* Keep the shared site header above the story hero. */
.page-template-page-our-story .nav { z-index: 250; }