/* ================= ABOUT HERO ================= */
.about-hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--charcoal); }
.about-hero-media{ position:absolute; inset:0; }
.about-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:60% 35%; }
.about-hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.35) 0%, rgba(20,18,15,.78) 82%); }
.about-hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:0 6vw; max-width:760px; margin:0 auto;
}
.about-hero-content .eyebrow{ margin-bottom:1.4rem; }
.about-hero-content h1{ color:var(--ivory); font-size:clamp(2.6rem,6vw,4.4rem); margin-bottom:1.4rem; }
.about-hero-content p{ color:var(--grey-light); max-width:34em; font-size:1.05rem; }

/* ================= WHO WE ARE (asymmetric split) ================= */
.who{ position:relative; padding:9rem 0; background:var(--ivory); overflow:hidden; }
.who .wrap{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:4vw; align-items:center; }
.who-heading h2{ font-size:clamp(2rem,3.8vw,3.1rem); }
.who-media{ position:relative; aspect-ratio:4/3.4; overflow:hidden; margin-left:-6vw; }
.who-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 1.2s var(--ease); }
.who-media.in img{ transform:scale(1); }
.who-media::before{ content:''; position:absolute; inset:0; background:var(--champagne); z-index:1; transform-origin:top; transition:transform 1s var(--ease); }
.who-media.in::before{ transform:scaleY(0); }
.who-copy p{ font-size:1.05rem; max-width:30em; }

/* ================= OUR APPROACH (statement) ================= */
.approach{ position:relative; padding:11rem 0; background:var(--charcoal); overflow:hidden; text-align:center; }
.approach-words{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
}
.approach-words span{
  position:absolute;
  font-family:var(--serif); font-size:clamp(1.8rem,4.2vw,3.4rem); color:rgba(255,255,255,.06);
  letter-spacing:.05em; transition:color 1.2s var(--ease), opacity 1.2s var(--ease); opacity:0;
}
.approach-words.in span{ opacity:1; }
.approach-words span.structure{ color:var(--gold); opacity:.2; }
.approach-words.in span.structure{ opacity:.85; }
.approach-words span.w-size{ top:8%; left:5%; }
.approach-words span.w-colour{ top:8%; right:5%; }
.approach-words span.w-grade{ bottom:8%; left:5%; }
.approach-words span.w-structure{ bottom:8%; right:5%; }
.approach-inner{
  position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 6vw;
  display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; text-align:left;
}
.approach-text .eyebrow{ color:var(--gold); margin-bottom:1.4rem; justify-content:flex-start; display:flex; }
.approach-inner h2{ color:var(--ivory); font-size:clamp(2.2rem,5.2vw,4rem); margin-bottom:1.6rem; }
.approach-inner p{ color:var(--grey-light); font-size:1.1rem; }
.approach-media{ aspect-ratio:4/4.6; overflow:hidden; }
.approach-media img{ width:100%; height:100%; object-fit:cover; }

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

/* ================= COLLECTION SYSTEM ================= */
.collection-system{ padding:9rem 0; background:var(--charcoal-2); }
.cs-head{ text-align:center; margin-bottom:4rem; }
.cs-head h2{ color:var(--ivory); font-size:clamp(2.1rem,4vw,3.2rem); }
.cs-row{
  display:flex; gap:1.6vw; overflow-x:auto; padding:0 6vw 1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cs-row::-webkit-scrollbar{ display:none; }
.cs-panel{
  position:relative; flex:0 0 auto; width:min(46vw,340px); aspect-ratio:3/4;
  overflow:hidden; scroll-snap-align:start; transition:transform .5s var(--ease-soft);
}
.cs-panel img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-soft); }
.cs-panel:hover img{ transform:scale(1.07); }
.cs-panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,18,15,.85), rgba(20,18,15,.05) 55%); }
.cs-panel .cp-info{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem; z-index:1; }
.cs-panel .cp-index{ font-family:var(--serif); color:var(--gold); font-size:.8rem; letter-spacing:.1em; }
.cs-panel h3{ color:var(--ivory); font-size:1.6rem; letter-spacing:.06em; margin:.3rem 0 .2rem; }
.cs-panel p{ color:var(--grey-light); font-size:.85rem; }
.cs-cta{ text-align:center; margin-top:3.5rem; }

/* ================= OUR COMMITMENT ================= */
.commitment{ padding:8rem 0; background:var(--ivory); }
.commitment .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; position:relative; }
.commitment .wrap::before{
  content:''; position:absolute; left:50%; top:10%; bottom:10%; width:1px; background:var(--gold-soft);
  transform:scaleY(0); transform-origin:top; transition:transform 1.1s var(--ease);
}
.commitment .wrap.in::before{ transform:scaleY(1); }
.commitment h2{ font-size:clamp(2rem,3.8vw,3rem); }
.commitment p{ font-size:1.05rem; max-width:28em; }

/* ================= ABOUT CTA ================= */
.about-cta{ position:relative; height:88svh; min-height:560px; overflow:hidden; background:var(--charcoal); }
.about-cta-media{ position:absolute; inset:0; }
.about-cta-media img{ width:100%; height:100%; object-fit:cover; }
.about-cta-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.3), rgba(20,18,15,.82)); }
.about-cta-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;
}
.about-cta-content h2{ color:var(--ivory); font-size:clamp(2.2rem,5vw,3.8rem); max-width:14em; margin-bottom:1.2rem; }
.about-cta-content p{ color:var(--grey-light); max-width:32em; margin-bottom:2.2rem; }
.about-ctas{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

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

  .approach{ padding:6.5rem 0; }
  .approach-words{ display:none; }
  .approach-inner{ grid-template-columns:1fr; gap:2.2rem; text-align:center; }
  .approach-text .eyebrow{ justify-content:center; }
  .approach-media{ aspect-ratio:4/3; }

  .about-supply{ padding:5.5rem 0; }

  .collection-system{ padding:6.5rem 0; }
  .cs-panel{ width:74vw; }

  .commitment{ padding:5.5rem 0; }
  .commitment .wrap{ grid-template-columns:1fr; gap:2rem; }
  .commitment .wrap::before{ display:none; }
}