/* Sections: Hero 1a, About 2a, Rift hills, band placeholders, footer. */

/* ---------- Bands ---------- */
.band {
  position: relative;
  padding-block: var(--band-pad);
}
.band--dark { background: var(--maroon); color: var(--bone); }
.band--light { background: var(--bone); color: var(--ink); }
.band--light2 { background: var(--bone-2); color: var(--ink); }
.band--charcoal { background: var(--charcoal); color: var(--bone); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}
.section-head h2 {
  font: 600 clamp(34px, 5vw, 54px)/1.06 var(--font-serif);
  color: var(--maroon);
}
.section-head h2 em { color: var(--oxblood); }
.on-dark .section-head h2 { color: var(--bone); }
.on-dark .section-head h2 em { color: var(--gold); }
.section-head__intro {
  font-size: 18px;
  line-height: 1.65;
  max-width: 640px;
}
.on-dark .section-head__intro { color: var(--bone-86); }

/* ---------- Rift hills divider ---------- */
.rift {
  display: block;
  width: 100%;
  height: 110px;
  pointer-events: none;
}

/* ---------- Hero 1a ---------- */
.hero {
  position: relative;
  min-height: 760px;
  margin-top: calc(-1 * var(--nav-h)); /* sits behind the translucent nav */
  background: var(--charcoal);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(26, 20, 19, .92) 0%, rgba(63, 13, 16, .72) 42%, rgba(63, 13, 16, .1) 75%);
}
.hero__inner {
  position: relative;
  max-width: 1320px;
  min-height: 760px;
  margin-inline: auto;
  padding: 190px 56px 80px 72px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
}
.hero h1 {
  font: 600 84px/1.02 var(--font-serif);
  color: var(--bone);
  letter-spacing: -.015em;
}
.hero h1 em { color: var(--gold); font-weight: 500; }
.hero__lead {
  max-width: 520px;
  font: 400 19px/1.6 var(--font-sans);
  color: var(--bone-86);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.hero__chips {
  position: absolute;
  right: 56px;
  bottom: 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hero .rift {
  position: absolute;
  left: 0; right: 0; bottom: 0;
}

/* ---------- About 2a ---------- */
.about {
  padding-top: var(--band-pad);
  background: var(--bone);
}
.about__top {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about h2 {
  font: 600 54px/1.06 var(--font-serif);
  text-wrap: pretty;
  color: var(--maroon);
}
.about h2 em { color: var(--oxblood); font-weight: 500; }
.about__intro {
  max-width: 640px;
  font: 400 18px/1.65 var(--font-sans);
  color: var(--ink);
}
.about__crest { width: 100%; height: auto; }

.promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border-top: 2px solid var(--maroon);
}
.promise {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 8px 0;
}
.wine-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border: 2.5px solid var(--oxblood);
  border-radius: var(--ring-radius);
  transform: rotate(-12deg);
  box-shadow: var(--shadow-ring);
  color: var(--oxblood);
  font: 700 16px/1 var(--font-serif);
}
.promise h3 {
  font: 600 22px/1.2 var(--font-serif);
  color: var(--maroon);
}
.promise p {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--muted);
}

.photo-strip {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 6px;
  height: 220px;
  margin-top: 56px;
}
.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}