.reference-title{
  position:relative;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .06)),
    url('./assets/our-charcoal-hero.png') center 55% / cover;
}

.reference-title::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(to bottom,rgba(1,56,51,0),var(--forest));
  pointer-events:none;
}

.reference-title h1{position:relative;z-index:1}

.reference-title{place-items:center}

.briquette-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:840px;
  background:var(--forest);
  color:#fff;
}

.briquette-stage__copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px clamp(35px,7vw,130px);
  text-align:center;
}

.briquette-stage__copy h2{
  margin:0 0 54px;
  padding:13px 36px;
  border-radius:999px;
  background:var(--leaf);
  font-size:clamp(20px,2vw,31px);
  font-style:italic;
}

.briquette-stage__copy p{
  max-width:700px;
  margin:0;
  font-size:clamp(22px,2.5vw,39px);
  line-height:1.07;
  letter-spacing:-.045em;
}

.briquette-stage__copy::after{display:none}

.briquette-stage__image{min-height:580px;background:url('./assets/reference-charcoal/briquette-in-hand.png') center/cover no-repeat}

.process-reference{grid-auto-rows:minmax(54vw,780px)}
.process-reference .process-copy,.process-reference .process-image{min-height:0;max-height:none;height:100%}

.process-reference{position:relative;isolation:isolate}
.process-arrow{position:absolute;z-index:3;display:block;height:auto;pointer-events:none;opacity:0;transition:clip-path 1.15s cubic-bezier(.22,.72,.18,1),opacity .2s ease,transform .8s cubic-bezier(.22,.72,.18,1);transition-delay:var(--arrow-delay,0ms);will-change:clip-path,opacity,transform}
.process-arrow--first{top:34%;left:17%;width:65%;clip-path:inset(0 100% 0 0);transform:translateX(-18px)}
.process-arrow--second{top:47%;left:17%;width:43%;clip-path:inset(0 0 100% 0);transform:translateY(-18px)}
.process-arrow.is-visible{opacity:1;clip-path:inset(0 0 0 0);transform:translate(0,0)}

/* Keep every process label at the same, tighter distance from its description. */
.process-reference .process-copy .inside{
  gap:18px;
}

/* The second copy panel had an older, more specific gap rule. */
.process-reference .process-copy:nth-of-type(4) .inside{
  gap:18px;
}

.briquette-stage__copy h2{
  margin:0 0 18px;
}

.briquette-stage__diagram{
 display:block;
 width:min(440px,39vw);
 height:auto;
 margin-top:18px;
}

/* Slight overlap prevents sub-pixel rendering from exposing a white seam between photo sections. */
.grilling-cta{position:relative;z-index:1;margin-top:-3px;min-height:82vh;display:flex;align-items:center;padding:clamp(90px,12vw,170px) clamp(28px,8vw,150px);color:#fff;background:linear-gradient(90deg,rgba(1,56,51,.9),rgba(1,56,51,.18)),url('./assets/grilling-photo.jpg') center 42%/cover no-repeat}
.grilling-cta__copy{max-width:1480px}.grilling-cta h2{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(38px,4.15vw,68px);font-weight:400;line-height:1.08;letter-spacing:-.045em}.grilling-cta h2 strong{color:var(--sage);font-weight:800}.grilling-cta a{display:inline-block;margin-top:36px;padding:15px 24px;border-radius:999px;color:#fff;background:var(--leaf);text-decoration:none;font-weight:700}

@media(max-width:760px){.process-reference{grid-auto-rows:auto}.process-arrow{display:none}.briquette-stage{grid-template-columns:1fr}.briquette-stage__copy{padding:80px 28px}.briquette-stage__diagram{width:280px}.briquette-stage__image{min-height:105vw}.charcoal-benefit-grid{grid-template-columns:repeat(2,1fr);row-gap:42px}.charcoal-benefit-grid img{height:94px}.charcoal-benefits h3{margin:70px 0 45px}}

.coconut-image{
  background-image:
    linear-gradient(180deg, var(--forest) 0%, rgba(1, 56, 51, .96) 16%, rgba(1, 56, 51, 0) 36%),
    url('./assets/reference-charcoal/coconuts.jpg');
}