/* ================= HERO ================= */
.hero{
  position:relative; height:100svh; min-height:640px; overflow:hidden;
  background:var(--charcoal);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:78% 40%; will-change:transform; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,18,15,.92) 0%, rgba(20,18,15,.55) 42%, rgba(20,18,15,.12) 68%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  max-width:800px; padding:0 6vw;
}
.hero-content .eyebrow{ margin-bottom:1.4rem; }
.hero-content h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  color:var(--ivory);
  margin-bottom:1.6rem;
}
.hero-content p{
  max-width:560px; font-size:1.05rem; color:var(--grey-light);
  margin-bottom:2.4rem;
}
.hero-ctas{ display:flex; gap:1rem; flex-wrap:nowrap; }

/* ================= INTRODUCTION ================= */
.intro{ padding:9rem 0; background:var(--ivory); overflow:hidden; }
.intro .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; }
.intro-text .eyebrow{ margin-bottom:1.2rem; }
.intro-text h2{ font-size:clamp(2rem,3.6vw,3rem); margin-bottom:1.6rem; max-width:9.5em; }
.intro-text p{ font-size:1.05rem; max-width:34em; margin-bottom:1rem; }
.intro-media{ position:relative; aspect-ratio:4/3.4; overflow:hidden; }
.intro-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.2s var(--ease); }
.intro-media.in img{ transform:scale(1); }
.intro-media::before{
  content:''; position:absolute; inset:0; background:var(--champagne); z-index:1;
  transform-origin:top; transition:transform 1s var(--ease);
}
.intro-media.in::before{ transform:scaleY(0); }

/* ================= COLLECTIONS (signature section) ================= */
.collections{ position:relative; background:var(--charcoal); }
.collections-head{ padding:6.5rem 6vw 3rem; text-align:center; max-width:900px; margin:0 auto; }
.collections-head .eyebrow{ margin-bottom:1.2rem; }
.collections-head h2{ font-size:clamp(2.1rem,4vw,3.2rem); }

.collections-pin{
  height:420vh; /* scroll distance drives the horizontal travel */
  position:relative;
}
.collections-stage{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.collections-track{
  display:flex; gap:4vw; padding-left:8vw; padding-right:30vw;
  will-change:transform;
}
.collection-card{
  position:relative; flex:0 0 auto;
  width:min(72vw, 560px); aspect-ratio:3/4;
  overflow:hidden;
  opacity:.45; transform:scale(.92);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.collection-card.active{ opacity:1; transform:scale(1); }
.collection-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-soft); }
.collection-card:hover img{ transform:scale(1.06); }
.collection-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,15,.88) 0%, rgba(20,18,15,.12) 46%, rgba(20,18,15,0) 65%);
}
.collection-card .cc-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2rem;
}
.collection-card .cc-index{
  font-family:var(--serif); font-size:.85rem; color:var(--gold); letter-spacing:.1em; margin-bottom:.6rem; display:block;
}
.collection-card h3{
  font-family:var(--serif); color:var(--ivory); font-size:2rem; letter-spacing:.08em; margin-bottom:.5rem;
}
.collection-card p{ color:var(--grey-light); font-size:.92rem; max-width:24em; }

.collections-progress{
  position:absolute; bottom:2.4rem; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  color:var(--grey-light); font-size:.72rem; letter-spacing:.2em;
}
.collections-progress .bar{ width:120px; height:1px; background:rgba(255,255,255,.18); position:relative; }
.collections-progress .bar span{
  position:absolute; left:0; top:0; height:100%; background:var(--gold); width:20%;
  transition:width .2s linear;
}
.collections-cta{ text-align:center; padding:5rem 0 6.5rem; }

/* ================= SUPPLY CHAIN ================= */
.supply{ padding:9rem 0; background:var(--ivory); }
.supply-head{ text-align:center; margin-bottom:5rem; }
.supply-head h2{ font-size:clamp(2.1rem,4vw,3.2rem); max-width:14em; margin:1rem auto 0; }
.supply-note{ text-align:center; max-width:36em; margin:5rem auto 0; font-size:1.05rem; }

/* ================= FOR THE JEWELLERY INDUSTRY ================= */
.industry{ padding:9rem 0; background:var(--charcoal-2); }
.industry .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:5vw; align-items:start; }
.industry-copy .eyebrow{ margin-bottom:1.2rem; }
.industry-copy h2{ font-size:clamp(2rem,3.6vw,3rem); max-width:9em; margin-bottom:1.6rem; }
.industry-copy p{ max-width:32em; font-size:1.05rem; }
.industry-rows{ display:flex; flex-direction:column; }
.industry-row{
  padding:1.6rem 0; border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding-left .4s var(--ease-soft);
}
.industry-row:first-child{ border-top:1px solid rgba(255,255,255,.1); }
.industry-row span{ font-family:var(--serif); font-size:1.5rem; color:var(--ivory); letter-spacing:.04em; }
.industry-row small{ color:var(--grey); font-size:.7rem; letter-spacing:.18em; }
.industry-row:hover{ padding-left:1rem; }
.industry-row:hover span{ color:var(--gold); }

/* ================= FINAL CTA ================= */
.final-cta{ position:relative; height:88svh; min-height:560px; overflow:hidden; background:var(--charcoal); }
.final-media{ position:absolute; inset:0; }
.final-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.final-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.35), rgba(20,18,15,.82)); }
.final-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 6vw;
}
.final-content h2{ color:var(--ivory); font-size:clamp(2.2rem,5vw,3.8rem); max-width:14em; margin-bottom:1.2rem; }
.final-content p{ color:var(--grey-light); max-width:32em; margin-bottom:2.2rem; }
.final-ctas{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

@media (max-width:900px){
  .intro{ padding:5.5rem 0; }
  .intro .wrap{ grid-template-columns:1fr; gap:2.2rem; }
  .intro-media{ order:-1; aspect-ratio:4/3; }

  .collections-pin{ height:auto; }
  .collections-stage{ position:relative; height:auto; padding:0 0 3rem; }
  .collections-track{
    padding-left:6vw; padding-right:6vw; gap:4vw;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .collections-track::-webkit-scrollbar{ display:none; }
  .collection-card{ width:80vw; scroll-snap-align:center; opacity:1; transform:none; }
  .collections-progress{ position:relative; bottom:auto; margin-top:1.4rem; }

  .industry{ padding:5.5rem 0; }
  .industry .wrap{ grid-template-columns:1fr; gap:3rem; }

  .hero-content{ max-width:none; }
  .hero-ctas{ flex-wrap:wrap; }
  .final-content h2{ max-width:none; }
}